/* nav-mobile.css — shared mobile-nav styling across all pages.
   Loaded after the page's inline <style> so it can override the defaults.
   The base nav layout (brand on left, links on right) is defined per-page;
   this file only adds the mobile-specific dropdown + hamburger behaviour. */

nav.top .nav-right {
  display: flex;
  align-items: center;
  gap: 28px;
}
nav.top .nav-burger { display: none; }

/* Desktop styling for the Try Free CTA — used to live under .links .nav-cta
   in each page's inline <style>. Moved here since the button now sits in
   .nav-right (outside .links) where the per-page rules no longer reach it. */
nav.top .nav-right > .nav-cta {
  background: #0A0A0A;
  color: #FFFFFF;
  padding: 8px 14px;
  font-family: 'Instrument Sans', -apple-system, system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: all 0.15s;
}
nav.top .nav-right > .nav-cta:hover {
  background: #0B7A95;
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 #0A0A0A;
}

@media (max-width: 768px) {
  nav.top {
    padding: 14px 16px;
    flex-wrap: wrap;
  }
  nav.top .nav-right {
    gap: 10px;
  }

  /* CRITICAL : the page-level nav.top has backdrop-filter for the frosted-
     glass effect. Per CSS spec, that creates a containing block for any
     descendant with position: fixed — meaning the .links overlay would be
     anchored to nav.top (a thin bar), not the viewport. So when the menu
     opens, we drop the filter on nav.top so .links can cover the full
     viewport. The closed state keeps the frosted look. */
  nav.top.is-open {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important;
    /* same trick for any other CSS prop that creates a containing block */
    transform: none !important;
    filter: none !important;
  }

  /* Full-screen overlay menu when `.is-open` is set on nav.top.
     Detroit / Crafting-Culture style : opaque white, top-aligned big
     display-font page links flush-left, brand + MENU/CLOSE button on
     top of the overlay. Lock body scroll when open. */
  nav.top .links {
    display: none;
    position: fixed;
    inset: 0;
    background: #FFFFFF;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    /* Top padding pushes links below the nav bar. Left padding aligns with
       the brand position (nav.top has padding: 14px 16px on mobile). */
    padding: 88px 16px 48px;
    gap: 8px;
    font-family: 'Big Shoulders Display', Impact, Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(56px, 14vw, 88px);
    line-height: 0.95;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    color: #0A0A0A;
    z-index: 1;  /* below brand/CTA/burger inside nav.top */
    overflow-y: auto;
    /* Override the dropdown styling that lived here before. */
    backdrop-filter: none;
    border-bottom: none;
    box-shadow: none;
  }
  nav.top.is-open .links { display: flex; }
  nav.top.is-open .links a {
    color: #0A0A0A;
    transition: color 0.15s;
    line-height: 0.95;
  }
  nav.top.is-open .links a:hover,
  nav.top.is-open .links a:active { color: #0B7A95; }
  nav.top.is-open .links a.active {
    color: #0B7A95;
    border-left: none;
    padding-left: 0;
    margin-left: 0;
  }

  /* Lock background scroll while overlay is open. */
  body:has(nav.top.is-open) { overflow: hidden; }

  /* Brand + CTA + MENU button sit ON TOP of the overlay so they stay tappable. */
  nav.top .brand { position: relative; z-index: 2; }
  nav.top .nav-right > .nav-cta { position: relative; z-index: 2; }
  nav.top .nav-burger { position: relative; z-index: 2; }

  /* Hide the inline separator (it lived between links and CTA on desktop). */
  nav.top .links .nav-sep { display: none; }

  /* Try Free / Open app CTA — visible on mobile in the closed state next
     to MENU, single line. Hidden when the overlay menu is open so it
     doesn't compete with the big page links. */
  nav.top .nav-right .nav-cta {
    white-space: nowrap;
    padding: 7px 12px;
    font-size: 13px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.04em;
  }
  nav.top.is-open .nav-right .nav-cta { display: none; }

  /* Hamburger icon : 3 horizontal bars at rest, animates into an X when
     the menu opens (Josh 2026-04-29 — replaced the previous "MENU/CLOSE"
     text label for a more universal icon). Each <span> in the burger is
     one of the bars ; transforms reposition the top + bottom bars into an
     X and fade the middle one out. */
  nav.top .nav-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    position: relative;
  }
  /* Reset whatever inherited "MENU" text content there might have been. */
  nav.top .nav-burger::before { content: none; }
  /* The 3 bars. The host page's nav-burger may render them as <span>s, so
     this rule grabs any direct <span> child. */
  nav.top .nav-burger span {
    display: block;
    position: absolute;
    left: 7px; right: 7px;
    height: 2px;
    background: #0A0A0A;
    border-radius: 1px;
    transform-origin: center center;
    transition:
      transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 0.2s ease,
      top 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  nav.top .nav-burger span:nth-child(1) { top: 10px; }
  nav.top .nav-burger span:nth-child(2) { top: 15px; }
  nav.top .nav-burger span:nth-child(3) { top: 20px; }
  /* Open state : top + bottom bars rotate into an X centered on row 15px,
     middle bar fades to nothing. */
  nav.top.is-open .nav-burger span:nth-child(1) {
    top: 15px;
    transform: rotate(45deg);
  }
  nav.top.is-open .nav-burger span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  nav.top.is-open .nav-burger span:nth-child(3) {
    top: 15px;
    transform: rotate(-45deg);
  }
  /* If the markup only ships 1 span (older partials/pages), synthesize the
     other two via pseudo-elements so the icon still works. The same
     transform set is mirrored on ::before / ::after. */
  nav.top .nav-burger:not(:has(span:nth-child(2)))::before,
  nav.top .nav-burger:not(:has(span:nth-child(2)))::after {
    content: "";
    position: absolute;
    left: 7px; right: 7px;
    height: 2px;
    background: #0A0A0A;
    border-radius: 1px;
    transform-origin: center center;
    transition:
      transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
      top 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  nav.top .nav-burger:not(:has(span:nth-child(2)))::before { top: 10px; }
  nav.top .nav-burger:not(:has(span:nth-child(2)))::after  { top: 20px; }
  nav.top.is-open .nav-burger:not(:has(span:nth-child(2)))::before { top: 15px; transform: rotate(45deg); }
  nav.top.is-open .nav-burger:not(:has(span:nth-child(2)))::after  { top: 15px; transform: rotate(-45deg); }
}