/* ==========================================================================
   Menu page — light theme
   Loaded after home.css on the menu page templates only.

   home.css is shared with the home page, /about-us/ and /reservation/, which
   stay dark, so this is an overlay rather than an edit to it — the same
   approach as home-light.css.

   Scoped to the body template class. The menu markup has no page-root class
   of its own (just <main id="mfMain">), and the chrome lives outside <main>
   anyway, so the body is the only element that covers everything.

   The selector matches the shared `page-template-page-menu-` prefix, so it
   covers both the Laval and Saint-Jerome menus from one rule rather than
   duplicating every selector per page.
   ========================================================================== */

body[class*="page-template-page-menu-"] {
    background-color: #FAF7F2;

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

    /* ---------- Accents ----------
       Gold darkened for a light ground (#D4A04A is ~2.2:1 on white). */
    --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;
    /* Stays dark: it is the label on the gold "add to cart" and active tab. */
    --mf-text-inverse: #1A1713;

    /* ---------- Borders ---------- */
    --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

   The page hero is a photograph with white type over it, and the header,
   mobile nav and footer are dark site-wide. All of them read the same tokens,
   so the dark set is restored inside them. .mf-mobile-nav is a sibling of
   <header>, not a child, so it needs naming separately.
   ========================================================================== */
body[class*="page-template-page-menu-"] .mf-page-hero,
body[class*="page-template-page-menu-"] .mf-header,
body[class*="page-template-page-menu-"] .mf-mobile-nav,
body[class*="page-template-page-menu-"] .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;
}

/* ==========================================================================
   Hardcoded values in home.css that the tokens cannot reach
   ========================================================================== */

/* Dish name and price were white-on-dark. */
body[class*="page-template-page-menu-"] .mf-menu__item-name {
    color: var(--mf-text-primary);
}

body[class*="page-template-page-menu-"] .mf-menu__item-price {
    color: var(--mf-text-primary);
    background: rgba(163, 113, 28, 0.12);
}

/* The dotted leader between dish and price. */
body[class*="page-template-page-menu-"] .mf-menu__item-top::after {
    border-bottom-color: var(--mf-border-light);
}

/* Category tabs: the hover tint was pitched against black. */
body[class*="page-template-page-menu-"] .mf-menu__tab:hover {
    background: rgba(163, 113, 28, 0.10);
}

body[class*="page-template-page-menu-"] .mf-menu__tab:hover span,
body[class*="page-template-page-menu-"] .mf-menu__tab:hover i {
    color: var(--mf-gold);
}

/* Row hover at 0.03 alpha is invisible on cream. */
body[class*="page-template-page-menu-"] .mf-menu__item:hover {
    background: rgba(163, 113, 28, 0.07);
}

/* Quantity stepper: white fills and white type. */
body[class*="page-template-page-menu-"] .mf-qty {
    background: #FFFFFF;
}

body[class*="page-template-page-menu-"] .mf-qty__input {
    color: var(--mf-text-primary);
}

body[class*="page-template-page-menu-"] .mf-qty__btn:hover {
    color: var(--mf-text-primary);
    background: rgba(26, 23, 19, 0.06);
}

/* The toast sits on --mf-bg-tertiary, which is now cream — white text on it
   would be unreadable. */
body[class*="page-template-page-menu-"] .mf-toast {
    color: var(--mf-text-primary);
    box-shadow: 0 12px 40px rgba(26, 23, 19, 0.18);
}

body[class*="page-template-page-menu-"] .mf-toast__link {
    color: var(--mf-red);
}

/* Gold buttons carry white labels.

   The fill is deepened to #A3711C along with it: home.css paints .mf-atc with
   --mf-gold-light (#C08C27 on this palette), and white on that is only
   ~2.9:1. On #A3711C it is ~4.6:1, which clears AA. Hover darkens rather than
   lightening, which the default would have done. The active category tab gets
   the same treatment so the two browns match.

   .mf-atc.is-added keeps its fixed green and dark label — that state is a
   confirmation, not a call to action. */
body[class*="page-template-page-menu-"] .mf-atc,
body[class*="page-template-page-menu-"] .mf-menu__tab--active {
    background: #A3711C;
    border-color: #A3711C;
}

body[class*="page-template-page-menu-"] .mf-atc,
body[class*="page-template-page-menu-"] .mf-menu__tab--active span,
body[class*="page-template-page-menu-"] .mf-menu__tab--active i,
body[class*="page-template-page-menu-"] .mf-menu__tab--active:hover span,
body[class*="page-template-page-menu-"] .mf-menu__tab--active:hover i {
    color: #FFFFFF;
}

body[class*="page-template-page-menu-"] .mf-atc:hover {
    background: #8A5E14;
    color: #FFFFFF;
}

body[class*="page-template-page-menu-"] .mf-atc svg,
body[class*="page-template-page-menu-"] .mf-atc i {
    color: #FFFFFF;
    fill: currentColor;
}

/* A seam between the last light section and the dark footer. */
body[class*="page-template-page-menu-"] .mf-menu {
    border-bottom: 1px solid var(--mf-border);
}