/* =========================================================================
   popcorn-light.css — CR round 2 light scheme for the shared-template pages.

   WHY THIS FILE EXISTS
   --------------------
   The site's base is DARK: includes/head.php sets
       body{background:var(--n);color:#fff}
   and every card/border/label under it is written for that ground.

   The homepage does NOT look dark, because index.php is self-contained (90KB,
   its own <head> and <style>) and its CR-round-2 sections paint light grounds
   over the base. Nothing else got those sections, so about/cashier/kitchen/
   waiter/edge/contact/knowledge-base all stayed dark and drifted away from
   the homepage.

   This layer flips the shared template to the homepage's language without
   rewriting eight pages of section markup. Nav and footer deliberately stay
   dark — the homepage's are dark too.

   SPECIFICITY: rules are `body`-prefixed on purpose. kb-lib.php emits its
   styles INLINE in the body, i.e. after this <link>, so equal-specificity
   rules would lose on source order. The extra element bumps us to 0,1,1.

   Self-hosted. No CDN, no external font or asset host.
   ========================================================================= */

/* ---- ground ------------------------------------------------------------ */
body { background: var(--cr); color: var(--tx); }

/* ---- display type: cream/yellow gradient -> solid navy ------------------ */
/* head.php paints .hero h1 with a gradient clipped to the text, so the colour
   lives in background + -webkit-text-fill-color. Both must be unset or the
   heading renders transparent on the light ground. */
body .hero h1 {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--n);
  color: var(--n);
}
body .section-title,
body h2, body h3 { color: var(--n); }
body .hero p,
body .section-sub { color: var(--tx2); }

/* ---- eyebrows: yellow-on-dark text -> yellow pill, navy text ------------ */
/* var(--y) text is unreadable on a light ground, so the homepage's treatment
   (a filled pill) is the correct translation, not a colour swap. */
body .hero-eyebrow,
body .section-label {
  display: inline-block;
  background: var(--y);
  color: var(--n);
  padding: 5px 14px;
  border-radius: 20px;
  letter-spacing: .14em;
  width: fit-content;
  max-width: max-content;
}
/* A pill inside a COLUMN FLEX parent stretches the full track - inline-block
   does not opt out of align-items:stretch (contact's "Direct contact" label
   rendered as a full-width yellow bar). Scoped to that case only: applying
   align-self globally shoved the pill to the far left on centred heroes. */
body [style*="flex-direction:column"] > .section-label,
body [style*="flex-direction:column"] > .hero-eyebrow { align-self: flex-start; }
body .hero-badge {
  background: var(--y);
  color: var(--n);
}

/* ---- cards: navy fill + hairline white border -> white + grey border ---- */
body .cert-card,
body .feat-card,
body .product-card,
body .reward-card,
body .mkt-card,
body .type-card,
body .voice-card,
body .color-swatch {
  background: #fff;
  border: 1.5px solid var(--gr);
}
body .cert-card:hover,
body .feat-card:hover,
body .product-card:hover,
body .reward-card:hover,
body .mkt-card:hover,
body .type-card:hover,
body .voice-card:hover {
  border-color: var(--y);
  box-shadow: 0 10px 26px rgba(3, 23, 58, .09);
}

body .feat-card-title,
body .product-card-title,
body .reward-title,
body .faq-q { color: var(--n); }

body .cert-desc,
body .feat-card-desc,
body .product-card-desc,
body .reward-desc,
body .faq-a,
body .mascot-rule-text,
body .stat-label,
body .voice-ex { color: var(--tx2); }

body .cert-title { color: var(--n); }
body .mascot-name { color: var(--n); }

/* ---- translucent-white surfaces -> solid light surfaces ---------------- */
body .faq-item,
body .mascot-rule,
body .stat-block {
  background: #fff;
  border: 1.5px solid var(--gr);
}
body .voice-ex { border-color: var(--gr); }

/* ---- forms ------------------------------------------------------------- */
body .form-input,
body .form-textarea {
  background: #fff;
  border: 1.5px solid var(--gr);
  color: var(--tx);
}
body .form-input:focus,
body .form-textarea:focus {
  outline: none;
  border-color: var(--y);
  box-shadow: 0 0 0 3px rgba(253, 203, 36, .25);
}
body .form-input::placeholder,
body .form-textarea::placeholder { color: #9AA1AE; }
body .form-label { color: var(--n); }
body .form-check label { color: var(--tx2); }

/* ---- rules and separators ---------------------------------------------- */
body .divider { background: var(--gr); }
body .mascot-rule + .mascot-rule { border-color: var(--gr); }

/* ---- knowledge-base / articles page ------------------------------------ */
body .kb-cta {
  background: #fff;
  border: 1.5px solid var(--gr);
}
body .kb-cta h3 { color: var(--n); }
body .kb-cta p { color: var(--tx2); }
body .kb-search {
  background: #fff;
  border: 1.5px solid var(--gr);
  color: var(--tx);
}
body .kb-search::placeholder { color: #9AA1AE; }
body .kb-results {
  background: #fff;
  border: 1px solid var(--gr);
  box-shadow: 0 12px 32px rgba(3, 23, 58, .14);
}
body .kb-res-title { color: var(--n); }

/* ---- NAV AND FOOTER STAY DARK -----------------------------------------
   The homepage's nav and footer are dark. Restating the dark values here so
   a future edit to the light layer cannot accidentally bleach them. */
body nav { background: rgba(3, 23, 58, .92); }
body footer { background: var(--nm); }
body footer p,
body .mfooter-col p,
body .mfooter-col a { color: rgba(255, 255, 255, .72); }

/* ---- knowledge-base hero: its own gradient heading -------------------- */
/* .kb-hero h1 is a SEPARATE rule from .hero h1 with its own clipped
   gradient, so the earlier override did not reach it — the heading was
   rendering cream-on-light-grey, effectively invisible. */
body .kb-hero h1 {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--n);
  color: var(--n);
}
body .kb-hero p { color: var(--tx2); }

/* ---- card meta: yellow-on-white is unreadable ------------------------- */
body .product-card-label { color: var(--amb); }
body .product-card-link  { color: var(--amb); }
body .product-card:hover .product-card-link { color: var(--r); }

/* ---- remaining yellow-on-light labels --------------------------------- */
body .kb-cat-title,
body .kb-browse-head,
body .kb-pop-title,
body .kb-article-title,
body .kb-cta h3,
body .kb-side h4 { color: var(--n); }
body .kb-folder-name,
body .kb-res-cat,
body .kb-cat-count { color: var(--amb); }
body .kb-search-icon { color: var(--tx2); }

/* ---- stat blocks (about) ---------------------------------------------- */
/* .stat-num is var(--y); the block behind it is now white, so the figure was
   yellow-on-white. It is the loudest number on the page — it takes navy. */
body .stat-num { color: var(--n); }
