/* ============================================================
   MileMethod — floating pill nav
   Loaded AFTER each page's <style> and mobile-fixes.css.
   Desktop (>= 901px): the header bar is transparent and the logo,
   the page links and the action buttons each sit in their own
   rounded pill. At the top of the page the pills are frosted
   glass; once the page scrolls (.mm-nav-scrolled) they turn solid white
   with a soft shadow, and over a dark section or photo
   (.mm-nav-dark) they turn dark glass with white text. Both
   classes are set in mobile-nav.js.
   Mobile keeps the existing bar + hamburger.
   ============================================================ */

.site-header .logo { display: inline-flex; align-items: center; white-space: nowrap; }
.nav-group { display: contents; }

@media (min-width: 901px) {
  /* ----- Bar: always on screen, fully transparent, clicks pass through the gaps ----- */
  .site-header,
  .site-header.scrolled,
  body.cs-page .site-header,
  body.about-page .site-header {
    opacity: 1 !important; visibility: visible !important; transform: none !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border-bottom-color: transparent !important;
    pointer-events: none !important;
  }
  .site-header .header-inner {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem;
    padding: 0.875rem 1.5rem;
  }
  .site-header .header-nav { display: contents; }

  /* ----- Pills ----- */
  .site-header .logo,
  .site-header .nav-group--links,
  .site-header .nav-group--actions > a {
    pointer-events: auto;
    height: 3rem; border-radius: 9999px;
    border: 1px solid transparent;
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s, color 0.2s;
  }
  .site-header .logo,
  .site-header .nav-group--links,
  .site-header .nav-group--actions > a:not(.btn-primary) {
    background: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  }
  .site-header.mm-nav-scrolled .logo,
  .site-header.mm-nav-scrolled .nav-group--links,
  .site-header.mm-nav-scrolled .nav-group--actions > a:not(.btn-primary) {
    background: #fff;
    border-color: var(--border);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 10px 28px -12px rgba(16, 24, 40, 0.22);
  }

  /* Logo pill (left) */
  .site-header .logo { justify-self: start; padding: 0 1.25rem; color: var(--foreground); }

  /* Page links pill (centre) */
  .site-header .nav-group--links {
    grid-column: 2; display: flex; align-items: center; gap: 0.25rem; padding: 0 0.5rem;
  }
  .site-header .nav-group--links > a,
  .site-header .nav-group--links .nav-dropdown__trigger {
    display: inline-flex; align-items: center; height: 2.25rem; padding: 0 0.8rem;
    border-radius: 9999px; white-space: nowrap;
    font-size: 0.9rem; font-weight: 500;
    color: color-mix(in oklab, var(--foreground) 85%, transparent) !important;
    transition: background-color 0.2s, color 0.2s;
  }
  .site-header .nav-group--links > a:hover,
  .site-header .nav-group--links .nav-dropdown:hover .nav-dropdown__trigger {
    color: var(--foreground) !important;
    background: color-mix(in oklab, var(--foreground) 7%, transparent);
  }
  /* Dropdown opens just below the pill, with a hover bridge across the gap */
  .site-header .nav-group--links .nav-dropdown { align-self: stretch; display: flex; align-items: center; }
  .site-header .nav-dropdown__menu { top: calc(100% + 10px); border-radius: 1rem; }
  .site-header .nav-dropdown__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }

  /* Action pills (right) */
  .site-header .nav-group--actions {
    grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 0.5rem;
  }
  .site-header .nav-group--actions > a {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 1.35rem; white-space: nowrap; font-size: 0.9rem; font-weight: 600;
  }
  .site-header .nav-group--actions > a:not(.btn-primary):not(.btn-outline) {
    font-weight: 500; color: var(--foreground) !important;
  }
  .site-header .nav-group--actions > a.btn-outline {
    color: var(--primary) !important;
    border-color: color-mix(in oklab, var(--primary) 55%, transparent) !important;
  }
  .site-header.mm-nav-scrolled .nav-group--actions > a.btn-outline { border-color: var(--primary) !important; }
  .site-header .nav-group--actions > a.btn-outline:hover { background: color-mix(in oklab, var(--primary) 8%, #fff); }
  .site-header .nav-group--actions > a.btn-primary {
    background: var(--primary); color: var(--primary-foreground) !important;
    box-shadow: 0 10px 24px -8px color-mix(in oklab, var(--primary) 60%, transparent);
  }
  .site-header .nav-group--actions > a.btn-primary:hover { filter: brightness(1.08); }

  /* ----- Over a dark section or photo: dark glass, white text ----- */
  .site-header.mm-nav-dark .logo,
  .site-header.mm-nav-dark .nav-group--links,
  .site-header.mm-nav-dark .nav-group--actions > a:not(.btn-primary) {
    background: rgba(22, 26, 34, 0.42);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.5);
  }
  .site-header.mm-nav-dark .logo,
  .site-header.mm-nav-dark .nav-group--links > a,
  .site-header.mm-nav-dark .nav-group--links .nav-dropdown__trigger,
  .site-header.mm-nav-dark .nav-group--actions > a:not(.btn-primary) { color: #fff !important; }
  .site-header.mm-nav-dark .nav-group--links > a:hover,
  .site-header.mm-nav-dark .nav-group--links .nav-dropdown:hover .nav-dropdown__trigger { background: rgba(255, 255, 255, 0.14); }
  .site-header.mm-nav-dark .nav-group--actions > a.btn-outline { border-color: rgba(255, 255, 255, 0.6) !important; }
  .site-header.mm-nav-dark .nav-group--actions > a.btn-outline:hover { background: rgba(255, 255, 255, 0.14); }
}

/* ----- Pricing (.mm-nav-hidden, set over [data-nav-hide] sections): the whole nav slides away ----- */
@media (min-width: 901px) {
  .site-header.site-header--pill.mm-nav-hidden {
    opacity: 0 !important; visibility: hidden !important; transform: translateY(-100%) !important;
  }
  .site-header.site-header--pill.mm-nav-hidden * { pointer-events: none !important; }
  /* ----- Hero screen: once the intro is finished, no nav at the top of the page until the viewer scrolls ----- */
  html:not(.mm-intro-lock) .site-header.site-header--pill:not(.mm-nav-scrolled) {
    opacity: 0 !important; visibility: hidden !important; transform: translateY(-100%) !important;
  }
  html:not(.mm-intro-lock) .site-header.site-header--pill:not(.mm-nav-scrolled) * { pointer-events: none !important; }
  /* ----- Intro screens (The Problem / The Solution, html.mm-intro-lock): only the MileMethod pill ----- */
  html.mm-intro-lock .site-header--pill .nav-group--links,
  html.mm-intro-lock .site-header--pill .nav-group--actions > a { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
  /* ...and on those screens it is just the MileMethod wordmark, no pill behind it (the pill returns on the hero) */
  html.mm-intro-lock .site-header--pill .logo {
    background: transparent !important; border-color: transparent !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
}

/* ----- Final CTA screen (.mm-nav-logo-only): only the MileMethod pill stays ----- */
@media (min-width: 901px) {
  .site-header .nav-group--links,
  .site-header .nav-group--actions > a { transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s, color 0.2s, opacity 0.25s, visibility 0.25s; }
  .site-header.mm-nav-logo-only .nav-group--links,
  .site-header.mm-nav-logo-only .nav-group--actions > a { opacity: 0; visibility: hidden; pointer-events: none; }
  /* ...and the MileMethod pill loses its outline there: just the wordmark on the black screen */
  .site-header.mm-nav-logo-only .logo {
    background: transparent !important; border-color: transparent !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
}

/* Narrower desktops: tighten so everything stays on one row */
@media (min-width: 901px) and (max-width: 1240px) {
  .site-header .header-inner { gap: 0.5rem; padding-left: 1rem; padding-right: 1rem; }
  .site-header .logo { padding: 0 0.9rem; font-size: 1.25rem !important; }
  .site-header .nav-group--links { padding: 0 0.3rem; gap: 0; }
  .site-header .nav-group--links > a,
  .site-header .nav-group--links .nav-dropdown__trigger { padding: 0 0.55rem; font-size: 0.85rem; }
  .site-header .nav-group--actions { gap: 0.35rem; }
  .site-header .nav-group--actions > a { padding: 0 0.9rem; font-size: 0.85rem; }
}

/* Small laptops / landscape tablets: drop the two secondary items so the row fits */
@media (min-width: 901px) and (max-width: 1040px) {
  .site-header .nav-group--links .nav-dropdown,
  .site-header .nav-group--links > a[href*="/login"] { display: none; }
}