/* ==========================================================================
   Home page — light theme
   Loaded after home.css, on the front page only.

   Why an overlay instead of editing home.css: that file is shared with
   /saint-jerome/, /menu-laval/, /menu-saint-jerome/, /about-us/ and
   /reservation/, all of which stay dark. Everything here is therefore scoped
   to body.home and cannot reach them.

   Approach: redefine the global --mf-* colour tokens on body.home, so every
   rule in home.css and global.css that reads a token flips without being
   rewritten. The two media bands (hero slider, "savor" video) set white type
   over footage, so they get the dark token set put back.
   ========================================================================== */

body.home {
    background-color: #FAF7F2;

    /* ---------- Surfaces ---------- */
    --mf-bg-primary: #FAF7F2;
    --mf-bg-secondary: #FFFFFF;
    --mf-bg-tertiary: #F2EDE4;
    --mf-bg-card: #FFFFFF;

    /* ---------- Accents ----------
       Gold is darkened: the brand #D4A04A sits at only ~2.2:1 on white, so it
       cannot carry text or thin strokes here. The brand red #C43030 already
       clears AA at ~4.9:1 and is kept exactly. */
    --mf-gold: #A3711C;
    --mf-gold-light: #C08C27;
    --mf-gold-glow: rgba(163, 113, 28, 0.14);
    --mf-red: #C43030;
    --mf-red-dark: #8B1A1A;
    --mf-red-glow: rgba(196, 48, 48, 0.10);

    /* ---------- Text ---------- */
    --mf-text-primary: #1A1713;
    --mf-text-secondary: #6A625A;
    --mf-text-muted: #938B81;

    /* Deliberately NOT white. Every consumer of this token paints onto a gold
       fill — .mf-btn--primary, .mf-popular__card-link:hover,
       .mf-popular__arrow:hover, .mf-about__play, the active FAQ icon and
       .mf-testimonial__avatar all set `background: var(--mf-gold)` on the
       same rule. It means "type that reads on an accent fill", not "the
       opposite of the theme", so it stays dark. */
    --mf-text-inverse: #1A1713;

    /* ---------- Borders & overlays ---------- */
    --mf-border: #E6DFD4;
    --mf-border-light: #D6CDBE;
    --mf-overlay-dark: rgba(26, 23, 19, 0.55);
    --mf-overlay-deeper: rgba(26, 23, 19, 0.72);
}

/* ==========================================================================
   Everything that stays dark

   Two groups, same token set:

   1. Media bands — the hero slider and the "savor" video band set white type
      over footage, so flipping them would make the headlines unreadable.
      Their own scrims (rgba(11,11,15,x) in home.css) are left untouched.

   2. Site chrome — the header, the mobile nav overlay and the footer are dark
      site-wide. They live inside <body>, so the light tokens above reach them
      and would otherwise paint dark text on dark chrome and turn the footer
      white. Note .mf-mobile-nav is a SIBLING of <header>, not a child
      (header.php closes </header> before it), so it needs naming separately.
   ========================================================================== */
body.home .mf-hero,
body.home .mf-savor,
body.home .mf-header,
body.home .mf-mobile-nav,
body.home .mf-footer {
    --mf-bg-primary: #0B0B0F;
    --mf-bg-secondary: #141318;
    --mf-bg-tertiary: #1E1D24;
    --mf-bg-card: #19181F;

    --mf-gold: #D4A04A;
    --mf-gold-light: #E8C06A;
    --mf-gold-glow: rgba(212, 160, 74, 0.15);

    --mf-text-primary: #F5EFE6;
    --mf-text-secondary: #9A9590;
    --mf-text-muted: #5A5550;
    --mf-text-inverse: #0B0B0F;

    --mf-border: #2A2520;
    --mf-border-light: #3A3530;
}

/* ==========================================================================
   Depth
   home.css shadows were pitched against a near-black ground; on cream they
   read as grey smudges. Warm them and cut the opacity.
   ========================================================================== */
body.home .mf-popular__card:hover {
    box-shadow: 0 10px 34px rgba(26, 23, 19, 0.12),
                0 0 0 1px rgba(163, 113, 28, 0.18);
}

body.home .mf-popular__card:hover,
body.home .mf-blog__card:hover {
    border-color: rgba(163, 113, 28, 0.38);
}

body.home .mf-toast {
    box-shadow: 0 12px 40px rgba(26, 23, 19, 0.18);
}

/* ==========================================================================
   Component corrections
   ========================================================================== */

/* Primary buttons carry white labels.

   The fill is set explicitly rather than left to --mf-gold, because the two
   primary buttons on this page sit on different golds: the hero keeps the dark
   token set (#D4A04A) while the locations cards use the light one (#A3711C).
   White on #D4A04A is only ~2.1:1, so the hero button is deepened to match and
   the label stays readable — 4.6:1, which clears AA.

   Hover is overridden too: the default lightens to --mf-gold-light, which would
   drop white text to ~1.7:1, so it darkens instead. */
body.home .mf-btn--primary {
    background: #A3711C;
    color: #FFFFFF;
}

body.home .mf-btn--primary:hover {
    background: #8A5E14;
    color: #FFFFFF;
}

/* The two "View Menu" buttons in the locations cards go brand red instead of
   gold. White on #C43030 is ~4.9:1, so the label set above still holds; hover
   darkens rather than lightens for the same reason. */
body.home .mf-locs__actions .mf-btn--primary {
    background: #C43030;
    color: #FFFFFF;
}

body.home .mf-locs__actions .mf-btn--primary:hover {
    background: #A82424;
    color: #FFFFFF;
}

/* The delivery tiles put brand logos on a white disc, which vanishes against
   a white card — give it a hairline and a softer, warmer shadow. */
body.home .mf-delivery__icon {
    border: 1px solid #E6DFD4;
    box-shadow: 0 4px 14px rgba(26, 23, 19, 0.10);
}

/* The select caret is an inline SVG with the colour baked in, so it does not
   follow the tokens — #9A9590 is only ~2.9:1 on a white control. Restated as
   a longhand (not the `background` shorthand) so the repeat, position and
   padding set in home.css survive. */
body.home .mf-form-group select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%236A625A' stroke-width='1.5' fill='none' fill-rule='evenodd'/></svg>");
}

/* Event-hall form feedback: the dark-theme pastels are far too pale on white
   (#6FCF97 is ~1.9:1). */
body.home .mf-eventhall__form-msg--success {
    color: #1E7A4D;
}

body.home .mf-eventhall__form-msg--error {
    color: #C0261F;
}

/* The decorative section tints are gold/red radials at 0.03–0.06 alpha, set
   to glow against black. At that strength they simply vanish on cream, so the
   gradients are restated at roughly triple the alpha and in the darker gold
   — enough to keep the sections from reading as flat white slabs. Bumping
   `opacity` would do nothing here: these pseudo-elements are already fully
   opaque, the alpha lives inside the gradient stops. */
body.home .mf-popular::before {
    background:
        radial-gradient(ellipse at 10% 20%, rgba(163, 113, 28, 0.11) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 80%, rgba(196, 48, 48, 0.08) 0%, transparent 50%);
}

body.home .mf-delivery::before {
    background:
        radial-gradient(circle at 20% 30%, rgba(163, 113, 28, 0.13) 0%, transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(196, 48, 48, 0.10) 0%, transparent 45%);
}

body.home .mf-eventhall::before {
    background: radial-gradient(circle at 85% 15%, rgba(163, 113, 28, 0.15) 0%, transparent 50%);
}

body.home .mf-testimonial::before {
    background:
        radial-gradient(circle at 15% 20%, rgba(163, 113, 28, 0.15) 0%, transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(196, 48, 48, 0.11) 0%, transparent 45%);
}

/* Hairline between the last light section and the dark footer, so the two do
   not butt together without a seam. */
body.home .mf-testimonial {
    border-bottom: 1px solid #E6DFD4;
}