/*
Theme Name: Maison Espresso Co.
Theme URI: https://maisonespressoco.com
Description: Standalone custom theme for Maison Espresso Co. — mobile coffee cart and espresso bar catering. No parent theme.
Author: Maison Espresso Co.
Version: 1.7.0
Text Domain: maison-espresso
*/

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {
    /* Tells the browser this site is light-only by design, so it
       doesn't try to auto-dark-mode form controls, scrollbars, or
       anything else on its own. A previous version of this file also
       redefined these tokens under `@media (prefers-color-scheme:
       dark)`, intending a real dark theme — but it was incomplete
       (e.g. link color was never redefined) and something caused
       background and text to flip independently instead of together,
       producing unreadable light-on-light text on phones in dark
       mode. Removed rather than patched: this site has one designed
       look, and it should render that way for every visitor. */
    color-scheme: light;

    --green:      #2E4A3E;
    --green-dark: #1B2C24;
    --gold:       #C8973A;
    --gold-lt:    #E3B45C;
    --cream:      #F6F2EA;
    --cream-dk:   #EBE3D3;
    --ink:        #181D1A;
    --ink-2:      #4A4A4A;
    --muted:      #7A7060;
    --paper:      #FFFFFF;
    --border:     #DDD5C5;
    /* Fixed dark surface — deliberately does NOT flip with theme,
       for accent bands (marquee, CTA) that must always read dark. */
    --surface-dark: #181D1A;

    --font-display: var(--wp--preset--font-family--maison-display, Georgia, serif);
    --font-body:    var(--wp--preset--font-family--maison-body, -apple-system, sans-serif);

    --mx:  var(--wp--style--global--content-size, 1360px);
    --g:   clamp(20px, 5vw, 64px);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   2. BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); }
a:hover { color: var(--gold); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.2;
    color: var(--ink);
    margin: 0 0 0.5em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--surface-dark);
    color: #fff;
    padding: 12px 20px;
}
.skip-link:focus { left: 12px; top: 12px; }
.screen-reader-text {
    border: 0; clip: rect(1px,1px,1px,1px); height: 1px; overflow: hidden;
    position: absolute; width: 1px; word-wrap: normal;
}
.skip-link.screen-reader-text:focus {
    clip: auto; height: auto; width: auto; overflow: visible;
}

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ============================================================
   3. BUTTONS (shared across theme chrome + core Buttons block)
   ============================================================ */

.btn, .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    padding: 13px 26px;
    border-radius: 3px;
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: transform 180ms var(--ease-out), filter 180ms ease;
    cursor: pointer;
}
.btn:hover, .wp-block-button__link:hover { transform: translateY(-2px); color: inherit; }

.btn-fill, .wp-block-button:not(.is-style-outline) .wp-block-button__link {
    background: var(--green);
    color: #fff;
}
.btn-fill:hover, .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    filter: brightness(1.12);
    color: #fff;
}

.btn-ghost, .wp-block-button.is-style-outline .wp-block-button__link {
    color: var(--ink);
    background: transparent;
    border: 1.5px solid var(--border);
}

/* ============================================================
   4. SITE CHROME — MARQUEE
   ============================================================ */

.marquee-band {
    background: var(--surface-dark);
    color: #F6F2EA;
    overflow: hidden;
    padding: 10px 0;
}
.marquee-track {
    display: flex;
    gap: 44px;
    white-space: nowrap;
    width: max-content;
    animation: maison-scroll 26s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
.marquee-track span {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-lt);
    display: flex;
    align-items: center;
    gap: 44px;
}
.marquee-track span::after { content: '\2014'; color: rgba(246,242,234,.4); }
@keyframes maison-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ============================================================
   5. SITE CHROME — HEADER & NAV
   ============================================================ */

.site-header {
    background: var(--paper);
    border-bottom: 1px solid var(--border);
}
.site-header__inner {
    max-width: var(--mx);
    margin: 0 auto;
    padding: 18px var(--g);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.site-logo, .custom-logo-link {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--ink);
    text-decoration: none;
}
/* Size is admin-editable at Appearance → Customize → Site Identity →
   Logo Height, which sets --maison-logo-height (see functions.php).
   64px fallback covers the rare case that ran before the control's
   default was ever saved. */
.custom-logo { max-height: var(--maison-logo-height, 64px); width: auto; }

.site-nav {
    display: flex;
    align-items: center;
    gap: 30px;
}
.maison-nav-list {
    display: flex;
    align-items: center;
    gap: 26px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.maison-nav-list a {
    color: var(--ink-2);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}
.maison-nav-list a:hover { color: var(--gold); }
.maison-nav-list li { position: relative; }

/* Services dropdown */
.maison-nav-list .sub-menu {
    list-style: none;
    margin: 0;
    padding: 10px 0;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 12px 32px rgba(20,26,22,.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
    z-index: 20;
}
.maison-nav-list li:hover > .sub-menu,
.maison-nav-list li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.maison-nav-list .sub-menu a {
    display: block;
    padding: 9px 20px;
    font-size: 0.86rem;
}
.maison-nav-list .sub-menu a:hover { background: var(--cream-dk); }

.nav-cta { font-size: 0.85rem; padding: 10px 20px; }

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}
.nav-toggle__bar {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--ink);
    transition: transform 200ms ease, opacity 200ms ease;
}
body.nav-open .nav-toggle .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle .nav-toggle__bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 820px) {
    .nav-toggle {
        display: flex;
        /* The open drawer below is `position: fixed` with its own
           stacking context, which paints above normal in-flow content
           regardless of z-index — including this button, since it's a
           plain static-positioned sibling in the header. Without its
           own position + higher z-index, the toggle button (and the
           hamburger-to-X it turns into) was getting visually covered
           by the drawer the moment it opened, leaving no visible way
           to close the menu. */
        position: relative;
        z-index: 1001;
    }
    .site-nav {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(320px, 85vw);
        height: 100vh;
        background: var(--paper);
        flex-direction: column;
        align-items: flex-start;
        padding: 90px 28px 40px;
        transform: translateX(100%);
        transition: transform 260ms var(--ease-out);
        box-shadow: -12px 0 40px rgba(20,26,22,.15);
        /* No z-index previously — a fixed-position drawer with z-index:auto
           has nothing forcing it above in-flow page content, so content
           elsewhere on the page (anything establishing its own stacking
           context) could still paint over it instead of the drawer
           covering the page like it's supposed to. */
        z-index: 1000;
    }
    body.nav-open {
        overflow: hidden;
    }
    body.nav-open .site-nav { transform: translateX(0); }
    .maison-nav-list {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        width: 100%;
    }
    .maison-nav-list a { display: block; padding: 12px 0; font-size: 1.05rem; }
    .maison-nav-list .sub-menu {
        position: static;
        opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: none; padding-left: 16px; min-width: 0;
        display: none;
    }
    .maison-nav-list li:focus-within .sub-menu,
    .maison-nav-list li:hover .sub-menu { display: block; }
    .nav-cta { margin-top: 20px; }
}

/* ============================================================
   6. NATIVE WIDTH CONTROL
   theme.json's contentSize/wideSize does the real work for
   alignwide/alignfull. This is only the container utility for
   template-level markup that isn't a block (index.php loop, etc).
   ============================================================ */

.maison-container {
    max-width: var(--mx);
    margin: 0 auto;
    padding: 0 var(--g);
}
.maison-page { overflow-x: hidden; }

/* Default horizontal gutter for any full-width Group section. Several
   pages' saved content only sets padding-top/bottom in the block's own
   inline style and leaves left/right unset — invisible on desktop, since
   the constrained 1360px inner content just floats centered with room to
   spare, but on a narrow phone screen there's no room to spare and the
   content hits the physical screen edge. An inline style (or a more
   specific class rule declared later, e.g. .maison-testimonial-section)
   still wins over this, so it only fills the gap where nothing else set
   it, rather than overriding anything intentional. */
.wp-block-group.alignfull {
    padding-left: var(--g);
    padding-right: var(--g);
}

/* ============================================================
   7. HERO & CTA — core Media & Text block
   Apply "maison-hero" to the hero, "maison-cta" to the closing CTA.
   Both are the same block type styled two ways via opt-in classes.
   ============================================================ */

.wp-block-media-text.maison-hero,
.wp-block-media-text.maison-cta {
    align-items: stretch;
}
/* A floor, not a fixed height: copy length varies page to page (each
   hero/CTA has different eyebrow/heading/lede text), so a hard `height`
   clips or overflows depending on which page and viewport it renders at
   — on narrower columns the text wraps to an extra line and spills out
   of a fixed box, visually overlapping whatever section comes next.
   `min-height` lets the row grow to fit its tallest column's content
   instead.
   The SAME min-height is repeated below directly on the media figure
   (not just the outer grid container) on purpose — relying on CSS Grid's
   implicit row-stretch to size the figure when the container only has
   min-height (no explicit height) does not reliably resolve in every
   browser, which silently collapsed the image to 0 height. Giving the
   figure its own explicit min-height sidesteps that ambiguity entirely:
   it's a plain block box with a real, definite height, independent of
   grid track sizing. The image then fills it via position:absolute +
   inset:0, sized against that definite figure box instead of a
   percentage height that depends on the grid resolving correctly. */
.wp-block-media-text.maison-hero { min-height: 520px; }
.wp-block-media-text.maison-cta { min-height: 360px; }
/* Safety net: when WordPress "recovers" hand-authored block markup it can
   attach a default background class that was never actually set on
   purpose. These blocks set their own background explicitly below —
   strip anything WordPress adds on top of that. */
.wp-block-media-text.maison-hero.has-background,
.wp-block-media-text.maison-cta.has-background {
    background: none !important;
}
.wp-block-media-text.maison-hero .wp-block-media-text__media,
.wp-block-media-text.maison-cta .wp-block-media-text__media {
    margin: 0;
    position: relative;
    overflow: hidden;
}
.wp-block-media-text.maison-hero .wp-block-media-text__media { min-height: 520px; }
.wp-block-media-text.maison-cta .wp-block-media-text__media { min-height: 360px; }
.wp-block-media-text.maison-hero .wp-block-media-text__media img,
.wp-block-media-text.maison-cta .wp-block-media-text__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.wp-block-media-text.maison-hero .wp-block-media-text__content {
    background: var(--cream-dk);
    padding: min(7vw, 80px) var(--g);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wp-block-media-text.maison-hero .maison-eyebrow,
.wp-block-media-text.maison-cta .maison-eyebrow {
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 20px;
    display: block;
}
.wp-block-media-text.maison-hero h1 {
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin-bottom: 24px;
}
.wp-block-media-text.maison-hero h1 em { font-style: italic; color: var(--green); }
.wp-block-media-text.maison-hero p.maison-lede {
    font-size: 1.05rem;
    color: var(--ink-2);
    max-width: 40ch;
    margin-bottom: 30px;
}

.wp-block-media-text.maison-cta .wp-block-media-text__content {
    background: var(--surface-dark);
    color: #F6F2EA;
    padding: 40px var(--g);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.wp-block-media-text.maison-cta .maison-eyebrow { color: var(--gold-lt); }
.wp-block-media-text.maison-cta h2 {
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    line-height: 1.2;
    color: #fff;
    margin-bottom: 12px;
}
.wp-block-media-text.maison-cta p {
    color: rgba(246,242,234,.72);
    max-width: 36ch;
    font-size: 0.92rem;
}

@media (max-width: 600px) {
    .wp-block-media-text.maison-hero,
    .wp-block-media-text.maison-cta {
        grid-template-columns: 1fr !important;
        height: auto !important;
        min-height: 0 !important;
    }
    /* Hero only: headline first, image second, so visitors see what the
       site is about immediately instead of scrolling past a photo first.
       The CTA block keeps image-first — that's a "still have questions"
       photo prompt, not a first-impression headline, so no reason to flip it. */
    .wp-block-media-text.maison-hero .wp-block-media-text__content {
        grid-column: 1;
        grid-row: 1;
        height: auto;
    }
    .wp-block-media-text.maison-hero .wp-block-media-text__media {
        grid-column: 1;
        grid-row: 2;
        height: 260px;
    }
    .wp-block-media-text.maison-cta .wp-block-media-text__media {
        grid-column: 1;
        grid-row: 1;
        height: 260px;
    }
    .wp-block-media-text.maison-cta .wp-block-media-text__content {
        height: auto;
    }
}

/* ============================================================
   8. SERVICES INDEX — Group block (flex/row layout), class
   "maison-index-row" applied per service. Editable via the normal
   block editor: it's still just a Group with a paragraph, a nested
   group, and an image inside.
   ============================================================ */

.maison-index-list { border-top: 1px solid var(--border); }
.wp-block-group.maison-index-row {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 26px 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    transition: padding-left 280ms var(--ease-out);
}
.wp-block-group.maison-index-row:hover { padding-left: 14px; }
.maison-index-row .maison-index-num {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--muted);
    flex: 0 0 40px;
}
.maison-index-row .maison-index-title { flex: 1 1 auto; min-width: 0; }
.maison-index-row .maison-index-title h3 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); margin-bottom: 4px; }
.maison-index-row .maison-index-title p { color: var(--ink-2); font-size: 0.95rem; margin: 0; }
.maison-index-row .maison-index-thumb {
    flex: 0 0 160px;
    width: 160px;
    height: 120px;
    border-radius: 6px;
    overflow: hidden;
}
.maison-index-row .maison-index-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}
.wp-block-group.maison-index-row:hover .maison-index-thumb img { transform: scale(1.06); }
@media (max-width: 700px) {
    .maison-index-row .maison-index-thumb { display: none; }
}

/* ============================================================
   9. STATEMENT (Why Maison) — Columns block, class "maison-statement"
   ============================================================ */

.wp-block-columns.maison-statement {
    background: var(--green);
    color: var(--cream);
    padding: min(6vw, 64px) var(--g);
    border-radius: 0;
    /* WordPress's own core CSS sets align-items:normal on .wp-block-columns
       with !important, which would otherwise leave a shorter column sitting
       at the top with empty space below it — match that specificity to win. */
    align-items: center !important;
}
.maison-statement .maison-eyebrow { color: var(--gold-lt); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; display: block; margin-bottom: 20px; }
.maison-statement h2 {
    font-size: clamp(1.8rem, 3.6vw, 2.8rem);
    line-height: 1.2;
    color: #fff;
    max-width: 18ch;
}
.maison-statement .maison-feature-item { padding: 18px 0; border-bottom: 1px solid rgba(246,242,234,.2); }
.maison-statement .maison-feature-item:first-child { border-top: 1px solid rgba(246,242,234,.2); }
.maison-statement .maison-feature-item h4 { font-family: var(--font-body); font-size: 0.9rem; font-weight: 700; color: var(--gold-lt); margin-bottom: 4px; }
.maison-statement .maison-feature-item p { font-size: 0.9rem; color: rgba(246,242,234,.75); margin: 0; }

/* ============================================================
   10. GALLERY — core Gallery block, class "maison-masonry"
   ============================================================ */

/* WordPress's core Gallery block auto-generates its own layout classes
   (is-layout-flex, a unique wp-block-gallery-N class per instance) with
   equal specificity to a plain two-class selector — that auto CSS was
   winning the cascade and overriding the masonry layout below it. Forcing
   the win here rather than guessing at load order. */
.wp-block-gallery.has-nested-images.maison-masonry,
figure.wp-block-gallery.maison-masonry {
    display: block !important;
    column-count: 3;
    column-gap: 16px;
    /* Do NOT also set `gap` here — it's a shorthand that also assigns
       column-gap, so a later `gap: 0 !important` was silently zeroing out
       the 16px column-gap set above and gluing every column together. */
}
.wp-block-gallery.maison-masonry .wp-block-image {
    break-inside: avoid;
    margin: 0 0 16px !important;
    width: 100% !important;
}
.wp-block-gallery.maison-masonry .wp-block-image img { border-radius: 4px; width: 100%; height: auto; }
@media (max-width: 820px) { .wp-block-gallery.maison-masonry { column-count: 2; } }
/* Raised from 520px — that cutoff left larger phones (and any device
   toolbar preset above ~520px wide) still on the 2-column layout above,
   which is what made images look small and the grid look unbalanced on
   mobile. 680px comfortably covers real phone widths, so single-column
   (full-width, bigger images) is what phones actually get. */
@media (max-width: 680px) {
    .wp-block-gallery.maison-masonry { column-count: 1; }
    .wp-block-gallery.maison-masonry .wp-block-image { margin-bottom: 20px !important; }
}

/* ============================================================
   11. FEATURED TESTIMONIAL — core Quote block, class "maison-feature-quote"
   ============================================================ */

/* Full-bleed section wrapper — apply "maison-testimonial-section" to the
   Group block that contains the quote, so the background spans edge to
   edge like every other full-width section on the page. The quote block
   itself just centers the text within that band. */
.wp-block-group.maison-testimonial-section {
    background: var(--cream-dk);
    padding: min(6vw, 72px) var(--g);
}
.wp-block-quote.maison-feature-quote {
    border-left: none;
    max-width: 900px;
    margin: 0 auto;
}
.maison-feature-quote::before {
    content: '\201C';
    font-family: var(--font-display);
    font-size: 4.5rem;
    line-height: 1;
    color: var(--gold);
    opacity: 0.6;
    display: block;
    margin-bottom: 6px;
}
.maison-feature-quote p {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.8vw, 2rem);
    line-height: 1.3;
    color: var(--ink);
    margin-bottom: 24px;
}
.maison-feature-quote cite {
    font-style: normal;
    font-size: 0.9rem;
    color: var(--ink-2);
}
.wp-block-quote.maison-feature-quote + p.maison-disclaimer {
    display: block;
    max-width: 900px;
    margin: 20px auto 0;
    font-size: 0.82rem;
    color: var(--muted);
    font-style: italic;
}

/* ============================================================
   12. AREAS LIST — Group block, class "maison-areas-list"
   ============================================================ */

.maison-areas-list { display: flex; flex-direction: column; }
.maison-areas-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    color: var(--ink);
    text-decoration: none;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}
.maison-areas-list a:hover { color: var(--gold); }

/* Homepage teaser sections (Where We Go, Got Questions) — these use plain
   headings that were falling back to default browser/theme.json sizing,
   noticeably smaller than the rest of the page's scale. Apply
   "maison-teaser" to the Group wrapping each of these sections. */
.maison-teaser h2 {
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    line-height: 1.2;
}
.maison-teaser > .wp-block-columns > .wp-block-column:first-child > p {
    font-size: 1rem;
}

/* ============================================================
   13. FAQ — core Details block, class "maison-faq"
   ============================================================ */

.wp-block-details.maison-faq {
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 4px 0;
    margin: 0;
}
.maison-faq summary {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    padding: 18px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.maison-faq summary::-webkit-details-marker { display: none; }
.maison-faq summary::after {
    content: '+';
    font-family: var(--font-body);
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--gold);
    flex-shrink: 0;
    transition: transform 200ms ease;
}
.maison-faq[open] summary::after { transform: rotate(45deg); }
.maison-faq p { padding-right: 40px; color: var(--ink-2); font-size: 0.95rem; padding-bottom: 20px; }

/* ============================================================
   14. SITE CHROME — FOOTER
   ============================================================ */

.site-footer {
    background: var(--cream-dk);
    color: var(--ink-2);
    border-top: 1px solid var(--border);
}
.footer-main {
    max-width: var(--mx);
    margin: 0 auto;
    padding: min(5vw, 56px) var(--g) 40px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
}
@media (max-width: 900px) { .footer-main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-main { grid-template-columns: 1fr; } }

.footer-brand .site-logo { color: var(--ink); margin-bottom: 14px; display: inline-block; }
.footer-brand p { font-size: 0.9rem; max-width: 32ch; color: var(--ink-2); }

.footer-col h5 {
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green);
    font-weight: 700;
    margin-bottom: 16px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--ink-2); text-decoration: none; font-size: 0.9rem; }
.footer-col a:hover { color: var(--green); }

.footer-bottom {
    max-width: var(--mx);
    margin: 0 auto;
    padding: 20px var(--g);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.8rem;
    color: var(--muted);
}

/* ============================================================
   15. BLOG / ARCHIVE LOOP (index.php fallback)
   ============================================================ */

.maison-loop { padding: 60px 0; }
.maison-loop__header { margin-bottom: 40px; }
.maison-loop__item { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--border); }
.maison-loop__link { text-decoration: none; color: inherit; }
.maison-loop__thumb { border-radius: 6px; overflow: hidden; margin-bottom: 16px; }
.maison-single { padding: 60px 0; }
.maison-single__thumb { border-radius: 8px; overflow: hidden; margin: 24px 0; }

/* ============================================================
   16. QUOTE WIDGET PLACEHOLDER — Group block, class "maison-quote-embed"
   For the Get a Quote page until FlashQuotes (or similar) is embedded.
   ============================================================ */

.wp-block-group.maison-quote-embed {
    background: var(--paper);
    border: 2px dashed var(--border);
    border-radius: 10px;
    padding: 56px 32px;
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}
.maison-quote-embed p { color: var(--muted); font-size: 0.95rem; }
.maison-quote-embed p:first-child { color: var(--ink); font-size: 1.05rem; margin-bottom: 8px; }

/* ============================================================
   17. INCLUDES LIST — used on service pages, class "maison-includes"
   ============================================================ */

.maison-includes { list-style: none; margin: 20px 0 0; padding: 0; }
.maison-includes li {
    position: relative;
    padding: 10px 0 10px 28px;
    border-bottom: 1px solid var(--border);
    color: var(--ink-2);
    font-size: 0.96rem;
}
.maison-includes li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--gold);
    font-weight: 700;
}

/* ============================================================
   18. PRINT
   ============================================================ */
@media print {
    .marquee-band, .nav-toggle, .site-nav .nav-cta { display: none; }
}