/* ============================================================================
   ZUKRO TYPOGRAPHY SYSTEM — single source of truth, loaded site-wide.
   • Display / headings : Cera Round Pro (Bold/ExtraBold) → falls back to
     Plus Jakarta Sans until the LICENSED CeraRoundPro woff2 files are placed in
     /fonts/cera-round-pro/ and the @font-face block below is uncommented.
   • Body / UI / admin  : Plus Jakarta Sans.
   • Tamil              : Noto Sans Tamil (downloads only when Tamil glyphs
     render, via Google Fonts unicode-range).
   Storefront loads ONLY Plus Jakarta Sans (+ Cera once licensed, + Noto Tamil
   on demand). No Poppins / Jost / Playfair / Space Mono / Nunito / Manrope.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Noto+Sans+Tamil:wght@400;500;600;700&display=swap');

/* --- Cera Round Pro (COMMERCIAL — self-host licensed files, then UNCOMMENT) ---
   Drop the licensed files at the paths below and remove these comment markers.
@font-face{ font-family:"Cera Round Pro"; src:url("/fonts/cera-round-pro/CeraRoundPro-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Cera Round Pro"; src:url("/fonts/cera-round-pro/CeraRoundPro-ExtraBold.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; }
   --------------------------------------------------------------------------- */

:root{
  --zukro-green:#123D2A; --zukro-green-dark:#123D2A; --zukro-gold:#E8A92E;
  /* type tokens */
  --font-display:"Cera Round Pro","Plus Jakarta Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"Plus Jakarta Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-ui:var(--font-body);
  --font-admin:var(--font-body);
  --font-tamil:"Noto Sans Tamil","Plus Jakarta Sans",system-ui,sans-serif;
  --font-rounded:var(--font-body);   /* legacy alias — old refs resolve to body */
}

/* base */
body{ font-family:var(--font-body) !important; background:#F3EEE3; color:#123D2A;
  font-weight:400; line-height:1.6; text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* functional / UI text → Plus Jakarta Sans */
p,li,a,span,button,input,textarea,select,label,small,nav,footer,
.price,.badge,.product-card,.cart,.checkout,.form-field,.btn,.btn-action-main,
.choice-pill,.acc-header,.nav-link,.zk-nav .nav-link,.ftmono{ font-family:var(--font-ui); }
.btn,.btn-action-main,button{ font-weight:700; letter-spacing:-.01em; }

/* display / headings → Cera Round Pro (→ Plus Jakarta Sans fallback) */
h1,h2,h3,.hero-title,.section-title,.display-title,.marketing-title,.disp,
.hero h1,.about-hero h1,.page-header h1,.policy-hero h1,.shop-hero h1,
.p-title,.rev-h2{
  font-family:var(--font-display) !important; font-weight:800 !important;
  letter-spacing:-0.045em !important; line-height:1.04 !important; color:#123D2A;
}
h4,h5,h6,.product-title,.card-title,.hp-title,.rec-t,
.fbt-section h2,.recs-section h2,.theme-ending h3{
  font-family:var(--font-display) !important; font-weight:700 !important;
  letter-spacing:-0.025em !important; line-height:1.15 !important;
}
/* Tamil content */
.tamil-text,[lang="ta"]{ font-family:var(--font-tamil) !important; }

/* ===== Phase A: reference fluid type scale ===== */
/* Hero / page titles scale fluidly (also fixes mobile overflow from fixed px sizes) */
.hero h1,.about-hero h1{ font-size:clamp(2.6rem,6vw,5rem) !important; }
.page-header h1,.policy-hero h1{ font-size:clamp(2.1rem,4.5vw,3.4rem) !important; }
/* Section headings */
.story-text h2,.process-section h2,.recs-section h2,.rev-h2,
section h2,.cta-section h2,.cta h2{ font-size:clamp(1.7rem,3.4vw,2.6rem) !important; }
/* Hero / intro paragraphs → calm, refined "lead" type */
.hero p,.about-hero p,.page-header p,.policy-hero p{
  font-size:clamp(1.05rem,1.6vw,1.3rem) !important; line-height:1.55 !important; opacity:.92; max-width:62ch;
}
/* Reusable reference utilities (for future/section use) */
.display{ font-size:clamp(2.6rem,7vw,6rem); font-weight:800; line-height:1; letter-spacing:-0.04em; }
.h-xl{ font-size:clamp(2.2rem,5vw,4rem); }
.h-lg{ font-size:clamp(1.8rem,3.5vw,2.8rem); }
.h-md{ font-size:clamp(1.3rem,2.2vw,1.8rem); }
.lead{ font-size:clamp(1.05rem,1.5vw,1.35rem); color:#3a463c; max-width:56ch; line-height:1.55; }

/* ===== Phase B: consistent section rhythm (generous, even whitespace like the
   reference) — content sections only; heroes keep their own spacing ===== */
section:not(.hero):not(.about-hero):not(.policy-hero):not(.modal-overlay):not(.co-card):not(.co-summary){
  padding-top:clamp(56px,7vw,96px) !important;
  padding-bottom:clamp(56px,7vw,96px) !important;
}

/* ===== Phase C: component refinement ===== */
/* Cards — one consistent soft radius across the mixed card classes */
.card,.product-card,.hp-card,.process-card,.rec-card,.addr-card,.reward-card,
.order-card,.faq-item,.vip-bstat,.policy-box,.summary,.ci,.member-card{
  border-radius:10px !important;   /* professional radius — not bubble UI */
}
/* Soft, even shadows + a gentle hover lift on product cards */
.product-card,.hp-card,.rec-card,.process-card,.card{
  box-shadow:0 6px 22px rgba(16,24,40,.06) !important;
}
.product-card:hover,.hp-card:hover,.rec-card:hover{ box-shadow:0 14px 32px rgba(16,24,40,.11) !important; }

/* Buttons — unified pill shape + smooth motion across every button variant */
.btn,.btn-primary,.btn-view,.checkout-btn,.hp-btn,.btn-pay,.rev-submit,
.btn-action-main,.btn-track,.cta .btn,.ty-actions a{
  border-radius:8px !important;   /* structured button, not pill */
  transition:transform .18s ease, box-shadow .2s ease, background .2s ease !important;
}
.btn:hover,.btn-primary:hover,.btn-view:hover,.checkout-btn:hover,.hp-btn:hover,.btn-action-main:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(45,91,50,.18);
}

/* ===== Phase D: on-scroll reveal (set by reveal.js) ===== */
.zk-reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); will-change:opacity,transform; }
.zk-reveal.zk-in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .zk-reveal{ opacity:1 !important; transform:none !important; transition:none !important; } }

/* Brand green replaces stray Bootstrap / ad-hoc blue */
a{ color:#123D2A; }
.navbar-nav .nav-link, .nav-link{ color:#1a1a1a !important; }
.navbar-nav .nav-link:hover{ color:#123D2A !important; }
.btn-primary{ background-color:#123D2A !important; border-color:#123D2A !important; color:#fff !important; }
.btn-primary:hover{ background-color:#123D2A !important; border-color:#123D2A !important; }
.text-primary{ color:#123D2A !important; }
.bg-primary{ background-color:#123D2A !important; }
.btn-pay.online{ background:#123D2A !important; }
:focus-visible{ outline-color:#123D2A !important; }
::selection{ background:#123D2A; color:#fff; }

/* ===== Strict green/gold/white: square inputs (8px) + remove Bootstrap blue focus glow ===== */
input, textarea, select, .form-control{ border-radius:8px !important; }
input:focus, textarea:focus, select:focus, .form-control:focus{
  border-color:#123D2A !important;
  box-shadow:0 0 0 .18rem rgba(45,91,50,.20) !important;
  outline:none !important;
}
/* neutralise Bootstrap's blue link/info/check accents */
.text-info, .text-info:hover{ color:#123D2A !important; }
.bg-info{ background-color:#123D2A !important; }
.custom-control-input:checked ~ .custom-control-label::before,
.form-check-input:checked{ background-color:#123D2A !important; border-color:#123D2A !important; }
a.text-primary, a.text-info{ color:#123D2A !important; }

/* ===== Phase #2: mobile touch-target audit fixes ===== */
/* Mobile nav menu links were ~21px tall — give every menu item a comfortable
   44px+ tap zone (Apple/Google guideline) so the open hamburger menu is usable. */
@media (max-width:991px){
  .navbar-collapse a, .navbar-nav a, .navbar-nav .nav-link, #navMenu a, .nav-links a{
    min-height:44px !important; display:flex !important; align-items:center;
    padding:11px 16px !important; line-height:1.3;
  }
  .navbar-toggler{ min-width:44px; min-height:44px; padding:9px 12px !important; }
  /* Footer links: roomier vertical hit area */
  footer a, .footer a, .site-footer a{ display:inline-block; padding:7px 0; line-height:1.5; }
}
/* Any small icon/text button gets a minimum comfortable tap size on touch screens */
@media (max-width:991px) and (pointer:coarse){
  .btn, .hp-btn, .btn-view, button{ min-height:40px; }
}

/* ===== Premium themed scrollbars — site-wide (theme colours only) =====
   Dark-green thumb, cream track, gold on hover. Applies to every page (this
   file loads everywhere). Note: macOS hides scrollbars unless System Settings →
   Appearance → "Show scroll bars" is set to "Always"; Chrome renders them
   regardless, Safari shows the styled bar while scrolling. */
html{ scrollbar-width:thin; scrollbar-color:var(--zukro-green) #f3eee3; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:#f3eee3; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--zukro-green), var(--zukro-green-dark));
  border-radius:10px; border:2px solid #f3eee3;
}
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(#E8A92E, var(--zukro-green-dark)); }
::-webkit-scrollbar-corner{ background:#f3eee3; }

/* ===== Product-image protection (deterrent) =====
   Stops drag-to-save and the iOS long-press "Save Image" menu. Paired with the
   contextmenu/dragstart guard in header.html. Not bulletproof (DevTools/
   screenshots still work) but blocks casual right-click/drag downloads. */
img{ -webkit-user-drag:none; -khtml-user-drag:none; -moz-user-drag:none; user-drag:none;
     -webkit-touch-callout:none; user-select:none; }

/* ===== Kill ALL stray blue (Bootstrap/browser defaults) — palette only =====
   Bootstrap's CDN defaults colour links/buttons/focus/alerts blue; the browser
   focus ring + selection are blue too. Force every one to the Zukro palette
   (forest #123D2A, gold #E8A92E, sage #CED6C9). No blue anywhere. */
a, a:visited{ color:#123D2A; }
a:hover, a:focus{ color:#E8A92E; }
.btn-primary, .btn-info, .bg-primary, .bg-info, .badge-primary, .badge-info{
  background-color:#123D2A !important; border-color:#123D2A !important; color:#F3EEE3 !important;
}
.btn-primary:hover, .btn-info:hover{ background-color:#0d2c1f !important; border-color:#0d2c1f !important; }
.btn-outline-primary, .btn-link, .text-primary, .text-info, .nav-link.active, .page-link{
  color:#123D2A !important;
}
.btn-link:hover, .page-link:hover{ color:#E8A92E !important; }
.alert-primary, .alert-info{ background:#CED6C9 !important; border-color:#123D2A !important; color:#123D2A !important; }
.page-item.active .page-link{ background-color:#123D2A !important; border-color:#123D2A !important; color:#F3EEE3 !important; }
.form-control:focus, .form-select:focus, .form-check-input:focus{
  border-color:#123D2A !important; box-shadow:0 0 0 .2rem rgba(18,61,42,.20) !important;
}
.form-check-input:checked{ background-color:#123D2A !important; border-color:#123D2A !important; }
:focus-visible{ outline-color:#E8A92E !important; }
::selection{ background:#123D2A; color:#F3EEE3; }
::-moz-selection{ background:#123D2A; color:#F3EEE3; }
:root{ accent-color:#123D2A; }   /* native checkbox/radio/range tint (was OS blue) */

/* ===== Sage Mist #CED6C9 — give the 5th palette colour a VISIBLE role =====
   Per the palette spec, Sage = secondary backgrounds / trust sections / calm
   bands / dividers. It was previously only used as a hairline border (invisible).
   Applied here site-wide (theme-fix loads on every page) so it actually shows. */
:root{ --color-sage:#CED6C9; }
.bg-sage{ background:#CED6C9 !important; }
/* trust / credibility bands → calm sage */
.footer .trust{ background:#CED6C9 !important; border-radius:14px; padding:16px 20px !important; }
.trust{ background:#CED6C9 !important; }
.trust-item{ border-top-color:#CED6C9 !important; }
/* homepage value-props band → sage secondary background */
.value-strip{ background:#CED6C9 !important; }
/* dividers / hairlines → sage */
hr{ border:0; border-top:1px solid #CED6C9; }

/* ===== FIX: light text on dark backgrounds was turning invisible =====
   Two dark-on-dark regressions caused by rules above:
   1. The global heading rule colours `.about-hero h1` #123D2A (dark green),
      and it loads after about.html's inline `color:#fff` at equal specificity,
      so the hero headline vanished on its dark-green hero.
   2. `a:visited{ color:#123D2A }` has higher specificity than `.btn-green`
      (white text on green), so once a visitor clicks through, every green CTA
      button's label turns dark-green-on-dark-green (invisible). Affects
      about / blog / export / faq / our-farm / index / wholesale.
   Restore the intended light text, including the :visited state. */
.about-hero h1{ color:#fff !important; }
.btn-green, .btn-green:visited, a.btn-green, a.btn-green:visited{ color:#fff !important; }