/* =====================================================================
   Café Mia — Warm Mode V2 · Design System
   ---------------------------------------------------------------------
   Applied via body[data-theme="warm"] class. Overrides the dark-mode
   defaults from the individual page's inline <style> block.
   Loads AFTER inline styles so specificity wins on element selectors.
   ===================================================================== */

/* ---------- Design tokens ---------- */
body[data-theme="warm"] {
  --w-bg:            #FFF9F5;   /* main warm cream background */
  --w-bg-card:       #FFFFFF;   /* card surface */
  --w-bg-warm:       #FDF3EA;   /* slightly warmer cream */
  --w-bg-blush:      #FFF0F5;   /* soft pink wash */
  --w-bg-matcha:     #EFF4EC;   /* pale matcha wash */
  --w-bg-panel:      #FBEDE0;   /* honey-toned accent panel */

  --w-text:          #2A1F17;   /* deep warm brown for body copy */
  --w-text-h:        #1A130E;   /* darker for headlines */
  --w-text-soft:     #5F5145;   /* soft body text */
  --w-text-muted:    #8B7C6C;   /* muted meta text */
  --w-line:          rgba(42,31,23,.08);

  --w-pink:          #F71BB3;   /* brand pink — accent only */
  --w-pink-deep:     #C7158E;
  --w-pink-soft:     #FFB8DC;   /* soft blush */
  --w-pink-wash:     rgba(247,27,179,.08);
  --w-matcha:        #7FB069;   /* matcha green */
  --w-gold:          #E8B75E;   /* honey gold */
  --w-dark:          #1A1A1A;   /* dark accent for select surfaces */

  --w-shadow-soft:   0 4px 20px rgba(42,31,23,.06);
  --w-shadow-lift:   0 12px 40px rgba(42,31,23,.10), 0 4px 12px rgba(247,27,179,.06);
  --w-radius-sm:     10px;
  --w-radius-md:     16px;
  --w-radius-lg:     24px;

  background: var(--w-bg) !important;
  color: var(--w-text) !important;
}
body[data-theme="warm"] * { box-sizing: border-box; }

/* ---------- Base typography ---------- */
body[data-theme="warm"] h1,
body[data-theme="warm"] h2,
body[data-theme="warm"] h3,
body[data-theme="warm"] h4 {
  color: var(--w-text-h) !important;
  font-family: 'Playfair Display', Georgia, serif !important;
}
body[data-theme="warm"] p,
body[data-theme="warm"] li {
  color: var(--w-text) !important;
}
body[data-theme="warm"] a { color: var(--w-pink); }
body[data-theme="warm"] a:hover { color: var(--w-pink-deep); }
body[data-theme="warm"] strong { color: var(--w-text-h) !important; }

/* ---------- Site NAV — warm white with soft pink shadow ---------- */
body[data-theme="warm"] nav.nav,
body[data-theme="warm"] header.cm-nav,
body[data-theme="warm"] .cm-nav {
  background: rgba(255,249,245,.92) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--w-line) !important;
  box-shadow: 0 1px 20px rgba(42,31,23,.04);
}
body[data-theme="warm"] nav.nav a,
body[data-theme="warm"] .nav-links a,
body[data-theme="warm"] .cm-nav a {
  color: var(--w-text-h) !important;
  border-bottom: none !important;
}
body[data-theme="warm"] nav.nav a:hover,
body[data-theme="warm"] .nav-links a:hover { color: var(--w-pink) !important; }
body[data-theme="warm"] nav.nav a.n-cta,
body[data-theme="warm"] nav.nav a.nav-cta {
  background: var(--w-pink) !important;
  color: #FFF !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
}
body[data-theme="warm"] nav.nav a.n-cta:hover,
body[data-theme="warm"] nav.nav a.nav-cta:hover {
  background: var(--w-dark) !important;
  color: #FFF !important;
}
body[data-theme="warm"] .burger span { background: var(--w-text-h) !important; }
body[data-theme="warm"] .nav-logo img { filter: brightness(1) invert(0) !important; }
/* fallback: if logo needs pink-on-cream instead of pink-on-black */

/* ---------- HERO (.s-hero on home) ---------- */
body[data-theme="warm"] .s-hero {
  background: var(--w-bg) !important;
  overflow: visible !important;
}
body[data-theme="warm"] .s-hero::before {
  background:
    linear-gradient(rgba(255,255,255,.25) 0%, rgba(255,240,245,.55) 60%, rgba(255,255,255,.30) 100%),
    url('/images/hero-interior.webp') center/cover no-repeat !important;
}
body[data-theme="warm"] .s-hero h1 { color: var(--w-text-h) !important; }
body[data-theme="warm"] .s-hero .ey { color: var(--w-pink) !important; }
body[data-theme="warm"] .s-hero .sub { color: var(--w-text-soft) !important; }

/* ---------- Buttons — pill, pink primary, cream outline ---------- */
body[data-theme="warm"] .btn { border-radius: 999px !important; letter-spacing: .04em; }
body[data-theme="warm"] .b-dark { background: var(--w-pink) !important; color: #FFF !important; border-color: var(--w-pink) !important; }
body[data-theme="warm"] .b-dark:hover { background: var(--w-dark) !important; border-color: var(--w-dark) !important; color: #FFF !important; }
body[data-theme="warm"] .b-white { background: transparent !important; color: var(--w-text-h) !important; border: 1.5px solid var(--w-text-h) !important; }
body[data-theme="warm"] .b-white:hover { background: var(--w-text-h) !important; color: #FFF !important; }
body[data-theme="warm"] .b-cream { background: var(--w-text-h) !important; color: #FFF !important; border-color: var(--w-text-h) !important; }

/* ---------- Ticker strip ---------- */
body[data-theme="warm"] .s-ticker {
  background: var(--w-bg-warm) !important;
  border-top: 1px solid var(--w-line) !important;
  border-bottom: 1px solid var(--w-line) !important;
  color: var(--w-text-soft) !important;
}
body[data-theme="warm"] .s-ticker span { color: var(--w-text-soft) !important; }
body[data-theme="warm"] .s-ticker .dot { color: var(--w-pink) !important; }

/* ---------- Delivery bar ---------- */
body[data-theme="warm"] .delivery-bar {
  background: var(--w-bg-blush) !important;
  border-bottom: 1px solid var(--w-line) !important;
}
body[data-theme="warm"] .delivery-bar .db-label { color: var(--w-text-h) !important; }

/* ---------- Sections ---------- */
body[data-theme="warm"] .s-intro,
body[data-theme="warm"] .s-menu,
body[data-theme="warm"] .s-nbhd,
body[data-theme="warm"] .s-evening,
body[data-theme="warm"] .s-insta,
body[data-theme="warm"] .s-nl,
body[data-theme="warm"] .s-delivery,
body[data-theme="warm"] .s-reviews {
  background: var(--w-bg) !important;
  color: var(--w-text) !important;
}
body[data-theme="warm"] .s-intro { background: var(--w-bg) !important; }
body[data-theme="warm"] .s-menu { background: var(--w-bg-warm) !important; }
body[data-theme="warm"] .s-nbhd { background: var(--w-bg) !important; }
body[data-theme="warm"] .s-evening { background: var(--w-dark) !important; color: #F5EBE0 !important; }
body[data-theme="warm"] .s-evening h1,
body[data-theme="warm"] .s-evening h2,
body[data-theme="warm"] .s-evening h3 { color: #FFF !important; }
body[data-theme="warm"] .s-evening p { color: rgba(255,255,255,.85) !important; }
body[data-theme="warm"] .s-quote {
  background: var(--w-bg-blush) !important;
  color: var(--w-text-h) !important;
}
body[data-theme="warm"] .s-quote blockquote {
  color: var(--w-text-h) !important;
  font-family: 'Playfair Display', serif !important;
}

/* Intro cards, menu cards */
body[data-theme="warm"] .s-intro .hbar {
  background: var(--w-bg-card) !important;
  border: 1px solid var(--w-line) !important;
  border-radius: var(--w-radius-md) !important;
}
body[data-theme="warm"] .s-intro .hbar .hl { color: var(--w-text-muted) !important; }
body[data-theme="warm"] .s-intro .hbar .hv { color: var(--w-text-h) !important; }
body[data-theme="warm"] .s-intro .hbar .hc:first-child { border-right-color: var(--w-line) !important; }

body[data-theme="warm"] .mc {
  background: var(--w-bg-card) !important;
  border: 1px solid var(--w-line) !important;
  border-radius: var(--w-radius-md) !important;
  box-shadow: var(--w-shadow-soft);
}
body[data-theme="warm"] .mc h3 { color: var(--w-text-h) !important; }
body[data-theme="warm"] .mc p { color: var(--w-text-soft) !important; }
body[data-theme="warm"] .mc ul li { color: var(--w-text-soft) !important; border-bottom-color: var(--w-line) !important; }
body[data-theme="warm"] .mc.gold {
  background: linear-gradient(135deg, var(--w-pink) 0%, var(--w-pink-deep) 100%) !important;
  border-color: var(--w-pink) !important;
}
body[data-theme="warm"] .mc.gold h3, body[data-theme="warm"] .mc.gold p, body[data-theme="warm"] .mc.gold ul li {
  color: #FFF !important;
}

/* Section titles */
body[data-theme="warm"] .s-menu .hdr h2,
body[data-theme="warm"] .s-nbhd .hdr h2 {
  color: var(--w-text-h) !important;
}

/* ---------- Reviews / rating ---------- */
body[data-theme="warm"] .rating-display {
  background: var(--w-bg-card) !important;
  border: 1px solid var(--w-line) !important;
  border-radius: var(--w-radius-md) !important;
  box-shadow: var(--w-shadow-soft);
}
body[data-theme="warm"] .rating-big { color: var(--w-text-h) !important; }
body[data-theme="warm"] .rating-source { color: var(--w-text-muted) !important; }
body[data-theme="warm"] .review-count-pill {
  background: var(--w-pink-wash) !important;
  border-color: var(--w-pink) !important;
  color: var(--w-pink) !important;
}

/* ---------- ORDER STRIP (transactional) ---------- */
body[data-theme="warm"] .cm-order-strip {
  background: linear-gradient(90deg, var(--w-bg-blush) 0%, var(--w-bg-warm) 100%) !important;
  border-top-color: var(--w-line) !important;
  border-bottom-color: var(--w-line) !important;
}
body[data-theme="warm"] .cm-order-strip-msg h3 { color: var(--w-text-h) !important; }
body[data-theme="warm"] .cm-order-strip-msg p { color: var(--w-text-soft) !important; }
body[data-theme="warm"] .cm-order-strip-btns a.pri { background: var(--w-pink) !important; color: #FFF !important; }
body[data-theme="warm"] .cm-order-strip-btns a.pri:hover { background: var(--w-dark) !important; }
body[data-theme="warm"] .cm-order-strip-btns a.sec {
  background: transparent !important;
  color: var(--w-text-h) !important;
  border: 1.5px solid var(--w-text-h) !important;
}
body[data-theme="warm"] .cm-order-strip-btns a.sec:hover { background: var(--w-text-h) !important; color: #FFF !important; }
body[data-theme="warm"] .cm-order-strip-btns a.tel { color: var(--w-pink) !important; }

/* ---------- Featured drinks card grid ---------- */
body[data-theme="warm"] .cm-featured-drinks {
  background: var(--w-bg-blush) !important;
  border: 1px solid var(--w-line) !important;
  border-radius: var(--w-radius-lg) !important;
}
body[data-theme="warm"] .cm-fd-card {
  background: var(--w-bg-card) !important;
  border: 1px solid var(--w-line) !important;
  border-radius: var(--w-radius-md) !important;
  box-shadow: var(--w-shadow-soft);
}
body[data-theme="warm"] .cm-fd-card h4 { color: var(--w-text-h) !important; }
body[data-theme="warm"] .cm-fd-card p { color: var(--w-text-soft) !important; }
body[data-theme="warm"] .cm-featured-drinks h3 { color: var(--w-pink) !important; }
body[data-theme="warm"] .cm-featured-drinks .cm-fd-title { color: var(--w-text-h) !important; }
body[data-theme="warm"] .cm-fd-more a { color: var(--w-pink) !important; }

/* ---------- Article/matcha guide pages ---------- */
body[data-theme="warm"] .page-hero {
  background: var(--w-bg) !important;
  color: var(--w-text-h) !important;
}
body[data-theme="warm"] .page-hero h1 { color: var(--w-text-h) !important; }
body[data-theme="warm"] .page-hero .sub,
body[data-theme="warm"] .page-hero p { color: var(--w-text-soft) !important; }
body[data-theme="warm"] .page-hero .label {
  background: var(--w-pink-wash) !important;
  color: var(--w-pink) !important;
  padding: 6px 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(247,27,179,.2) !important;
}

body[data-theme="warm"] .quick-answer {
  background: var(--w-bg-card) !important;
  border: 1px solid var(--w-line) !important;
  border-left: 4px solid var(--w-pink) !important;
  border-radius: var(--w-radius-md) !important;
  box-shadow: var(--w-shadow-soft);
}
body[data-theme="warm"] .quick-answer h3 { color: var(--w-pink) !important; }
body[data-theme="warm"] .quick-answer p { color: var(--w-text) !important; }
body[data-theme="warm"] .quick-answer strong { color: var(--w-text-h) !important; }

body[data-theme="warm"] .body {
  background: var(--w-bg) !important;
  color: var(--w-text) !important;
}
body[data-theme="warm"] .body h2 {
  color: var(--w-text-h) !important;
  border-top: 1px solid var(--w-line) !important;
}
body[data-theme="warm"] .body h3 { color: var(--w-text-h) !important; }
body[data-theme="warm"] .body p,
body[data-theme="warm"] .body li { color: var(--w-text) !important; }
body[data-theme="warm"] .body strong { color: var(--w-text-h) !important; }

body[data-theme="warm"] .compare-table {
  background: var(--w-bg-card) !important;
  border: 1px solid var(--w-line) !important;
}
body[data-theme="warm"] .compare-table th {
  background: var(--w-bg-warm) !important;
  color: var(--w-pink) !important;
  border-bottom-color: var(--w-line) !important;
}
body[data-theme="warm"] .compare-table td {
  color: var(--w-text) !important;
  border-bottom-color: var(--w-line) !important;
}

body[data-theme="warm"] .faq-block details {
  background: var(--w-bg-card) !important;
  border: 1px solid var(--w-line) !important;
  border-radius: var(--w-radius-md) !important;
  box-shadow: var(--w-shadow-soft);
}
body[data-theme="warm"] .faq-block summary { color: var(--w-text-h) !important; }
body[data-theme="warm"] .faq-block details p { color: var(--w-text) !important; }

body[data-theme="warm"] .related-grid a {
  background: var(--w-bg-card) !important;
  border: 1px solid var(--w-line) !important;
  border-radius: var(--w-radius-md) !important;
  box-shadow: var(--w-shadow-soft);
}
body[data-theme="warm"] .related-grid a:hover { border-color: var(--w-pink) !important; }
body[data-theme="warm"] .related-grid span.tag { color: var(--w-pink) !important; }
body[data-theme="warm"] .related-grid h4 { color: var(--w-text-h) !important; }
body[data-theme="warm"] .related h2 { color: var(--w-text-h) !important; }

body[data-theme="warm"] .hero-cta {
  background: linear-gradient(135deg, var(--w-pink) 0%, var(--w-pink-deep) 60%, var(--w-gold) 100%) !important;
  color: #FFF !important;
}

/* ---------- FOOTER — keep dark for brand contrast ---------- */
body[data-theme="warm"] footer,
body[data-theme="warm"] .cm-footer {
  background: var(--w-dark) !important;
  color: #F5EBE0 !important;
}
body[data-theme="warm"] footer *,
body[data-theme="warm"] .cm-footer * { color: rgba(255,255,255,.85) !important; }
body[data-theme="warm"] footer h4 { color: #FFF !important; }
body[data-theme="warm"] footer a { color: rgba(255,255,255,.85) !important; }
body[data-theme="warm"] footer a:hover { color: var(--w-pink-soft) !important; }

/* ---------- Fine-tuning ---------- */
body[data-theme="warm"] .cm-order-strip-icon {
  background: var(--w-pink) !important;
}


/* Preserve dark theme toggle button if present */
body[data-theme="warm"] .cm-theme-toggle {
  background: var(--w-pink) !important;
  color: #FFF !important;
}

/* Prevent the CTA band on matcha guide pages from staying dark */
body[data-theme="warm"] .cm-order-strip { color: var(--w-text) !important; }

/* Better crumbs */
body[data-theme="warm"] .crumbs {
  color: var(--w-text-muted) !important;
}
body[data-theme="warm"] .crumbs a { color: var(--w-text-muted) !important; border: none !important; }
body[data-theme="warm"] .crumbs a:hover { color: var(--w-pink) !important; }

/* Menu page (menu.html) — assume similar patterns */
body[data-theme="warm"] .menu-nav a,
body[data-theme="warm"] .menu-tab { color: var(--w-text-h) !important; }
body[data-theme="warm"] .menu-nav a.active,
body[data-theme="warm"] .menu-tab.active { color: var(--w-pink) !important; border-bottom-color: var(--w-pink) !important; }

/* =====================================================================
   V2.1 — Readability fixes
   ---------------------------------------------------------------------
   Every dark section flipped to cream, every white text on now-cream
   background swapped to warm dark, contrast boosted on pink accents.
   ===================================================================== */

/* ---------- Force every section family to cream ---------- */
body[data-theme="warm"] .s-hero,
body[data-theme="warm"] .s-intro,
body[data-theme="warm"] .s-menu,
body[data-theme="warm"] .s-nbhd,
body[data-theme="warm"] .s-delivery,
body[data-theme="warm"] .s-faq,
body[data-theme="warm"] .s-faqs,
body[data-theme="warm"] .s-quote,
body[data-theme="warm"] .s-nl,
body[data-theme="warm"] .s-insta,
body[data-theme="warm"] .s-reviews,
body[data-theme="warm"] .s-photos,
body[data-theme="warm"] .s-ticker {
  background: var(--w-bg) !important;
  color: var(--w-text) !important;
}
body[data-theme="warm"] .s-menu   { background: var(--w-bg-warm) !important; }
body[data-theme="warm"] .s-quote  { background: var(--w-bg-blush) !important; }
body[data-theme="warm"] .s-delivery { background: var(--w-bg-warm) !important; }
body[data-theme="warm"] .s-nl     { background: var(--w-bg-blush) !important; }
body[data-theme="warm"] .s-faq,
body[data-theme="warm"] .s-faqs   { background: var(--w-bg) !important; }
body[data-theme="warm"] .s-reviews { background: var(--w-bg) !important; }

/* Section headers — anywhere .hdr h2 lives */
body[data-theme="warm"] .hdr h2,
body[data-theme="warm"] section h2,
body[data-theme="warm"] .s-menu .hdr h2,
body[data-theme="warm"] .s-nbhd .hdr h2,
body[data-theme="warm"] .s-faq .hdr h2,
body[data-theme="warm"] .s-faqs .hdr h2,
body[data-theme="warm"] .s-reviews .hdr h2 {
  color: var(--w-text-h) !important;
}

/* Section eyebrows / "FREQUENTLY ASKED" etc. — keep pink but deepen for contrast */
body[data-theme="warm"] .ey,
body[data-theme="warm"] .hdr .ey,
body[data-theme="warm"] .s-menu .hdr .ey,
body[data-theme="warm"] .s-faq .hdr .ey,
body[data-theme="warm"] .s-faqs .hdr .ey,
body[data-theme="warm"] .s-reviews .hdr .ey,
body[data-theme="warm"] .s-delivery .ey {
  color: var(--w-pink-deep) !important;
  font-weight: 700 !important;
}

/* Body text inside those sections — force warm-dark */
body[data-theme="warm"] .s-menu p,
body[data-theme="warm"] .s-delivery .text h2,
body[data-theme="warm"] .s-delivery .text p,
body[data-theme="warm"] .s-nbhd p,
body[data-theme="warm"] .s-faq p,
body[data-theme="warm"] .s-faqs p,
body[data-theme="warm"] .s-quote p,
body[data-theme="warm"] .s-quote blockquote,
body[data-theme="warm"] .s-nl p,
body[data-theme="warm"] .s-nl h2,
body[data-theme="warm"] .s-reviews p {
  color: var(--w-text) !important;
}
body[data-theme="warm"] .s-delivery .text h2 { color: var(--w-text-h) !important; }
body[data-theme="warm"] .s-quote blockquote { color: var(--w-text-h) !important; font-family: 'Playfair Display', serif !important; }

/* ---------- MENU PAGE intro boxes (the black rounded panels) ---------- */
body[data-theme="warm"] .menu-lead,
body[data-theme="warm"] .menu-intro,
body[data-theme="warm"] .m-intro,
body[data-theme="warm"] .m-note,
body[data-theme="warm"] .menu-note,
body[data-theme="warm"] .lead-box,
body[data-theme="warm"] .s-menu .lead,
body[data-theme="warm"] .s-menu .note {
  background: var(--w-bg-card) !important;
  color: var(--w-text) !important;
  border: 1px solid var(--w-line) !important;
  border-left: 4px solid var(--w-pink) !important;
  border-radius: var(--w-radius-md) !important;
  box-shadow: var(--w-shadow-soft);
}
body[data-theme="warm"] .menu-lead *,
body[data-theme="warm"] .menu-intro *,
body[data-theme="warm"] .m-intro *,
body[data-theme="warm"] .m-note *,
body[data-theme="warm"] .menu-note *,
body[data-theme="warm"] .lead-box *,
body[data-theme="warm"] .s-menu .lead *,
body[data-theme="warm"] .s-menu .note * {
  color: var(--w-text) !important;
}
body[data-theme="warm"] .menu-lead a,
body[data-theme="warm"] .menu-intro a,
body[data-theme="warm"] .m-intro a { color: var(--w-pink-deep) !important; font-weight: 600 !important; }

/* Catch any div or section with inline dark background that has an <h2>/<h3>/<p> child */
body[data-theme="warm"] [style*="background:#0A0A0A"],
body[data-theme="warm"] [style*="background: #0A0A0A"],
body[data-theme="warm"] [style*="background:#000"],
body[data-theme="warm"] [style*="background: #000"],
body[data-theme="warm"] [style*="background:#111"],
body[data-theme="warm"] [style*="background: #111"],
body[data-theme="warm"] [style*="background:#141414"],
body[data-theme="warm"] [style*="background: #141414"],
body[data-theme="warm"] [style*="background:#1C1C1C"],
body[data-theme="warm"] [style*="background: #1C1C1C"] {
  background: var(--w-bg-card) !important;
  color: var(--w-text) !important;
}

/* ---------- FAQ items (dark cards) ---------- */
body[data-theme="warm"] .qa-item,
body[data-theme="warm"] .faq-item,
body[data-theme="warm"] details,
body[data-theme="warm"] .s-faq .qa-item,
body[data-theme="warm"] .s-faqs .qa-item {
  background: var(--w-bg-card) !important;
  border: 1px solid var(--w-line) !important;
  border-radius: var(--w-radius-md) !important;
  box-shadow: var(--w-shadow-soft);
  color: var(--w-text) !important;
}
body[data-theme="warm"] .qa-item h3,
body[data-theme="warm"] .qa-item h4,
body[data-theme="warm"] .qa-item summary,
body[data-theme="warm"] details summary { color: var(--w-text-h) !important; }
body[data-theme="warm"] .qa-item p,
body[data-theme="warm"] details p { color: var(--w-text) !important; }

/* ---------- GrubHub / DoorDash buttons — keep dark for logo contrast ---------- */
body[data-theme="warm"] .btn-gh,
body[data-theme="warm"] .btn-dd {
  background: var(--w-dark) !important;
  color: #FFFFFF !important;
  border: 1.5px solid var(--w-dark) !important;
}
body[data-theme="warm"] .btn-gh *,
body[data-theme="warm"] .btn-dd * { color: #FFFFFF !important; }
body[data-theme="warm"] .btn-gh:hover,
body[data-theme="warm"] .btn-dd:hover {
  background: var(--w-pink) !important;
  border-color: var(--w-pink) !important;
}
body[data-theme="warm"] .btn-goog-read,
body[data-theme="warm"] .btn-goog-write {
  background: var(--w-bg-card) !important;
  color: var(--w-text-h) !important;
  border: 1.5px solid var(--w-line) !important;
}
body[data-theme="warm"] .btn-goog-read *,
body[data-theme="warm"] .btn-goog-write * { color: var(--w-text-h) !important; }

/* ---------- Contrast boost for pink text on cream ---------- */
/* #F71BB3 on cream = 2.8:1 (fails WCAG). Use #C7158E for text = 4.1:1 (passes) */


body[data-theme="warm"] .ey,
body[data-theme="warm"] .label {
  color: var(--w-pink-deep) !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
}

/* ---------- Hero on home — better readability with photo overlay ---------- */
body[data-theme="warm"] .s-hero::before {
  background:
    linear-gradient(rgba(255,249,245,.65) 0%, rgba(255,240,245,.35) 45%, rgba(255,249,245,.72) 100%),
    url('/images/hero-interior.webp') center/cover no-repeat !important;
}
body[data-theme="warm"] .s-hero h1 {
  color: var(--w-text-h) !important;
  text-shadow: 0 2px 24px rgba(255,255,255,.4);
}
body[data-theme="warm"] .s-hero h1 em { color: var(--w-pink) !important; }
body[data-theme="warm"] .s-hero .ey { color: var(--w-pink-deep) !important; }
body[data-theme="warm"] .s-hero .sub {
  color: var(--w-text-h) !important;
  font-weight: 500;
  text-shadow: 0 1px 12px rgba(255,255,255,.5);
}

/* ---------- Newsletter section ---------- */
body[data-theme="warm"] .s-nl .btn-subscribe {
  background: var(--w-pink) !important;
  color: #FFF !important;
}
body[data-theme="warm"] .s-nl .btn-subscribe:hover { background: var(--w-dark) !important; }
body[data-theme="warm"] .s-nl input[type="email"] {
  background: var(--w-bg-card) !important;
  color: var(--w-text-h) !important;
  border: 1px solid var(--w-line) !important;
}
body[data-theme="warm"] .s-nl input[type="email"]::placeholder { color: var(--w-text-muted) !important; }

/* ---------- Anything that stays #FFFFFF text needs to be checked in warm mode ---------- */
/* Force any element with inline color:#FFF (that isn't a button/CTA) to warm-dark */
body[data-theme="warm"] [style*="color:#FFF"]:not([class*="btn"]):not([class*="cta"]):not(footer *):not(.cm-footer *):not(.s-evening *):not(.n-cta):not(.nav-cta):not(.cm-order-strip-icon):not(.hero-cta *),
body[data-theme="warm"] [style*="color: #FFF"]:not([class*="btn"]):not([class*="cta"]):not(footer *):not(.cm-footer *):not(.s-evening *):not(.n-cta):not(.nav-cta):not(.cm-order-strip-icon):not(.hero-cta *) {
  color: var(--w-text-h) !important;
}

/* ---------- Blog toolbar (search + chips) — needs cream treatment too ---------- */
body[data-theme="warm"] .blog-toolbar .tb-inner {
  background: var(--w-bg-card) !important;
  border: 1px solid var(--w-line) !important;
  box-shadow: var(--w-shadow-soft) !important;
}
body[data-theme="warm"] .tb-search input {
  background: var(--w-bg-warm) !important;
  color: var(--w-text-h) !important;
  border: 1px solid var(--w-line) !important;
}
body[data-theme="warm"] .tb-search input::placeholder { color: var(--w-text-muted) !important; }
body[data-theme="warm"] .tb-search-icon { color: var(--w-text-muted) !important; }
body[data-theme="warm"] .chip {
  background: var(--w-bg-warm) !important;
  border: 1px solid var(--w-line) !important;
  color: var(--w-text) !important;
}
body[data-theme="warm"] .chip:hover {
  background: var(--w-pink-wash) !important;
  border-color: var(--w-pink) !important;
  color: var(--w-pink-deep) !important;
}
body[data-theme="warm"] .chip.active {
  background: var(--w-pink) !important;
  border-color: var(--w-pink) !important;
  color: #FFF !important;
}
body[data-theme="warm"] .chip-count { background: rgba(0,0,0,.08) !important; color: var(--w-text-h) !important; }
body[data-theme="warm"] .chip.active .chip-count { background: rgba(255,255,255,.22) !important; color: #FFF !important; }
body[data-theme="warm"] .tb-status { color: var(--w-text-muted) !important; }

/* ---------- Post cards (blog listing) ---------- */
body[data-theme="warm"] .post-card {
  background: var(--w-bg-card) !important;
  border: 1px solid var(--w-line) !important;
  border-radius: var(--w-radius-md) !important;
  box-shadow: var(--w-shadow-soft);
  color: var(--w-text) !important;
}
body[data-theme="warm"] .post-card h2 { color: var(--w-text-h) !important; }
body[data-theme="warm"] .post-card p { color: var(--w-text-soft) !important; }
body[data-theme="warm"] .post-card .pc-meta { color: var(--w-pink-deep) !important; font-weight: 700; }

/* ---------- Category chip on blog article hero ---------- */
body[data-theme="warm"] .hero-block .cat,
body[data-theme="warm"] .article-hero .label {
  background: var(--w-pink-wash) !important;
  color: var(--w-pink-deep) !important;
  border: 1px solid rgba(247,27,179,.25) !important;
  font-weight: 700 !important;
}

/* ---------- Ensure no dark-on-dark anywhere ---------- */
body[data-theme="warm"] h1,
body[data-theme="warm"] h2,
body[data-theme="warm"] h3,
body[data-theme="warm"] h4 {
  color: var(--w-text-h) !important;
}
/* But respect footer and evening/dark-panel sections */
body[data-theme="warm"] footer h1,
body[data-theme="warm"] footer h2,
body[data-theme="warm"] footer h3,
body[data-theme="warm"] footer h4,
body[data-theme="warm"] .s-evening h1,
body[data-theme="warm"] .s-evening h2,
body[data-theme="warm"] .s-evening h3,
body[data-theme="warm"] .hero-cta h1,
body[data-theme="warm"] .hero-cta h2,
body[data-theme="warm"] .hero-cta h3 {
  color: #FFFFFF !important;
}

/* =====================================================================
   V2.2 — Delivery card fix
   ---------------------------------------------------------------------
   The GrubHub / DoorDash cards use white logos + white text designed
   for a dark parent. On the warm theme we flip the CARDS themselves to
   dark so the white logos and white text remain readable — while the
   parent .s-delivery section stays cream.
   ===================================================================== */

body[data-theme="warm"] .delivery-card {
  background: var(--w-dark) !important;
  border: 1px solid var(--w-dark) !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 30px rgba(42,31,23,.10);
}
body[data-theme="warm"] .delivery-card:hover {
  background: #2A2A2A !important;
  box-shadow: 0 14px 40px rgba(247,27,179,.18), 0 6px 18px rgba(42,31,23,.15);
  transform: translateY(-2px);
}
body[data-theme="warm"] .delivery-card .dc-sub {
  color: rgba(255,255,255,.72) !important;
}
body[data-theme="warm"] .delivery-card .dc-arrow {
  color: var(--w-pink) !important;
}
/* Keep the orange/red left-border brand strips */
body[data-theme="warm"] .delivery-card.gh-card { border-left: 3px solid #F86B00 !important; }
body[data-theme="warm"] .delivery-card.dd-card { border-left: 3px solid #FF3008 !important; }

/* Deeper hero contrast on H2 in delivery section */
body[data-theme="warm"] .s-delivery .text h2 {
  color: var(--w-text-h) !important;
  text-shadow: none !important;
}
body[data-theme="warm"] .s-delivery .text p {
  color: var(--w-text-soft) !important;
}
body[data-theme="warm"] .s-delivery .eyebrow,
body[data-theme="warm"] .s-delivery span.eyebrow[style*="F71BB3"] {
  color: var(--w-pink-deep) !important;
  font-weight: 700 !important;
}

/* =====================================================================
   V2.3 — Button text + allergen box fixes
   ---------------------------------------------------------------------
   Prior rule: `a:not(.btn):not(.n-cta)...` accidentally caught the
   `.pri`, `.btn-primary`, `.tel`, and `.sec` button variants and forced
   pink text onto pink buttons. Fix by explicitly overriding EVERY known
   button variant, plus flipping the `.allergen` box on menu page.
   ===================================================================== */

/* ---------- .btn variants — make sure text is readable ---------- */
body[data-theme="warm"] .btn-primary,
body[data-theme="warm"] a.btn-primary {
  background: var(--w-pink) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  border: 2px solid var(--w-pink) !important;
  padding: 14px 32px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
}
body[data-theme="warm"] .btn-primary:hover,
body[data-theme="warm"] a.btn-primary:hover {
  background: var(--w-dark) !important;
  color: #FFFFFF !important;
  border-color: var(--w-dark) !important;
}
body[data-theme="warm"] .btn-dark,
body[data-theme="warm"] a.btn-dark {
  background: transparent !important;
  color: var(--w-pink) !important;
  border-radius: 999px !important;
  border: 2px solid var(--w-pink) !important;
  padding: 14px 32px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
}
body[data-theme="warm"] .btn-dark:hover,
body[data-theme="warm"] a.btn-dark:hover {
  background: var(--w-pink) !important;
  color: #FFFFFF !important;
}

/* ---------- cm-order-strip button variants (.pri / .sec / .tel) ---------- */
body[data-theme="warm"] .cm-order-strip-btns a.pri {
  background: var(--w-pink) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}
body[data-theme="warm"] .cm-order-strip-btns a.pri:hover {
  background: var(--w-dark) !important;
  color: #FFFFFF !important;
}
body[data-theme="warm"] .cm-order-strip-btns a.sec {
  background: transparent !important;
  color: var(--w-text-h) !important;
  border: 1.5px solid var(--w-text-h) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}
body[data-theme="warm"] .cm-order-strip-btns a.sec:hover {
  background: var(--w-text-h) !important;
  color: #FFFFFF !important;
}
body[data-theme="warm"] .cm-order-strip-btns a.tel {
  color: var(--w-pink-deep) !important;
  font-weight: 600 !important;
}

/* ---------- Order CTA section on menu page ---------- */
body[data-theme="warm"] .order-cta {
  background: var(--w-bg-card) !important;
  border: 1px solid var(--w-line) !important;
  border-radius: var(--w-radius-md) !important;
  box-shadow: var(--w-shadow-soft);
  padding: 40px 32px !important;
}
body[data-theme="warm"] .order-cta h3 { color: var(--w-text-h) !important; }
body[data-theme="warm"] .order-cta p { color: var(--w-text) !important; }

/* ---------- ALLERGEN NOTICE box (menu page) ---------- */
body[data-theme="warm"] .allergen,
body[data-theme="warm"] .allergens,
body[data-theme="warm"] .dietary-note,
body[data-theme="warm"] .menu-note,
body[data-theme="warm"] .note-box {
  background: var(--w-bg-card) !important;
  border: 1px solid var(--w-line) !important;
  border-left: 4px solid var(--w-pink) !important;
  border-radius: var(--w-radius-md) !important;
  box-shadow: var(--w-shadow-soft);
  color: var(--w-text) !important;
}
body[data-theme="warm"] .allergen *,
body[data-theme="warm"] .allergens *,
body[data-theme="warm"] .dietary-note *,
body[data-theme="warm"] .menu-note *,
body[data-theme="warm"] .note-box * {
  color: var(--w-text) !important;
}
body[data-theme="warm"] .allergen p,
body[data-theme="warm"] .menu-note p { color: var(--w-text) !important; }

/* ---------- Overall safety net: any button variant name gets readable text ---------- */
body[data-theme="warm"] a.btn,
body[data-theme="warm"] button.btn,
body[data-theme="warm"] .btn {
  color: inherit;
}
body[data-theme="warm"] a[class*="btn-"],
body[data-theme="warm"] button[class*="btn-"] {
  /* Ensure buttons get their explicit color, not the global link pink */
  text-decoration: none !important;
}

/* ---------- Global link rule: apply ONLY to body-content links ---------- */
/* Undo prior over-broad rule with a more targeted whitelist approach */
body[data-theme="warm"] p a,
body[data-theme="warm"] li a,
body[data-theme="warm"] .body a,
body[data-theme="warm"] .article-body a,
body[data-theme="warm"] .lede a,
body[data-theme="warm"] .qa-item a,
body[data-theme="warm"] .allergen a,
body[data-theme="warm"] .body-copy a {
  color: var(--w-pink-deep) !important;
  font-weight: 500;
  border-bottom: 1px solid rgba(199,21,142,.3);
}
body[data-theme="warm"] p a:hover,
body[data-theme="warm"] li a:hover,
body[data-theme="warm"] .body a:hover,
body[data-theme="warm"] .article-body a:hover,
body[data-theme="warm"] .allergen a:hover {
  color: var(--w-dark) !important;
  border-bottom-color: var(--w-dark);
}
/* Buttons inside p/li override the above (they have their own colors) */
body[data-theme="warm"] p a.btn,
body[data-theme="warm"] p a[class*="btn-"],
body[data-theme="warm"] li a.btn,
body[data-theme="warm"] li a[class*="btn-"] {
  border-bottom: none !important;
}

/* ---------- Reset the earlier over-broad :not() rule to a no-op ---------- */
/* Explicitly UN-set the deep-pink color for buttons that fell through */
body[data-theme="warm"] .btn-primary,
body[data-theme="warm"] .btn-dark,
body[data-theme="warm"] .btn-white,
body[data-theme="warm"] .btn-outline,
body[data-theme="warm"] .btn-gh,
body[data-theme="warm"] .btn-dd,
body[data-theme="warm"] .btn-gh *,
body[data-theme="warm"] .btn-dd *,
body[data-theme="warm"] .pri,
body[data-theme="warm"] .sec,
body[data-theme="warm"] .n-cta,
body[data-theme="warm"] .nav-cta {
  border-bottom: none !important;
}


/* =====================================================================
   V2.4 — Final button/box fixes
   ---------------------------------------------------------------------
   1) `.highlight-erin` box (cleanup blog "Huge love to Erin") — flip
      from dark to cream card so text is readable on warm background
   2) `.cta-band .btn-white` on cleanup blog CTA — was invisible white
      on pink; now solid white bg with pink text
   3) Blog-index order strip .pri buttons — pink-on-pink because old
      :not() blacklist rule beat my newer rule on specificity. That rule
      was removed above; belt-and-suspenders overrides added below with
      ultra-high specificity.
   ===================================================================== */

/* ---------- Highlight-erin box → cream card ---------- */
body[data-theme="warm"] .highlight-erin {
  background: var(--w-bg-card) !important;
  border: 1px solid var(--w-line) !important;
  border-left: 4px solid var(--w-pink) !important;
  border-radius: var(--w-radius-md) !important;
  box-shadow: var(--w-shadow-soft);
  color: var(--w-text) !important;
  overflow: visible !important;
}
body[data-theme="warm"] .highlight-erin::before {
  display: none !important;
}
body[data-theme="warm"] .highlight-erin h3 {
  color: var(--w-text-h) !important;
}
body[data-theme="warm"] .highlight-erin p {
  color: var(--w-text) !important;
}
body[data-theme="warm"] .highlight-erin a {
  color: var(--w-pink-deep) !important;
  border-bottom: 1px solid rgba(199,21,142,.3);
  font-weight: 500;
}
body[data-theme="warm"] .highlight-erin a:hover {
  color: var(--w-dark) !important;
}

/* ---------- CTA band buttons on pink gradient background ---------- */
/* .btn-white on a pink CTA → white bg + brand-pink text (readable) */
body[data-theme="warm"] .cta-band .btn-white,
body[data-theme="warm"] .hero-cta .btn-white,
body[data-theme="warm"] section[class*="cta"] .btn-white {
  background: #FFFFFF !important;
  color: var(--w-pink-deep) !important;
  border: 2px solid #FFFFFF !important;
  border-radius: 999px !important;
  padding: 14px 30px !important;
  font-weight: 700 !important;
}
body[data-theme="warm"] .cta-band .btn-white:hover,
body[data-theme="warm"] .hero-cta .btn-white:hover,
body[data-theme="warm"] section[class*="cta"] .btn-white:hover {
  background: var(--w-dark) !important;
  color: #FFFFFF !important;
  border-color: var(--w-dark) !important;
}
/* .btn-outline on pink CTA — white outline + white text stays */
body[data-theme="warm"] .cta-band .btn-outline,
body[data-theme="warm"] .hero-cta .btn-outline,
body[data-theme="warm"] section[class*="cta"] .btn-outline {
  background: transparent !important;
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
  border-radius: 999px !important;
  padding: 14px 30px !important;
  font-weight: 600 !important;
}
body[data-theme="warm"] .cta-band .btn-outline:hover,
body[data-theme="warm"] .hero-cta .btn-outline:hover,
body[data-theme="warm"] section[class*="cta"] .btn-outline:hover {
  background: #FFFFFF !important;
  color: var(--w-pink-deep) !important;
}

/* ---------- ORDER STRIP button overrides — ultra-high specificity ---------- */
/* Repeated with body attribute + section class + wrapper + .pri class for max specificity */
body[data-theme="warm"] section.cm-order-strip .cm-order-strip-btns a.pri,
body[data-theme="warm"] .cm-order-strip.cm-order-strip .cm-order-strip-btns a.pri,
body[data-theme="warm"] .cm-order-strip .cm-order-strip-btns > a.pri {
  background: var(--w-pink) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  border: 2px solid var(--w-pink) !important;
}
body[data-theme="warm"] section.cm-order-strip .cm-order-strip-btns a.pri:hover,
body[data-theme="warm"] .cm-order-strip .cm-order-strip-btns > a.pri:hover {
  background: var(--w-dark) !important;
  border-color: var(--w-dark) !important;
  color: #FFFFFF !important;
}
body[data-theme="warm"] section.cm-order-strip .cm-order-strip-btns a.sec,
body[data-theme="warm"] .cm-order-strip .cm-order-strip-btns > a.sec {
  background: transparent !important;
  color: var(--w-text-h) !important;
  border: 1.5px solid var(--w-text-h) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}
body[data-theme="warm"] section.cm-order-strip .cm-order-strip-btns a.tel,
body[data-theme="warm"] .cm-order-strip .cm-order-strip-btns > a.tel {
  color: var(--w-pink-deep) !important;
  font-weight: 600 !important;
}


/* =====================================================================
   V2.5 — Nav logo + content image scoping
   ---------------------------------------------------------------------
   The prior global `img { border-radius; box-shadow }` rule was
   catching the nav logo (a transparent PNG) and giving it a soft
   drop-shadow that read as a cream pill wrapper. Scope those styles
   to actual content images only, and explicitly reset any image
   sitting inside nav or list-item chrome.
   ===================================================================== */

/* Round + shadow ONLY content images (figures, article body, hero) */
body[data-theme="warm"] figure img,
body[data-theme="warm"] .body img,
body[data-theme="warm"] .article-body img,
body[data-theme="warm"] .hero-image img,
body[data-theme="warm"] .post-card .pc-img img,
body[data-theme="warm"] .video-row video,
body[data-theme="warm"] .pc-img img {
  border-radius: var(--w-radius-md) !important;
  box-shadow: var(--w-shadow-lift) !important;
}

/* Explicitly reset chrome images — logo, icons, delivery button logos */
body[data-theme="warm"] .nav-logo img,
body[data-theme="warm"] nav.nav img,
body[data-theme="warm"] header img,
body[data-theme="warm"] .cm-nav img,
body[data-theme="warm"] .footer-brand img,
body[data-theme="warm"] .cm-footer img,
body[data-theme="warm"] footer img,
body[data-theme="warm"] .cm-powered-by img,
body[data-theme="warm"] .delivery-card img,
body[data-theme="warm"] .btn-gh img,
body[data-theme="warm"] .btn-dd img,
body[data-theme="warm"] .nav-order-drop img,
body[data-theme="warm"] img[width="18"],
body[data-theme="warm"] img[width="20"],
body[data-theme="warm"] img[width="80"] {
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Kill any accidental inline background that might be showing behind logo */
body[data-theme="warm"] .nav-logo,
body[data-theme="warm"] .nav-logo a {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}


/* =====================================================================
   V2.6 — Nav visibility fix
   ---------------------------------------------------------------------
   On the cleanup blog page, the mobile @media rules got unwrapped and
   were applying globally — hiding `.nav-links` and showing `.nav-toggle`
   on desktop. Force desktop behavior at 901px+ regardless of upstream CSS.
   ===================================================================== */

@media (min-width: 901px) {
  body[data-theme="warm"] .nav-links {
    display: flex !important;
    flex-direction: row !important;
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    gap: 28px !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
  }
  body[data-theme="warm"] .nav-toggle,
  body[data-theme="warm"] .burger {
    display: none !important;
  }
}
@media (max-width: 900px) {
  body[data-theme="warm"] .nav-toggle,
  body[data-theme="warm"] .burger {
    display: flex !important;
  }
}
/* Nav link styling — warm theme always */
body[data-theme="warm"] .nav-links a {
  color: var(--w-text-h) !important;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: none !important;
}
body[data-theme="warm"] .nav-links a:hover,
body[data-theme="warm"] .nav-links a.active {
  color: var(--w-pink-deep) !important;
}
body[data-theme="warm"] .nav-links a.nav-cta,
body[data-theme="warm"] .nav-links a.n-cta {
  background: var(--w-pink) !important;
  color: #FFFFFF !important;
  padding: 10px 22px !important;
  border-radius: 999px !important;
}
body[data-theme="warm"] .nav-links a.nav-cta:hover,
body[data-theme="warm"] .nav-links a.n-cta:hover {
  background: var(--w-dark) !important;
  color: #FFFFFF !important;
}