/* ============================================================
   Chocoline — shared stylesheet
   Consolidated from Chocoline.dc.html, Chocoline Mobile.dc.html,
   Factory.dc.html, Blog.dc.html, Artisan.dc.html
   ============================================================ */

/* ---------- base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; }
*::selection { background: #C9A24B; color: #18100D; }
[hidden] { display: none !important; }

/* per-page canvas colours + link colours */
body.page-home    { background: #FFEAC2; }
body.page-factory { background: #18100D; }
body.page-journal { background: #FFF3D8; }
body.page-artisan { background: #18100D; }
body.page-factory a, body.page-artisan a { color: #E4C878; }
body.page-factory a:hover, body.page-artisan a:hover { color: #C9A24B; }
body.page-journal a { color: #A67C34; }
body.page-journal a:hover { color: #C9A24B; }

#choco-root ::-webkit-scrollbar { width: 10px; }
#choco-root ::-webkit-scrollbar-thumb { background: #483228; border-radius: 10px; }

/* horizontal swipe rails (mobile home) */
[data-rail] { scrollbar-width: none; }
[data-rail]::-webkit-scrollbar { display: none; }

/* form error state (borders swap to warm red) */
.input-err { border-color: #B3423A !important; }
/* sample-box checkbox fill */
.sample-box.on { background: #C9A24B !important; }

/* ---------- responsive: desktop home vs mobile home ---------- */
@media (max-width: 900px) {
  #choco-root { display: none !important; }
  body.page-home { background: #18100D; }
}
@media (min-width: 901px) {
  #m-root { display: none !important; }
}

/* ---------- keyframes (desktop home) ---------- */
@keyframes drop { 0% { transform: translateY(0) scale(1); opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(80px) scale(.5); opacity: 0; } }
@keyframes chocoBulge { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.035); } }
@keyframes dust { 0% { transform: translate3d(0,0,0); } 50% { transform: translate3d(12px,-26px,0); } 100% { transform: translate3d(0,0,0); } }
@keyframes floatA { 0%,100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-22px) rotate(-5deg); } }
@keyframes floatB { 0%,100% { transform: translateY(0) rotate(8deg); } 50% { transform: translateY(26px) rotate(8deg); } }
@keyframes floatC { 0%,100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(-16px) rotate(3deg); } }
@keyframes cloudPulse { 0%,100% { transform: scale(1); opacity:.5; } 50% { transform: scale(1.12); opacity:.75; } }
@keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes chocoWave { 0% { transform: translateX(0); } 100% { transform: translateX(-720px); } }
@keyframes chocoWave2 { 0% { transform: translateX(-720px); } 100% { transform: translateX(0); } }
@keyframes chocoBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes quizIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }

/* ---------- keyframes (mobile home) ---------- */
@keyframes mDrip { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } }
@keyframes mSway { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.05); } }
@keyframes mTicker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes mBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes mDrop { 0% { transform: translateY(0) scale(1); opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(50px) scale(.5); opacity: 0; } }
@keyframes mChocoBulge { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.04); } }
/* sheets are horizontally centred with translateX(-50%) — keyframes must
   keep that X offset or the sheet slides up left-aligned then snaps sideways */
@keyframes mSheet { 0% { transform: translate(-50%, 100%); } 100% { transform: translate(-50%, 0); } }
@keyframes mSheetOut { 0% { transform: translate(-50%, 0); } 100% { transform: translate(-50%, 100%); } }
@keyframes mQuizIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }

/* ---------- desktop home responsive rules ---------- */
@media (max-width: 860px) {
  [data-form-grid] { grid-template-columns: 1fr !important; }
  [data-story-grid] { grid-template-columns: 1fr !important; }
  [data-quiz-result] { grid-template-columns: 1fr !important; text-align: center !important; }
  [data-quiz-result] > div:last-child > div:last-child { justify-content: center !important; }
}
@media (max-width: 1024px) {
  [data-collection], [data-testimonials], [data-b2b] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 900px) {
  [data-desktop-nav] { display: none !important; }
  [data-hero-grid] { grid-template-columns: 1fr !important; gap: 44px !important; padding-top: 128px !important; }
  [data-hero-grid] > div:last-child { width: min(420px, 84vw) !important; justify-self: center !important; }
  [data-footer-grid] { grid-template-columns: 1fr !important; gap: 44px !important; }
  [data-pillars] { grid-template-columns: 1fr !important; }
  [data-metrics-row] { grid-template-columns: 1fr !important; text-align: left !important; gap: 4px; }
  [data-metrics-row] span { text-align: left !important; }
  [data-teaser-grid] { grid-template-columns: 1fr !important; }
  [data-journal-grid] { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
  [data-collection], [data-testimonials], [data-b2b] { grid-template-columns: 1fr !important; }
  [data-compare] { grid-template-columns: 1fr !important; }
  [data-craft-grid] { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 150px !important; }
  [data-prod-modal] { grid-template-columns: 1fr !important; overflow-y: auto !important; }
  [data-prod-modal] > div:first-child { min-height: 210px !important; }
}
@media (max-width: 620px) {
  #choco-nav a[href="#contact"] { display: none !important; }
  #choco-nav img { height: 28px !important; }
}

/* ---------- factory page responsive ---------- */
@media (max-width: 900px) {
  [data-factory-grid] { grid-template-columns: 1fr !important; }
  [data-journey-grid] { grid-template-columns: 1fr !important; }
  [data-cap-grid] { grid-template-columns: 1fr !important; }
}

/* ---------- journal page responsive ---------- */
@media (max-width: 860px) {
  [data-blog-grid] { grid-template-columns: 1fr !important; }
  [data-article-body] { grid-template-columns: 1fr !important; }
}

/* ---------- artisan page responsive ---------- */
@media (max-width: 900px) {
  [data-artisan-hero] { grid-template-columns: 1fr !important; }
  [data-steps] { grid-template-columns: 1fr !important; }
  [data-pillars3] { grid-template-columns: 1fr !important; }
}