/* ════════════════════════════════════════════════════════════
   NAV UNIFY — one navbar size + look across every page.

   The site ships two nav components:
     .nv     (98 pages — fixed, transparent over hero video)
     .navbar (58 pages — absolute, solid over light content)

   Each keeps its own background behaviour and its own JS
   (mega-menus, burger). This file only normalises the METRICS
   so both render at identical size, rhythm and typography.

   Canonical height is --nav-height (44px), the token already
   declared in common.min.css.
   ════════════════════════════════════════════════════════════ */

:root {
    --ps-nav-h: 44px;
    --ps-nav-band: 1080px;  /* shared content width — wide enough for 9 links + logo + search + CTA */
    --ps-nav-gutter: 22px;
    --ps-nav-link-size: 13px;
    --ps-nav-link-ls: -0.01em;
}

/* ── Bar height + content band ─────────────────────────────── */
nav.nv,
nav.navbar {
    height: var(--ps-nav-h) !important;
    min-height: var(--ps-nav-h) !important;
}

nav.navbar .nav-container {
    height: var(--ps-nav-h) !important;
    max-width: calc(var(--ps-nav-band) + (var(--ps-nav-gutter) * 2)) !important;
    padding: 0 var(--ps-nav-gutter) !important;
}

/* .nv has no inner wrapper — reproduce the same centred band with padding */
nav.nv {
    padding: 0 max(var(--ps-nav-gutter), calc((100% - var(--ps-nav-band)) / 2)) !important;
    align-items: center !important;
}

/* ── Link typography ───────────────────────────────────────── */
nav.nv .nv-links > a,
nav.navbar .nav-links .nav-link {
    font-size: var(--ps-nav-link-size) !important;
    font-weight: 400 !important;
    letter-spacing: var(--ps-nav-link-ls) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}

/* Match spacing rhythm: .navbar spaces via link padding, .nv via gap */
nav.navbar .nav-links .nav-link {
    padding: 0 11px !important;
}
nav.nv .nv-links {
    gap: 22px !important;
    align-items: center !important;
}

/* ── Logo ──────────────────────────────────────────────────── */
nav.nv .nv-logo img,
nav.navbar .nav-logo .logo-img {
    width: 26px !important;
    height: 26px !important;
    object-fit: contain !important;
}
nav.nv .nv-logo,
nav.navbar .nav-logo {
    gap: 9px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    display: inline-flex !important;
    align-items: center !important;
}
nav.navbar .nav-wordmark {
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
}

/* ── "Get a quote" pill ────────────────────────────────────── */
nav.nv .nv-cta,
nav.navbar .nav-quote-cta {
    height: 32px !important;
    padding: 0 16px !important;
    border-radius: 980px !important;
    font-size: var(--ps-nav-link-size) !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* ── Search affordance ─────────────────────────────────────────
   Must stay a perfect circle. The nav is a flex row, so without an
   explicit flex-basis + align-self the button stretches to the full
   bar height and border-radius:50% renders it as an ellipse.       */
nav.nv .nv-search,
nav.navbar .ps-search-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;   /* must be set — a global 44px touch-target
                                      min-height otherwise wins over height   */
    max-height: 30px !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 30px !important;
    align-self: center !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
nav.nv .nv-search svg,
nav.navbar .ps-search-btn svg {
    width: 15px !important;
    height: 15px !important;
    display: block !important;
}

/* ── Trailing control order — search sits BEFORE the quote pill
      on both components (.navbar ships it after by default) ── */
nav.navbar .nav-container {
    display: flex !important;
    align-items: center !important;
}
nav.navbar .nav-container > .nav-logo    { order: 0 !important; }
nav.navbar .nav-container > .nav-links   { order: 1 !important; }
nav.navbar .nav-container > .ps-search-btn { order: 2 !important; margin-right: 10px !important; }
nav.navbar .nav-container > .nav-quote-cta { order: 3 !important; }
nav.navbar .nav-container > .theme-toggle,
nav.navbar .nav-container > .nav-toggle  { order: 4 !important; }

/* ── Mobile: same compact bar on both ──────────────────────── */
@media (max-width: 768px) {
    nav.nv,
    nav.navbar {
        height: var(--ps-nav-h) !important;
        min-height: var(--ps-nav-h) !important;
    }
    nav.nv {
        padding: 0 16px !important;
    }
    nav.navbar .nav-container {
        padding: 0 16px !important;
    }

    /* Search + burger are the two round controls — keep them an
       identical, matched pair so the bar reads as one system.      */
    nav.nv .nv-search,
    nav.navbar .ps-search-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        flex: 0 0 40px !important;
    }
    nav.nv .nv-burger {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        flex: 0 0 40px !important;
        align-self: center !important;
        box-sizing: border-box !important;
    }
    nav.nv .nv-links {
        gap: 12px !important;
    }
    nav.nv .nv-search svg,
    nav.navbar .ps-search-btn svg {
        width: 16px !important;
        height: 16px !important;
    }
}