/* ============================================================
 * Theme v13 — Variation 9: "Midnight" (genuine DARK theme)
 * ------------------------------------------------------------
 * Variations 1-8 only swap the accent and set --dark (the TEXT
 * colour); they leave --bodyBg near-white, so the page stays
 * light. This variation darkens the actual canvas instead.
 *
 * KEY DECISIONS (see why in the theme's style.css):
 *  - --dark (#2C2C2C) is OVERLOADED: it is the body/header text
 *    colour AND a real dark surface (dropdown bg, mobile menu bg,
 *    hamburger lines, dark text on the orange button, field icon,
 *    scrollbar track). So we DO NOT flip --dark. We keep it dark
 *    and only darken --bodyBg (the canvas) + flip the handful of
 *    text/border colours that now sit on the dark canvas.
 *  - The feature sections (hero, "From the menu", chef, reservation,
 *    gallery) already use var(--black) + white text, so they need
 *    ZERO changes here.
 *  - Everything is scoped to `body.bgTheme` (the HOMEPAGE body class,
 *    layouts/main.php). Inner pages use their own stylesheets/body
 *    class and are intentionally left untouched.
 *  - The accent (--primary) is kept as the theme's signature orange,
 *    which reads beautifully on a dark canvas.
 * ============================================================ */

:root {
  --titleFont: Georgia, "Times New Roman", Times, serif;
}

body.bgTheme {
  /* Dark canvas — cascades to header, about, menu, blog, reviews, footer.
     Feature sections keep their own var(--black). */
  --bodyBg: #17110D;               /* warm near-black */
  --dark: #211a15;                 /* keep DARK: nudged warm so dropdowns/mobile-menu match the canvas */
  --darkText: #ECE3D6;             /* warm cream — the page text colour on the dark canvas */
  --darkBorder: rgba(236, 227, 214, 0.14);
  --darkBorderStrong: rgba(236, 227, 214, 0.28);

  background-color: var(--bodyBg);
  color: var(--darkText);
}

/* ---- Header / nav ---- */
body.bgTheme header.headerSection {
  background-color: var(--bodyBg);
  color: var(--darkText);
  border-bottom: 1px solid var(--darkBorder);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
/* Hamburger lines sit on the dark header → make them light */
body.bgTheme .menuToggle > a > span {
  background-color: var(--darkText);
}

/* ---- Outline button (header "Register") on the dark header ----
   Scoped to .headerSection so it NEVER touches the login/register/
   forgot-password modals, whose FB/Google buttons are also
   `.btn.btnOutline` — an unscoped rule here made them transparent +
   cream-text (invisible) on the white modal. */
body.bgTheme .headerSection .btn.btnOutline > span {
  border-color: var(--darkBorderStrong);
  background-color: transparent;
  color: var(--darkText);
}
body.bgTheme .headerSection .btn.btnOutline::before {
  outline-color: rgba(236, 227, 214, 0.4);
}
body.bgTheme .headerSection .btn.btnOutline:hover::before {
  outline-color: rgba(236, 227, 214, 0);
}

/* ---- Modals stay a light/white surface even on the dark theme:
   reset the palette tokens inside them so buttons (FB/Google outline
   buttons use var(--bodyBg) fill + var(--dark) border) and text render
   like the base light theme — matching the other colour variations.
   NOT scoped to body.bgTheme: the same login/register modals appear on
   inner pages too (where body:not(.bgTheme) sets a dark --bodyBg), so
   this must reset them everywhere. */
.modalNewstyle .modal-content {
  --bodyBg: #FAF4EE;
  --dark: #2C2C2C;
  --darkText: #2C2C2C;
  color: #2C2C2C;   /* the modal is a white surface → dark text (don't inherit the canvas cream) */
}

/* ---- Menu / "Special Selection" section (on the dark canvas) ---- */
body.bgTheme .filterTrigger {
  border-color: var(--darkBorder);
}
body.bgTheme .dishLine {
  border-top-color: var(--darkBorderStrong);
  opacity: 1;                       /* base sets opacity:0.5; the rgba already carries the fade */
}

/* ---- Footer divider lines (base hard-codes a cream→black→cream gradient) ---- */
body.bgTheme .footerBottom::before,
body.bgTheme .footerBottom::after {
  border-image: linear-gradient(to right, transparent, rgba(236, 227, 214, 0.22), transparent);
  border-image-slice: 1;
}


/* ============================================================
 * INNER PAGES — HEADER + FOOTER ONLY
 * ------------------------------------------------------------
 * Parity with variations 1-8: those re-tint the shared inner
 * header/footer via the palette tokens. We do the same for the
 * dark palette — WITHOUT touching inner page content (menu, cart,
 * product cards, forms stay exactly as they are).
 *
 * Scope = body:not(.bgTheme) → every inner layout, never the
 * homepage (which is body.bgTheme, handled above).
 *
 * WHY the token alone is enough for the surfaces: the inner header
 * bg (style-inner.css `header.headerSection` + the scroll
 * `.fixed-header .headerSection` rule) and the footer bg
 * (footer-inner.php `.footerColMain`) are BOTH `var(--bodyBg)`,
 * and NOTHING in the inner content uses var(--bodyBg) (verified in
 * newthemechangeui.css / global style.css). So redefining the token
 * darkens exactly the header + footer and nothing else. We then
 * only flip their text/border colours (which use the kept-dark
 * --dark, or are hard-coded) to light.
 * ============================================================ */
body:not(.bgTheme) {
  --bodyBg: #17110D;   /* darkens ONLY the inner header + footer bg (+ header outline-btn bg) */
}

/* Header text / accents on the now-dark inner header */
body:not(.bgTheme) header.headerSection {
  color: #ECE3D6;
  border-bottom-color: rgba(236, 227, 214, 0.14);
}
body:not(.bgTheme) header.headerSection .navItems a {
  color: #ECE3D6;
}
body:not(.bgTheme) .menuToggle > a > span {
  background-color: #ECE3D6;
}
body:not(.bgTheme) .headerSection .btn.btnOutline > span {
  border-color: rgba(236, 227, 214, 0.28);
  color: #ECE3D6;
}

/* Footer text on the now-dark inner footer
   (footer-inner.php hard-codes #2C2C2C on h3/p and a cream border) */
body:not(.bgTheme) .footerColMain {
  color: #ECE3D6;
  border-color: rgba(236, 227, 214, 0.14) !important;
}
body:not(.bgTheme) .Inner-Footer .footerCol h3,
body:not(.bgTheme) .Inner-Footer .footerCol p {
  color: #ECE3D6 !important;
}
body:not(.bgTheme) .footerColMain #custom-links {
  color: #ECE3D6;
}

/* Footer divider lines (hard-coded cream→black→cream gradients) */
body:not(.bgTheme) .footerBottom::before,
body:not(.bgTheme) .footerBottom::after,
body:not(.bgTheme) .Inner-Footer .footerBottom,
body:not(.bgTheme) .footerCopyright {
  border-image: linear-gradient(to right, transparent, rgba(236, 227, 214, 0.22), transparent);
  border-image-slice: 1;
}