/* ==========================================================================
   Huevo — CSS-only visual polish (huevo-polish.css)
   Load AFTER the existing inline styles. Sections 1-8 are pure overrides;
   section 9 styles the mobile menu button/panel added to index.html.
   Palette: cocoa #3C2313 · yolk #ED942A · shell #FDF8EF · highlight #FFF2D8
   ========================================================================== */

/* 1. CONTAINERS ----------------------------------------------------------
   Existing wrappers are Tailwind .max-w-7xl (1280px); #story uses
   .brand-story.max-w-7xl; #faq uses .max-w-3xl (768px). Gutters (px-4 /
   sm:px-6 / lg:px-8) and the #top / #flavors grids are untouched.          */
#top > .max-w-7xl,
#story > .brand-story,
#why > .max-w-7xl,
#benefits > .max-w-7xl,
#flavors > .max-w-7xl {
  max-width: 1200px;
}
/* #faq keeps its existing 768px column: accordion questions read better
   at that measure than stretched to 1200px. Add "#faq > .max-w-3xl" to
   the rule above if you want it full width.                              */

/* 2. HERO ---------------------------------------------------------------- */
#top h1 {
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
#top .shop-media {
  background: #FDF8EF;
  border: 1px solid rgba(60, 35, 19, 0.14);
  border-radius: 28px;
  box-shadow: 0 16px 40px rgba(60, 35, 19, 0.06);
}

/* 3. GALLERY AND FLAVOR CONTROLS ----------------------------------------
   Only size/colour of the controls. .gtrack (display, overflow, snap,
   touch-action) and .gmain sizing are deliberately not touched.           */
#top .gallery .garrow {
  opacity: 1;
  width: 48px;
  height: 48px;
  border-color: rgba(60, 35, 19, 0.22);
}
#top .gallery:hover .garrow,
#top .garrow:focus-visible {
  opacity: 1;
}
/* Touch screens: arrows stay hidden (as the original page had them) so
   they never sit over the bottle at 320-390px; users swipe or tap the
   thumbnails. Hover-capable devices always show them.                    */
@media (hover: none) and (pointer: coarse) {
  #top .gallery .garrow { opacity: 0; }
  #top .garrow:focus-visible { opacity: 1; }
}
/* 320px-class phones: three flavor tiles share ~290px; keep "chocolate"
   on one line instead of the mid-word break the page's global
   overflow-wrap causes. Pre-existing issue, CSS-only fix.               */
@media (max-width: 359px) {
  #top .ftile { padding: 0.5rem 0.35rem; }
  #top .ftile > span:first-of-type { font-size: 0.82rem; letter-spacing: -0.01em; }
  #top .ftile > span:last-of-type { font-size: 0.62rem; letter-spacing: 0.06em; }
}
#top .gthumb {
  min-width: 48px;
  min-height: 48px;
  border-radius: 12px;
}
#top .gthumb[aria-pressed="true"] {
  border-color: #3C2313;
  background: #FFF2D8;
  box-shadow: 0 0 0 2px #ED942A;
}
#top .ftile {
  border-radius: 16px;
}
#top .ftile[aria-checked="true"] {
  border-color: #3C2313;
  background: #FFF2D8;
  box-shadow: 0 0 0 2px #ED942A;
}

/* 4. AMAZON BUTTONS -------------------------------------------------------
   #story has no Amazon CTA in the current markup; the selector is kept so
   it applies if one is added. The inline "Amazon Store" text link
   (a[data-amazon-store]) is intentionally left as a text link.             */
#top a[data-amazon],
#story a[data-amazon],
#flavors a[data-amazon] {
  min-height: 52px;
  padding: 14px 26px;
  border-radius: 999px;
}

/* 5. SECTION HEADINGS AND SPACING --------------------------------------- */
#why h2,
#benefits h2,
#flavors h2,
#faq h2 {
  font-size: clamp(1.875rem, 3.8vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
#why > .max-w-7xl,
#benefits > .max-w-7xl,
#flavors > .max-w-7xl,
#faq > .max-w-3xl {
  padding-top: 44px;
  padding-bottom: 44px;
}
@media (min-width: 768px) {
  #why > .max-w-7xl,
  #benefits > .max-w-7xl,
  #flavors > .max-w-7xl,
  #faq > .max-w-3xl {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

/* 6. FLAVOR LINEUP CARDS --------------------------------------------------
   Cards are matched by data-flavor-card, not grid position.
   The existing page sets `box-shadow:none!important` and a 6px flavour-
   coloured top accent (`border-top:6px solid …!important`) on these cards.
   The top accent is an existing design element and is left in place; the
   shadow needs !important to override the existing !important.           */
#flavors article[data-flavor-card] {
  border-width: 1px;
  border-color: rgba(60, 35, 19, 0.14);
  border-radius: 28px;
  box-shadow: 0 8px 24px rgba(60, 35, 19, 0.04) !important;
}
#flavors article[data-flavor-card="vanilla"] { background: #FFF6DF; }
#flavors article[data-flavor-card="choc"]    { background: #F2E8DE; }
#flavors article[data-flavor-card="pb"]      { background: #EFDDC8; }

#flavors article[data-flavor-card] > div > img {
  height: 290px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
@media (min-width: 768px) {
  #flavors article[data-flavor-card] > div > img { height: 330px; }
}
@media (hover: hover) {
  #flavors article[data-flavor-card]:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(60, 35, 19, 0.08) !important;
  }
}

/* 7. COMPARISON TABLE (#why .product-facts) ------------------------------
   Two columns: row label <th> | Huevo <td>. The Huevo column is every <td>
   plus the second header cell. Wrapper and mobile padding are unchanged.  */
#why .product-facts th,
#why .product-facts td {
  vertical-align: middle;
}
#why .product-facts tbody td,
#why .product-facts thead th:nth-child(2) {
  background: #FFF2D8;
  color: #3C2313;
}
@media (min-width: 768px) {
  #why .product-facts th,
  #why .product-facts td {
    padding: 18px 20px;
  }
}

/* 8. FINISHING DETAILS ---------------------------------------------------- */
#benefits .egg-shape {
  box-shadow: none;
}
#faq details.faq {
  border-color: rgba(60, 35, 19, 0.14);
}
#faq details.faq[open] {
  border-color: rgba(60, 35, 19, 0.32);
}

/* Reduced motion: no card lift. Focus indicators are inherited unchanged. */
@media (prefers-reduced-motion: reduce) {
  #flavors article[data-flavor-card]:hover {
    transform: none;
  }
}

/* 9. MOBILE NAVIGATION (added 13 Sep for accessibility) --------------------
   #menu-btn is md:hidden. When open, #site-nav drops below the sticky
   header as a full-width column. Desktop (>=768px) is unchanged.          */
#menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid rgba(60, 35, 19, 0.15);
  background: #FDF8EF;
  color: #3C2313;
  cursor: pointer;
}
#menu-btn .menu-close { display: none; }
#menu-btn[aria-expanded="true"] .menu-open { display: none; }
#menu-btn[aria-expanded="true"] .menu-close { display: block; }
@media (min-width: 768px) {
  #menu-btn { display: none; }
}
@media (max-width: 767px) {
  #site-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #FDF8EF;
    border-bottom: 1px solid rgba(60, 35, 19, 0.14);
    box-shadow: 0 16px 32px rgba(60, 35, 19, 0.10);
    padding: 0.5rem 1rem 0.75rem;
  }
  #site-nav.is-open a {
    display: block;
    padding: 0.85rem 0.5rem;
    min-height: 44px;
    border-bottom: 1px solid rgba(60, 35, 19, 0.08);
  }
  #site-nav.is-open a:last-child { border-bottom: 0; }
}