/* ==========================
MOBILE HAMBURGER (≤768px) — TOKENIZED
========================== */

/* Central tokens (values kept identical to original behavior) */
:root{
/* Colors */
--color-mnav-link-light: #f8fafc;     /* almost-white, slightly off-white */
--color-mnav-link-dark:  #f3f4f6;     /* near-white for dark backgrounds */
--color-mnav-hover-light: rgba(0,0,0,0.06);
--color-mnav-hover-dark:  rgba(255,255,255,0.08);
--color-sub-hover:         rgba(0,0,0,.035);
--color-border-default:   #e5e5e5;
--color-surface-default:  #ffffff;

/* Sizes / spacing */
--size-gap-8: 8px;
--size-gap-4: 4px;
--size-gap-6: 6px;
--size-hamburger: 40px;
--size-hamburger-icon: 24px;
--size-bar-width: 20px;
--size-bar-height: 2px;
--size-padding-inner-top: 10px;
--size-padding-inner-bottom: 18px;
--size-padding-inline: env(safe-area-inset-left);
--size-padding-vertical: 12px;
--size-padding-horizontal: 14px;
--size-min-height-link: 48px;
--size-border-radius-10: 10px;
--size-border-radius-8: 8px;
--size-submenu-indent: 12px;
--size-submenu-margin-top: 4px;
--size-sublink-padding: 10px;
--size-caret-box: 24px;
--size-caret-svg: 20px;

/* Typography */
--font-size-base: 15.5px;
--font-size-sub: 15px;
--letter-spacing-base: .15px;
--line-height-base: 1.25;
--font-weight-medium: 500;

/* Transitions / animation timing */
--t-bg: 140ms;
--t-transform: 220ms;
--t-dropdown-ms: var(--navsheet-ms, 220ms);
--t-dropdown-ease: var(--navsheet-ease, cubic-bezier(.2,.7,.3,1));

/* misc */
--caret-opacity: 1;
}

/* ========== MOBILE HAMBURGER (≤768px) — FLAT, COMPACT, PREMIUM ========== */

/* === PATCH: make bag + hamburger sit side-by-side on mobile === */
@media (max-width: 768px) {
  /* Stop distributing space between nav and hamburger */
  header {
    justify-content: flex-start; /* was space-between */
  }

  /* Keep logo left, push nav + hamburger to the right cluster */
  header #site-name {
    margin-right: auto;
  }

  /* Ensure the nav shrinks to its contents so it hugs the hamburger */
  header .top-navigation {
    flex: 0 0 auto;   /* no grow */
    gap: 6px;
  }

  /* Remove the internal push that tried to send the bag to the far edge */
  header .top-navigation > #cart-container {
    margin-left: 0;   /* was margin-left: auto */
  }

  /* Small, consistent gap between bag and hamburger */
  #hamburger-toggle {
    margin-left: var(--size-gap-8); /* tighten as desired (4–8px) */
  }
}


/* hidden by default, enabled via media query */
#hamburger-toggle { display: none; }
#mobile-nav-panel { display: none; }

/* Mobile nav color tokens (LIGHT default) */
@media (max-width: 768px) {
/* scope to the reveal container (and inner as fallback) */
#nav-reveal-panel,
.mobile-nav-inner {
--mnav-link-color: var(--color-mnav-link-light);  /* almost-white, slightly off-white */
--mnav-hover-bg: var(--color-mnav-hover-light);   /* subtle light hover */
}
}

/* DARK MODE overrides for mobile nav */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
#nav-reveal-panel,
.mobile-nav-inner {
--mnav-link-color: var(--color-mnav-link-dark);           /* near-white for dark backgrounds */
--mnav-hover-bg: var(--color-mnav-hover-dark);
}
}

@media (max-width: 768px) {
  /* Keep the nav bar itself visible so the cart stays visible */
header .top-navigation {
display: flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
width: auto;
max-width: 100%;
box-sizing: border-box;
}

header#site-header {
padding-left: 12px;
padding-right: 12px;
justify-content: flex-start;
overflow-x: clip;
box-sizing: border-box;
width: 100%;
max-width: 100%;
}

header #site-name {
min-width: 0;
}

/* Hide desktop menu entries on mobile (but NOT the cart) */
header .top-navigation > .nav-item,
header .top-navigation > .nav-link {
display: none !important;
}

/* Keep the cart icon visible and docked to the right */
header .top-navigation > #cart-container {
display: flex !important;
margin-left: 0;
margin-right: 0;
flex: 0 0 36px;
width: 36px;
height: 36px;
box-sizing: border-box;
overflow: visible;
}

header .top-navigation > #cart-container #open-cart {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
overflow: visible;
}

header .top-navigation > #cart-container .cart-icon {
width: 22px;
height: 22px;
max-width: 100%;
max-height: 100%;
}

/* Hamburger button */
#hamburger-toggle.hamburger-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--size-gap-4);
width: 36px;
height: 36px;
margin-left: 4px;
border: 1px solid var(--border, var(--color-border-default));
border-radius: var(--size-border-radius-10);
background: var(--surface, var(--color-surface-default));
cursor: pointer;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}

/* Keep landing header pills consistent with home command-surface sizing */
body.is-landing .navsheet-toggle{
min-height: 44px;
padding: 0 14px;
font-size: inherit;
letter-spacing: 0.06em;
line-height: 1;
box-sizing: border-box;
}

body.is-landing .nav-surface-cta,
body.is-landing .nav-surface-programs{
min-height: 44px;
padding: 0 14px;
font-size: inherit;
letter-spacing: 0.6px;
box-sizing: border-box;
}

header #site-name .site-link{
padding-inline: 0;
}
#hamburger-toggle .bar {
display: block;
width: var(--size-bar-width);
height: var(--size-bar-height);
background: currentColor;
border-radius: 2px;
}

/* We use the shared reveal panel on mobile too (turn the old panel off) */
#mobile-nav-panel { display: none !important; }

/* -------- Flat list (no “cardy” boxes) -------- */
.mobile-nav-inner {
padding: var(--size-padding-inner-top) env(safe-area-inset-right) var(--size-padding-inner-bottom) env(safe-area-inset-left);
}
.mobile-nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--size-gap-6);                   /* soft spacing, no borders */
}
.mnav-item { border: 0; }     /* no row dividers */

/* -------- Top-level links: flat, compact, premium -------- */
.mnav-link {
display: flex;
align-items: center;
justify-content: space-between;
min-height: var(--size-min-height-link);           /* comfortable tap target */
padding: var(--size-padding-vertical) var(--size-padding-horizontal);
text-decoration: none;
color: var(--mnav-link-color);

background: transparent;    /* no big box */
border-radius: var(--size-border-radius-10);        /* subtle radius for focus ring shape */
box-shadow: none;           /* kill card shadow */
font-weight: var(--font-weight-medium);
font-size: var(--font-size-base);
letter-spacing: var(--letter-spacing-base);
line-height: var(--line-height-base);
-webkit-tap-highlight-color: transparent;
transition: background-color var(--t-bg) var(--t-dropdown-ease), transform var(--t-transform) var(--t-dropdown-ease);

}

@media (hover:hover) and (pointer:fine) {
.mnav-link:hover { background: var(--mnav-hover-bg); }
}

.mnav-link:active { transform: translateY(1px); }

/* NEW */
.mnav-link:focus,
.mnav-link:focus-visible {
outline: none !important;
box-shadow: none !important;
}

/* -------- Submenu: smooth expand/collapse, minimal look -------- */
.mnav-submenu {
list-style: none;
margin: var(--size-submenu-margin-top) 0 0 0;
padding: 0 0 0 var(--size-submenu-indent);        /* slight indent under parent */
overflow: hidden;
max-height: 0;              /* collapsed */
opacity: 0;
transition:
max-height var(--t-dropdown-ms) var(--t-dropdown-ease),
opacity var(--t-dropdown-ms) var(--t-dropdown-ease);
}
.mnav-submenu.open {
max-height: 1000px;         /* large enough for your longest list */
opacity: 1;
}
.mnav-submenu li { margin: 0; padding: 0; }

.mnav-submenu a.mnav-sublink {
display: block;
text-decoration: none;
color: inherit;
font-size: var(--font-size-sub);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-base);
padding: var(--size-sublink-padding) var(--size-sublink-padding);         /* flat sub-rows */
margin: 0;
background: transparent;
border-radius: var(--size-border-radius-8);
-webkit-tap-highlight-color: transparent;
transition: background-color var(--t-bg) var(--t-dropdown-ease);
}
@media (hover:hover) and (pointer:fine) {
.mnav-submenu a.mnav-sublink:hover { background: var(--color-sub-hover); }
}

/* NEW */
.mnav-submenu a.mnav-sublink:focus,
.mnav-submenu a.mnav-sublink:focus-visible {
outline: none !important;
box-shadow: none !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.mnav-link,
.mnav-submenu { transition: none !important; }
.mnav-submenu { max-height: none !important; opacity: 1 !important; }
}
}

@media (min-width: 769px) {
#mobile-nav-panel { display: none !important; }
#hamburger-toggle { display: none !important; }
}

@media (max-width: 600px) {
header .top-navigation {
gap: 4px;
}

header .top-navigation > #cart-container {
width: 34px;
height: 34px;
}

#hamburger-toggle.hamburger-toggle {
width: 34px;
height: 34px;
margin-left: 2px;
}

}

@media (max-width: 480px) {
header .top-navigation {
gap: 3px;
}

header .top-navigation > #cart-container {
width: 32px;
height: 32px;
}

#hamburger-toggle.hamburger-toggle {
width: 32px;
height: 32px;
margin-left: 2px;
}

}

/* --- Stacking order so the overlay never covers the cart --- */
#cart-sidebar.sidebar {
z-index: 10020 !important;
}
#nav-blur-overlay {
z-index: 10000 !important;
}
header {
position: sticky;
top: 0;
z-index: 10015 !important;
}
#nav-reveal-panel,
#mobile-nav-panel.mobile-nav-panel {
z-index: 10015 !important;
}

/* ─── Header hamburger/book-minus icon — token-aligned with bag ─── */
#hamburger-toggle {
/* match header items + bag default tone */
color: var(--text-light);
transition: transform var(--t-transform) var(--t-dropdown-ease), color 180ms var(--t-dropdown-ease);
}

#hamburger-toggle:active { transform: scale(0.97); }

/* 24x24 to match bag icon box */
#hamburger-toggle .hamburger-icon {
display: block;
width: var(--size-hamburger-icon);
height: var(--size-hamburger-icon);
stroke: currentColor; /* inherits from button color */
fill: none;
}

/* Hover/focus = same as bag hover */
@media (hover:hover) and (pointer:fine) {
#hamburger-toggle:hover { color: var(--landing-brand-border); }
}

/* NEW */
#hamburger-toggle:focus,
#hamburger-toggle:focus-visible {
outline: none !important;
box-shadow: none !important;
color: inherit !important; /* don’t change color when focused */
}

/* Open state (aria-expanded=true) keeps accent color */
#hamburger-toggle[aria-expanded="true"] { color: var(--landing-brand-border); }

/* Reduced motion: no line-draw, still respects tokens */
@media (prefers-reduced-motion: reduce) {
#hamburger-toggle .hamburger-icon .icon-book,
#hamburger-toggle .hamburger-icon .icon-minus {
transition: none !important;
stroke-dasharray: none;
stroke-dashoffset: 0;
}
}

/* 1) Remove the visible box around the icon (mobile) */
@media (max-width: 768px) {
#hamburger-toggle.hamburger-toggle {
background: transparent !important;
border: 0 !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
}
}

/* 2) Keep the SVG the same color as the bag by default (white/light) */
#hamburger-toggle { color: var(--text-light); }              /* already present, safe to repeat */

/* 3) (Optional) Match the bag’s behavior precisely:
- Bag is white by default
- Bag turns accent on hover
- Bag does NOT stay accent when “open”
So: keep hover accent, but stop forcing accent on open. */
#hamburger-toggle[aria-expanded="true"] {
color: var(--text-light) !important;  /* don’t pin it to accent while open */
}

/* The SVG is already wired to follow color */
#hamburger-toggle .hamburger-icon {
stroke: currentColor;
fill: none;
}

@media (max-width: 768px) {
/* Suppress any UA focus outline inside the reveal panel */
#nav-reveal-panel:focus,
#nav-reveal-panel :focus,
#nav-reveal-panel :focus-visible {
outline: none !important;
box-shadow: none !important;
}

/* Remove iOS/Android tap flash */
#hamburger-toggle,
.mobile-nav-inner .mnav-link,
.mobile-nav-inner .mnav-sublink {
-webkit-tap-highlight-color: transparent;
}
}

/* ── Middle-line slide animation; kill old line-draw; keep color static ── */

/* Keep icon color the same as the bag in ALL states */
#hamburger-toggle,
#hamburger-toggle:hover,
#hamburger-toggle:focus-visible,
#hamburger-toggle[aria-expanded="true"] {
color: var(--text-light) !important; /* matches .cart-icon stroke */
}

/* Accessible focus ring without changing icon color */
#hamburger-toggle:focus-visible {
outline: 2px solid currentColor !important;
outline-offset: 3px;
}

/* Only the middle line animates: slide down on open */
#hamburger-toggle .hamburger-icon .icon-minus {
transform-box: fill-box;
transform-origin: 50% 50%;
transition: transform var(--t-dropdown-ms) var(--t-dropdown-ease);
}
#hamburger-toggle[aria-expanded="true"] .hamburger-icon .icon-minus {
transform: translateY(3px); /* tweak 4–7px to taste */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
#hamburger-toggle .hamburger-icon .icon-minus { transition: none !important; }
}

/* Ensure link lays out label (left) and caret (right) nicely */
.mnav-link {
display: flex;
align-items: center;
justify-content: space-between; /* label left, caret right */
}

/* Label behaves as a flex item (so text truncation works if needed) */
.mnav-label { min-width: 0; }

/* Caret container */
.mnav-caret {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--size-caret-box);
height: var(--size-caret-box);
margin-left: 12px;
opacity: var(--caret-opacity);
transition:
transform var(--t-dropdown-ms) var(--t-dropdown-ease),
opacity 120ms linear;
pointer-events: none; /* don’t block taps on the link */

}

/* Make sure the SVG inherits theme color and fits cleanly */
.mnav-caret svg {
display: block;
width: var(--size-caret-svg);   /* slightly inset so the square isn’t edge-to-edge */
height: var(--size-caret-svg);
stroke: currentColor;
fill: none;
border-radius: 10px;
}

/* Expanded state: rotate the whole icon 90deg so "right" → "down" */
.mnav-item.has-sub > .mnav-link[aria-expanded="true"] .mnav-caret {
transform: rotate(90deg);
opacity: 1;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.mnav-caret { transition: none !important; }
}

/* Landing mobile header hardening:
   keep brand + Explore readable without overlap by reducing competing pills. */
@media (max-width: 768px) {
  body.is-landing header#site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.is-landing header#site-header #site-name,
  body.is-landing header#site-header #site-name .site-link {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.is-landing header#site-header #site-name .site-link__text {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.95rem;
  }

  body.is-landing header#site-header .top-navigation {
    min-width: 0;
    width: auto;
    max-width: 100%;
    justify-content: flex-end;
    gap: 6px;
  }

  /* On mobile landing, keep one primary nav control (EXPLORE)
     plus utility icons to prevent header collisions. */
  body.is-landing .nav-surface-cta,
  body.is-landing .nav-surface-programs,
  body.is-landing .nav-surface-calculators {
    display: none !important;
  }

  body.is-landing .navsheet-toggle {
    min-height: 40px;
    padding: 0 10px;
    letter-spacing: 0.04em;
  }
}

@media (max-width: 600px) {
  body.is-landing header#site-header #site-name .site-link__text {
    font-size: 0.9rem;
  }

  body.is-landing .navsheet-toggle {
    min-height: 38px;
    padding: 0 9px;
  }
}