/* ==========================================================================
   Mexperience Global Menu restyle — 2026 (labels + flyout panel)
   ADMIN-ONLY preview, layered on TOP of the already-live 2026 header.
   Enqueued LAST (depends on mex-header-2026), scoped to body.mex-menu-2026 so
   nothing reaches the public until mex_menu_2026_live() returns true.

   APPEARANCE + TYPOGRAPHY only. Never sets position / top / width / display /
   opacity / visibility / transform on the flyout CONTAINER (ul.sub-menu) or the
   curtain — those are owned by header-2026.css/js and drive the silky
   open/close choreography, which must not be disturbed. The only motion added
   here is INSIDE the panel (a staggered content reveal keyed off the existing
   .mexh-open state) and the label underline — neither touches the open/close
   timing. Tokens (--mexh-*) come from header-2026.css :root.

   Scope: DESKTOP global menu only (#menu-main-menu-v8-3 inside #site-nav).
   Footer (#footer-site-nav) and mobile drawer (#main-nav-mobile) are handled
   in their own sessions and are deliberately left untouched.

   Design language agreed with the client:
     - Labels  : Direction 2 "editorial uppercase" (small tracked caps).
     - Chevron : micro, low-contrast, state-carrying (rotates 180° when open).
     - Flyout  : Concept A "editorial band" — stone panel, red top flourish,
                 gold uppercase column eyebrows, ink links with a "reveal chip"
                 on hover, staggered column entrance, aligned to the 1070 grid.
   ========================================================================== */

@media screen and (min-width:1000px){

  /* ======================================================================
     1. TOP-LEVEL LABELS — Direction 2, editorial uppercase
     ====================================================================== */

  /* Quiet, Apple-like: light + small + soft grey. The smaller type buys back
     room, so the gaps can breathe a little without crowding the logo. */
  body.mex-menu-2026 ul#menu-main-menu-v8-3{ gap:22px !important; }

  body.mex-menu-2026 #site-nav ul#menu-main-menu-v8-3 > li > a{
    position:relative !important;
    font-family:'Open Sans',Arial,sans-serif !important;
    font-size:11px !important;
    font-weight:400 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
    color:#6f6f6f !important;
    transition:color .18s ease !important;
  }
  /* TRIAL flourish: a hairline rounded RED box blooms around the label on hover
     (same motion as the flyout reveal chip, but a red outline and NO fill). */
  body.mex-menu-2026 #site-nav ul#menu-main-menu-v8-3 > li > a::before{
    content:"" !important;
    position:absolute !important;
    inset:-6px -11px !important;
    border-radius:8px !important;
    border:1px solid var(--mexh-border) !important;   /* light grey hairline (text still turns red) */
    background:transparent !important;
    opacity:0;
    transform:scale(.97);
    transition:opacity .18s ease, transform .18s ease !important;
    pointer-events:none;
  }
  body.mex-menu-2026 #site-nav ul#menu-main-menu-v8-3 > li > a:hover,
  body.mex-menu-2026 #site-nav ul#menu-main-menu-v8-3 > li > a:focus-visible{
    color:var(--mexh-red) !important;
  }
  body.mex-menu-2026 #site-nav ul#menu-main-menu-v8-3 > li > a:hover::before,
  body.mex-menu-2026 #site-nav ul#menu-main-menu-v8-3 > li > a:focus-visible::before{
    opacity:1 !important;
    transform:scale(1) !important;
  }

  /* Micro chevron: small, thin, ~40% opacity, tucked close. Brightens on hover.
     Overrides the header-2026 chevron geometry (still a rotated border). */
  body.mex-menu-2026 #site-nav ul#menu-main-menu-v8-3 > li.menu-item-has-children > a::after,
  body.mex-menu-2026 #site-nav ul#menu-main-menu-v8-3 > li.page_item_has_children > a::after{
    width:5px !important; height:5px !important;
    border-width:0 1.2px 1.2px 0 !important;
    margin:-2px 0 0 6px !important;
    opacity:.4 !important;
    transition:transform .2s ease, opacity .2s ease !important;
  }
  body.mex-menu-2026 #site-nav ul#menu-main-menu-v8-3 > li.menu-item-has-children:hover > a::after{
    opacity:.8 !important;
  }

  /* ACTIVE STATE OFF (retained). No label is ever highlighted just because the
     current page sits under it — kills the old "multiple red labels". */
  body.mex-menu-2026 #site-nav #menu-main-menu-v8-3 > li.current-menu-item > a,
  body.mex-menu-2026 #site-nav #menu-main-menu-v8-3 > li.current-menu-ancestor > a,
  body.mex-menu-2026 #site-nav #menu-main-menu-v8-3 > li.current-menu-parent > a,
  body.mex-menu-2026 #site-nav #menu-main-menu-v8-3 > li.current_page_item > a,
  body.mex-menu-2026 #site-nav #menu-main-menu-v8-3 > li.current_page_ancestor > a,
  body.mex-menu-2026 #site-nav #menu-main-menu-v8-3 > li.current_page_parent > a{
    color:#6f6f6f !important;
  }

  /* OPEN-STATE FEEDBACK (meaningful state, replacing the retired active-red):
     while a flyout is open, keep ITS label underline lit and flip its chevron.
     Uses :has() — modern browsers only; older ones simply skip it (graceful). */
  body.mex-menu-2026 #site-nav ul#menu-main-menu-v8-3 > li:has(> ul.sub-menu.mexh-open) > a{
    color:var(--mexh-red) !important;
  }
  body.mex-menu-2026 #site-nav ul#menu-main-menu-v8-3 > li:has(> ul.sub-menu.mexh-open) > a::before{
    opacity:1 !important;
    transform:scale(1) !important;
  }
  body.mex-menu-2026 #site-nav ul#menu-main-menu-v8-3 > li:has(> ul.sub-menu.mexh-open) > a::after{
    transform:rotate(-135deg) !important;   /* down-caret -> up-caret */
    margin-top:2px !important;               /* re-optical-centre when flipped */
    opacity:.85 !important;
  }

  /* ======================================================================
     2. FLYOUT PANEL — Concept A "editorial band"
        Appearance only on the container; positioning/animation stay upstream.
     ====================================================================== */

  /* Panel surface: warm stone, a THIN 1px red top flourish, hairline base and a
     soft drop — twin to the 2026 search panel. (A: line much thinner.) */
  body.mex-menu-2026 #menu-main-menu-v8-3 > li > ul.sub-menu{
    background:var(--mexh-stone) !important;
    border-top:1px solid var(--mexh-red) !important;
    border-bottom:1px solid var(--mexh-border) !important;
    box-shadow:0 12px 28px rgba(0,0,0,.08) !important;
    padding:0 !important;                    /* drop legacy sub-menu padding so the */
    margin:0 !important;                      /* .main_menu_flyout 10px frame is A=B symmetric */
  }

  /* .main_menu_flyout carries an inline padding:10px. Keep the 10px TOP/BOTTOM
     (the A/B frame) but ZERO the sides: the white tray is positioned relative to
     .main_menu_inner, so any horizontal padding here shifts the tray off the
     gutter. On desktop the calc() gutter absorbed it; on tablet the fixed 24px
     gutter did not, leaving the tray inset ~10px each side. Zeroing the sides
     makes the tray align to the true gutter (logo/content edges) at every
     breakpoint. */
  body.mex-menu-2026 #menu-main-menu-v8-3 ul.sub-menu .main_menu_flyout{
    padding:10px 0 !important;
  }

  /* GRID + SINGLE SOFT PANEL. The content is inset to (gutter + 30px) and a
     single rounded "tray" is drawn behind everything via ::before, sitting at
     the gutter (so it aligns to the 1070 grid / under the logo). This REPLACES
     the per-column cards. It's an absolute layer -> adds no layout, so the
     column grid, alignment and open/close animation are all untouched. */
  body.mex-menu-2026 #menu-main-menu-v8-3 ul.sub-menu .main_menu_inner{
    position:relative !important;
    max-width:none !important;
    margin:0 !important;
    padding-left:calc(var(--mexh-gutter) + 30px) !important;
    padding-right:calc(var(--mexh-gutter) + 30px) !important;
    padding-top:20px !important;
    padding-bottom:24px !important;
    box-sizing:border-box !important;
    display:flow-root !important;
  }
  body.mex-menu-2026 #menu-main-menu-v8-3 ul.sub-menu .main_menu_inner::before{
    content:"" !important;
    position:absolute !important;
    top:0; bottom:0;
    left:var(--mexh-gutter); right:var(--mexh-gutter);
    background:#fff !important;
    border-radius:16px !important;
    box-shadow:0 1px 3px rgba(0,0,0,.04) !important;   /* soft, static, no hover change */
    z-index:0;
    pointer-events:none;
  }

  /* Keep the eyebrow + columns above the tray. */
  body.mex-menu-2026 #menu-main-menu-v8-3 ul.sub-menu .main_menu_inner_header{
    position:relative !important; z-index:1 !important;
  }

  /* Tagline -> quiet grey uppercase eyebrow; gap to the sections tightened (B). */
  body.mex-menu-2026 #menu-main-menu-v8-3 ul.sub-menu .menu_flyout_tagline{
    font-family:'Open Sans',Arial,sans-serif !important;
    font-size:11px !important;
    font-weight:500 !important;
    letter-spacing:.12em !important;
    text-transform:uppercase !important;
    color:#8a8a8a !important;
    border-bottom:1px solid rgba(0,0,0,.05) !important;   /* E: finer/lighter hairline */
    padding:0 0 10px 0 !important;
    margin:0 0 12px 0 !important;
  }

  /* Equal-width columns (max 5). Box geometry (20% width, float) unchanged, so
     the grid/alignment is exactly as before; only an inter-column gutter. */
  body.mex-menu-2026 #menu-main-menu-v8-3 ul.sub-menu .flyout_box_column{
    position:relative !important;
    z-index:1 !important;
    width:20% !important;
    max-width:20% !important;
    box-sizing:border-box !important;
    float:left !important;
    padding:0 22px 0 0 !important;           /* inter-column gutter only */
    text-align:left !important;              /* Option 1: neutralise inherited centering */
  }

  /* Column HEADERS. The text is an <a> INSIDE an <h3>, so both are styled here
     and the header is excluded from the link rules below. Light uppercase to
     match the top labels (C1) + a soft GOLD hairline underline (C2, non-red,
     complements the warm background), sized to the text via inline-block. */
  body.mex-menu-2026 #menu-main-menu-v8-3 ul.sub-menu .flyout_box_column > h3{
    display:block !important;                /* block-level shrink-to-fit: ignores inherited
                                                text-align:center and lands hard-left, exactly
                                                like the links below (fixes the centering) */
    width:-moz-fit-content !important;
    width:fit-content !important;
    max-width:100% !important;
    text-align:left !important;
    margin:0 0 5px 0 !important;             /* tighter gap below the line to the first item */
    padding:0 0 2px 0 !important;            /* tighter gap above the line, under the text */
    border-bottom:1px solid rgba(199,116,0,.38) !important;   /* D: soft gold 1px hairline */
    line-height:1.3 !important;
  }
  body.mex-menu-2026 #menu-main-menu-v8-3 ul.sub-menu .flyout_box_column > h3 > a{
    display:inline !important;
    padding:0 !important;                    /* kill the legacy 10px left indent on the header <a> */
    margin:0 !important;
    font-family:'Open Sans',Arial,sans-serif !important;
    font-size:11px !important;
    font-weight:500 !important;
    letter-spacing:.1em !important;
    text-transform:uppercase !important;
    color:#5f5f5f !important;
    text-decoration:none !important;
    transition:color .18s ease !important;
  }
  body.mex-menu-2026 #menu-main-menu-v8-3 ul.sub-menu .flyout_box_column > h3 > a:hover{
    color:var(--mexh-red) !important;
  }

  /* LINKS (direct children only -> the header's h3>a is untouched). Lighter and
     more elegant (D1); brand red on hover. */
  body.mex-menu-2026 #site-nav #menu-main-menu-v8-3 ul.sub-menu .flyout_box_column > a{
    position:relative !important;
    display:block !important;
    width:-moz-fit-content !important;
    width:fit-content !important;
    max-width:100% !important;
    font-family:'Open Sans',Arial,sans-serif !important;
    font-size:12.5px !important;
    font-weight:400 !important;
    line-height:1.55 !important;
    color:#808080 !important;                /* D1: lighter, more elegant */
    padding:5px 0 !important;
    transition:color .18s ease !important;
    z-index:1;
  }
  body.mex-menu-2026 #site-nav #menu-main-menu-v8-3 ul.sub-menu .flyout_box_column > a:hover,
  body.mex-menu-2026 #site-nav #menu-main-menu-v8-3 ul.sub-menu .flyout_box_column > a:focus-visible{
    color:var(--mexh-red) !important;
  }

  /* REVEAL CHIP on links — grey hairline pill (no fill), wrapped TIGHTLY (D2). */
  body.mex-menu-2026 #menu-main-menu-v8-3 ul.sub-menu .flyout_box_column > a::before{
    content:"" !important;
    position:absolute !important;
    inset:2px -8px !important;               /* C: tighter above/below the words (hugs the text) */
    border-radius:6px !important;
    background:transparent !important;
    box-shadow:inset 0 0 0 1px var(--mexh-border) !important;
    opacity:0;
    transform:scale(.97);
    transition:opacity .18s ease, transform .18s ease !important;
    z-index:-1;
    pointer-events:none;
  }
  body.mex-menu-2026 #menu-main-menu-v8-3 ul.sub-menu .flyout_box_column > a:hover::before,
  body.mex-menu-2026 #menu-main-menu-v8-3 ul.sub-menu .flyout_box_column > a:focus-visible::before{
    opacity:1;
    transform:scale(1);
  }

  /* STAGGERED COLUMN ENTRANCE: columns rise/fade in sequence when the panel
     opens, riding the existing .mexh-open class (no JS, no timing changes to
     the open/close). Delays are per column position. */
  body.mex-menu-2026 #menu-main-menu-v8-3 > li > ul.sub-menu .flyout_box_column{
    opacity:0;
    transform:translateY(10px);
    transition:opacity .5s ease, transform .5s ease !important;
  }
  body.mex-menu-2026 #menu-main-menu-v8-3 > li > ul.sub-menu.mexh-open .flyout_box_column{
    opacity:1;
    transform:none;
  }
  body.mex-menu-2026 #menu-main-menu-v8-3 > li > ul.sub-menu.mexh-open .flyout_box_column:nth-child(1){ transition-delay:.02s; }
  body.mex-menu-2026 #menu-main-menu-v8-3 > li > ul.sub-menu.mexh-open .flyout_box_column:nth-child(2){ transition-delay:.06s; }
  body.mex-menu-2026 #menu-main-menu-v8-3 > li > ul.sub-menu.mexh-open .flyout_box_column:nth-child(3){ transition-delay:.10s; }
  body.mex-menu-2026 #menu-main-menu-v8-3 > li > ul.sub-menu.mexh-open .flyout_box_column:nth-child(4){ transition-delay:.14s; }
  body.mex-menu-2026 #menu-main-menu-v8-3 > li > ul.sub-menu.mexh-open .flyout_box_column:nth-child(5){ transition-delay:.18s; }
  body.mex-menu-2026 #menu-main-menu-v8-3 > li > ul.sub-menu.mexh-open .flyout_box_column:nth-child(6){ transition-delay:.22s; }
  body.mex-menu-2026 #menu-main-menu-v8-3 > li > ul.sub-menu.mexh-open .flyout_box_column:nth-child(7){ transition-delay:.26s; }

  /* Retired CTA pill buttons: defensive hide (markup already removed). */
  body.mex-menu-2026 #menu-main-menu-v8-3 ul.sub-menu .main_menu_flyout_buttons{
    display:none !important;
  }
}

/* Respect reduced-motion: no entrance animation, columns simply present. */
@media screen and (min-width:1000px) and (prefers-reduced-motion:reduce){
  body.mex-menu-2026 #menu-main-menu-v8-3 > li > ul.sub-menu .flyout_box_column{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* ==========================================================================
   4. SEARCH ICON — refined to sit with the diet labels (admin-gated).
      All CSS: stroke-width, size, colour and even the lens/handle geometry
      are overridden here, so the PUBLIC icon (header-2026.css markup) is
      untouched until de-gate.
   ========================================================================== */
@media screen and (min-width:1000px){

  /* Match the label grey; lighter, smaller glyph (header default is #444 / 22px / 2px). */
  body.mex-menu-2026 #mex-search-toggle{ color:#6f6f6f !important; }
  /* Turn red on hover / focus / when the panel is open — same as the labels.
     (Needed because the resting !important above would otherwise beat the
     header's non-important hover colour.) */
  body.mex-menu-2026 #mex-search-toggle:hover,
  body.mex-menu-2026 #mex-search-toggle:focus-visible,
  body.mex-menu-2026 #mex-search-toggle[aria-expanded="true"]{ color:var(--mexh-red) !important; }
  body.mex-menu-2026 #mex-search-toggle svg{
    width:18px !important;
    height:18px !important;
    stroke-width:1.5 !important;      /* CSS overrides the SVG's stroke-width="2" attribute */
    overflow:visible;
  }

  /* Refined silhouette: smaller lens set upper-left + a longer, thinner handle.
     Uses CSS SVG geometry properties; browsers without support fall back to the
     markup's own coordinates (still a tidy magnifier). */
  body.mex-menu-2026 #mex-search-toggle svg circle{ cx:10px; cy:10px; r:6.5px; }
  body.mex-menu-2026 #mex-search-toggle svg line{ x1:20px; y1:20px; x2:14.8px; y2:14.8px; }

  /* Shared hover flourish: the SAME grey hairline the labels use — a rounded
     box blooms behind the icon; the glyph goes red (header already reddens it
     on hover / when the panel is open). */
  body.mex-menu-2026 #mex-search-toggle::before{
    content:"" !important;
    position:absolute;
    top:50%; left:50%;
    width:34px; height:26px;               /* height matched to the label pills (~25px) */
    transform:translate(-50%,-50%) scale(.9);
    border:1px solid var(--mexh-border);
    border-radius:8px;                     /* same radius as the label hover box */
    background:transparent;
    opacity:0;
    transition:opacity .18s ease, transform .18s ease;
    pointer-events:none;
  }
  body.mex-menu-2026 #mex-search-toggle:hover::before,
  body.mex-menu-2026 #mex-search-toggle:focus-visible::before,
  body.mex-menu-2026 #mex-search-toggle[aria-expanded="true"]::before{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
  }
  body.mex-menu-2026 #mex-search-toggle:focus-visible{ outline:none; }
}

/* ==========================================================================
   5. MOBILE DRAWER — graft the section-header style across (lean) and fix the
      layout/alignment. The hamburger drawer injects the same #menu_flyout_*
      markup into .mobile-flyout-submenu-box (inside #main-nav-mobile), so the
      section headers are the same .flyout_box_column > h3 > a. The item links
      keep their existing size/spacing; we only restyle the headers + title and
      stack the sections so they flow naturally.
      Scoped under #main-nav-mobile to beat the legacy `#main-nav-mobile a`
      (id) padding that was indenting/mis-aligning things.
   ========================================================================== */
@media screen and (max-width:999px){

  /* (1) REBALANCE. The submenu box is 500px but the drawer is only 420px, so it
     overflowed and the short links left a big void on the right. Match the box
     to the drawer, then CENTRE the content block so it sits with balanced left/
     right margins instead of hugging the wall. */
  body.mex-menu-2026 #main-nav-mobile .mobile-flyout-submenu-box{
    width:420px !important;
    max-width:100% !important;
  }
  body.mex-menu-2026 #main-nav-mobile .mobile-flyout-submenu-box .main_menu_inner{
    max-width:340px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    /* symmetric inset so items are never jammed to the wall on narrow phones,
       while the max-width + auto margins still balance the wider iPad drawer */
    padding-left:24px !important;
    padding-right:24px !important;
    box-sizing:border-box !important;
  }

  /* (4/4A) Stack each section full-width so they flow in order with even
     spacing — removes the uneven vertical gaps of the old 2-column floats. */
  body.mex-menu-2026 #main-nav-mobile .mobile-flyout-submenu-box .flyout_box_column{
    float:none !important;
    clear:both !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 0 16px 0 !important;
    padding:0 !important;
  }

  /* Items keep their vertical tap spacing but drop the legacy 20px horizontal
     padding, so they align to the centred block's left edge. */
  body.mex-menu-2026 #main-nav-mobile .mobile-flyout-submenu-box .flyout_box_column > a{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* Section headers: light uppercase grey + soft gold hairline, left-aligned
     with the items (both now share the block's left edge). */
  body.mex-menu-2026 #main-nav-mobile .mobile-flyout-submenu-box .flyout_box_column > h3{
    display:block !important;
    width:-moz-fit-content !important;
    width:fit-content !important;
    max-width:100% !important;
    margin:0 0 6px 0 !important;
    padding:0 0 3px 0 !important;
    border-bottom:1px solid rgba(199,116,0,.38) !important;   /* soft gold hairline */
    line-height:1.3 !important;
  }
  body.mex-menu-2026 #main-nav-mobile .mobile-flyout-submenu-box .flyout_box_column > h3 > a{
    display:inline !important;
    padding:0 !important;
    margin:0 !important;
    font-family:'Open Sans',Arial,sans-serif !important;
    font-size:11px !important;
    font-weight:500 !important;
    letter-spacing:.1em !important;
    text-transform:uppercase !important;
    color:#5f5f5f !important;
    text-decoration:none !important;
  }

  /* (3) The submenu title (e.g. "Assistance") -> all caps, lighter, and CENTERED
     across the full width (was float:left/50%, which pushed it off-centre). */
  body.mex-menu-2026 #main-nav-mobile .mobile-flyout-submenu-box .menu_flyout_tagline{
    float:none !important;
    width:100% !important;
    text-align:center !important;
    text-transform:uppercase !important;
    font-weight:400 !important;
    letter-spacing:.12em !important;
    color:#5f5f5f !important;
  }
  /* Take the back-arrow out of the flow so it can't shift the centred title,
     and vertically-centre the title in the header so the arrow (absolute 50%)
     lines up with it on the same line. */
  body.mex-menu-2026 #main-nav-mobile .mobile-flyout-submenu-box .main_menu_inner_header{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:46px !important;
    text-align:center !important;
    margin-bottom:22px !important;   /* breathing room to the first section */
  }
  body.mex-menu-2026 #main-nav-mobile .mobile-flyout-submenu-box .mobile-nav-back-icon{
    position:absolute !important;
    left:0 !important;
    top:50% !important;
    transform:translateY(calc(-50% - 6px)) !important;   /* lift to the caps' optical centre */
    margin:0 !important;
    padding:6px !important;               /* larger tap target */
    line-height:0 !important;
    z-index:2 !important;
  }
  /* Keep the back arrow clearly visible (its <img> is only width="18"). */
  body.mex-menu-2026 #main-nav-mobile .mobile-flyout-submenu-box .mobile-nav-back-icon img{
    width:22px !important;
    height:auto !important;
    max-width:none !important;
    display:block !important;
  }

  /* (2) SCROLL UX. The drawer is the scroll container (overflow:auto), but touch
     scrolls were chaining to the background page. overscroll-behavior:contain
     keeps the scroll inside the drawer; a thin visible scrollbar makes it clear
     the panel itself scrolls. (Full body-lock on older iOS may still need a JS
     touch, but this stops the chaining on modern Safari/Chrome.) */
  body.mex-menu-2026 #main-nav-mobile{
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:thin !important;
    scrollbar-color:#c9c3bc transparent !important;
  }
  body.mex-menu-2026 #main-nav-mobile::-webkit-scrollbar{ width:8px !important; }
  body.mex-menu-2026 #main-nav-mobile::-webkit-scrollbar-thumb{
    background:#c9c3bc !important;
    border-radius:8px !important;
  }

  /* ------------------------------------------------------------------------
     Mobile search: reuse the desktop 2026 panel. header-2026.css hides both
     the panel and the curtain on mobile; un-hide them here so menu-2026.js can
     open the panel (it stays invisible via its own visibility/opacity until
     .is-open, exactly like desktop). Tap-outside / Esc / scroll-close come from
     header-2026.js for free.
     ------------------------------------------------------------------------ */
  body.mex-menu-2026 #mex-search-panel{ display:block !important; }
  body.mex-menu-2026 #main_flyout_curtain{
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    width:auto !important;
    height:auto !important;
    z-index:100040 !important;               /* below the panel (100049) + mast (100050) */
  }

  /* Give the panel a top strip so the X sits clear ABOVE the search field
     (it was overlapping the field's rounded corner). */
  body.mex-menu-2026 #mex-search-panel .mex-search-panel-inner{
    padding-top:46px !important;
    position:relative !important;
  }
  /* X close button injected into the panel by menu-2026.js — top-right corner. */
  body.mex-menu-2026 #mex-search-panel .mex-msearch-close{
    position:absolute !important;
    top:10px !important;
    right:14px !important;
    width:34px !important;
    height:34px !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    cursor:pointer !important;
    font:400 28px/34px 'Open Sans',Arial,sans-serif !important;
    color:#6f6f6f !important;
    transition:color .15s ease !important;
    z-index:2 !important;
  }
  body.mex-menu-2026 #mex-search-panel .mex-msearch-close:hover{ color:var(--mexh-red) !important; }
}

/* The injected X is mobile-only; on desktop the search toggle handles closing. */
@media screen and (min-width:1000px){
  body.mex-menu-2026 #mex-search-panel .mex-msearch-close{ display:none !important; }
}

/* ==========================================================================
   6. FOOTER — 2026 refresh (admin-gated), matching the flyout system.
      - Footer widget columns sit on a full-width STONE band with a 1px red top
        flourish; content re-inset to the 1150 column.
      - Column headings -> light uppercase grey + soft gold hairline (flyout).
      - Links -> quiet grey, brand red + thin underline on hover (the lighter
        motif we chose for the footer). Active/current-page colour turned OFF.
      - The copyright strip gets a full-width SAND band for contrast/flair.
      Full-bleed via negative side margins (no width:100vw, avoids scrollbar
      issues); content re-inset with 50vw-based padding, clamped to 24px on
      narrow screens.
   ========================================================================== */

/* ---- Stone band (footer widget columns) ---- */
body.mex-menu-2026 #footerwidgets-wrap{
  margin-left:calc(-50vw + 50%) !important;
  margin-right:calc(-50vw + 50%) !important;
  margin-top:48px !important;
  background:var(--mexh-stone) !important;
  border-top:1px solid var(--mexh-red) !important;   /* red top flourish */
  box-sizing:border-box !important;
  padding-top:46px !important;
  padding-bottom:40px !important;
  padding-left:max(24px, calc(50vw - 575px)) !important;
  padding-right:max(24px, calc(50vw - 575px)) !important;
}

/* Column headings: light uppercase grey + soft gold hairline (as the flyout). */
body.mex-menu-2026 #footerwidgets-wrap .widget-title{
  display:inline-block !important;
  font-family:'Open Sans',Arial,sans-serif !important;
  font-size:11px !important;
  font-weight:500 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  color:#5f5f5f !important;
  border-bottom:1px solid rgba(199,116,0,.38) !important;   /* soft gold hairline */
  padding:0 0 3px 0 !important;
  margin:0 0 14px 0 !important;
}

/* Links: quiet grey; brand red + thin underline on hover (lighter footer motif).
   Setting the colour here with high specificity also switches OFF the legacy
   current-page (active) red/gold highlight. */
body.mex-menu-2026 #footerwidgets-wrap .widget a{
  font-family:'Open Sans',Arial,sans-serif !important;
  font-size:14px !important;
  line-height:1.5 !important;
  color:#808080 !important;
  text-decoration:none !important;
  border-bottom:0 !important;                          /* kill legacy underline */
  background-image:linear-gradient(var(--mexh-red),var(--mexh-red)) !important;
  background-repeat:no-repeat !important;
  background-position:0 100% !important;
  background-size:0% 1px !important;
  transition:background-size .28s cubic-bezier(0.16,1,0.3,1), color .15s ease !important;
}
body.mex-menu-2026 #footerwidgets-wrap .widget a:hover,
body.mex-menu-2026 #footerwidgets-wrap .widget a:focus-visible{
  background-size:100% 1px !important;
  color:var(--mexh-red) !important;
}

/* ---- Sand band (copyright / trademark strip) ---- */
body.mex-menu-2026 #colophon{
  margin-left:calc(-50vw + 50%) !important;
  margin-right:calc(-50vw + 50%) !important;
  background:#FBF3E4 !important;                        /* Mexperience sand */
  border-top:1px solid var(--mexh-border) !important;
  box-sizing:border-box !important;
  padding-top:22px !important;
  padding-bottom:22px !important;
  padding-left:max(24px, calc(50vw - 575px)) !important;
  padding-right:max(24px, calc(50vw - 575px)) !important;
}
body.mex-menu-2026 #colophon #site-info,
body.mex-menu-2026 #colophon #site-info .credit li{
  font-family:'Open Sans',Arial,sans-serif !important;
  font-size:12.5px !important;
  color:#7a7368 !important;                             /* warm grey on sand */
}
body.mex-menu-2026 #colophon #site-info a{
  color:#7a7368 !important;
  text-decoration:none !important;
  border-bottom:0 !important;
  transition:color .15s ease !important;
}
body.mex-menu-2026 #colophon #site-info a:hover{ color:var(--mexh-red) !important; }