/* ============================================================
   GLS — Morphing header (the S361 concept, ratified Sep 20 2026)
   Linked LAST in <head> on every page that carries the shared .nav.
   At rest nothing changes: the .nav rules in site.css / the homepage
   stay exactly as they are. Past 40px of scroll, js/nav.js adds
   .is-float and the bar compresses into a floating cream pill.

   The nav stays in flow (position: sticky), so every pixel the pill
   loses in height is paid back as top margin, and the page never
   jumps at the 40px line. Per side, all on the same 0.5s curve:
     padding-block 16 -> 10 ......... -12
     wordmark height 44 -> 36 ....... -8   (the tallest item, so the
                                            content height follows it)
     margin-top 0 -> 20 ............. +20
                                     ----
                                        0
   The CTA compresses 8 -> 6 padding-block so it never overtakes the
   wordmark mid-transition (39.1 -> 35.1 against 44 -> 36).
   ============================================================ */
:root { --ease-float: cubic-bezier(.22, 1, .36, 1); --nav-float-dur: .5s; }

.nav {
  max-width: 100%;
  margin: 0 auto;
  border-radius: 0;
  transition:
    max-width var(--nav-float-dur) var(--ease-float),
    margin var(--nav-float-dur) var(--ease-float),
    padding var(--nav-float-dur) var(--ease-float),
    top var(--nav-float-dur) var(--ease-float),
    border-radius var(--nav-float-dur) var(--ease-float),
    border-color var(--nav-float-dur) var(--ease-float),
    background-color var(--nav-float-dur) var(--ease-float),
    box-shadow var(--nav-float-dur) var(--ease-float),
    backdrop-filter var(--nav-float-dur) var(--ease-float);
}
.nav.is-float {
  top: 12px;
  max-width: 780px;
  margin-top: 20px;
  padding: 10px 12px 10px 22px;
  border-radius: 999px;
  border-bottom-color: transparent;
  background-color: rgba(250, 249, 247, .72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 0 0 1px rgba(26, 35, 50, .10), 0 8px 30px rgba(26, 35, 50, .08);
}

/* The wordmark is an <img> with an inline height:44px, so the float
   rule needs !important to win. width:auto keeps it undistorted. */
.nav__brand { flex: 0 0 auto; } /* the wordmark is never squeezed, at any width */
.nav__brand img { transition: height var(--nav-float-dur) var(--ease-float); }
.nav.is-float .nav__brand img { height: 36px !important; }

/* The CTA's corners morph with the pill: 3px at rest (the site's squared edge),
   999px when floating, on the same curve and duration as the pill itself. */
.nav__cta {
  transition:
    padding var(--nav-float-dur) var(--ease-float),
    border-radius var(--nav-float-dur) var(--ease-float),
    box-shadow var(--dur-2) var(--ease),
    background var(--dur-1) var(--ease);
}
.nav.is-float .nav__cta { padding-top: 6px; padding-bottom: 6px; border-radius: 999px; }

/* Tablet-narrow band (481 to 640). Measured on the live site at 600: the nav is
   95.7px tall because "Free Website Scorecard" wraps to two lines and the wordmark
   is squeezed to 148.7x44. The phone pattern (hamburger, dropdown) is the honest
   fix and it is what site.css already does at 480; this block carries the same
   rules up to 640 so the pill has the room it needs. Same height arithmetic as
   desktop (wordmark 44 -> 36, CTA 8 -> 6, margin 0 -> 20). */
@media (min-width: 481px) and (max-width: 640px) {
  .nav__brand, .nav__toggle { flex: 0 0 auto; }
  .nav__cta { white-space: nowrap; order: 3; }
  .nav__toggle { display: inline-flex; order: 2; }
  .nav__list {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--cream); border-bottom: var(--rule-hair);
    box-shadow: 0 12px 24px rgba(26,26,26,0.10);
    padding: var(--s-2) var(--section-pad-x) var(--s-4);
    transform: scaleY(0); transform-origin: top; opacity: 0; pointer-events: none;
    transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
  }
  .nav.is-open .nav__list { transform: scaleY(1); opacity: 1; pointer-events: auto; }
  .nav__list li { padding: var(--s-3) 0; border-bottom: var(--rule-hair); }
  .nav__list li:last-child { border-bottom: 0; }
  .nav__link { font-size: 1.0625rem; }
  .nav.is-open .nav__toggle span:nth-child(1) { opacity: 0; }
  .nav.is-open .nav__toggle span:nth-child(3) { opacity: 0; }
  .nav.is-float .nav__list { left: 6px; right: 6px; top: calc(100% - 24px); padding-top: calc(var(--s-2) + 24px); z-index: -1; border-radius: 0 0 12px 12px; }
}

/* Phones (<=480). Two things happen here.
   1. A rest-state fix, measured on the live site at 390: the CTA wrapped to two
      lines (58.9px) and the wordmark was squeezed to 148.8x44 (ratio 3.382 against
      its true 3.483). The brand must never shrink and the wordmark must never
      distort, so the wordmark drops to 36px (uniform) and the CTA stays on one line.
      Rest height becomes 16 + 37.45 (CTA) + 16 + 1 = 70.45.
   2. The pill insets 12px from each edge. The CTA keeps its padding here (the
      wordmark is already 36, so the CTA is the tallest item in both states and the
      content height never moves); padding-block 16 -> 10 is paid back by
      margin-top 0 -> 12. The dropdown menu slides out from underneath the pill,
      its top tucked behind it so the round corners never show a notch. */
@media (max-width: 480px) {
  .nav__brand, .nav__toggle { flex: 0 0 auto; }
  .nav__brand img { height: 36px !important; }
  .nav__cta { white-space: nowrap; }
  .nav.is-float { margin-top: 12px; margin-left: 12px; margin-right: 12px; padding: 10px 10px 10px 16px; }
  .nav.is-float .nav__cta { padding-top: var(--s-2); padding-bottom: var(--s-2); }
  .nav.is-float .nav__list {
    left: 6px; right: 6px;
    top: calc(100% - 24px);
    padding-top: calc(var(--s-2) + 24px);
    z-index: -1;
    border-radius: 0 0 12px 12px;
  }
}
/* The narrowest phones (<=360): the pill has 310px of room for 332px of items,
   so the wordmark steps to 32px and the CTA to .75rem. The toggle (36px) is
   then the tallest item in both states, so the height arithmetic still holds. */
@media (max-width: 360px) {
  .nav { padding-left: 12px; padding-right: 12px; }
  .nav__brand img { height: 32px !important; }
  .nav__cta { font-size: 0.75rem; padding-left: 10px; padding-right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav, .nav__brand img, .nav__cta { transition: none; }
}