/* ==========================================================================
   Location pages — light theme
   Shared by page-laval.php (and page-saint-jerome.php once rewritten).

   Scoped to .mf-locpage. home.css is NOT loaded on these pages, so nothing
   here has to fight it; the shared primitives (.mf-container, .mf-btn,
   .mf-subheading, .mf-reveal) come from global.css.

   Light palette is applied by redefining the global --mf-* colour tokens on
   the page root, the same approach as the home page and the ordering flow.
   The chrome (header, footer, mobile nav) sits outside this element, so it
   stays dark on its own.
   ========================================================================== */

.mf-locpage {
    /* ---------- 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); brand red
       kept as-is at ~4.9:1. */
    --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: its consumers paint onto a gold fill, not onto the page. */
    --mf-text-inverse: #1A1713;

    /* ---------- Borders ---------- */
    --mf-border: #E6DFD4;
    --mf-border-light: #D6CDBE;

    background: var(--mf-bg-primary);
    color: var(--mf-text-primary);
}

/* The dark page background is painted on <body> by global.css, which a token
   override on this <main> cannot reach. */
body.page-template-page-laval,
body.page-template-page-saint-jerome {
    background-color: #FAF7F2;
}

/* Primary buttons: white label on the brand red, matching the home page's
   locations cards. White on #C43030 is ~4.9:1; hover darkens rather than
   lightening, which the gold default would have done. */
.mf-locpage .mf-btn--primary {
    background: #C43030;
    color: #FFFFFF;
}

.mf-locpage .mf-btn--primary:hover {
    background: #A82424;
    color: #FFFFFF;
}

/* ---------- Shared type ---------- */
.mf-lp-h2 {
    margin: 0 0 1rem;
    font-family: var(--mf-font-display);
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--mf-text-primary);
}

.mf-lp-prose p,
p.mf-lp-prose {
    margin: 0 0 1rem;
    font-size: 1.02rem;
    line-height: 1.85;
    color: var(--mf-text-secondary);
}

.mf-lp-prose p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.mf-lp-hero {
    position: relative;
    overflow: hidden;
    /* Clears the fixed header: 190px wide-screen, 88px below 1280px. */
    padding: calc(var(--mf-header-h, 170px) + 2.5rem) 0 clamp(2.5rem, 5vw, 4rem);
    background:
        radial-gradient(ellipse at 15% 0%, rgba(163, 113, 28, 0.13) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 10%, rgba(196, 48, 48, 0.09) 0%, transparent 55%),
        var(--mf-bg-secondary);
    border-bottom: 1px solid var(--mf-border);
}

/* ---------- Photographic hero ----------
   The storefront shots are night photographs, so this variant runs dark while
   the rest of the page stays light — a light scrim would flatten the neon to
   nothing. The image itself comes from --mf-lp-hero-img, set per location in
   the template. */
.mf-lp-hero--photo {
    /* Dark token set restored: the type here sits on a photograph. */
    --mf-text-primary: #F5EFE6;
    --mf-text-secondary: #D8D0C4;
    --mf-text-muted: #A8A094;
    --mf-gold: #D4A04A;
    --mf-border: rgba(245, 239, 230, 0.22);

    background-color: #0B0B0F;
    background-image: var(--mf-lp-hero-img);
    background-size: cover;
    background-position: var(--mf-lp-hero-pos, center 62%);
    background-repeat: no-repeat;
    border-bottom: 0;
}

/* Held back hard on the left where the copy sits, and let off towards the
   right so the sign stays visible. */
.mf-lp-hero--photo .mf-lp-hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgba(11, 11, 15, 0.94) 0%, rgba(11, 11, 15, 0.86) 42%, rgba(11, 11, 15, 0.46) 100%),
        linear-gradient(180deg, rgba(11, 11, 15, 0.55) 0%, rgba(11, 11, 15, 0.22) 45%, rgba(11, 11, 15, 0.80) 100%);
}

.mf-lp-hero--photo .mf-lp-hero__accent {
    color: #E8A14A;
}

/* Glass chips rather than the light-theme solid ones. */
.mf-lp-hero--photo .mf-lp-chip {
    background: rgba(11, 11, 15, 0.52);
    border-color: rgba(245, 239, 230, 0.26);
    color: #EDE6DA;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.mf-lp-hero--photo .mf-lp-chip svg {
    stroke: #E8A14A;
}

/* The outline button needs light edges on a dark ground. */
.mf-lp-hero--photo .mf-btn--secondary {
    border-color: rgba(245, 239, 230, 0.45);
    color: #F5EFE6;
}

.mf-lp-hero--photo .mf-btn--secondary:hover {
    border-color: #D4A04A;
    color: #D4A04A;
}

.mf-lp-hero__inner {
    position: relative;
    z-index: 1;
    max-width: var(--mf-container, 1280px);
}

.mf-lp-hero__inner > * {
    max-width: 880px;
}

.mf-lp-hero__eyebrow {
    margin: 0 0 0.75rem;
    color: var(--mf-gold);
}

.mf-lp-hero__title {
    margin: 0 0 1.1rem;
    font-family: var(--mf-font-display);
    font-size: clamp(2.3rem, 6vw, 4.2rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.01em;
    color: var(--mf-text-primary);
}

.mf-lp-hero__accent {
    color: var(--mf-red);
}

.mf-lp-hero__sub {
    margin: 0;
    max-width: 62ch;
    font-size: clamp(1rem, 1.5vw, 1.13rem);
    line-height: 1.8;
    color: var(--mf-text-secondary);
}

/* ---------- Address / hours chips ---------- */
.mf-lp-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    list-style: none;
    margin: 1.6rem 0 0;
    padding: 0;
}

.mf-lp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 1rem;
    background: var(--mf-bg-primary);
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius-full, 9999px);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--mf-text-secondary);
}

.mf-lp-chip svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--mf-red);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mf-lp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1.9rem;
}

/* ==========================================================================
   AT A GLANCE
   ========================================================================== */
.mf-lp-glance {
    padding: clamp(2.75rem, 5.5vw, 4.5rem) 0;
    background: var(--mf-bg-primary);
}

.mf-lp-glance__title {
    margin: 0 0 1.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mf-text-muted);
}

.mf-lp-glance__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    /* One hairline grid: the gap shows the border colour through. */
    background: var(--mf-border);
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius-lg, 12px);
    overflow: hidden;
}

.mf-lp-fact {
    padding: 1.4rem 1.5rem;
    background: var(--mf-bg-secondary);
}

.mf-lp-fact dt {
    margin-bottom: 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mf-text-muted);
}

.mf-lp-fact dd {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--mf-text-primary);
}

.mf-lp-fact dd a {
    color: var(--mf-red);
    font-weight: 600;
    text-decoration: none;
}

.mf-lp-fact dd a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   ABOUT THIS ADDRESS
   ========================================================================== */
.mf-lp-about {
    padding: clamp(2.75rem, 5.5vw, 4.5rem) 0;
    background: var(--mf-bg-secondary);
    border-top: 1px solid var(--mf-border);
    border-bottom: 1px solid var(--mf-border);
}

.mf-lp-about__inner {
    max-width: 760px;
}

/* ---------- Section photographs ---------- */
.mf-lp-figure {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius-lg, 12px);
    box-shadow: 0 16px 40px rgba(26, 23, 19, 0.10);
}

.mf-lp-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mf-lp-about__inner--split .mf-lp-figure img {
    aspect-ratio: 4 / 3;
}

.mf-lp-figure--wide {
    margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.mf-lp-figure--wide img {
    aspect-ratio: 21 / 8;
    /* Most of these banners are already ~8:3 and centre-weighted, so they are
       barely cropped. --low is for a shot with a subject high in the frame. */
    object-position: center center;
}

/* Crops low, for a photograph with someone's head and shoulders up top. */
.mf-lp-figure--low img {
    object-position: center 78%;
}

/* Photograph on the left, copy on the right. The figure is first in the DOM,
   so no reordering is needed and the stacked order (image, then text) still
   reads correctly. */
.mf-lp-about__inner--media-first {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: stretch;
}

/* Let the picture run the full height of the text beside it instead of
   sitting in a fixed ratio — the source is a 1200x450 banner, and a tall
   fixed crop would throw most of it away. */
.mf-lp-figure--fill,
.mf-lp-about__inner--media-first .mf-lp-figure {
    height: 100%;
}

.mf-lp-about__inner--media-first .mf-lp-figure img {
    height: 100%;
    min-height: 300px;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center center;
}

.mf-lp-about__inner--media-first .mf-lp-about__copy {
    /* Keeps the copy optically centred against the picture. */
    align-self: center;
}

/* Prose beside a photograph rather than a single measure of text. */
.mf-lp-about__inner--split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
    max-width: var(--mf-container, 1280px);
}

/* ==========================================================================
   DELIVERY
   ========================================================================== */
.mf-lp-delivery {
    padding: clamp(2.75rem, 5.5vw, 4.5rem) 0;
    background: var(--mf-bg-primary);
}

.mf-lp-delivery__head {
    max-width: 760px;
}

.mf-lp-delivery__cta {
    margin-top: 1.4rem;
}

.mf-lp-apps__title {
    margin: clamp(2rem, 3.5vw, 2.75rem) 0 1rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mf-text-muted);
}

.mf-lp-apps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Each card is an <a> to the app's listing, so it needs the full card
   treatment plus a visible affordance that it leaves the site. */
.mf-lp-apps > li {
    display: flex;
}

.mf-lp-app {
    position: relative;
    display: block;
    flex: 1 1 auto;
    padding: 1.2rem 2.6rem 1.2rem 1.35rem;
    background: var(--mf-bg-secondary);
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius-md, 8px);
    text-decoration: none;
    transition: border-color 0.25s var(--mf-ease, ease),
                transform 0.25s var(--mf-ease, ease),
                box-shadow 0.25s var(--mf-ease, ease);
}

.mf-lp-app:hover,
.mf-lp-app:focus-visible {
    transform: translateY(-2px);
    border-color: var(--mf-gold);
    box-shadow: 0 10px 26px rgba(26, 23, 19, 0.09);
}

.mf-lp-app__go {
    position: absolute;
    top: 1.15rem;
    right: 1.1rem;
    display: block;
    width: 16px;
    height: 16px;
    color: var(--mf-text-muted);
    transition: color 0.25s var(--mf-ease, ease), transform 0.25s var(--mf-ease, ease);
}

.mf-lp-app__go svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mf-lp-app:hover .mf-lp-app__go {
    color: var(--mf-red);
    transform: translate(2px, -2px);
}

.mf-lp-app__name {
    display: block;
    font-family: var(--mf-font-display);
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--mf-text-primary);
}

.mf-lp-app__tag {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.89rem;
    line-height: 1.5;
    color: var(--mf-text-secondary);
}

/* ==========================================================================
   GOOD TO KNOW
   ========================================================================== */
.mf-lp-know {
    padding: clamp(2.75rem, 5.5vw, 4.5rem) 0;
    background: var(--mf-bg-secondary);
    border-top: 1px solid var(--mf-border);
}

/* No max-width here: this element IS the .mf-container, which is margin:0 auto,
   so capping it narrower than the container centres the whole block and its
   left edge stops lining up with every other section. */
.mf-lp-qa {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-top: 1.75rem;
}

/* Carded, to match .mf-lp-fact and .mf-lp-app. The section sits on white, so
   the cards take the cream surface for separation, with the gold kept as a
   top accent rather than a bare left rule. */
.mf-lp-qa__item {
    position: relative;
    padding: 1.5rem 1.6rem;
    background: var(--mf-bg-primary);
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius-lg, 12px);
    transition: border-color 0.25s var(--mf-ease, ease),
                transform 0.25s var(--mf-ease, ease);
}

.mf-lp-qa__item::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 1.6rem;
    width: 34px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--mf-gold);
}

.mf-lp-qa__item:hover {
    transform: translateY(-2px);
    border-color: var(--mf-gold);
}

.mf-lp-qa__q {
    margin: 0.4rem 0 0.55rem;
    font-family: var(--mf-font-display);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mf-text-primary);
}

.mf-lp-qa__a {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.8;
    color: var(--mf-text-secondary);
}

/* ==========================================================================
   FINDING US  +  the other branch
   ========================================================================== */
.mf-lp-find {
    padding: clamp(2.75rem, 5.5vw, 4.5rem) 0 clamp(3.5rem, 7vw, 6rem);
    background: var(--mf-bg-primary);
    border-top: 1px solid var(--mf-border);
}

.mf-lp-find__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: start;
}

.mf-lp-find__addr {
    margin: 1.1rem 0 0;
    font-family: var(--mf-font-display);
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--mf-text-primary);
}

.mf-lp-find__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.4rem;
}

.mf-lp-other {
    padding: clamp(1.5rem, 2.6vw, 2rem);
    background: var(--mf-bg-secondary);
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius-lg, 12px);
}

.mf-lp-other__label {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--mf-text-muted);
}

.mf-lp-other__name {
    margin: 0 0 0.4rem;
    font-family: var(--mf-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mf-text-primary);
}

.mf-lp-other__addr {
    margin: 0 0 1.1rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--mf-text-secondary);
}

.mf-lp-other__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mf-red);
    text-decoration: none;
}

.mf-lp-other__link svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s var(--mf-ease, ease);
}

.mf-lp-other__link:hover svg {
    transform: translateX(4px);
}

/* ==========================================================================
   TABLET
   ========================================================================== */
@media (max-width: 1024px) {
    .mf-lp-glance__grid,
    .mf-lp-apps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mf-lp-find__inner,
    .mf-lp-about__inner--split {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Stacked, the fill image has no text column to match, so give it a ratio. */
    .mf-lp-about__inner--media-first .mf-lp-figure img {
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }
}

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width: 640px) {
    .mf-lp-hero {
        padding-top: calc(var(--mf-header-h, 110px) + 1.75rem);
    }

    .mf-lp-glance__grid,
    .mf-lp-apps,
    .mf-lp-qa {
        grid-template-columns: minmax(0, 1fr);
    }

    .mf-lp-chip {
        width: 100%;
    }

    /* 21:8 is a letterbox slit on a phone. */
    .mf-lp-figure--wide img {
        aspect-ratio: 3 / 2;
    }

    .mf-lp-hero__actions .mf-btn,
    .mf-lp-find__actions .mf-btn,
    .mf-lp-delivery__cta .mf-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mf-lp-app,
    .mf-lp-app__go,
    .mf-lp-qa__item,
    .mf-lp-other__link svg {
        transition: none !important;
    }
}