/*
Theme Name: Market Maps Interactive
Theme URI: https://marketmapsinteractive.com/
Author: Synergistic Techs
Author URI: https://synergistictechs.com/
Description: Marketing site for Market Maps Interactive (MMI) — the managed-WordPress service that delivers interactive floor maps and vendor directories to swap meets, antique malls, flea markets, and event venues. Retro-marketplace aesthetic, slab-serif display, ticket-style accents. Forked from the Bazaar block theme. The Vendor Directory plugin's product UI inherits MMI's palette through the --fsm-brand-* token bridge defined in :root below.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.0
License: Proprietary
Text Domain: mmi
Tags: block-theme, full-site-editing, marketplace, retro
*/

/*─────────────────────────────────────────────────────────────────────
 *  PLUGIN TOKEN BRIDGE
 *  These :root variables are read by the Vendor Directory plugin's
 *  CSS (mu-plugins/**) via `var(--fsm-brand-*, fallback)`. Activating
 *  this theme retunes the plugin from cobalt-blue to rust+teal+cream
 *  without touching plugin code.
 *─────────────────────────────────────────────────────────────────────*/
:root {
    --mmi-cream:          #f1e7d2;
    --mmi-cream-soft:     #f7efde;
    --mmi-paper:          #faf4e6;
    --mmi-rust:           #c94a2a;
    --mmi-rust-dark:      #a33a20;
    --mmi-rust-soft:      #fbe8df;
    --mmi-teal:           #1f6e76;
    --mmi-teal-dark:      #134e54;
    --mmi-mustard:        #e5a82e;
    --mmi-mustard-dark:   #c08f1f;
    --mmi-charcoal:       #2a2421;
    --mmi-charcoal-soft:  #4a423d;
    --mmi-line:           #e3d6b8;
    --mmi-line-soft:      #ecdfc4;
    --mmi-surface:        #ffffff;

    /* Plugin brand tokens — what the Vendor Directory plugin's
       tokenized CSS reads. Changing the values here retunes the
       plugin's product UI to match MMI. */
    --fsm-brand-primary:       var(--mmi-rust);
    --fsm-brand-primary-dark:  var(--mmi-rust-dark);
    --fsm-brand-canvas:        var(--mmi-cream);
    --fsm-brand-ink:           var(--mmi-charcoal); /* vendor-page text + dark accents */
    --fsm-surface-tint:        var(--mmi-rust-soft);
    --fsm-cobalt:              var(--mmi-rust); /* legacy alias used in a few plugin spots */

    /* Plugin floor-map detail tokens — finer control over the
       interactive map surface specifically. */
    --fsm-fp-primary:          var(--mmi-rust);
    --fsm-fp-primary-dark:     var(--mmi-rust-dark);
    --fsm-fp-canvas-bg:        var(--mmi-paper);
    --fsm-fp-surface:          #ffffff;
    --fsm-fp-surface-alt:      var(--mmi-cream-soft);
    --fsm-fp-parking-bg:       #ecdfc4;
    --fsm-fp-line:             var(--mmi-line);
    --fsm-fp-text:             var(--mmi-charcoal);
    --fsm-fp-text-muted:       #7a716a;
    --fsm-fp-row-active-bg:    var(--mmi-rust-soft);
    --fsm-fp-feat-red:         var(--mmi-rust);
    --fsm-fp-feat-gray:        var(--mmi-charcoal);
    --fsm-fp-feat-blue:        var(--mmi-teal);
    --fsm-fp-feat-gold:        var(--mmi-mustard);
    --fsm-fp-badge-bg:         #fdf2eb;
    --fsm-fp-badge-border:     var(--mmi-rust);
    --fsm-fp-badge-text:       var(--mmi-rust-dark);
    --fsm-fp-badge-sublabel:   var(--mmi-rust-dark);
}

/* Remove WP's block-gap between site header and main so the hero
   sits flush against the header band. Also between main and the
   footer, so the paper body color does not bleed through as a thin
   stripe between the final CTA section and the dark footer band. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
    margin-block-start: 0 !important;
}

/* Same fix between consecutive full-width sections INSIDE main —
   without this, the body's paper background bleeds through the
   default block-gap as a thin strip between (e.g.) the cards section
   and the "How It Works" teal section. Each section already controls
   its own vertical padding, so the gap is purely decorative leakage. */
main > .wp-block-group + .wp-block-group,
main > .wp-block-group + .wp-block-post-content,
main > .wp-block-post-content + .wp-block-group {
    margin-block-start: 0 !important;
}

/*─────────────────────────────────────────────────────────────────────
 *  MMI brand surface effects — retro paper texture + ticket motifs.
 *  Kept lightweight; heavy texture comes from the logo and color
 *  blocking, not from CSS backgrounds.
 *─────────────────────────────────────────────────────────────────────*/

/* Paper-grain background available as a utility class for any group. */
.has-paper-grain {
    background-image:
        radial-gradient(circle at 18% 22%, rgba(42,36,33,0.04) 0, transparent 35%),
        radial-gradient(circle at 78% 70%, rgba(42,36,33,0.03) 0, transparent 40%);
}

/* Eyebrow style — small rust label. Title case in source; we intentionally
   skip text-transform so it reads as written. Light letter-spacing only. */
.mmi-eyebrow {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--mmi-rust);
    margin: 0 0 0.5rem;
}

/* Ticket-shaped block — the dashed-line "ticket stub" treatment. */
.mmi-ticket {
    position: relative;
    background: var(--mmi-mustard);
    color: var(--mmi-charcoal);
    padding: 1.25rem 1.75rem;
    border-radius: 6px;
}
.mmi-ticket::before,
.mmi-ticket::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    background: var(--mmi-cream);
    border-radius: 50%;
    transform: translateY(-50%);
}
.mmi-ticket::before { left: -9px; }
.mmi-ticket::after { right: -9px; }

/* Badge button — slightly heavier weight, title case. */
.mmi-btn-badge a.wp-block-button__link {
    font-family: 'Inter', system-ui, sans-serif !important;
    letter-spacing: 0.01em !important;
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
}

/* Headings — when set with the slab display family, give them a
   subtle dropped-shadow to echo the logo's display lettering. */
.mmi-display-shadow {
    text-shadow: 3px 3px 0 rgba(42,36,33,0.12);
}

/* Script accent — for occasional "Local" / "Live" style flourishes. */
.mmi-script {
    font-family: 'Pacifico', 'Brush Script MT', cursive;
    font-weight: 400;
}

/* Bunting-style top border — three tiny triangles, mimicking the logo. */
.mmi-bunting {
    position: relative;
    padding-top: 1.5rem;
}
.mmi-bunting::before {
    content: "▲ ▲ ▲";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.625rem;
    letter-spacing: 0.4em;
    color: var(--mmi-rust);
}

/* Service-card icon styling — replaces the 01-08 step numbers on the
   homepage "What's in the Package" grid. Font Awesome is enqueued by
   the Vendor Directory plugin sitewide, so the icons just work. */
.mmi-service-icon {
    color: var(--mmi-teal, #1f6e76);
    font-size: 2.25rem;
    line-height: 1;
    margin: 0 0 0.25rem;
}
.mmi-service-icon i {
    display: inline-block;
}

/* Service-card equal-height treatment — when a column on the homepage
   contains an .mmi-service-icon card, force each column into a flex
   stack and let the card flex-grow to fill the tallest column's height.
   Cards in the same row end up identical heights regardless of body
   copy length. */
.wp-block-columns:has(.mmi-service-icon) > .wp-block-column {
    display: flex;
    flex-direction: column;
}
.wp-block-columns:has(.mmi-service-icon) > .wp-block-column > .wp-block-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Step-badge — refined replacement for the big slab-serif 01/02/03 in
   the "How It Works" section. Small mustard circle, charcoal numeral
   inside. Sits above the step title. */
.mmi-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--mmi-mustard, #e5a82e);
    color: var(--mmi-charcoal, #2a2421);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1;
    margin: 0 0 1.25rem;
}

/* Equal-height columns for the "How It Works" step row, same approach
   as the service cards. Keeps the three step blurbs aligned with
   their bodies stretching to match the tallest. */
.wp-block-columns:has(.mmi-step-badge) > .wp-block-column {
    display: flex;
    flex-direction: column;
}

/* "This Site Is the Demo" — the four demo-surface cards. Same
   framework as the service cards above: column becomes a flex stack
   and the card group flex-grows to fill the tallest column. Matches
   padding, radius, and typography of the service grid for sitewide
   uniformity; only the background tone is inverted because this
   section sits on paper while the service section sits on cream. */
.mmi-demo-cards.wp-block-columns > .wp-block-column,
.mmi-vertical-cards.wp-block-columns > .wp-block-column,
.mmi-plan-cards.wp-block-columns > .wp-block-column {
    display: flex;
    flex-direction: column;
}
.mmi-demo-cards.wp-block-columns > .wp-block-column > .wp-block-group,
.mmi-vertical-cards.wp-block-columns > .wp-block-column > .wp-block-group,
.mmi-plan-cards.wp-block-columns > .wp-block-column > .wp-block-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Balanced wrapping for hero/section intro paragraphs. Same
   text-wrap idea applied to headings, scoped to opt-in paragraphs
   so we don't surprise the rest of the body copy. */
.mmi-balance {
    text-wrap: balance;
    max-width: 56ch;
    margin-left: auto;
    margin-right: auto;
}

/* Feature-page mockup figures — wrap an inline SVG that represents a
   product surface (directory page, vendor detail, dashboard). Centered,
   elevated, capped to a sensible reading width. */
.mmi-feature-mockup {
    margin: 0 auto;
    max-width: 1100px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 64px -28px rgba(42, 36, 33, 0.45),
                0 8px 22px -14px rgba(42, 36, 33, 0.35);
    background: var(--mmi-cream, #f1e7d2);
}
.mmi-feature-mockup--inset {
    max-width: 100%;
}
.mmi-feature-mockup svg,
.mmi-feature-mockup img {
    display: block;
    width: 100%;
    height: auto;
}
.mmi-feature-caption {
    display: block;
    margin: 1.25rem auto 0;
    text-align: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9375rem;
    color: var(--mmi-muted, #7a716a);
    max-width: 60ch;
}

/* Balance headlines across multiple lines so they break at natural
   word boundaries instead of dangling a single word on the last line.
   Applied site-wide to every heading — block-editor headings, theme
   templates, plugin-rendered headings — so headlines read cleanly on
   every page. Supported in modern Chrome, Firefox, Safari; degrades
   gracefully to default wrapping in older browsers. */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.fsm-page-header__title,
.fsmd-form-section__title,
.fsm-vendor-header h1 {
    text-wrap: balance;
}

/* Badge logo sizing in the header. The badge has high visual weight,
   so we let it dominate — bigger than a wordmark would warrant. */
.mmi-logo img {
    height: 96px;
    width: auto;
    display: block;
}
@media (max-width: 1024px) {
    .mmi-logo img { height: 76px; }
}
@media (max-width: 600px) {
    .mmi-logo img { height: 60px; }
}
@media (max-width: 380px) {
    .mmi-logo img { height: 52px; }
}

/*═════════════════════════════════════════════════════════════════════
 *  MOBILE NAVIGATION OVERLAY — full rewrite, mobile-first.
 *
 *  WordPress core/navigation block emits a full-screen "responsive
 *  container" overlay that opens below its breakpoint. We force that
 *  breakpoint to 1024px so the header doesn't get cramped between
 *  600 and 1024, and rewrite the overlay's appearance from scratch.
 *
 *  Structure WP emits (simplified):
 *
 *    nav.wp-block-navigation
 *      button.wp-block-navigation__responsive-container-open        ← hamburger
 *      div.wp-block-navigation__responsive-container.is-menu-open   ← overlay
 *        button.wp-block-navigation__responsive-container-close     ← X
 *        div.wp-block-navigation__responsive-container-content
 *          ul.wp-block-navigation__container
 *            li.wp-block-navigation-item
 *              a.wp-block-navigation-item__content
 *
 *  We override every layer of that with high-specificity rules that
 *  win against the WP block-supports CSS without resorting to !important
 *  on every line. Where we do use !important it's to defeat WP's own
 *  inline styles for `items-justified-right`, padding, etc.
 *═════════════════════════════════════════════════════════════════════*/

/* ── 1. Activate hamburger early; suppress closed-state inline nav ── */
@media (max-width: 1024px) {
    .wp-block-navigation__responsive-container-open {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }
    /* Whenever the hamburger is the gateway, drop BOTH inline header
       buttons (Vendor Login + Book a Demo). The overlay menu is the
       single source of truth for those CTAs — no duplicates next to
       the hamburger. Header becomes logo + hamburger only. */
    header .wp-block-buttons {
        display: none !important;
    }
}

/* ── 2. At phones, also tighten the header horizontal padding ── */
@media (max-width: 600px) {
    header.wp-block-group.alignfull {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ── 3. Hamburger button — accessible tap target, MMI palette ── */
.wp-block-navigation__responsive-container-open {
    min-width: 44px;
    min-height: 44px;
    color: var(--mmi-charcoal) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 4px;
    padding: 0.5rem !important;
    line-height: 0;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-open:focus-visible {
    background: rgba(42, 36, 33, 0.08) !important;
    color: var(--mmi-rust) !important;
}
.wp-block-navigation__responsive-container-open svg {
    width: 28px !important;
    height: 28px !important;
    fill: currentColor !important;
}

/* ── 4. The overlay itself — fixed, full-screen, scrollable ── */
.wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    background-color: var(--mmi-cream) !important;
    color: var(--mmi-charcoal) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    /* iOS safe-area aware padding; falls back to plain rem values. */
    padding-top:    calc(env(safe-area-inset-top, 0px) + 1rem) !important;
    padding-right:  calc(env(safe-area-inset-right, 0px) + 1.25rem) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1.5rem) !important;
    padding-left:   calc(env(safe-area-inset-left, 0px) + 1.25rem) !important;
}

/* ── 5. Close button — absolute, top-right, large tap target ── */
.wp-block-navigation__responsive-container-close {
    position: absolute !important;
    top: calc(env(safe-area-inset-top, 0px) + 0.625rem) !important;
    right: calc(env(safe-area-inset-right, 0px) + 0.625rem) !important;
    z-index: 100000;
    min-width: 44px;
    min-height: 44px;
    color: var(--mmi-charcoal) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 4px;
    padding: 0.5rem !important;
    line-height: 0;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.wp-block-navigation__responsive-container-close:hover,
.wp-block-navigation__responsive-container-close:focus-visible {
    background: rgba(42, 36, 33, 0.08) !important;
    color: var(--mmi-rust) !important;
}
.wp-block-navigation__responsive-container-close svg {
    width: 26px !important;
    height: 26px !important;
    fill: currentColor !important;
}

/* ── 6. Inner content wrapper — constrains menu width, centers ── */
.wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 420px !important;
    margin: 3.5rem auto 1rem !important;
}

/* ── 7. Nav items list — flex column, no flex justification fights ── */
.wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* ── 8. Each nav item (li) fills container width, no extra spacing ── */
.wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

/* ── 9. Regular nav links (Demo, Directory, etc.) ── */
.wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item:not(.mmi-nav-cta)
    > .wp-block-navigation-item__content {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 44px;
    color: var(--mmi-charcoal) !important;
    background: transparent !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-size: 1.375rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.005em !important;
    line-height: 1.2 !important;
    padding: 1rem 0.5rem !important;
    text-align: center !important;
    text-decoration: none !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(42, 36, 33, 0.12) !important;
    border-radius: 0 !important;
    transition: color .15s ease, background-color .15s ease;
}
.wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item:not(.mmi-nav-cta):last-of-type
    > .wp-block-navigation-item__content {
    border-bottom: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item:not(.mmi-nav-cta)
    > .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item:not(.mmi-nav-cta)
    > .wp-block-navigation-item__content:focus-visible {
    color: var(--mmi-rust) !important;
    background: rgba(201, 74, 42, 0.06) !important;
}

/* ── 10. CTA items — hidden everywhere except inside open overlay ── */
.wp-block-navigation .mmi-nav-cta {
    display: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open .mmi-nav-cta {
    display: block !important;
    width: 100% !important;
}
.wp-block-navigation__responsive-container.is-menu-open .mmi-nav-cta--secondary {
    margin-top: 1.5rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .mmi-nav-cta--primary {
    margin-top: 0.625rem !important;
}

/* Primary CTA — Book a Demo (rust filled) */
.wp-block-navigation__responsive-container.is-menu-open
    .mmi-nav-cta--primary
    > .wp-block-navigation-item__content {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 48px;
    background: var(--mmi-rust) !important;
    color: var(--mmi-cream) !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.2 !important;
    padding: 1rem 1.25rem !important;
    text-align: center !important;
    text-decoration: none !important;
    border: 2px solid var(--mmi-rust) !important;
    border-radius: 6px !important;
    transition: background-color .15s ease, border-color .15s ease;
}
.wp-block-navigation__responsive-container.is-menu-open
    .mmi-nav-cta--primary
    > .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open
    .mmi-nav-cta--primary
    > .wp-block-navigation-item__content:focus-visible {
    background: var(--mmi-rust-dark) !important;
    border-color: var(--mmi-rust-dark) !important;
    color: var(--mmi-cream) !important;
}

/* Secondary CTA — Vendor Login (teal outline) */
.wp-block-navigation__responsive-container.is-menu-open
    .mmi-nav-cta--secondary
    > .wp-block-navigation-item__content {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 44px;
    background: transparent !important;
    color: var(--mmi-teal) !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.2 !important;
    padding: 0.875rem 1.25rem !important;
    text-align: center !important;
    text-decoration: none !important;
    border: 2px solid var(--mmi-teal) !important;
    border-radius: 6px !important;
    transition: background-color .15s ease, color .15s ease;
}
.wp-block-navigation__responsive-container.is-menu-open
    .mmi-nav-cta--secondary
    > .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open
    .mmi-nav-cta--secondary
    > .wp-block-navigation-item__content:focus-visible {
    background: var(--mmi-teal) !important;
    color: var(--mmi-cream) !important;
}

/* ── 11. Lock body scroll while overlay is open ── */
.has-modal-open,
html.has-modal-open,
body.has-modal-open {
    overflow: hidden !important;
}

/*═════════════════════════════════════════════════════════════════════
 *  AUTH-AWARE CTAs — swap "Vendor Login" for "Vendor Dashboard" when
 *  the user is logged in. WordPress adds `.logged-in` to <body> for any
 *  authenticated user. We render BOTH variants in the markup and use
 *  the body class to hide one. Pure CSS, no JS required.
 *
 *  The swap is scoped narrowly to the contexts where the auth-aware
 *  CTAs actually live so it doesn't accidentally show the mobile-only
 *  nav-link version in the desktop inline nav (which is hidden via
 *  the .mmi-nav-cta {display:none} rule above).
 *═════════════════════════════════════════════════════════════════════*/

/* --- Desktop header buttons (.wp-block-button variants) --- */
.wp-block-button.mmi-show-logged-in {
    display: none !important;
}
body.logged-in .wp-block-button.mmi-show-logged-in {
    display: inline-block !important;
}
body.logged-in .wp-block-button.mmi-show-logged-out {
    display: none !important;
}

/* --- Mobile overlay menu CTAs (.mmi-nav-cta variants) --- */
/* By default the .mmi-nav-cta {display:none} rule above keeps both
   variants hidden everywhere except inside the open overlay. When the
   overlay opens AND the user is logged in, swap which one shows. */
body.logged-in .wp-block-navigation__responsive-container.is-menu-open
    .mmi-nav-cta.mmi-show-logged-out {
    display: none !important;
}
body:not(.logged-in) .wp-block-navigation__responsive-container.is-menu-open
    .mmi-nav-cta.mmi-show-logged-in {
    display: none !important;
}
body.logged-in .wp-block-navigation__responsive-container.is-menu-open
    .mmi-nav-cta.mmi-show-logged-in {
    display: block !important;
}

/*─────────────────────────────────────────────────────────────────────
 *  DESKTOP DROPDOWN — Features and Live Examples submenus.
 *  WP renders submenus inside .wp-block-navigation__submenu-container
 *  as a positioned <ul>. We theme it to match MMI: paper background,
 *  charcoal text, rust hover, subtle border and shadow for elevation.
 *─────────────────────────────────────────────────────────────────────*/
.wp-block-navigation .wp-block-navigation__submenu-container {
    background: var(--mmi-paper, #fffaf0) !important;
    border: 1px solid var(--mmi-line, #e7dec8) !important;
    border-radius: 6px !important;
    padding: 0.375rem !important;
    min-width: 240px !important;
    box-shadow: 0 18px 40px -16px rgba(42, 36, 33, 0.28),
                0 6px 16px -8px rgba(42, 36, 33, 0.18) !important;
    /* Sit flush against the parent label so there's no dead zone to
       cross. Visual gap is just the parent label's own padding. */
    margin-top: 0 !important;
}
/* Invisible bridge above the panel — the WP default ::before is a
   white triangle we previously hid; here we repurpose it as a generous
   hover-friendly band so the cursor can cross from the parent label
   without the panel collapsing under it. */
.wp-block-navigation .wp-block-navigation__submenu-container::before {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    top: -14px !important;
    left: 0 !important;
    right: 0 !important;
    height: 14px !important;
    background: transparent !important;
    border: 0 !important;
}
.wp-block-navigation .wp-block-navigation__submenu-container::after {
    display: none !important;
}
/* Extend the parent item's hover zone slightly DOWN so the cursor
   doesn't fall off when moving toward the submenu. */
.wp-block-navigation .has-child > .wp-block-navigation-item__content {
    padding-bottom: 0.75rem !important;
    margin-bottom: -0.75rem !important;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
    width: 100%;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    display: block !important;
    padding: 0.625rem 0.875rem !important;
    color: var(--mmi-charcoal, #2a2421) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    border-radius: 4px !important;
    transition: background-color 0.12s ease, color 0.12s ease !important;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
    background: rgba(201, 74, 42, 0.08) !important;
    color: var(--mmi-rust, #c94a2a) !important;
}

/* Parent menu item (Features ⌄ / Live Examples ⌄) — give the chevron a
   touch of breathing room from the label. */
.wp-block-navigation .has-child > .wp-block-navigation-item__content {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
}
.wp-block-navigation .wp-block-navigation__submenu-icon {
    width: 0.85em !important;
    height: 0.85em !important;
    fill: currentColor !important;
}
.wp-block-navigation .has-child:hover > .wp-block-navigation-item__content,
.wp-block-navigation .has-child:focus-within > .wp-block-navigation-item__content {
    color: var(--mmi-rust, #c94a2a) !important;
}

/*─────────────────────────────────────────────────────────────────────
 *  RESPONSIVE — hero, cards, padding tightening
 *─────────────────────────────────────────────────────────────────────*/

/* Tablet — keep hero side-by-side until columns block forces a stack. */
@media (max-width: 781px) {
    /* WP wp-block-columns auto-stacks at 781px. Center hero text + give
       the badge image a max-width so it doesn't dominate the stack. */
    .wp-block-columns .wp-block-column .mmi-logo img,
    main img[alt="Market Maps Interactive"] {
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
    /* Reduce section vertical padding on mobile so it doesn't feel sparse. */
    main .wp-block-group[style*="padding-top:5rem"],
    main .wp-block-group[style*="padding-top:6rem"] {
        padding-top: 3.5rem !important;
    }
    main .wp-block-group[style*="padding-bottom:5rem"],
    main .wp-block-group[style*="padding-bottom:6rem"] {
        padding-bottom: 3.5rem !important;
    }
    /* Hero h1 — give it room to breathe at mobile. */
    main h1.wp-block-heading {
        text-align: center;
    }
    /* Proof strip and CTA buttons — center on mobile. */
    main .wp-block-buttons {
        justify-content: center;
    }
    /* Hero subhead — center on mobile. */
    main h1 + p,
    main h1 ~ .wp-block-buttons {
        text-align: center;
    }
}

/* Phone — extra padding tightening. */
@media (max-width: 480px) {
    main .wp-block-group.alignfull {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    main h1.wp-block-heading {
        font-size: 2.5rem !important;
    }
    main h2.wp-block-heading {
        font-size: 2rem !important;
    }
}