/* ============================================================================
 * Heliomath NAV — the transparent-header nav "pill" (Login / Learning Plans …).
 *
 * THE SINGLE SOURCE OF TRUTH for the little translucent link-buttons that sit in
 * the top-right of every Heliomath page with a dark, transparent header: the
 * learning-differences page and the whole account-access flow (login, signup,
 * password-reset, 2FA, trial/payment funnel). Previously this pill was defined
 * twice — once in heliomath_learning_differences.css and once in
 * heliomath_account_access.css — with identical declarations but divergent RESULTS
 * (see "why self-contained" below). Consolidated here so there is exactly one.
 *
 * LOADING (controlled): loaded ONLY on those dark-header pages, never on the home
 * page (whose light hero uses a different, dark-ink nav treatment). Wired in:
 *   - external_base.html  — with the account-access CSS (login/signup + funnel)
 *   - alpha_base.html     — with the account-access CSS (reset + funnel), which
 *                           ALSO pulls Nunito there (alpha_base has no foundation)
 *   - the learning-differences page — via its extra_head
 * Load it AFTER grokkoli_public.css where that legacy file is present (the LD
 * page): the first selector matches grokkoli_public's transparent-nav pill
 * specificity, so source order breaks the tie in our favour.
 *
 * TWO SELECTORS, ONE RULE: both base templates now add `.transparent` to the auth
 * <nav> — external_base always, and alpha_base for the heliomath account-access flow
 * (needed so heliomath_components' `:not(.transparent)` solid-nav skin, loaded there for
 * the #footer, skips it). The `.auth-page …` selector is kept as belt-and-suspenders for
 * alpha_base; both point at the same declaration block.
 *
 * WHY SELF-CONTAINED (font / tracking / line-height PINNED): the pill's own
 * box/paint was already identical in both old copies, yet the buttons rendered at
 * different sizes — because these three properties are INHERITED from <body>, and
 * the two page families inherit different bodies: external_base pages get
 * heliomath_base (Nunito / 1.6 / normal), while alpha_base pages inherit legacy
 * grokkoli_base (Quicksand / 1.5 / letter-spacing:1px). Pinning them here makes
 * the pill immune to whatever typography a page happens to inherit, so it renders
 * identically everywhere. (The rest of the alpha_base auth pages intentionally
 * still inherit legacy Quicksand for now — only the pill is normalised.)
 * ========================================================================== */

.header.navbar-light.transparent .navbar-nav .nav-link,
.auth-page .navbar-nav .nav-link {
    /* paint + shape (Sunset tokens) */
    color: var(--text-on-dark);
    background-color: rgba(255, 255, 255, 0.1);
    padding: 7px 20px;
    border-radius: var(--radius-pill);
    /* typography — PINNED so inheritance can't skew the pill's size */
    font-family: var(--font-family-base);
    font-size: 1.0625rem;   /* 17px */
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
    letter-spacing: normal;
    /* it's a button, not a text link → no underline */
    text-decoration: none;
}
.header.navbar-light.transparent .navbar-nav .nav-link:hover,
.auth-page .navbar-nav .nav-link:hover {
    color: var(--white);
    background-color: rgba(255, 255, 255, 0.15);
}

/* Pressed / focus ring — a detached outline in the pill's TEXT colour
 * (--text-on-dark), NOT its translucent fill, held 3px off the edge. Two reasons to
 * use outline + outline-offset here rather than the box-shadow pattern:
 *   1. An outline is painted OUTSIDE the box and never reflows it, so the pill can't
 *      shift or change size on press.
 *   2. We must also neutralise base.css's a:focus, which is what currently distorts
 *      the pill — it adds focus-pill padding + negative margins (restated to the
 *      pill's own values below) and an azure box-shadow ring (killed here).
 * Plain :focus (not :focus-visible) so the ring shows on click too, matching the
 * other Heliomath buttons. */
.header.navbar-light.transparent .navbar-nav .nav-link:focus,
.header.navbar-light.transparent .navbar-nav .nav-link:active,
.auth-page .navbar-nav .nav-link:focus,
.auth-page .navbar-nav .nav-link:active {
    outline: 2px solid var(--text-on-dark);
    outline-offset: 3px;
    box-shadow: none;
    /* Restore the pill's own horizontal box metrics so base.css's a:focus
     * padding/negative-margin can't resize or shift it. */
    padding-left: 20px;
    padding-right: 20px;
    margin-left: 0;
    margin-right: 0;
}


/* ============================================================================
 * HEADER CHROME — identical logo + pill placement on every dark-header page.
 *
 * Logo SIZE, the top/side insets, vertical centring, and the gap between pills —
 * so the learning-differences page and the whole account-access flow line up
 * pixel-for-pixel. Because this file loads on BOTH bases, it can override the two
 * different sources these pages would otherwise get their header layout from:
 *   - alpha_base auth pages inherit legacy grokkoli_base.css (zeroed navbar
 *     padding + a .navbar-brand margin/padding + per-item .nav-item margins, and
 *     a 32px .navbar-logo via account_access);
 *   - external_base pages get Bootstrap + heliomath_components.
 * Higher-specificity `.header …` selectors win over both. Home is unaffected —
 * this file isn't loaded there.
 * ========================================================================== */

/* Comfortable top + left inset for the logo; the right inset is a step tighter so
 * the last pill still reaches the edge. Left padding is fluid (24px → 36px). */
.header.navbar {
    /* top | right | bottom | left. Top/bottom bumped from --space-sm (12px) to
     * 14px to nudge the whole nav (logo + pills) ~4px lower from the top edge. */
    padding: 14px var(--space-md) 14px var(--space-lg);
    /* grokkoli_base.css floors .header at calc(4vh + 2.5rem) (~64px) on the
     * alpha_base pages, which — taller than the 60px content — recentres the logo
     * ~2px lower than the external_base pages. Let the (absolute, transparent)
     * header be content-height so both bases match. */
    min-height: 0;
}

/* Sit the logo + nav items on one vertical centre line. (grokkoli_base / Bootstrap
 * don't centre the brand, and heliomath_components' centring only loads on
 * external_base — so it's re-stated here for the alpha_base auth pages.) */
.header .navbar-collapse { align-items: center; }
.header .navbar-brand {
    display: inline-flex;
    align-items: center;
    margin: 0;    /* neutralise grokkoli_base's .navbar-brand top/left/right margins */
    padding: 0;   /* …and its padding-bottom, so the wordmark centres cleanly */
}

/* Wordmark height — ONE size everywhere: 36px. This targets the
 * <img class="navbar-logo"> the account-access pages render (was 32px via
 * account_access). The LD page's <span class="logo"> is already 36px from
 * heliomath_components (--logo-height: 2.25rem); width there is a calc() off the
 * artwork ratio, so it must NOT get width:auto — hence only .navbar-logo here. */
.header .navbar-logo {
    height: 2.25rem;   /* 36px; width follows the 500x84 ratio */
    width: auto;
}

/* Space between the pills (replaces grokkoli_base's per-item .nav-item margins on
 * the alpha_base pages; matches the flex gap used on the external_base pages). */
.header .navbar-nav { gap: var(--space-sm); }
.header .navbar-nav .nav-item { margin: 0; }
