/*
Theme Name: MMI Storefront
Template: twentytwentyfive
Version: 1.3.5
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
License: Proprietary
Text Domain: mmi-storefront
Description: Mobile-first app-shell child theme purpose-built for the Vendor Directory plugin. Activating this theme creates a Home + Vendor Login page, builds a primary nav menu, and lays out a storefront homepage (hero, floor map, featured vendors, hours). Brand colors, venue name, and logo come from Vendor Directory → Settings.
*/

/*═════════════════════════════════════════════════════════════════════
 *  TABLE OF CONTENTS
 *  ─────────────────────────────────────────────────────────────────
 *    1.  Structural tokens          — sizes, shadows, motion (CSS vars)
 *    2.  Layout cleanups            — strip WP block-gap on shell parts
 *    3.  Top bar                    — mobile/tablet sticky app bar
 *    4.  Bottom nav                 — mobile/tablet fixed tab bar
 *    5.  Desktop header             — sticky desktop header
 *    6.  Fallback page header       — when plugin helper unavailable
 *    7.  Footer                     — venue contact strip
 *    8.  Floor map embed            — homepage scoped header hide
 *    9.  Hero band                  — gradient + cover overlay
 *   10.  Hero CTA buttons           — primary white pill, ghost outline
 *   11.  Primary navigation         — desktop primary nav links
 *   12.  Desktop header buttons     — Vendor Dashboard / Rent a Booth
 *   13.  Featured vendor cards      — homepage grid card styling
 *   13.5 Search overlay             — slide-down search panel
 *   14.  Responsive breakpoints     — desktop/mobile toggle at 1025px
 *   15.  View transitions           — Chrome/Edge/Safari 18+ nav anim
 *   16.  Tap behavior               — app-like tap highlight + button
 *   17.  Content polish             — low-specificity content rules
 *═════════════════════════════════════════════════════════════════════*/

/*─────────────────────────────────────────────────────────────────────
 *  1. STRUCTURAL TOKENS
 *  Sizes, shadows, motion. No brand colors — those come from the
 *  plugin token bridge (--fsm-brand-*) and the venue-settings options.
 *─────────────────────────────────────────────────────────────────────*/
:root {
    --mmi-top-bar-h:          56px;
    --mmi-bottom-nav-h:       64px;
    --mmi-bottom-nav-h-safe:  calc(var(--mmi-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    --mmi-elevation-1:        0 1px 3px rgba(0, 0, 0, 0.08);
    --mmi-elevation-2:        0 4px 12px rgba(0, 0, 0, 0.12);
    --mmi-elevation-bottom-nav: 0 -2px 8px rgba(0, 0, 0, 0.10);
    --mmi-radius-md:          12px;
    --mmi-radius-lg:          18px;
    --mmi-transition:         220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/*─────────────────────────────────────────────────────────────────────
 *  2. LAYOUT CLEANUPS
 *  Strip WP default block-gap between top-level template parts and
 *  inside the .mmi-shell-header (the hidden .mmi-top-bar would otherwise
 *  push the desktop header down by ~19px).
 *─────────────────────────────────────────────────────────────────────*/
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer { margin-block-start: 0 !important; }

.mmi-shell-header > * { margin-block-start: 0 !important; }

/* Reserve space so fixed bottom-nav never covers content on mobile. */
body { min-height: 100dvh; }
.wp-site-blocks { padding-bottom: var(--mmi-bottom-nav-h-safe); }

/*─────────────────────────────────────────────────────────────────────
  *  3. TOP BAR (mobile/tablet, hidden on desktop)
 *─────────────────────────────────────────────────────────────────────*/
.mmi-top-bar {
    position: sticky;
    top: 0;
    /* z-index above Leaflet's stack (200-700) so embedded maps cannot
       render over the sticky app bar. */
    z-index: 1000;
    background: var(--fsm-brand-canvas, #faf6ee);
    border-bottom: 1px solid rgba(31, 20, 16, 0.08);
    height: var(--mmi-top-bar-h);
    transition: transform var(--mmi-transition);
    will-change: transform;
}
.mmi-top-bar.is-hidden { transform: translateY(-100%); }
.mmi-top-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 14px;
    gap: 8px;
}
.mmi-top-bar-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--fsm-brand-ink, #1f1410);
}
.mmi-top-bar-logo img {
    height: 40px;
    width: auto;
    display: block;
}
.mmi-top-bar-actions { display: flex; gap: 4px; }
.mmi-top-bar-actions a,
.mmi-top-bar-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--fsm-brand-ink, #1f1410);
    border-radius: 50%;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 120ms ease;
}
.mmi-top-bar-actions a:active,
.mmi-top-bar-actions button:active { background: rgba(31, 20, 16, 0.08); }
.mmi-top-bar-actions svg { width: 24px; height: 24px; }

/*─────────────────────────────────────────────────────────────────────
  *  4. BOTTOM NAV (mobile/tablet, hidden on desktop)
 *─────────────────────────────────────────────────────────────────────*/
.mmi-bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    /* z-index above Leaflet's stack (200-700) so the floor-map cannot
       scroll over the fixed bottom nav. */
    z-index: 1001;
    background: var(--fsm-brand-ink, #1f1410);
    border-top: 2px solid var(--fsm-brand-primary, #d97757);
    box-shadow: 0 -4px 16px rgba(10, 6, 4, 0.18);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mmi-bottom-nav-inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: var(--mmi-bottom-nav-h);
}
.mmi-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-decoration: none;
    color: rgba(250, 246, 238, 0.62);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    transition: color 140ms ease, background-color 140ms ease;
    position: relative;
}
.mmi-bottom-nav a svg {
    width: 24px;
    height: 24px;
    transition: transform 160ms ease;
}
.mmi-bottom-nav a:hover { color: rgba(250, 246, 238, 0.92); }
.mmi-bottom-nav a.is-active {
    color: var(--fsm-brand-primary, #d97757);
}
.mmi-bottom-nav a.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    background: var(--fsm-brand-primary, #d97757);
    border-radius: 0 0 3px 3px;
}
.mmi-bottom-nav a.is-active svg { transform: translateY(-1px); }
.mmi-bottom-nav a:active { background: rgba(250, 246, 238, 0.08); }

/*─────────────────────────────────────────────────────────────────────
 *  4.1 MENU DRAWER (right-side slide-out, mobile)
 *  Triggered by the Sign-In tab on the bottom nav. Slides in from the
 *  right edge with a soft backdrop. Backdrop click / Close button /
 *  Esc all dismiss. JS in app-shell.js does the open/close toggling.
 *─────────────────────────────────────────────────────────────────────*/
.mmi-menu-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 6, 4, 0.55);
    z-index: 1099;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}
.mmi-menu-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}
.mmi-menu-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 360px);
    background: var(--fsm-brand-ink, #1f1410);
    color: var(--fsm-brand-canvas, #faf6ee);
    box-shadow: -12px 0 32px rgba(10, 6, 4, 0.4);
    z-index: 1100;
    transform: translateX(100%);
    transition: transform 260ms cubic-bezier(.22,.61,.36,1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mmi-menu-drawer.is-open { transform: translateX(0); }
.mmi-menu-drawer__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px 24px calc(20px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
}
.mmi-menu-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(250, 246, 238, 0.08);
    margin-bottom: 24px;
}
.mmi-menu-drawer__brand {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: inherit;
    text-decoration: none;
    line-height: 1.2;
}
.mmi-menu-drawer__close {
    appearance: none;
    background: transparent;
    border: 1px solid rgba(250, 246, 238, 0.18);
    color: inherit;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease;
}
.mmi-menu-drawer__close:hover {
    background: rgba(250, 246, 238, 0.08);
    border-color: rgba(250, 246, 238, 0.32);
}
.mmi-menu-drawer__close svg {
    width: 18px;
    height: 18px;
}
.mmi-menu-drawer__cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
}
.mmi-menu-drawer__btn {
    display: block;
    width: 100%;
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 15.5px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
    box-sizing: border-box;
}
.mmi-menu-drawer__btn--primary {
    background: var(--fsm-brand-primary, #d97757);
    color: #ffffff;
}
.mmi-menu-drawer__btn--primary:hover {
    background: var(--fsm-brand-primary-dark, #80431d);
}
.mmi-menu-drawer__btn--ghost {
    background: transparent;
    color: var(--fsm-brand-canvas, #faf6ee);
    border: 1px solid rgba(250, 246, 238, 0.32);
}
.mmi-menu-drawer__btn--ghost:hover {
    background: rgba(250, 246, 238, 0.06);
    border-color: rgba(250, 246, 238, 0.6);
}
.mmi-menu-drawer__nav { flex: 1; }
.mmi-menu-drawer__eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fsm-brand-primary, #d97757);
    margin: 0 0 14px;
}
.mmi-menu-drawer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mmi-menu-drawer__link {
    display: block;
    padding: 14px 0;
    font-size: 17px;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(250, 246, 238, 0.06);
    transition: color 140ms ease, padding-left 140ms ease;
}
.mmi-menu-drawer__link:hover {
    color: var(--fsm-brand-primary, #d97757);
    padding-left: 4px;
}
.mmi-menu-drawer__foot {
    margin: 28px 0 0;
    font-size: 12px;
    color: rgba(250, 246, 238, 0.45);
    letter-spacing: 0.02em;
}
/* Lock body scroll while drawer is open. */
html.mmi-menu-locked,
html.mmi-menu-locked body { overflow: hidden; }
/* Drawer is mobile/tablet only — desktop uses the top header nav. */
@media (min-width: 1024px) {
    .mmi-menu-drawer,
    .mmi-menu-drawer-backdrop { display: none !important; }
}

/*─────────────────────────────────────────────────────────────────────
  *  5. DESKTOP HEADER (sticky top nav)
 *─────────────────────────────────────────────────────────────────────*/
.mmi-desktop-header {
    position: sticky;
    top: 0;
    z-index: 80;
    background: var(--fsm-brand-canvas, #faf6ee);
    border-bottom: 1px solid rgba(31, 20, 16, 0.08);
    box-shadow: 0 1px 3px rgba(31, 20, 16, 0.06);
}

/* Override the constrained-layout contentSize cap on the desktop header
   so the inner flex row can use the full wide width regardless of how
   theme.json defines contentSize for body content. */
.mmi-desktop-header,
.mmi-desktop-header > .wp-block-group {
    max-width: none !important;
}
.mmi-desktop-header > .wp-block-group > .wp-block-group {
    max-width: 1280px;
    margin-inline: auto;
    width: 100%;
    flex-wrap: nowrap !important;
    gap: 24px;
}

/* Logo slot: fixed width, never shrink. */
.mmi-desktop-header .mmi-desktop-logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}
.mmi-desktop-header .mmi-desktop-logo img {
    height: 60px;
    width: auto;
    display: block;
}

/* Navigation slot: flexible, hide overflow rather than wrap. The operator
   should curate the menu down to ~4-6 items — but if they don't, the
   header still stays on one line. WP nests the navigation through several
   flex containers (nav → responsive-container-content → __container UL →
   page-list UL); force every one of them to nowrap. */
.mmi-desktop-header .wp-block-navigation {
    flex: 1 1 auto;
    min-width: 0;
}
.mmi-desktop-header nav.wp-block-navigation,
.mmi-desktop-header .wp-block-navigation__responsive-container-content,
.mmi-desktop-header .wp-block-navigation__container,
.mmi-desktop-header .wp-block-page-list {
    flex-wrap: nowrap !important;
    overflow: hidden;
}
.mmi-desktop-header .wp-block-navigation__container > .wp-block-navigation-item,
.mmi-desktop-header .wp-block-page-list > .wp-block-navigation-item {
    flex: 0 0 auto;
}

/* CTAs: fixed width, never wrap text. */
.mmi-desktop-header .wp-block-buttons {
    flex: 0 0 auto;
    flex-wrap: nowrap !important;
    gap: 10px;
}
.mmi-desktop-header .wp-block-buttons .wp-block-button__link {
    white-space: nowrap;
}

/*─────────────────────────────────────────────────────────────────────
  *  6. FALLBACK PAGE HEADER — only rendered when the plugin's helper
 *  function isn't available (theme active without the plugin).
 *─────────────────────────────────────────────────────────────────────*/
.mmi-fallback-page-header {
    background: var(--fsm-brand-primary-dark, #135e96);
    color: #ffffff;
    padding: 48px clamp(20px, 4vw, 48px);
}
.mmi-fallback-page-header__inner {
    max-width: 1280px;
    margin: 0 auto;
}
.mmi-fallback-page-header h1 {
    margin: 0;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.mmi-fallback-page-header p {
    margin: 12px 0 0;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
}

/*─────────────────────────────────────────────────────────────────────
  *  7. FOOTER
 *  Four-column venue contact strip (brand • hours • visit • for-vendors)
 *  collapsing to one column on mobile. Rendered by [mmi_footer].
 *─────────────────────────────────────────────────────────────────────*/
.mmi-footer .mmi-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 72px clamp(20px, 4vw, 48px) 32px;
}
.mmi-footer .mmi-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 56px;
    align-items: start;
}
@media (max-width: 1024px) {
    .mmi-footer .mmi-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 640px) {
    .mmi-footer .mmi-footer-grid { grid-template-columns: 1fr; gap: 36px; }
}
.mmi-footer .mmi-footer-logo {
    height: 120px;
    width: auto;
    display: block;
    margin-bottom: 20px;
}
.mmi-footer .mmi-footer-venue {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: inherit;
}
.mmi-footer .mmi-footer-tagline {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    max-width: 30em;
}
.mmi-footer .mmi-footer-heading {
    margin: 0 0 16px;
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -0.005em;
    color: var(--fsm-brand-primary, #2271b1);
}
.mmi-footer .mmi-footer-body {
    margin: 0 0 10px;
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.85);
}
.mmi-footer .mmi-footer-body:last-child {
    margin-bottom: 0;
}
.mmi-footer .mmi-footer-body a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    transition: border-color 120ms ease;
}
.mmi-footer .mmi-footer-body a:hover {
    border-bottom-color: #ffffff;
}
.mmi-footer .mmi-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mmi-footer .mmi-footer-links li {
    margin: 0 0 10px;
}
.mmi-footer .mmi-footer-links li:last-child {
    margin-bottom: 0;
}
.mmi-footer .mmi-footer-links a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 14.5px;
    line-height: 1.5;
    transition: color 120ms ease;
}
.mmi-footer .mmi-footer-links a:hover {
    color: #ffffff;
}
.mmi-footer .mmi-footer-demo {
    margin: 56px 0 0;
    padding: 14px 18px;
    border: 1px solid rgba(217, 119, 87, 0.32);
    border-radius: 10px;
    background: rgba(217, 119, 87, 0.08);
    color: rgba(255, 255, 255, 0.78);
    font-size: 13.5px;
    line-height: 1.6;
    text-align: center;
}
.mmi-footer .mmi-footer-demo__pill {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--fsm-brand-primary, #d97757);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    vertical-align: 1px;
}
.mmi-footer .mmi-footer-bottom {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px 24px;
}
.mmi-footer .mmi-footer-bottom p { margin: 0; }
.mmi-footer .mmi-footer-bottom p.mmi-footer-credit {
    margin: 0 0 0 auto;
    text-align: right;
}
.mmi-footer .mmi-footer-credit a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    transition: color 120ms ease, border-color 120ms ease;
}
.mmi-footer .mmi-footer-credit a:hover {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

/*─────────────────────────────────────────────────────────────────────
 *  8.0.1 PLUGIN PAGE HEADER — flush-to-header + restyled
 *  The Vendor Directory plugin renders a uniform `.fsm-page-header`
 *  dark band above each shortcode surface (vendor signup, login,
 *  directory, products, dashboard). By default WP's page template
 *  gives `<main>` 48px top padding, which leaves an unwanted white
 *  strip between the site header and the plugin band. We zero that
 *  padding when the band is present, and lightly restyle the eyebrow
 *  and title so they match the rest of the site's typography.
 *
 *  Plugin CSS stays untouched; everything below is a theme override.
 *─────────────────────────────────────────────────────────────────────*/
main.wp-block-group:has(.fsm-page-header) {
    padding-top: 0 !important;
}
.fsm-page-header {
    padding: 56px 0 64px !important;
    margin-bottom: 0 !important;
}
.fsm-page-header__inner {
    text-align: center;
}
.fsm-page-header__eyebrow {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase;
    color: var(--fsm-brand-primary, #d97757) !important;
    margin: 0 0 14px !important;
    opacity: 1 !important;
}
.fsm-page-header__title {
    font-size: clamp(32px, 4vw, 48px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.1 !important;
    color: var(--fsm-brand-canvas, #faf6ee) !important;
    margin: 0 auto !important;
    max-width: 24ch;
}
.fsm-page-header__subhead {
    font-size: 16px !important;
    line-height: 1.65 !important;
    margin: 16px auto 0 !important;
    max-width: 60ch;
    opacity: 0.82 !important;
}
/* Reintroduce breathing room below the band — the plugin had this as
   margin-bottom on the header itself, but with main's top padding now
   zeroed we move it onto the post-content side so vertical rhythm
   below stays consistent across pages with and without the band. */
main.wp-block-group:has(.fsm-page-header) .wp-block-post-content > *:not(.fsm-page-header):first-of-type,
main.wp-block-group:has(.fsm-page-header) .fsm-page-header + * {
    margin-top: 48px;
}

/*─────────────────────────────────────────────────────────────────────
  *  8.1 FLOOR MAP SIDEBAR — mobile scroll
 *  On mobile the plugin's `.fsm-overlay-map__sidebar` (booth roster)
 *  stacks below the map and grows to fit ~200+ booths, which makes
 *  the whole page scroll endlessly with no way to dismiss the list.
 *  Cap the sidebar at a sensible height and let it scroll internally.
 *  Desktop layout is untouched (sidebar already lives next to the map
 *  there and gets a scroll container from the plugin).
 *─────────────────────────────────────────────────────────────────────*/
/* The plugin emits inline mobile CSS at (max-width: 860px) that strips
 * the sidebar with `max-height: none !important; overflow-y: visible
 * !important;` — designed to flow naturally inline but unworkable when
 * there are 200+ booths. We override with our own !important pair so the
 * roster scrolls inside a sensible container instead of stretching the
 * page. Match the plugin's breakpoint (860px) so the override only kicks
 * in where the plugin is actively suppressing scroll. */
@media (max-width: 860px) {
    .fsm-overlay-map__sidebar {
        max-height: 60vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/*─────────────────────────────────────────────────────────────────────
 *  8. FLOOR MAP EMBED — hide the plugin's page-header band when the
 *  shortcode is rendered as the homepage section (the hero already
 *  introduces the venue; a second branded header reads as duplicate).
 *  The header still shows on standalone plugin pages (vendor directory,
 *  signup, login, etc.) where the section identity is needed.
 *─────────────────────────────────────────────────────────────────────*/
.home #floor-map .fsm-page-header {
    display: none;
}

/*─────────────────────────────────────────────────────────────────────
  *  9. HERO BAND — overlay handled by the wp:cover block's inline style.
 *  An earlier version of this theme painted a brand-tinted gradient
 *  over the homepage hero via `.mmi-hero-band .mmi-hero-overlay`, but
 *  that gradient differed from the sub-page heroes which use the plain
 *  inline overlay color from the cover block. Removed so all heroes
 *  render identically (driven entirely by the cover block's attrs).
 *─────────────────────────────────────────────────────────────────────*/

/*─────────────────────────────────────────────────────────────────────
  * 10. HERO CTA BUTTONS — high contrast on the dim cover
 *  Primary = brand color filled; Ghost = white outline on dim background.
 *─────────────────────────────────────────────────────────────────────*/
.mmi-cta-primary .wp-block-button__link {
    background: var(--fsm-brand-canvas, #ffffff);
    color: var(--fsm-brand-ink, #1d2327);
    border: 1.5px solid var(--fsm-brand-canvas, #ffffff);
    font-weight: 700;
}
.mmi-cta-primary .wp-block-button__link:hover {
    background: rgba(255, 255, 255, 0.88);
}
.mmi-cta-ghost .wp-block-button__link {
    background: transparent;
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.8);
}
.mmi-cta-ghost .wp-block-button__link:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #ffffff;
}

/*─────────────────────────────────────────────────────────────────────
  * 11. PRIMARY NAVIGATION (desktop)
 *  Replaces the bare wp:navigation block. Driven by the
 *  [mmi_primary_nav] shortcode so URLs resolve to live pages.
 *─────────────────────────────────────────────────────────────────────*/
.mmi-primary-nav {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
}
.mmi-primary-nav-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mmi-primary-nav-item a {
    display: inline-block;
    padding: 8px 4px;
    color: #1d2327;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    border-bottom: 2px solid transparent;
    transition: color 120ms ease, border-color 120ms ease;
}
.mmi-primary-nav-item a:hover,
.mmi-primary-nav-item.is-active a {
    color: var(--fsm-brand-primary, #2271b1);
    border-bottom-color: var(--fsm-brand-primary, #2271b1);
}

/*─────────────────────────────────────────────────────────────────────
  * 12. DESKTOP HEADER BUTTONS — establish visual hierarchy
 *  Vendor Dashboard is the secondary action (existing-vendor utility);
 *  Rent a Booth is the primary acquisition CTA. They should not look
 *  identical.
 *─────────────────────────────────────────────────────────────────────*/
.mmi-desktop-header .wp-block-buttons .wp-block-button:first-child .wp-block-button__link {
    background: transparent;
    color: #1d2327;
    border: 1.5px solid #1d2327;
}
.mmi-desktop-header .wp-block-buttons .wp-block-button:first-child .wp-block-button__link:hover {
    background: #1d2327;
    color: #ffffff;
}
.mmi-desktop-header .wp-block-buttons .wp-block-button:last-child .wp-block-button__link {
    background: var(--fsm-brand-primary, #2271b1);
    color: #ffffff;
    border: 1.5px solid var(--fsm-brand-primary, #2271b1);
}
.mmi-desktop-header .wp-block-buttons .wp-block-button:last-child .wp-block-button__link:hover {
    background: var(--fsm-brand-primary-dark, #135e96);
    border-color: var(--fsm-brand-primary-dark, #135e96);
}

/* Reusable "Brand" button block style — operators apply via the editor's
   button style picker. Brand-primary fill, white text, brand-primary-dark
   on hover. Works on any background. */
.wp-block-button.is-style-brand .wp-block-button__link {
    background: var(--fsm-brand-primary, #2271b1);
    color: #ffffff;
    border: 1.5px solid var(--fsm-brand-primary, #2271b1);
    font-weight: 600;
    padding: 12px 22px;
    border-radius: 10px;
    transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.wp-block-button.is-style-brand .wp-block-button__link:hover {
    background: var(--fsm-brand-primary-dark, #135e96);
    border-color: var(--fsm-brand-primary-dark, #135e96);
}
.wp-block-button.is-style-brand .wp-block-button__link:active {
    transform: translateY(1px);
}

/*─────────────────────────────────────────────────────────────────────
 * 13. FEATURED VENDOR CARDS
 *  Responsive grid + card surface for the homepage Featured Vendors
 *  pattern. Overrides the WP Query Loop block's static grid so the
 *  layout collapses cleanly on smaller viewports: 4 cols desktop → 2
 *  cols tablet → 1 col mobile.
 *
 *  Targeting `.mmi-featured-vendors` (the className on wp:query) keeps
 *  these rules scoped — other Query Loop blocks the operator drops
 *  elsewhere on the site are untouched.
 *─────────────────────────────────────────────────────────────────────*/
.mmi-featured-vendors .wp-block-post-template.is-layout-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
@media (max-width: 1024px) {
    .mmi-featured-vendors .wp-block-post-template.is-layout-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}
@media (max-width: 480px) {
    .mmi-featured-vendors .wp-block-post-template.is-layout-grid {
        grid-template-columns: 1fr;
    }
}

.mmi-vendor-card {
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.04);
    transition: transform 180ms ease, box-shadow 180ms ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.mmi-vendor-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(15, 23, 42, 0.06), 0 10px 24px rgba(15, 23, 42, 0.10);
}
/* The constrained-layout group adds .has-global-padding (wide WP root
   padding). On these compact cards that overflows the card — strip it. */
.mmi-vendor-card.has-global-padding,
.mmi-vendor-card .has-global-padding {
    padding-left: 0;
    padding-right: 0;
}

.mmi-vendor-card .wp-block-post-featured-image {
    margin: 0;
    display: block;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
}
.mmi-vendor-card .wp-block-post-featured-image a,
.mmi-vendor-card .wp-block-post-featured-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mmi-vendor-card .mmi-vendor-card-body {
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
}
.mmi-vendor-card .mmi-vendor-card-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.005em;
}
.mmi-vendor-card .mmi-vendor-card-title a {
    color: #0f172a;
    text-decoration: none;
    transition: color 120ms ease;
}
.mmi-vendor-card:hover .mmi-vendor-card-title a {
    color: var(--fsm-brand-primary, #2271b1);
}
.mmi-vendor-card .mmi-vendor-card-excerpt {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: #475569;
}
.mmi-vendor-card .mmi-vendor-card-excerpt p { margin: 0; }

/* Box treatment for the homepage Featured Vendors grid. The plugin
 * renders `.fsmd-card` intentionally flat for the directory page
 * (no background, no shadow); on the homepage we elevate them into
 * proper cards. Scoped to `.mmi-featured-grid` so the directory's
 * plugin-owned look is preserved. */
.mmi-featured-grid .fsmd-card {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.mmi-featured-grid .fsmd-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(15, 23, 42, 0.06), 0 16px 32px rgba(15, 23, 42, 0.10);
}
/* The plugin's title + body sit directly inside the article without a
 * wrapping content container; add inner padding so they don't kiss the
 * card edges. The .fsmd-card-media (the colored thumbnail) stays edge-
 * to-edge by being a child anchor without padding. */
.mmi-featured-grid .fsmd-card > :not(.fsmd-card-media) {
    padding-left: 16px;
    padding-right: 16px;
}
.mmi-featured-grid .fsmd-card > :first-child:not(.fsmd-card-media) {
    padding-top: 16px;
}
.mmi-featured-grid .fsmd-card > :last-child {
    padding-bottom: 16px;
}

/*─────────────────────────────────────────────────────────────────────
 * 13.5 SEARCH OVERLAY
 *  Slide-down search panel triggered by any element with
 *  data-mmi-search-trigger (top-bar search icon, bottom-nav Search tab).
 *  Submits via GET to /vendor-directory/?vendor_search=… so the plugin's
 *  existing directory search handles the results.
 *
 *  Z-index 1100 sits above .mmi-top-bar (1000) and .mmi-bottom-nav (1001).
 *─────────────────────────────────────────────────────────────────────*/
.mmi-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    flex-direction: column;
}
.mmi-search-overlay.is-open {
    display: flex;
}
.mmi-search-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
}
/* Sheet wraps the input panel + results list as one visual unit. */
.mmi-search-overlay__sheet {
    position: relative;
    z-index: 1;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 100vh;
    display: flex;
    flex-direction: column;
}
.mmi-search-overlay__panel {
    margin: 0;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #e5e7eb;
}
.mmi-search-overlay__results {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}
.mmi-search-results-label {
    padding: 12px 16px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #64748b;
}
.mmi-search-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: #0f172a;
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 100ms ease;
    -webkit-tap-highlight-color: transparent;
}
.mmi-search-result:last-child { border-bottom: 0; }
.mmi-search-result:hover,
.mmi-search-result.is-active {
    background: #f1f5f9;
}
.mmi-search-result-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mmi-search-result-booth {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fsm-brand-primary, #2271b1);
    background: rgba(34, 113, 177, 0.08);
    padding: 4px 8px;
    border-radius: 999px;
}
.mmi-search-loading,
.mmi-search-empty {
    padding: 24px 16px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
}
.mmi-search-overlay__seeall {
    display: block;
    padding: 14px 16px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: var(--fsm-brand-primary, #2271b1);
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
}
/* Respect the hidden attribute over the explicit `display: block`. */
.mmi-search-overlay__seeall[hidden] { display: none; }
.mmi-search-overlay__results[hidden] { display: none; }
.mmi-search-overlay__seeall:hover { background: #f1f5f9; }
.mmi-search-overlay__icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: var(--fsm-brand-primary, #2271b1);
}
.mmi-search-overlay__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 17px;
    font-weight: 500;
    color: #0f172a;
    padding: 8px 0;
    line-height: 1.3;
    /* iOS Safari sometimes draws a rounded inner shadow on search inputs. */
    -webkit-appearance: none;
    appearance: none;
}
.mmi-search-overlay__input::placeholder {
    color: #94a3b8;
}
.mmi-search-overlay__close {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    padding: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #475569;
    cursor: pointer;
    transition: background-color 120ms ease;
}
.mmi-search-overlay__close:hover,
.mmi-search-overlay__close:focus-visible {
    background: #f1f5f9;
}
.mmi-search-overlay__close svg {
    width: 20px;
    height: 20px;
}

/* On desktop, center the panel as a sheet rather than full-bleed top bar.
   Flex column: align-items controls horizontal (cross axis),
   justify-content controls vertical (main axis). */
@media (min-width: 768px) {
    .mmi-search-overlay {
        align-items: center;
        justify-content: flex-start;
        padding-top: 12vh;
    }
    .mmi-search-overlay__sheet {
        width: min(640px, calc(100vw - 32px));
        max-height: 70vh;
        border-radius: 14px;
        overflow: hidden;
    }
    .mmi-search-overlay__panel {
        padding: 18px 20px;
    }
    .mmi-search-overlay__icon { width: 24px; height: 24px; }
    .mmi-search-overlay__input { font-size: 18px; }
}

/*─────────────────────────────────────────────────────────────────────
 * 14. RESPONSIVE: hide mobile shell on desktop, hide desktop on mobile
 *─────────────────────────────────────────────────────────────────────*/
@media (min-width: 1025px) {
    .mmi-top-bar,
    .mmi-bottom-nav { display: none; }
    .wp-site-blocks { padding-bottom: 0; }
}
@media (max-width: 1024px) {
    .mmi-desktop-header { display: none; }
    /* Hide the FSM accessibility toolbar when the mobile app-shell is
       active — its fixed bottom-right toggle would otherwise overlap
       the fixed bottom-nav. Accessibility access still available on
       desktop where the bottom-nav is hidden. */
    .fsm-a11y-bar { display: none !important; }
}

/*─────────────────────────────────────────────────────────────────────
  * 15. VIEW TRANSITIONS (Chrome/Edge/Safari 18+ — graceful fallback elsewhere)
 *─────────────────────────────────────────────────────────────────────*/
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 200ms;
}

/*─────────────────────────────────────────────────────────────────────
  * 16. TAP BEHAVIOR (app-like tap highlight + active button press)
 *─────────────────────────────────────────────────────────────────────*/
a, button {
    -webkit-tap-highlight-color: transparent;
}

/*─────────────────────────────────────────────────────────────────────
  * 17. CONTENT POLISH (low-specificity so Site Editor edits win)
 *─────────────────────────────────────────────────────────────────────*/
:root :where(.wp-block-button__link) {
    transition: transform 120ms ease, box-shadow 120ms ease;
}
:root :where(.wp-block-button__link:active) {
    transform: translateY(1px);
}

/*─────────────────────────────────────────────────────────────────────
 *  18. DEMO DISCLAIMER STRIP — non-sticky bar at the very top of <body>
 *  on every front-end page. Communicates that this site is a fictional
 *  demo. Scrolls away with the page; not visible in the admin.
 *─────────────────────────────────────────────────────────────────────*/
.mmi-demo-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 16px;
    background: var(--fsm-brand-ink, #1f1410);
    color: #fff8ee;
    font: 600 12px/1.4 var(--font-sans, system-ui, -apple-system, sans-serif);
    letter-spacing: 0.02em;
    text-align: center;
}
.mmi-demo-strip__tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--fsm-brand-primary, #d97757);
    color: #1f1410;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.12em;
}
.mmi-demo-strip__text {
    opacity: 0.92;
    font-weight: 500;
}
@media (max-width: 480px) {
    .mmi-demo-strip { font-size: 11px; padding: 6px 12px; }
    .mmi-demo-strip__tag { font-size: 10px; padding: 1px 6px; }
}

/*═════════════════════════════════════════════════════════════════════
 *  Full-bleed alignfull covers in page.html
 *  ─────────────────────────────────────────────────────────────────
 *  page.html's <main> has horizontal padding via clamp(20px, 4vw, 48px)
 *  and 48px padding-top. WP's `alignfull` would normally break out, but
 *  that requires --wp--style--root--padding-* CSS vars in theme.json,
 *  which this theme intentionally doesn't set (those globals would also
 *  affect every other inner block). Manually re-implement the breakout
 *  here, scoped to the cover block which is the only alignfull surface
 *  the seeded pages use.
 *═════════════════════════════════════════════════════════════════════*/

/* Use the 100vw + translateX trick so the cover spans the viewport
 * regardless of the constrained parent's padding. Reliable across
 * browsers and doesn't require knowing the exact parent padding. */
main.wp-block-group .wp-block-cover.alignfull {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Cancel the main padding-top so the cover sits flush against the site
 * header when it's the first block on the page. */
main.wp-block-group > .wp-block-cover.alignfull:first-child,
main.wp-block-group > .wp-block-post-content:first-child > .wp-block-cover.alignfull:first-child {
    margin-top: -48px;
}

/*═════════════════════════════════════════════════════════════════════
 *  Seeded-page content widening
 *  ─────────────────────────────────────────────────────────────────
 *  WP's constrained-layout default content-size from theme.json is
 *  unset, so children default to ~640px. For the seeded About / Visit /
 *  Food Court pages — which have multi-column sections — that's much
 *  too narrow. Override the `--wp--style--global--content-size` CSS
 *  variable on singular pages so the default content width becomes
 *  1200px. Anything that explicitly needs narrower (single-column text
 *  paragraphs) can use a max-width override on the paragraph itself.
 *═════════════════════════════════════════════════════════════════════*/

body.page main.wp-block-group {
    --wp--style--global--content-size: 1200px;
}

/* Paragraphs and lists are easier to read at ~760px. Cap them inline
 * even when the layout allows wider. */
body.page main.wp-block-group > .wp-block-post-content > section > p,
body.page main.wp-block-group > .wp-block-post-content > section > ul,
body.page main.wp-block-group > .wp-block-post-content > section > ol,
body.page main.wp-block-group section.wp-block-group > p:not(.has-text-color),
body.page main.wp-block-group section.wp-block-group > ul,
body.page main.wp-block-group section.wp-block-group > ol {
    max-width: 760px;
    margin-inline: auto;
}

/*═════════════════════════════════════════════════════════════════════
 *  Site logo / site title in the desktop header
 *  ─────────────────────────────────────────────────────────────────
 *  header.html has BOTH a wp:site-logo block and a wp:site-title block
 *  (the latter labeled `.mmi-header-site-title-fallback`). When WP's
 *  custom-logo theme_mod is set, the body has class `.wp-custom-logo`
 *  and we hide the title fallback — otherwise the site title shows
 *  instead. This way a fresh theme install without a logo still has
 *  visible chrome at the top.
 *═════════════════════════════════════════════════════════════════════*/

.wp-custom-logo .mmi-header-site-title-fallback {
    display: none;
}
.mmi-desktop-header .wp-block-site-logo {
    margin-left: 32px;
}
.mmi-desktop-header .wp-block-site-logo img {
    max-height: 104px;
    width: auto;
    height: auto;
}
.mmi-top-bar-logo img {
    max-height: 44px;
}