/* ==========================================================================
   Mexperience header restyle — 2026 (Phase 1: header elements only)
   Admin-gated preview. Loaded LAST (after mobile-menus.css) and scoped to
   body.mex-header-2026 so nothing leaks into the legacy header.

   Scope of this phase: the masthead layout, the sharp left-aligned logo, the
   wordmark->M morph on scroll, and the expanding search. Nav-item styling and
   the click-curtain are a LATER phase and are intentionally left alone here.
   ========================================================================== */

:root{
  --mexh-red:#ce1126;
  --mexh-red-dark:#a50e1f;
  --mexh-gold-dark:#C77400;   /* Mexperience dark gold (card tints) */
  --mexh-ink:#191919;
  --mexh-nav:#3f3f3f;
  --mexh-border:#e7e3df;
  --mexh-stone:#FAF9F7;
  --mexh-h:88px;     /* full masthead height  */
  --mexh-h-sc:60px;  /* scrolled masthead height */
  /* Logo/search inset. Default 24px = the flush content edge used on iPad
     landscape (1000-1199) and touch tablets (Sunday's edge-margin work). On true
     mouse-desktop the content column centres at 1150px (+40px padding), so we
     switch to calc(50% - 535px) to keep them aligned to that column (overrides
     below). Previously this was always calc(...), so on iPad landscape the logo
     & search sat further in than the content. */
  --mexh-gutter:24px;
}
/* Centre-align the gutter to the 1150px content column ONLY where the content is
   actually centred: mouse desktop >=1200, or any viewport >=1440 (Sunday caps the
   touch-tablet flush-edge treatment at 1439). Touch tablets <=1439 keep 24px. */
@media screen and (min-width:1200px) and (hover:hover) and (pointer:fine){
  :root{ --mexh-gutter:calc(50% - 535px); }
}
@media screen and (min-width:1440px){
  :root{ --mexh-gutter:calc(50% - 535px); }
}

/* --------------------------------------------------------------------------
   1. DESKTOP  (>= 1000px : where the legacy horizontal nav is shown)
   -------------------------------------------------------------------------- */
@media screen and (min-width:1000px){

  /* Masthead becomes a single sticky bar. */
  body.mex-header-2026 header#masthead{
    position:sticky !important;
    top:0 !important;
    left:0; right:0;
    z-index:100050 !important;
    display:block !important;
    height:var(--mexh-h) !important;
    min-height:var(--mexh-h) !important;
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
    border-bottom:1px solid var(--mexh-border) !important;
    box-shadow:none !important;
    transition:height .25s ease;
  }
  body.admin-bar.mex-header-2026 header#masthead{ top:32px !important; }

  /* NEUTRALISE the legacy mobile "hide-on-scroll": the theme's scroll handler
     toggles body.mobile-scroll-on (top:-76px) and jQuery-UI switchClass()es
     on/off-screen (inline top), which yanked the sticky desktop mast up/down on
     every scroll = the jump/flash. Pin it hard so none of that can move it. */
  body.mobile-scroll-on.mex-header-2026 header#masthead,
  body.mex-header-2026 header#masthead.off-screen,
  body.mex-header-2026 header#masthead.on-screen{
    position:sticky !important;
    top:0 !important;
    transition:height .25s ease !important;   /* cancel the legacy top 1.2s transition */
  }
  body.admin-bar.mobile-scroll-on.mex-header-2026 header#masthead,
  body.admin-bar.mex-header-2026 header#masthead.off-screen,
  body.admin-bar.mex-header-2026 header#masthead.on-screen{
    top:32px !important;
  }

  /* Hide legacy / mobile-only header pieces. */
  body.mex-header-2026 #site-title,
  body.mex-header-2026 #mobile-menu-full-width,
  body.mex-header-2026 #small-m-home-icon,
  body.mex-header-2026 img#mexperience_logo_image,
  body.mex-header-2026 #masthead > ul,               /* mobile-top-menu */
  body.mex-header-2026 #fixed-header-balance,
  body.mex-header-2026 #mobile-scroll-spacer{
    display:none !important;
  }

  /* ---- Logo (left, vertically centred, morphs word->M) ---- */
  body.mex-header-2026 #mex-logo-2026{
    position:absolute;
    left:var(--mexh-gutter);
    top:0;
    height:var(--mexh-h);
    display:flex;
    align-items:center;
    z-index:3;
    text-decoration:none;
    transition:height .25s ease;
  }
  /* Both logos are always present and CROSSFADE in place (opacity, not a
     display swap — display can't transition). The word stays in flow (defines
     the anchor's width); the M is absolutely stacked over it at the left, so on
     scroll the wordmark appears to collapse into its M. */
  body.mex-header-2026 #mex-logo-2026 .mex-logo-word{
    height:38px; width:auto; display:block;
    opacity:1;
    transition:opacity 1.2s ease;
  }
  body.mex-header-2026 #mex-logo-2026 .mex-logo-m{
    position:absolute;
    left:0; top:50%;
    transform:translateY(-50%);
    height:38px; width:auto; display:block;
    opacity:0;
    transition:opacity 1.2s ease;
  }

  /* ---- Search toggle (far right) ---- */
  body.mex-header-2026 #mex-search-toggle{
    position:absolute;
    right:var(--mexh-gutter);
    top:0;
    height:var(--mexh-h);
    display:flex; align-items:center; justify-content:center;
    width:40px; padding:0;
    background:none; border:0; cursor:pointer;
    color:#444; z-index:3;
    transition:height .25s ease, color .15s ease;
  }
  body.mex-header-2026 #mex-search-toggle:hover,
  body.mex-header-2026 #mex-search-toggle[aria-expanded="true"]{ color:var(--mexh-red); }
  body.mex-header-2026 #mex-search-toggle svg{ width:22px; height:22px; }

  /* ---- Nav row (right-aligned, on the same line as the logo) ---- */
  body.mex-header-2026 #mobile-menu-wrap{
    display:block !important;
    height:var(--mexh-h);
    margin:0 !important; padding:0 !important;
  }
  body.mex-header-2026 nav#site-nav{
    position:absolute !important;
    left:0; right:0; top:0;
    height:var(--mexh-h) !important;
    margin:0 !important;
    padding:0 calc(var(--mexh-gutter) + 60px) 0 0 !important; /* clears the search icon at the gutter */
    background:transparent !important;
    display:flex !important;
    align-items:center;
    justify-content:flex-end;
    clear:none !important;
    transition:height .25s ease;
  }
  /* the visible primary menu bar */
  body.mex-header-2026 ul#menu-main-menu-v8-3{
    position:static !important;
    display:flex !important;
    align-items:center;
    gap:26px;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:none !important;
    left:auto !important; right:auto !important; top:auto !important;
  }
  body.mex-header-2026 ul#menu-main-menu-v8-3 > li{
    position:relative;
    display:inline-flex !important;
    align-items:center;
    height:var(--mexh-h) !important;   /* full mast height so the flyout's top:100% = mast bottom edge */
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:none !important;
  }

  /* Drop the mega-flyout to the natural lower edge of the mast (not over it).
     top:100% of the full-height li == mast bottom, so it self-corrects when the
     mast shrinks on scroll and is unaffected by the WP admin-bar offset. */
  body.mex-header-2026 #site-nav ul#menu-main-menu-v8-3 > li > ul.sub-menu{
    top:100% !important;
  }
  body.mex-header-2026 ul#menu-main-menu-v8-3 > li > a{
    display:inline-flex !important;
    align-items:center;
    padding:0 !important;
    font-family:'Open Sans',Arial,sans-serif !important;
    font-size:15px !important;
    font-weight:500 !important;                 /* lighter than the old bold */
    line-height:1.2 !important;
    color:var(--mexh-nav) !important;
    border:0 !important;
    background:none !important;
  }
  body.mex-header-2026 ul#menu-main-menu-v8-3 > li > a:hover{ color:var(--mexh-red) !important; }

  /* Elegant dropdown indicator: a thin chevron that replaces the mis-aligned
     legacy caret and is vertically centred with the label. */
  body.mex-header-2026 ul#menu-main-menu-v8-3 > li.menu-item-has-children > a::after,
  body.mex-header-2026 ul#menu-main-menu-v8-3 > li.page_item_has_children > a::after{
    content:"" !important;
    display:inline-block !important;
    width:6px; height:6px;
    margin:-2px 0 0 8px;                         /* optical centre */
    border:solid currentColor;
    border-width:0 1.5px 1.5px 0;
    transform:rotate(45deg);
    transition:transform .2s ease;
    opacity:.55;
    position:static !important;
    top:auto !important; left:auto !important; right:auto !important;
    font-size:0 !important; line-height:0 !important;
  }
  body.mex-header-2026 ul#menu-main-menu-v8-3 > li.menu-item-has-children:hover > a::after{
    opacity:.9;
  }

  /* The visible primary menu is ul#menu-main-menu-v8-3 (which also carries the
     .nav-menu class). Hide only the stray empty direct-child sub-menu and the
     mobile close link that the template also prints inside #site-nav. */
  body.mex-header-2026 nav#site-nav > ul.sub-menu,
  body.mex-header-2026 #mobile-menu-close,
  body.mex-header-2026 #mobile-menu-toggle{
    display:none !important;
  }

  /* ---------- SCROLLED (minimal mast) ----------
     Driven by OUR body.mexh-scrolled class (set by header-2026.js WITH
     HYSTERESIS), NOT the theme's body.scrolled-down. The theme flips
     scrolled-down at a single 73px point; because our mast shrinks in-flow,
     that shrink trims scrollTop ~28px and re-crosses 73 → rapid flicker. Our
     class turns ON only past ~90px and OFF only below ~40px, so the trim lands
     inside the buffer and can never oscillate. */
  body.mex-header-2026.mexh-scrolled header#masthead{ height:var(--mexh-h-sc) !important; min-height:var(--mexh-h-sc) !important; }
  body.mex-header-2026.mexh-scrolled #mex-logo-2026,
  body.mex-header-2026.mexh-scrolled #mex-search-toggle,
  body.mex-header-2026.mexh-scrolled nav#site-nav,
  body.mex-header-2026.mexh-scrolled #mobile-menu-wrap{ height:var(--mexh-h-sc) !important; }

  body.mex-header-2026.mexh-scrolled #mex-logo-2026 .mex-logo-word{ opacity:0; }
  body.mex-header-2026.mexh-scrolled #mex-logo-2026 .mex-logo-m{ opacity:1; }

  /* THE SCROLL JUMP: the legacy offsets content for its old fixed header via
     `body.scrolled-down #container { margin-top:160px }` — keyed on the THEME's
     own class, so we neutralise on the SAME class (it toggles at 73px). With our
     sticky mast that would otherwise shove the whole page down ~160px. */
  body.scrolled-down.mex-header-2026 div#container{ margin-top:0 !important; }

  /* Top-level items track the shrunk mast so the flyout (top:100%) drops to the
     minimal mast's lower edge when scrolled. */
  body.mex-header-2026.mexh-scrolled ul#menu-main-menu-v8-3 > li{ height:var(--mexh-h-sc) !important; }

  /* Neutralise the legacy scroll behaviour (fixed 120px nav bar + old M). */
  body.mex-header-2026 ul#menu-main-menu-v8-3.scrolled-down{
    position:static !important;
    height:auto !important;
    width:auto !important;
    top:auto !important; left:auto !important; right:auto !important;
    padding:0 !important;
    background:none !important;
  }
  body.mex-header-2026 ul#menu-main-menu-v8-3.scrolled-down > li li{
    height:auto !important; padding:0 !important; background:none !important;
  }
  body.mex-header-2026 #mexperience_logo_no_scroll,
  body.mex-header-2026 #mexperience_logo_scroll_only{ display:none !important; }
}

/* --------------------------------------------------------------------------
   2. MOBILE  (<= 999px : hamburger). Logo left, hamburger right, NO search
      icon (search lives inside the hamburger menu).
   -------------------------------------------------------------------------- */
@media screen and (max-width:999px){

  body.mex-header-2026 header#masthead{
    position:fixed !important;
    top:0; left:0; right:0;
    width:100% !important;
    height:64px !important;
    padding:0 16px !important;
    margin:0 !important;
    background:#fff !important;
    border-bottom:1px solid var(--mexh-border) !important;
    display:flex !important;
    align-items:center !important;
    z-index:100050 !important;
  }
  /* WP admin bar is 32px at 783-999px; offset the mast to match. The <=782px
     case (46px bar) is handled in its own block below this one. */
  body.admin-bar.mex-header-2026 header#masthead{ top:32px !important; }

  /* No search icon in the mobile header. */
  body.mex-header-2026 #mex-search-toggle,
  body.mex-header-2026 #mex-search-panel,
  body.mex-header-2026 #site-title,
  body.mex-header-2026 img#mexperience_logo_image,
  body.mex-header-2026 #small-m-home-icon,
  body.mex-header-2026 nav#site-nav,
  body.mex-header-2026 #masthead > ul{
    display:none !important;
  }

  body.mex-header-2026 #mex-logo-2026{
    position:static !important;
    display:flex; align-items:center;
    height:64px; margin:0; padding:0;
    order:0;
  }
  body.mex-header-2026 #mex-logo-2026 .mex-logo-word{ height:30px; width:auto; display:block; }
  body.mex-header-2026 #mex-logo-2026 .mex-logo-m{ display:none; }

  /* Hamburger pushed to the right. Transparent bg + vertically centred so its box
     can't overhang the mast's 1px bottom border on the right (that white overhang
     was painting over the line = the "broken mast line"). */
  /* Centre the hamburger vertically. The mast's flex line runs taller than its
     64px box, so flex centring dropped it ~14px low. Take it out of the flex flow
     and centre it absolutely against the (positioned) mast — bulletproof. */
  body.mex-header-2026 #mobile-menu-full-width{
    position:absolute !important;
    top:50%;
    left:auto !important;                 /* beat a legacy left:0 that yanked it over the logo */
    right:16px;
    transform:translateY(-50%);
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    order:9;
  }
  body.mex-header-2026 #mobile-menu-full-width > a{
    display:block; margin:0 !important; padding:0 !important; line-height:0;
  }
  body.mex-header-2026 #mobile-menu-full-width img{ display:block; margin:0 !important; }

  /* keep the mobile flyout menu wrap available but out of the bar flow */
  body.mex-header-2026 #mobile-menu-wrap{ display:block !important; }
}

/* ---- Mobile menu drawer: start #main-nav-mobile BELOW the fixed mast (+admin
   bar) so its top row (X / search) and first item aren't hidden behind the mast.
   mast bottom = admin-bar height + 64px mast. dvh handles the mobile URL bar. ---- */
@media screen and (max-width:999px){
  body.mex-header-2026 #main-nav-mobile{
    margin-top:0 !important;                      /* kill legacy 46px margin so our `top` is exact */
    top:64px !important;                          /* public: mast 64 */
    height:calc(100vh - 64px) !important;
    height:calc(100dvh - 64px) !important;
  }
  body.admin-bar.mex-header-2026 #main-nav-mobile{
    top:96px !important;                          /* admin 783-999: 32 bar + 64 */
    height:calc(100vh - 96px) !important;
    height:calc(100dvh - 96px) !important;
  }
}

/* Phones (<=782px): WP switches the admin bar to 46px AND position:absolute, so
   it SCROLLS AWAY — leaving a 46px gap under our fixed mast (which stays offset)
   the moment you scroll. We pin the bar fixed (see #wpadminbar rule below) so it
   can't scroll off, and match the mast's offset to the 46px bar here. Gated =>
   admin preview only; the public header (no admin bar) sits flush at top:0. */
@media screen and (max-width:782px){
  body.admin-bar.mex-header-2026 header#masthead{ top:46px !important; }
  /* Only here (phones) does WP make the bar position:absolute (it scrolls away);
     pin it fixed so it can't orphan the mast's offset. Above 782px the bar is
     already fixed, so we DON'T override it there (that was making the bar's items
     bleed over the mast on iPad). */
  body.mex-header-2026 #wpadminbar{ position:fixed !important; top:0 !important; }
  body.admin-bar.mex-header-2026 #main-nav-mobile{
    top:110px !important;                         /* admin <=782: 46 bar + 64 */
    height:calc(100vh - 110px) !important;
    height:calc(100dvh - 110px) !important;
  }
}

/* --------------------------------------------------------------------------
   3. EXPANDING SEARCH PANEL (shared)
   -------------------------------------------------------------------------- */
body.mex-header-2026 #mex-search-panel{
  position:absolute;
  top:100%; left:0; right:0;
  background:var(--mexh-stone);
  border-bottom:1px solid var(--mexh-border);
  box-shadow:0 8px 18px rgba(0,0,0,.06);
  z-index:100049;
  /* graceful open/close: fade + subtle slide */
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  pointer-events:none;
  transition:opacity .7s cubic-bezier(0.16, 1, 0.3, 1), transform .7s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear .7s;
}
body.mex-header-2026 #mex-search-panel.is-open{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
  transition:opacity .7s cubic-bezier(0.16, 1, 0.3, 1), transform .7s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
}
/* pre-JS fallback: stay hidden until JS removes the attribute */
body.mex-header-2026 #mex-search-panel[hidden]{ display:none; }

/* ---- Global Menu mega-flyout + curtain: ONE CSS-transition mechanism ----
   Driven entirely by a single state class from header-2026.js (which owns
   open/close/switch via a capture-phase click handler, so the theme's jQuery
   show/fadeIn never runs). Mirrors the search panel's silky fade+slide.

   The panels are kept display:block and hidden via visibility+opacity (display
   can't transition); visibility is delayed on close so the fade completes, and
   flipped instantly on open. Only ONE sub-menu carries .mexh-open at a time. */
body.mex-header-2026 #menu-main-menu-v8-3 > li > ul.sub-menu{
  display:block !important;
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity .7s cubic-bezier(0.16, 1, 0.3, 1),
             transform .7s cubic-bezier(0.16, 1, 0.3, 1),
             visibility 0s linear .7s;
  will-change:opacity, transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
body.mex-header-2026 #menu-main-menu-v8-3 > li > ul.sub-menu.mexh-open{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
  transition:opacity .7s cubic-bezier(0.16, 1, 0.3, 1),
             transform .7s cubic-bezier(0.16, 1, 0.3, 1),
             visibility 0s linear 0s;
}
body.mex-header-2026 #main_flyout_curtain{
  display:block !important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .7s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear .7s;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
body.mex-header-2026.mexh-menu-open #main_flyout_curtain,
body.mex-header-2026.mexh-search-open #main_flyout_curtain{      /* search reuses the same curtain */
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .7s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
}
/* Search panel promoted to its own layer too (its transition is defined above). */
body.mex-header-2026 #mex-search-panel{
  will-change:opacity, transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}



/* ---- Uniform desktop mast->content gap (10px) across ALL page types ----
   The 2026 sticky mast reserves its own height; this padding is the gap BELOW
   it. The per-page stylesheets set that gap inconsistently (front page 10 via
   #main-wrap, blog/tag/search ~5 via #primary, posts 0), so normalise to a
   single 10px here. Mouse-desktop only (>=1200, hover/fine) — touch tablets and
   phones keep their own (larger) fixed-mast clearance, which is already correct.
   #primary's own top padding is zeroed so it can't stack on the #main-wrap gap. */
@media screen and (min-width:1200px) and (hover:hover) and (pointer:fine){
  body.mex-header-2026 div#main-wrap{ padding-top:10px !important; }
  body.mex-header-2026 div#main-wrap #primary{ padding-top:0 !important; }
}

/* The WP admin bar must sit ABOVE the sticky mast (100050) so its DROPDOWNS —
   which open downward into the mast/page area — are visible and clickable. The
   mast is offset to exactly the bar's height (top:32 / 46), so the bar's own row
   never overlaps the mast (no "bleed"). display:block !important also overrides
   the theme's scroll handler, which does jQuery('#wpadminbar').hide() past 73px. */
body.mex-header-2026 #wpadminbar{ z-index:100060 !important; display:block !important; }
body.mex-header-2026 #mex-search-panel .mex-search-panel-inner{
  max-width:720px;
  margin:0 auto;
  padding:18px 24px;
}
/* Pill search field matching the mockup: white rounded field + red "Search". */
body.mex-header-2026 #mex-search-panel .mex-search-form{
  display:flex; align-items:center;
  background:#fff;
  border:1px solid #d9d3cc;
  border-radius:32px;
  padding:5px 6px 5px 24px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
body.mex-header-2026 #mex-search-panel .mex-search-field{
  flex:1 1 auto; min-width:0; width:auto !important;
  border:0 !important; outline:0 !important; box-shadow:none !important;
  background:transparent !important;
  font:400 16px/1.4 'Open Sans',Arial,sans-serif !important;
  color:var(--mexh-ink) !important;
  padding:10px 0 !important; margin:0 !important; height:auto !important;
}
body.mex-header-2026 #mex-search-panel .mex-search-field::placeholder{ color:#9a938c; opacity:1; }
body.mex-header-2026 #mex-search-panel .mex-search-submit{
  flex:0 0 auto;
  border:0; cursor:pointer;
  background:var(--mexh-red); color:#fff;
  border-radius:24px;
  padding:11px 26px;
  font:400 15px/1 'Open Sans',Arial,sans-serif !important;
  transition:background .15s ease;
}
body.mex-header-2026 #mex-search-panel .mex-search-submit:hover,
body.mex-header-2026 #mex-search-panel .mex-search-submit:focus-visible{ background:var(--mexh-gold-dark); }