/* =====================================================================
 * TMM Global Header — design tokens, layout, drawer & avatar dropdown.
 * Single source of truth for header styling. Drawer / avatar / dropdown
 * rules are ported 1:1 from tmm-site-header.php (renamed tmm-sh-* -> tmm-gh-*);
 * layout (.tmm-gh__desktop / .tmm-gh__mobile) implements the strict alignment spec.
 *
 * DEPLOY: wp-content/mu-plugins/tmm-header/tmm-global-header.css
 * Source: themartialman-facelift/live-canary/tmm-header/
 * ===================================================================== */

:root{
  --tmm-wrap: 1240px;          /* matches the main content grid container */
  --tmm-gh-pad: 24px;          /* same L/R gutter as the content wrap */
  --tmm-gh-h-desktop: 72px;    /* uniform desktop frame height */
  --tmm-gh-h-mobile: 56px;     /* current production mobile frame (non-preview default) */
  --tmm-logo-h: 40px;          /* fixed clean desktop logo height */
  --tmm-logo-h-mobile: 32px;   /* current production mobile logo (non-preview default) */
  --tmm-gh-ink: #1B1B19;
  --tmm-gh-ink-soft: #2A323C;
  --tmm-gh-blue: #2F5D9F;      /* actions / nav (semantic colour system) — identical to homepage --color-blue */
  --tmm-gh-blue-d: #244C86;
  --tmm-gh-blue-soft: #3D6FB4; /* homepage --color-blue-soft: lighter hover fill (preview scope only) */
  --tmm-gh-line: #E3DDD2;
  --tmm-gh-bg: #FFFFFF;
  /* homepage Button shadows (shadow-soft / shadow-lift) — used by the scoped preview CTAs */
  --tmm-gh-sh-soft: 0 1px 2px rgba(22,24,29,.04), 0 10px 30px rgba(22,24,29,.06);
  --tmm-gh-sh-lift: 0 18px 48px rgba(22,24,29,.14);
}

/* PREVIEW (User ID 1) ONLY: lesson-template premium mobile sizing — 64px bar + 46px logo.
   Scoped to data-preview so members/guests keep the current 56px/32px frame (zero blast radius). */
.tmm-gh[data-preview="1"]{ --tmm-gh-h-mobile:64px; --tmm-logo-h-mobile:44px; }

/* ---- shell ---------------------------------------------------------- */
.tmm-gh{
  position:sticky; top:0; z-index:120;
  background:var(--tmm-gh-bg);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--tmm-gh-line);
  box-shadow:0 1px 3px rgba(31,30,26,.035);
  font-family:"Inter",-apple-system,sans-serif;
}
.tmm-gh button{ -webkit-appearance:none; appearance:none; font-family:inherit; }
.tmm-gh__wordmark{ font-weight:800; letter-spacing:.06em; font-size:17px; color:var(--tmm-gh-ink); text-transform:uppercase; }

/* ---- DESKTOP (>=901px) --------------------------------------------- */
/* Inner shares the content wrap width + padding => logo left edge aligns to the grid. */
.tmm-gh__desktop{
  max-width:var(--tmm-wrap);
  margin-inline:auto;
  padding-inline:var(--tmm-gh-pad);
  height:var(--tmm-gh-h-desktop);
  display:flex; align-items:center; justify-content:space-between;
}
.tmm-gh__logo{ display:flex; align-items:center; text-decoration:none; }
.tmm-gh__desktop .tmm-gh__logo img{ height:var(--tmm-logo-h); width:auto; display:block; }
/* logged-in lead cluster: hamburger (opens drawer) + logo, in normal flow (not the mobile absolute burger) */
.tmm-gh__lead{ display:flex; align-items:center; }
/* burger anchors flush to the content-grid left edge (no extra padding/margin) */
.tmm-gh__desktop .tmm-gh__burger{ position:static; top:auto; left:auto; transform:none; margin:0; padding:0 !important; color:var(--tmm-gh-ink) !important; }
/* explicit 24px gap between the hamburger and the logo wrapper */
.tmm-gh__desktop .tmm-gh__lead .tmm-gh__logo{ margin-left:24px; }

.tmm-gh__nav{ display:flex; align-items:center; gap:22px; font-size:14px; font-weight:500; }
.tmm-gh__link{ color:var(--tmm-gh-ink-soft); text-decoration:none; }
.tmm-gh__link:hover{ color:var(--tmm-gh-blue); }
.tmm-gh__cta{ background:var(--tmm-gh-blue); color:#fff !important; padding:9px 18px; border-radius:100px; font-weight:600; text-decoration:none; }
.tmm-gh__cta:hover,.tmm-gh__cta:focus{ background:var(--tmm-gh-blue-d); color:#fff !important; }

/* avatar dropdown (desktop, logged-in) */
.tmm-gh-acct{ position:relative; }
.tmm-gh-ava{ width:38px; height:38px; border-radius:50% !important; border:0 !important; box-shadow:none !important; padding:0 !important; cursor:pointer; overflow:hidden; background:#0E2741 !important; color:#fff; display:grid; place-items:center; font-size:13px; font-weight:700; }
.tmm-gh-ava img{ width:100%; height:100%; object-fit:cover; display:block; }
.tmm-gh-acct-menu{ position:absolute; right:0; top:calc(100% + 10px); min-width:210px; background:#fff; border:1px solid var(--tmm-gh-line); border-radius:14px; box-shadow:0 18px 40px -16px rgba(40,36,28,.30); padding:8px; display:none; flex-direction:column; }
.tmm-gh-acct.is-open .tmm-gh-acct-menu{ display:flex; }
.tmm-gh-acct-menu a{ display:block; padding:10px 12px; border-radius:9px; font-size:14px; color:var(--tmm-gh-ink-soft); text-decoration:none; }
.tmm-gh-acct-menu a:hover{ background:#F5F2ED; color:var(--tmm-gh-ink); }
.tmm-gh-acct-menu .tmm-gh-acct-out{ margin-top:4px; border-top:1px solid #EFE9DF; padding-top:10px; color:#9a4b3b; }

/* ---- MOBILE (<=900px) ---------------------------------------------- */
/* Uniform frame: burger pinned left, avatar pinned right, logo dead-centre. */
.tmm-gh__mobile{
  position:relative;
  height:var(--tmm-gh-h-mobile);
  display:flex; align-items:center;
  padding-inline:12px;
}
.tmm-gh__burger{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:40px; height:40px; display:grid; place-items:center;
  border:0 !important; background:none !important; box-shadow:none !important;
  cursor:pointer; color:var(--tmm-gh-ink) !important; border-radius:10px; padding:0 !important;
  transition:background .15s;
}
.tmm-gh__burger:hover{ background:#F0F0EA !important; }
.tmm-gh__burger svg{ width:23px; height:23px; }
.tmm-gh__mobile .tmm-gh__logo{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); /* dead-centre, both axes */
  height:var(--tmm-logo-h-mobile);   /* 38px — crisp fixed height */
  padding:0; margin:0; line-height:0; /* zero vertical choke so the mark scales up clean */
}
.tmm-gh__mobile .tmm-gh__logo img{ height:var(--tmm-logo-h-mobile); width:auto; display:block; padding:0; margin:0; }
.tmm-gh__m-ava{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:50%; overflow:hidden;
  background:#0E2741; color:#fff; display:grid; place-items:center; font-size:12px; font-weight:700; text-decoration:none;
}
.tmm-gh__m-ava img{ width:100%; height:100%; object-fit:cover; display:block; }
.tmm-gh__m-spacer{ position:absolute; right:12px; width:34px; height:34px; } /* keeps logo optically centred when no avatar */

/* ---- responsive toggle (single 900px boundary) --------------------- */
/* Tablets (621-900px) get the clean hamburger view, not a cramped desktop bar. */
@media (max-width:900px){ .tmm-gh__desktop{ display:none; } }
@media (min-width:901px){ .tmm-gh__mobile{ display:none; } }

/* ---- shared mobile drawer (ported tmm-sh-* -> tmm-gh-*) ------------- */
/* === STAGE 1: /homepage (V4) drawer visual spec — cream canvas + exact tokens === */
.tmm-gh-drawer{ position:fixed; top:0; left:0; bottom:0; width:85%; max-width:320px; z-index:200; background:#fbf8f2; display:flex; flex-direction:column; padding:24px; transform:translateX(-100%); transition:transform .25s ease; box-shadow:none; }
.tmm-gh-drawer.is-open{ transform:translateX(0); box-shadow:0 24px 60px -20px rgba(22,24,29,.28); }
.tmm-gh-drawer button{ -webkit-appearance:none; appearance:none; font-family:inherit; }
/* header row: logo/avatar left, close right (margin-left:auto on .tmm-gh-dx), no divider */
.tmm-gh-dhead{ display:flex; align-items:center; gap:12px; padding:0; border-bottom:0; }
.tmm-gh-dava{ width:44px; height:44px; border-radius:50%; overflow:hidden; background:#0E2741; color:#fff; display:grid; place-items:center; font-size:15px; font-weight:700; flex:none; }
.tmm-gh-dava img{ width:100%; height:100%; object-fit:cover; }
.tmm-gh-dhi{ font-size:15.5px; font-weight:700; color:#16181d; line-height:1.2; }
.tmm-gh-dsub{ font-size:12.5px; color:#79716a; }
.tmm-gh-dlogo{ display:block; }
.tmm-gh-dlogo img{ height:44px; width:auto; object-fit:contain; display:block; }
.tmm-gh-dx{ margin-left:auto; flex:none; width:36px; height:36px; display:grid; place-items:center; padding:0 !important; border:0 !important; border-radius:8px !important; background:none !important; color:#16181d !important; box-shadow:none !important; cursor:pointer; transition:background .15s,color .15s; }
.tmm-gh-dx:hover{ background:#f5efe4 !important; color:#16181d !important; }
.tmm-gh-dx svg{ width:20px; height:20px; }
.tmm-gh-dmenu{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; margin-top:32px; padding:0; display:flex; flex-direction:column; gap:4px; }
.tmm-gh-dhdr{ display:block; padding:14px 12px 5px; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#9A9488; }
.tmm-gh-ditem{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:8px; font-size:15px; font-weight:500; color:#2b2825; text-decoration:none; }
.tmm-gh-ditem::before{ content:""; flex:none; width:6px; height:6px; border-radius:50%; background:#2f5d9f; opacity:0; transition:opacity .15s; }
.tmm-gh-ditem:hover{ background:#e9eff8; color:#2f5d9f; }
.tmm-gh-ditem.is-active, .tmm-gh-ditem[aria-current]{ background:#e9eff8; color:#2f5d9f; }
.tmm-gh-ditem.is-active::before, .tmm-gh-ditem[aria-current]::before{ opacity:1; }
.tmm-gh-ditem.sub{ font-weight:500; }
/* clean homepage list: remove per-item leading icons (the active dot is the only leading mark) */
.tmm-gh-ditem .tmm-gh-dicon{ display:none; }
body.tmm-gh-preview .tmm-gh-ditem{ display:flex; align-items:center; gap:8px; padding:10px 12px; }
.tmm-gh-dicon{ flex:none; width:22px; height:22px; display:grid; place-items:center; color:#8A8478; }
.tmm-gh-dicon .tmm-gh-svg{ width:20px; height:20px; }
.tmm-gh-dlabel{ flex:1 1 auto; min-width:0; }
.tmm-gh-dmenu-empty{ padding:14px; font-size:13px; color:#79716a; }
.tmm-gh-dfoot{ border-top:0; padding:24px 0 0; margin-top:auto; display:flex; flex-direction:column; gap:12px; }
.tmm-gh-dfoot a{ display:block; text-align:center; padding:10px 20px; border-radius:100px; font-size:14px; font-weight:600; text-decoration:none; }
.tmm-gh-dfoot .pri{ background:#2f5d9f; color:#fff !important; box-shadow:0 1px 2px rgba(22,24,29,.04), 0 10px 30px rgba(22,24,29,.06); }
.tmm-gh-dfoot .pri:hover{ background:#3d6fb4; color:#fff !important; }
.tmm-gh-dfoot .sec{ background:rgba(255,255,255,.7); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid #ebe4d8; color:#2b2825; }
.tmm-gh-dfoot .sec:hover{ border-color:rgba(47,93,159,.5); color:#2f5d9f; }
.tmm-gh-dfoot .out{ color:#9a4b3b; font-weight:600; }
/* Cream canvas in BOTH light AND dark — neutralize any external dark-mode override on the drawer. */
html.tmmc-dark .tmm-gh-drawer{ background:#fbf8f2 !important; }
html.tmmc-dark .tmm-gh-dhead, html.tmmc-dark .tmm-gh-dfoot{ border-color:transparent !important; }
html.tmmc-dark .tmm-gh-dhi{ color:#16181d !important; }
html.tmmc-dark .tmm-gh-dsub{ color:#79716a !important; }
html.tmmc-dark .tmm-gh-ditem{ color:#2b2825 !important; }
html.tmmc-dark .tmm-gh-ditem:hover, html.tmmc-dark .tmm-gh-ditem.is-active, html.tmmc-dark .tmm-gh-ditem[aria-current]{ background:#e9eff8 !important; color:#2f5d9f !important; }
html.tmmc-dark .tmm-gh-dx{ background:none !important; color:#16181d !important; }
html.tmmc-dark .tmm-gh-dx:hover{ background:#f5efe4 !important; }
html.tmmc-dark .tmm-gh-dfoot .sec{ background:rgba(255,255,255,.7) !important; border-color:#ebe4d8 !important; color:#2b2825 !important; }
.tmm-gh-backdrop{ position:fixed; inset:0; z-index:150; background:rgba(22,24,29,.2); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .2s ease; }
.tmm-gh-backdrop.is-open{ opacity:1; pointer-events:auto; }

/* ---- PREVIEW (admin / ?tmm_preview=header) high-priority mobile override ----------
   Bulletproof !important block: forces the homepage premium mobile sizing (64px frame /
   44px logo, matching the homepage Navbar h-16 bar + h-11 logo) even against inherited
   BuddyBoss/theme constraints. Scoped to data-preview so the non-preview header is untouched. */
.tmm-gh[data-preview="1"] .tmm-gh__mobile {
    height: 64px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.tmm-gh[data-preview="1"] .tmm-gh__mobile .tmm-gh__logo,
.tmm-gh[data-preview="1"] .tmm-gh__mobile .tmm-gh__logo img {
    height: 44px !important;
    max-height: 44px !important;
    width: auto !important;
    display: block !important;
}

/* ---- PREVIEW desktop: kill the right-side avatar/profile container entirely ----------------
   The markup is removed in the partial; these rules are belt-and-braces so no cached/legacy
   framework style can bring the avatar back. Scoped to data-preview (members are untouched). */
.tmm-gh[data-preview="1"] .tmm-gh__right,
.tmm-gh[data-preview="1"] .tmm-gh__profile-badge,
.tmm-gh[data-preview="1"] .tmm-gh__desktop .tmm-gh__nav,
.tmm-gh[data-preview="1"] .tmm-gh__desktop .tmm-gh-acct {
    display: none !important;
}

/* =====================================================================
 * PREVIEW DESIGN-UNIFICATION LAYER  (body.tmm-gh-preview)
 * Scoped to the preview body flag so it reaches the slide-out drawer AND
 * the page action buttons (both live outside <header class="tmm-gh">).
 * Members never get body.tmm-gh-preview → zero blast radius.
 * ===================================================================== */

/* compact desktop header height (lesson-template baseline) */
.tmm-gh[data-preview="1"] .tmm-gh__desktop{ height:64px !important; }

/* header nav-link typography to match the new homepage tracking */
body.tmm-gh-preview .tmm-gh__link{ letter-spacing:-0.01em; color:#171B20; font-weight:500; }

/* gold "SOON" badge (e.g. Circles) */
.tmm-gh-soon{ display:inline-block; margin-left:8px; padding:2px 6px; font-size:9px; line-height:1.45;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase; border-radius:999px;
  background:#f6eedc; color:#6e5223; box-shadow:0 0 0 1px rgba(176,138,71,.25); vertical-align:middle; }

/* drawer items: soft-blue rounded highlight on hover + active, with a selection dot */
body.tmm-gh-preview .tmm-gh-ditem{ border-radius:8px; }
body.tmm-gh-preview .tmm-gh-ditem:hover,
body.tmm-gh-preview .tmm-gh-ditem.is-active{ background:#EAF1FB; color:#2F5D9F; }
body.tmm-gh-preview .tmm-gh-ditem:hover .tmm-gh-dicon,
body.tmm-gh-preview .tmm-gh-ditem.is-active .tmm-gh-dicon{ color:#2F5D9F; }
body.tmm-gh-preview .tmm-gh-ditem.is-active{ position:relative; }
body.tmm-gh-preview .tmm-gh-ditem.is-active::after{ content:""; position:absolute; right:14px; top:50%;
  transform:translateY(-50%); width:7px; height:7px; border-radius:50%; background:#2F5D9F; }

/* drawer footer: spacious stacked pills (Get started / Sign in) */
body.tmm-gh-preview .tmm-gh-dfoot{ padding:16px; gap:10px; }
body.tmm-gh-preview .tmm-gh-dfoot a{ border-radius:99px !important; padding:13px; transition:transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
body.tmm-gh-preview .tmm-gh-dfoot .pri{ background:var(--tmm-gh-blue); color:#fff !important; border:0; }
body.tmm-gh-preview .tmm-gh-dfoot .pri:hover{ background:var(--tmm-gh-blue-soft); transform:translateY(-1px); }
body.tmm-gh-preview .tmm-gh-dfoot .sec{ background:#fff; color:#2B2825; border:1px solid #EBE4D8; }
body.tmm-gh-preview .tmm-gh-dfoot .sec:hover{ border-color:var(--tmm-gh-blue); color:var(--tmm-gh-blue); }

/* Page action + header CTA buttons inherit the homepage Button pill + hover (1:1 with /homepage/).
   SCOPE: ONLY .tmm-gh__cta + .tcp-btn-pri/.tcp-btn-sec/.viewbtn — native WooCommerce, LearnDash
   player and BuddyBoss buttons are deliberately left untouched. */
body.tmm-gh-preview .tmm-gh__cta,
body.tmm-gh-preview .tcp-btn-pri,
body.tmm-gh-preview .tcp-btn-sec,
body.tmm-gh-preview .viewbtn{
  border-radius:99px !important; font-weight:600 !important;
  transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease !important;
}
/* primary fills (variant="primary"): blue → lighter blue + 2px lift + shadow */
body.tmm-gh-preview .tmm-gh__cta,
body.tmm-gh-preview .tcp-btn-pri,
body.tmm-gh-preview .viewbtn{ background-color:var(--tmm-gh-blue) !important; color:#fff !important; box-shadow:var(--tmm-gh-sh-soft) !important; }
body.tmm-gh-preview .tmm-gh__cta:hover,
body.tmm-gh-preview .tcp-btn-pri:hover,
body.tmm-gh-preview .viewbtn:hover{ background-color:var(--tmm-gh-blue-soft) !important; transform:translateY(-2px) !important; box-shadow:var(--tmm-gh-sh-lift) !important; }
/* secondary outline (variant="outline"): light line → blue border + blue text + 2px lift */
body.tmm-gh-preview .tcp-btn-sec{ background-color:#fff !important; color:#2B2825 !important; border:1px solid #EBE4D8 !important; }
body.tmm-gh-preview .tcp-btn-sec:hover{ border-color:var(--tmm-gh-blue) !important; color:var(--tmm-gh-blue) !important; transform:translateY(-2px) !important; }

/* logged-out preview drawer items are TEXT-ONLY (icons stripped in PHP) — sit text flush, badge tight */
body.tmm-gh-preview .tmm-gh-ditem--text{ gap:0; }
body.tmm-gh-preview .tmm-gh-ditem--text .tmm-gh-dlabel{ flex:0 0 auto; }

/* naked close (X): drop the round grey circle wrapper — clean glyph flush with the background */
body.tmm-gh-preview .tmm-gh-dx{ background:none !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important; color:#1B1B19 !important; }
body.tmm-gh-preview .tmm-gh-dx:hover{ background:none !important; color:#000 !important; }

/* PREVIEW desktop: match the homepage Navbar container EXACTLY — centered, constrained to
   max-w-6xl (1152px) with 32px (lg:px-8) side padding, NOT a full-bleed breakout. Verified against
   the live /homepage/ Navbar (`mx-auto w-full max-w-6xl px-4 lg:px-8`). Scoped to preview. */
.tmm-gh[data-preview="1"] .tmm-gh__desktop,
body.tmm-gh-preview .tmm-gh__desktop{ width:100% !important; max-width:1152px !important;
  margin-inline:auto !important; padding:0 32px !important; display:flex !important; }

/* admin-managed public desktop nav (tmm_public_desktop): last item = premium pill CTA */
.tmm-gh__nav--wp a.tmm-gh__link:last-child{ background:var(--tmm-gh-blue); color:#fff !important;
  padding:9px 18px; border-radius:99px; font-weight:600; box-shadow:var(--tmm-gh-sh-soft);
  transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease; }
.tmm-gh__nav--wp a.tmm-gh__link:last-child:hover{ background:var(--tmm-gh-blue-soft); color:#fff !important;
  transform:translateY(-2px); box-shadow:var(--tmm-gh-sh-lift); }
/* prose links (all but the CTA): pill hover area + animated blue underline — homepage Navbar parity */
.tmm-gh__nav--wp a.tmm-gh__link:not(:last-child){ position:relative; padding:8px 14px; border-radius:99px; }
.tmm-gh__nav--wp a.tmm-gh__link:not(:last-child)::after{ content:""; position:absolute; left:14px; right:14px; bottom:2px;
  height:2px; border-radius:2px; background:var(--tmm-gh-blue); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.tmm-gh__nav--wp a.tmm-gh__link:not(:last-child):hover::after{ transform:scaleX(1); }