/* =========================================================
   ALPHA STRIKE — NAVBAR COMPONENT
   Version: 1.0
   Status: Locked
   ========================================================= */


/* =========================================================
   1. DEMO FOUNDATION
   ========================================================= */

.alpha-navbar-demo {
    max-width: var(--alpha-container-max);
    margin: 0 auto;
    padding: var(--alpha-spacing-6);

    color: var(--alpha-text-primary);

    font-family: var(--alpha-font-body);
    font-size: var(--alpha-font-size-body);
    line-height: var(--alpha-line-height-body);
}

.alpha-navbar-demo__header {
    margin-bottom: var(--alpha-spacing-8);
}

.alpha-navbar-demo__eyebrow {
    margin: 0 0 var(--alpha-spacing-2);

    color: var(--alpha-text-accent);

    font-size: var(--alpha-font-size-caption);
    letter-spacing: var(--alpha-letter-spacing-label);
}

.alpha-navbar-demo__title {
    margin: 0 0 var(--alpha-spacing-3);

    color: var(--alpha-text-primary);

    font-family: var(--alpha-font-display);
    font-size: var(--alpha-font-size-h1);
    line-height: var(--alpha-line-height-heading);
}

.alpha-navbar-demo__description {
    max-width: 720px;
    margin: 0;

    color: var(--alpha-text-secondary);
}


/* =========================================================
   2. NAVBAR FOUNDATION
   ========================================================= */

.alpha-navbar {
    display: flex;
    align-items: center;

    min-height: 64px;

    padding:
        0
        var(--alpha-spacing-5);

    background: var(--alpha-surface-primary);

    border:
        var(--alpha-border-thin)
        solid
        var(--alpha-border-default);

    border-radius: var(--alpha-radius-md);

    box-shadow: var(--alpha-shadow-subtle);

    position: sticky;
    top: var(--alpha-spacing-4);
    z-index: var(--as-z-sticky, 100);

    transition:
        box-shadow var(--alpha-motion-duration-normal) var(--alpha-motion-ease-standard),
        border-color var(--alpha-motion-duration-normal) var(--alpha-motion-ease-standard);
}

/* Applied by core/js/02_navigation.js once the page scrolls past
   the top - a slightly stronger shadow/border so the floating bar
   reads clearly over whatever content is now behind it. */
.alpha-navbar--scrolled {
    border-color: var(--alpha-border-strong);
    box-shadow: var(--alpha-shadow-medium);
}


/* =========================================================
   3. BRAND
   ========================================================= */

.alpha-navbar__brand {
    display: inline-flex;
    align-items: baseline;

    /* v1.2 (2026-08-15): the Logo Lockup 02.5 gap spec (0.5X = 28px)
       was calibrated for spacing an emblem from a separate wordmark
       span. Since v1.1 the wordmark is baked into brand-mark's own
       image (Short/Primary Lockup asset), so this gap now only
       separates that finished lockup from the "OS" product badge -
       a different relationship, reading as too loose at 28px. Tightened
       to spacing-2 (8px), closer to how a product badge normally sits
       right against a wordmark. */
    gap: var(--alpha-spacing-2);

    flex: 0 0 auto;

    color: var(--alpha-text-primary);

    text-decoration: none;
}

/* v1.1 (2026-08-15): was a two-piece Emblem Only (5.06) image + a
   live-text .alpha-navbar__brand-name span standing in for the
   wordmark. That violated logo.md §3 ("Do not recreate the wordmark
   using ordinary text.") Replaced with the single Short Lockup (5.05)
   asset - assets/logo/alphastrike-short-lockup.png, cropped from the
   approved master (tagline/rule removed, emblem+wordmark pixels
   untouched) - so emblem and wordmark are one controlled asset again,
   per §5.05. Sized in the asset's true 615:131 aspect ratio, height
   held at the previous emblem height (56px) to keep the navbar's
   vertical rhythm unchanged. Deliberately larger than the footer's
   mark - the navbar is the primary, first-impression placement
   (Brand Book 02.2), the footer a quieter closing mention. */
.alpha-navbar__brand-mark {
    align-self: center;
    flex-shrink: 0;
    display: block;
    width: 263px;
    height: 56px;
}

.alpha-navbar__menu {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.alpha-navbar__menu span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--alpha-text-primary);
    border-radius: var(--alpha-radius-full);
}
.alpha-navbar__brand-product {
    color: var(--alpha-text-accent);

    font-family: var(--alpha-font-mono);
    /* Hardcoded (not token-linked) so it keeps pace with the wordmark
       manually rather than inheriting future scale changes - bumped
       16px -> 20px alongside the 2026-08-13 wordmark increase to hold
       the same visual proportion beside it. */
    font-size: 20px;
    font-weight: var(--alpha-font-weight-bold);

    letter-spacing: var(--alpha-letter-spacing-label);
}


/* =========================================================
   4. PRIMARY NAVIGATION
   ========================================================= */

.alpha-navbar__navigation {
    display: flex;
    align-items: center;

    gap: var(--alpha-spacing-1);

    margin-left: auto;
    margin-right: var(--alpha-spacing-5);
}

.alpha-navbar__link {
    position: relative;

    display: inline-flex;
    align-items: center;

    min-height: 40px;

    padding:
        var(--alpha-spacing-2)
        var(--alpha-spacing-3);

    border-radius: var(--alpha-radius-sm);

    color: var(--alpha-text-secondary);

    font-size: var(--alpha-font-size-label);
    font-weight: var(--alpha-font-weight-bold);

    text-decoration: none;

    transition:
        background-color var(--alpha-motion-duration-fast)
            var(--alpha-motion-ease-standard),
        color var(--alpha-motion-duration-fast)
            var(--alpha-motion-ease-standard);
}

.alpha-navbar__link:hover {
    background: var(--alpha-surface-secondary);

    color: var(--alpha-text-primary);
}

.alpha-navbar__link--active {
    color: var(--alpha-text-accent);
}

.alpha-navbar__link--active:hover {
    color: var(--alpha-text-accent);
}


/* =========================================================
   5. NAVIGATION FOCUS
   ========================================================= */

.alpha-navbar__brand:focus-visible,
.alpha-navbar__link:focus-visible,
.alpha-navbar__mobile-link:focus-visible {
    outline:
        var(--alpha-border-medium)
        solid
        var(--alpha-interactive-focus);

    outline-offset: var(--alpha-spacing-1);
}


/* =========================================================
   6. THEME TOGGLE
   Brand Book 02.19/02.20: dark is the primary environment, light
   is the working/document environment - both are fully specced,
   but the site itself defaults to dark (data-theme="dark" on
   <body>, hardcoded per page). This button is the only place that
   default can change, and only for the visitor who asks for it -
   core/js/10_theme.js persists the choice and re-applies it before
   the page loader lifts, so returning visitors never see a flash
   of the wrong theme.
   ========================================================= */

.alpha-navbar__theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    padding: 0;

    background: transparent;

    border:
        var(--alpha-border-thin)
        solid
        var(--alpha-border-default);

    border-radius: var(--alpha-radius-sm);

    color: var(--alpha-icon-primary);

    cursor: pointer;

    transition:
        background-color var(--alpha-motion-duration-fast)
            var(--alpha-motion-ease-standard),
        border-color var(--alpha-motion-duration-fast)
            var(--alpha-motion-ease-standard),
        color var(--alpha-motion-duration-fast)
            var(--alpha-motion-ease-standard);
}

.alpha-navbar__theme-toggle:hover {
    background: var(--alpha-surface-secondary);
    border-color: var(--alpha-border-strong);
    color: var(--alpha-icon-accent);
}

.alpha-navbar__theme-toggle:focus-visible {
    outline:
        var(--alpha-border-medium)
        solid
        var(--alpha-interactive-focus);

    outline-offset: var(--alpha-spacing-1);
}

.alpha-navbar__theme-toggle svg {
    width: 20px;
    height: 20px;

    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: square;
    stroke-linejoin: miter;
    fill: none;
}

/* Icon shown = the theme you'd SWITCH TO. On dark (the default),
   the sun (switch to light) shows; on light, the moon (switch to
   dark) shows. Two icons rendered, one hidden - no re-render on
   click, [data-theme] on body alone decides which is visible. */
.alpha-navbar__theme-toggle .alpha-navbar__theme-icon--moon {
    display: none;
}

[data-theme="light"] .alpha-navbar__theme-toggle .alpha-navbar__theme-icon--sun {
    display: none;
}

[data-theme="light"] .alpha-navbar__theme-toggle .alpha-navbar__theme-icon--moon {
    display: block;
}


/* =========================================================
   7. MENU BUTTON
   ========================================================= */

.alpha-navbar__actions {
    display: flex;
    align-items: center;

    gap: var(--alpha-spacing-2);

    flex: 0 0 auto;
}

.alpha-navbar__menu {
    display: none;

    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    padding: 0;

    background: transparent;

    border:
        var(--alpha-border-thin)
        solid
        var(--alpha-border-default);

    border-radius: var(--alpha-radius-sm);

    color: var(--alpha-text-primary);

    font-family: var(--alpha-font-body);
    font-size: var(--alpha-font-size-body);

    cursor: pointer;

    transition:
        background-color var(--alpha-motion-duration-fast)
            var(--alpha-motion-ease-standard),
        border-color var(--alpha-motion-duration-fast)
            var(--alpha-motion-ease-standard),
        color var(--alpha-motion-duration-fast)
            var(--alpha-motion-ease-standard);
}

.alpha-navbar__menu:hover {
    background: var(--alpha-surface-secondary);
    border-color: var(--alpha-border-strong);
}

.alpha-navbar__menu:focus-visible {
    outline:
        var(--alpha-border-medium)
        solid
        var(--alpha-interactive-focus);

    outline-offset: var(--alpha-spacing-1);
}


/* =========================================================
   8. MOBILE NAVIGATION
   ========================================================= */

.alpha-navbar__mobile {
    display: none;

    margin-top: var(--alpha-spacing-2);

    padding: var(--alpha-spacing-3);

    background: var(--alpha-surface-primary);

    border:
        var(--alpha-border-thin)
        solid
        var(--alpha-border-default);

    border-radius: var(--alpha-radius-md);

    box-shadow: var(--alpha-shadow-subtle);

    /* Added 2026-08-12: was an instant [hidden] toggle with no easing.
       components/navbar/navbar.js now adds .alpha-navbar__mobile--visible
       a frame after removing [hidden] (mirrors the modal's pattern). */
    opacity: 0;
    transform: translateY(-6px);
    transition:
        opacity var(--alpha-motion-duration-fast) var(--alpha-motion-ease-standard),
        transform var(--alpha-motion-duration-fast) var(--alpha-motion-ease-standard);
}

.alpha-navbar__mobile[hidden] {
    display: none;
}

.alpha-navbar__mobile--visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .alpha-navbar__mobile {
        transition: none;
    }
}

.alpha-navbar__mobile-link {
    display: flex;
    align-items: center;

    min-height: 44px;

    padding:
        var(--alpha-spacing-3)
        var(--alpha-spacing-4);

    border-radius: var(--alpha-radius-sm);

    color: var(--alpha-text-secondary);

    font-size: var(--alpha-font-size-label);
    font-weight: var(--alpha-font-weight-bold);

    text-decoration: none;
}

.alpha-navbar__mobile-link:hover {
    background: var(--alpha-surface-secondary);

    color: var(--alpha-text-primary);
}

.alpha-navbar__mobile-link--active {
    color: var(--alpha-text-accent);
}


/* =========================================================
   9. RESPONSIVE
   ========================================================= */

@media (max-width: 760px) {

    .alpha-navbar-demo {
        padding: var(--alpha-spacing-4);
    }

    .alpha-navbar {
        min-height: 60px;

        padding:
            0
            var(--alpha-spacing-4);
    }

    .alpha-navbar__navigation {
        display: none;
    }

    .alpha-navbar__menu {
        display: inline-flex;
    }

    /* v1.1: was a font-size-h1 -> font-size-h4 step (36px -> 18px,
       50%) on the old text wordmark; same 50% scale applied to the
       Short Lockup image so the mobile brand mark shrinks the same
       amount it always did. */
    .alpha-navbar__brand-mark {
        width: 131px;
        height: 28px;
    }

    .alpha-navbar__mobile {
        display: block;
    }
}


/* =========================================================
   10. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .alpha-navbar__link,
    .alpha-navbar__menu {
        transition: none;
    }
}