/* ================================================================
   BEYOND TEMPTATION — SUNSET ORCHARD PALETTE
   Cream #FFEDCB · Amber #FFC800 · Coral #FF7264 · Sky Blue #65BDC8 · Apple Green #A5CB5E
   A dark surface color (Deep Umber) is derived in-family for footer/
   hero/CTA sections, since none of the five source colors is dark
   enough to safely carry small white text on its own.

   CONTRAST RULES (so nothing — text, cards, sections — ever disappears):
   1. Cream is a LIGHT BACKGROUND WASH ONLY. Never used as text,
      icon, or accent color — far too pale to read against white.
   2. Amber and Apple Green are light-to-mid accents. They ALWAYS
      carry dark text — never used as a text color themselves on
      light backgrounds, and never paired with white/light text.
   3. Sky Blue sits right at the light/dark boundary — used with dark
      text on light backgrounds, and only used for white text when
      it's large enough (headlines/numbers), never small body copy.
   4. Coral is the only one of the five dark enough for confident
      white text — it's the primary "loud" accent for buttons and CTAs.
   5. Deep Umber (derived dark brown, in-family with Coral) is the
      ONLY true dark surface color — footer, ticker, CTA sections,
      hero overlays, page banners, stats strip. Everything on it gets
      white or cream text automatically, never dark-on-dark.
   6. Cards always stay pure white with a visible shadow/border, no
      matter which section color sits behind them, so they're never
      camouflaged against cream/amber/green washes.
   ================================================================ */

:root {
  /* ── Sunset Orchard core palette ── */
  --sm-cream:      #FFEDCB;  /* Cream — background wash ONLY */
  --sm-cream-dk:   #F5DFAE;  /* slightly deeper cream for banding */
  --sm-cream-pale: rgba(255,237,203,0.5);

  --sm-amber:      #FFC800;  /* Golden Yellow — light/mid accent, ALWAYS dark text */
  --sm-amber-dk:   #D9A800;  /* hover state for amber elements */
  --sm-amber-pale: rgba(255,200,0,0.18);

  --sm-coral:      #FF7264;  /* Coral/Salmon — primary loud accent, carries white text */
  --sm-coral-dk:   #E5564A;  /* hover state for coral elements */
  --sm-coral-pale: rgba(255,114,100,0.16);

  --sm-sky:        #65BDC8;  /* Sky Blue — secondary accent, dark text on light, white on dark */
  --sm-sky-dk:     #459AA6;
  --sm-sky-pale:   rgba(101,189,200,0.16);

  --sm-green:      #A5CB5E;  /* Apple Green — tertiary accent, ALWAYS dark text */
  --sm-green-dk:   #87AA42;
  --sm-green-pale: rgba(165,203,94,0.18);

  --sm-roast:      #5A3A2E;  /* Deep Umber — derived dark surface (in-family with Coral) */
  --sm-roast-dk:   #3F271E;  /* darkest umber — footer base */
  --sm-roast-pale: rgba(90,58,46,0.10);

  /* ── Remap every variable the existing CSS already reads ── */

  /* Teal-family vars → Sky Blue (secondary accent) */
  --c-teal:     var(--sm-sky)    !important;
  --c-teal2:    var(--sm-sky-dk) !important;
  --c-teal-pale:var(--sm-sky-pale) !important;
  --aq:         var(--sm-sky)    !important;
  --aq2:        var(--sm-sky-dk) !important;
  --aq3:        #357F89          !important;
  --aq-pale:    var(--sm-sky-pale) !important;
  --brd-aq:     rgba(101,189,200,0.35) !important;

  /* Orange-family vars → Coral (primary loud accent, the main CTA color) */
  --c-orange:     var(--sm-coral)    !important;
  --c-orange2:    var(--sm-coral-dk) !important;
  --c-orange-pale:var(--sm-coral-pale) !important;

  /* Yellow-family vars → Amber (always paired with dark text) */
  --c-yellow:     var(--sm-amber)    !important;
  --c-yellow2:    var(--sm-amber-dk) !important;
  --c-yellow-pale:var(--sm-amber-pale) !important;
  --ye:           var(--sm-amber)    !important;
  --ye2:          var(--sm-amber-dk) !important;
  --ye-pale:      var(--sm-amber-pale) !important;
  --brd-ye:       rgba(255,200,0,0.35) !important;

  /* Magenta-family vars → Deep Umber (used as a strong saturated accent role) */
  --c-magenta:     var(--sm-roast)    !important;
  --c-magenta2:    var(--sm-roast-dk) !important;
  --c-magenta-pale:var(--sm-roast-pale) !important;

  /* Green-family vars → Apple Green */
  --c-green:     var(--sm-green)    !important;
  --c-green2:    var(--sm-green-dk) !important;
  --c-green-pale:var(--sm-green-pale) !important;

  /* Dark/ink vars → Deep Umber, the single dark surface/text-on-light color */
  --c-dark:   var(--sm-roast)    !important;
  --c-dark2:  var(--sm-roast-dk) !important;
  --c-dark3:  #2E1B15            !important;
  --c-ink:    var(--sm-roast-dk) !important;
  --c-ink2:   #6B4A3C            !important;
  --ink:      var(--sm-roast-dk) !important;
  --ink2:     #6B4A3C            !important;
  --muted:    #A18A7C            !important;
  --c-muted:  #A18A7C            !important;

  /* Section background tints — each a LIGHT wash, always far enough from
     white that white cards remain clearly visible on top */
  --b-white:  #FFFFFF !important;
  --b-cream:  var(--sm-cream) !important;   /* signature warm section bg */
  --b-aqua:   #EAF7F8 !important;           /* soft sky-blue wash */
  --b-yellow: #FFF6DA !important;           /* soft amber wash, distinct from --b-cream */
  --c-chalk:  #FFFFFF !important;
  --c-cream:  var(--sm-cream) !important;

  /* ── More breathing room between sections ── */
  --pad: clamp(96px, 11vw, 160px) !important;
}

/* Sections clear the sticky nav when scrolled/jumped to directly */
.sec, .fran-invest-section, .fran-process, .fran-form-section, .nm-section, .stats-sec {
  scroll-margin-top: var(--nav-h, 78px);
}

@media(max-width:900px) {
  :root { --pad: clamp(64px, 10vw, 100px) !important; }
}

/* ================================================================
   ADDITIONAL SPACING — make stacked sections feel less compact
   ================================================================ */
.sec + .sec,
.sec + .stats-sec,
.stats-sec + .sec {
  position: relative;
}
.sec { padding-block: var(--pad) !important; }
.wrap { padding-inline: clamp(1.5rem, 4vw, 3rem) !important; }

.stats-sec { padding-block: clamp(56px, 7vw, 90px) !important; }
.stats-grid { gap: clamp(2rem, 5vw, 4rem) !important; }

.about-grid, .c-grid, .fran-why-grid, .m-grid {
  gap: clamp(2rem, 4vw, 3.5rem) !important;
}

.hero-cnt > * + * { margin-top: 0.35rem; }

section.cta-sec { padding-block: clamp(90px, 10vw, 140px) !important; }

/* Cards get a touch more internal breathing room so the palette doesn't feel cramped */
.m-card-body, .fran-why-tile, .t-card, .c-form-wrap, .fran-form-card {
  padding: clamp(1.75rem, 3vw, 2.5rem) !important;
}

/* ================================================================
   CARD VISIBILITY — keep every card a clean white surface with a
   visible shadow/border, regardless of which section bg it sits on,
   so cards never blend into cream/amber/green backgrounds.
   NOTE: .fran-form-card is intentionally excluded — it's a dark
   glassy enquiry-form card (rgba white, blur) styled in franchise.css,
   not a light product/testimonial card. Forcing it white here made
   its white-on-transparent placeholder text disappear entirely.
   ================================================================ */
.m-card, .fran-why-tile, .t-card, .c-form-wrap,
.fran-icard, .why-c {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(90,58,46,0.10) !important;
  box-shadow: 0 6px 24px rgba(90,58,46,0.10) !important;
}
.m-card:hover, .fran-why-tile:hover {
  box-shadow: 0 20px 50px rgba(90,58,46,0.16) !important;
}

/* ================================================================
   ACCENT TOUCHES — five colors, each kept to its safe role
   ================================================================ */

/* Hero overlay — deep umber to transparent gradient, dark enough that
   white hero text always stays legible over any photo */
.hero-dim {
  background: linear-gradient(180deg, rgba(63,39,30,0.45) 0%, rgba(63,39,30,0.75) 100%) !important;
}
.hero-glow-l { background: radial-gradient(circle, var(--sm-coral) 0%, transparent 70%) !important; opacity: 0.3 !important; }
.hero-glow-r { background: radial-gradient(circle, var(--sm-sky) 0%, transparent 70%) !important; opacity: 0.28 !important; }

/* Ticker strip: deep umber background with cream text for guaranteed contrast */
.ticker { background: var(--sm-roast) !important; }
.tk-item { color: #FFEDCB !important; }
.tk-sep { color: var(--sm-amber) !important; }

/* Buttons — each pairs its background with a contrast-tested text color */
.btn-wh   { background: var(--sm-coral)   !important; color: #fff !important; }
.btn-wh:hover { background: var(--sm-coral-dk) !important; box-shadow: 0 12px 35px rgba(255,114,100,0.4) !important; }
.btn-aq   { background: var(--sm-roast)   !important; color: #fff !important; }
.btn-aq:hover { background: var(--sm-roast-dk) !important; box-shadow: 0 12px 35px rgba(90,58,46,0.4) !important; }
.btn-ye   { background: var(--sm-amber)   !important; color: var(--sm-roast-dk) !important; }
.btn-ye:hover { background: var(--sm-amber-dk) !important; color: var(--sm-roast-dk) !important; box-shadow: 0 12px 35px rgba(255,200,0,0.4) !important; }
.btn-o-wh { border: 2px solid rgba(255,255,255,0.7) !important; color: #fff !important; }
.btn-o-aq { border: 2px solid var(--sm-sky) !important; color: var(--sm-sky-dk) !important; }
.btn-o-aq:hover { background: var(--sm-sky) !important; color: #fff !important; }

/* CTA section: deep umber base with coral+sky glow orbs; all CTA text stays white/cream */
.cta-sec { background: linear-gradient(135deg, var(--sm-roast) 0%, var(--sm-roast-dk) 60%, #2E1B15 100%) !important; }
.cta-ye-orb { background: radial-gradient(circle, var(--sm-amber) 0%, transparent 70%) !important; opacity: 0.22 !important; }
.cta-wh-orb { background: radial-gradient(circle, var(--sm-coral) 0%, transparent 70%) !important; opacity: 0.22 !important; }
.cta-h { color: #fff !important; }
.cta-h .ye { color: var(--sm-coral) !important; }
.cta-p { color: rgba(255,255,255,0.85) !important; }
.cta-trust span { color: rgba(255,255,255,0.75) !important; }

/* Nav active state + underline → coral, strong contrast on white nav bg */
.nav-links a:hover, .nav-links a.active { color: var(--sm-coral-dk) !important; }
.nav-links a::after { background: var(--sm-coral) !important; }
.nav-btn { background: linear-gradient(135deg, var(--sm-coral), var(--sm-roast)) !important; color: #fff !important; }
.nav-btn:hover { background: linear-gradient(135deg, var(--sm-roast), var(--sm-coral)) !important; box-shadow: 0 8px 28px rgba(255,114,100,0.4) !important; }

/* Footer: deep umber base with white/cream text so nothing reads dark-on-dark */
footer { background: var(--sm-roast-dk) !important; color: #FFEDCB !important; }
.f-strip { background: var(--sm-roast) !important; }
footer h4 { color: #fff !important; }
footer a { color: rgba(255,237,203,0.85) !important; }
footer a:hover { color: var(--sm-amber) !important; }
footer p { color: rgba(255,237,203,0.75) !important; }
.f-ci strong { color: #fff !important; }

/* WhatsApp float button kept brand green so it doesn't clash with coral/amber CTAs */
.wa { background: #25D366 !important; }

/* Category icon tiles / menu badges — every badge pairs its color with the
   correctly contrasting text so labels never vanish into their background */
#mp-cold .m-cat-badge, #mp-cold .m-tag { background: var(--sm-sky)   !important; color: var(--sm-roast-dk) !important; }
#mp-shakes .m-cat-badge, #mp-shakes .m-tag { background: var(--sm-amber) !important; color: var(--sm-roast-dk) !important; }
#mp-food .m-cat-badge, #mp-food .m-tag { background: var(--sm-coral)  !important; color: #fff !important; }
#mp-desserts .m-cat-badge, #mp-desserts .m-tag { background: var(--sm-green) !important; color: var(--sm-roast-dk) !important; }

/* Menu category hero banners — deep umber family so dark accents feel
   part of the palette; eyebrow text always stays light/bright for contrast */
#mp-cold .menu-cat-hero { background: linear-gradient(135deg, var(--sm-roast) 0%, #2E1B15 100%) !important; }
#mp-cold .menu-cat-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, rgba(101,189,200,0.3) 0%, transparent 60%) !important; }
#mp-shakes .menu-cat-hero { background: linear-gradient(135deg, var(--sm-roast) 0%, #2E1B15 100%) !important; }
#mp-shakes .menu-cat-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, rgba(255,200,0,0.3) 0%, transparent 60%) !important; }
#mp-food .menu-cat-hero { background: linear-gradient(135deg, var(--sm-roast) 0%, #2E1B15 100%) !important; }
#mp-food .menu-cat-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, rgba(255,114,100,0.28) 0%, transparent 60%) !important; }
#mp-desserts .menu-cat-hero { background: linear-gradient(135deg, var(--sm-roast) 0%, #2E1B15 100%) !important; }
#mp-desserts .menu-cat-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, rgba(165,203,94,0.3) 0%, transparent 60%) !important; }
#mp-cold .menu-cat-hero-eyebrow { color: var(--sm-sky) !important; }
#mp-shakes .menu-cat-hero-eyebrow { color: var(--sm-amber) !important; }
#mp-food .menu-cat-hero-eyebrow { color: var(--sm-coral) !important; }
#mp-desserts .menu-cat-hero-eyebrow { color: var(--sm-green) !important; }
.menu-cat-hero-title { color: #fff !important; }
.menu-cat-hero-count span:last-child { color: rgba(255,255,255,0.7) !important; }

/* Stat numbers pop in coral against the light backgrounds, amber on dark */
.stat-n { color: var(--sm-coral-dk) !important; }
.stat-l { color: var(--ink2) !important; }

/* Eyebrow labels use coral for strong legibility on light bg */
.eyebrow, .eyebrow-l { color: var(--sm-coral-dk) !important; }
.eyebrow::before, .eyebrow::after { background: var(--sm-coral) !important; }

/* Rule divider cycles through all five colors for a clear palette signature */
.rule { background: linear-gradient(90deg, var(--sm-amber), var(--sm-coral), var(--sm-sky), var(--sm-green), var(--sm-roast)) !important; height: 4px !important; }

/* ── Coverage for variables/hex not reached via the remapped --c-* vars ── */
.pfs-wrap {
  --pfs-accent: var(--sm-coral) !important;
  --pfs-accent-dark: var(--sm-coral-dk) !important;
}
.pfs-section-eyebrow { color: var(--sm-coral-dk) !important; }
.pfs-section-eyebrow::before { background: linear-gradient(90deg,transparent,var(--sm-coral)) !important; }
.pfs-section-eyebrow::after { background: linear-gradient(90deg,var(--sm-coral),transparent) !important; }
.pfs-section-title { color: var(--sm-roast-dk) !important; }
.pfs-section-title em { color: var(--sm-coral-dk) !important; }
.pfs-section-sub { color: var(--ink2) !important; }

/* Page hero banner overlay (interior pages) — deep umber gradient,
   dark enough that white page-title text always stays legible */
.page-hero::before {
  background: linear-gradient(135deg, var(--sm-roast) 0%, var(--sm-roast-dk) 60%, #2E1B15 100%) !important;
}
.ph-title { color: #fff !important; }
.ph-title .hi { color: var(--sm-amber) !important; }
.ph-eye { color: rgba(255,255,255,0.8) !important; }

/* Stats strip background — deep umber gradient; numbers in amber,
   labels in pale cream so both stay sharply legible against the dark bg */
.stats-sec {
  background: linear-gradient(135deg, var(--sm-roast) 0%, var(--sm-roast-dk) 60%, #2E1B15 100%) !important;
}
.stats-sec .stat-l { color: rgba(11, 11, 11, 0.85) !important; }
.stats-sec .stat-n { color: var(--sm-amber) !important; }

/* ================================================================
   SECTION BACKGROUND SEQUENCE — alternate light washes so consecutive
   sections are always visually distinct, never blending into each other
   ================================================================ */
.s-white { background: var(--b-white) !important; }
.s-cream { background: var(--b-cream) !important; }
.s-aqua  { background: var(--b-aqua)  !important; }
.s-yellow{ background: var(--b-yellow)!important; }

/* Body copy stays deep-umber-dark on every light section for maximum
   readability — never amber/cream/green colored text on light backgrounds */
.body-t, p, li { color: var(--ink2); }
h1, h2, h3, .h2 { color: var(--sm-roast-dk); }
.h2 em { color: var(--sm-coral-dk) !important; font-style: normal !important; }

/* Form fields: keep clear white backgrounds with umber borders so
   inputs never blend into cream/amber/green section backgrounds.
   NOTE: .fran-fg (franchise page enquiry form) is intentionally a dark
   themed form and is styled separately in franchise.css — it must NOT
   be overridden here, or placeholder text becomes invisible (white
   placeholder text against a forced-white background). */
.fg input, .fg textarea, .fg select {
  background: #fff !important;
  border: 1.5px solid rgba(90,58,46,0.18) !important;
  color: var(--sm-roast-dk) !important;
}
.fg input:focus, .fg textarea:focus, .fg select:focus {
  border-color: var(--sm-coral) !important;
  outline: none !important;
}