/* Electric Air Shipping — shared site chrome.
 *
 * Loaded by BOTH the homepage and the knowledge base so the two share one
 * frame. Deliberately narrow in scope: design tokens, the fonts, the top bar,
 * and a couple of utilities. Page layout lives in each page's own file, so
 * this cannot fight the knowledge base's grid.
 */

/* ---------------------------------------------------------------- tokens */

:root {
    --bg: #111;
    --fg: #eee;
    --muted: #888;

    /* Deployed berry. The brand's canonical value is #c428a3; reconciling the
       two is a deliberate separate pass across all repos, so this stays as-is
       and the repaint becomes a one-line change here. */
    --berry: #c428a3;
    --orange: #ff9900;

    /* Shared by the bar's own height AND the homepage's scroll-padding-top.
       They must never drift apart, or scroll-snap targets land underneath the
       bar. One variable is the guarantee. */
    --bar-h: 3.25rem;
}

/* ----------------------------------------------------------------- fonts */

/* Geist — the pitch face: homepage, deck, and this shared bar.
   One variable file covers every weight 100-900. SIL Open Font License;
   see assets/fonts/OFL.txt, which must ship alongside it. */
@font-face {
    font-family: Geist;
    src: url("./fonts/Geist-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

/* Genos — the tools face, used by the knowledge base and the calculator.
   Declared here so both pages resolve it identically. */
@font-face {
    font-family: Genos;
    src: url("./Genos-Regular.ttf") format("truetype");
    font-display: swap;
}

/* -------------------------------------------------------------- utilities */

/* Off-screen but present for assistive technology and search engines.
   NOT display:none or visibility:hidden — those remove content from the
   accessibility tree entirely, which would silently defeat the purpose while
   looking identical on screen. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------- top bar */

.topbar {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--bar-h);
    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 clamp(0.75rem, 2.5vw, 2rem);

    font-family: Geist, system-ui, sans-serif;
    /* Deliberately faint: the hero should still read as full-screen. */
    background: rgba(17, 17, 17, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.topbar-home {
    display: flex;
    align-items: center;
    height: 100%;
}

.topbar-home img {
    height: clamp(1.05rem, 2.2vh, 1.5rem);
    width: auto;
    display: block;
}

/* Interface chrome is Genos — the brand face, matching the hex page and the
   calculator. Geist is reserved for reading text (the hero headline and
   sub-line, which echo slide 15's own typography). */
.topbar-nav {
    display: flex;
    align-items: center;
    gap: clamp(0.9rem, 3vw, 2rem);
    font-family: Genos, system-ui, sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.05em;
}

.topbar-nav a {
    color: var(--berry);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.topbar-nav a:hover,
.topbar-nav a:focus-visible {
    color: var(--orange);
}

/* Keyboard focus must stay obvious against photography. */
.topbar a:focus-visible,
.nl-box a:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
}

/* ------------------------------------------------- sections menu (bars) */
/* Markup is injected by assets/menu.js so it exists in exactly one place;
   only these styles are shared. The bar holds CONTACT and RECEIVE as words
   and everything else behind this button, so the bar's width stays fixed
   however many sections there are. */

/* Deliberately NOT position:relative — the panel below anchors to the BAR,
   not to this button, and leaving no positioning context here is what lets
   it do that. */
.menu-wrap {
    display: flex;
    align-items: center;
}

.menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.28rem;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.menu-btn span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--berry);
    transition: background 0.15s;
}

.menu-btn:hover span,
.menu-btn:focus-visible span,
.menu-wrap.open .menu-btn span {
    background: var(--orange);
}

.menu-btn:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
}

/* Anchored to .topbar. With .menu-wrap unpositioned these offsets resolve
   against the bar's padding box, so top:100% is the bar's full height and
   right:0 its outer edge: the panel hangs flush off the bar rather than
   floating inset from it and overlapping its lower few pixels. */
.menu-panel {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 10rem;
    display: flex;
    flex-direction: column;
    background: rgba(17, 17, 17, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid #2a2a2a;
    border-top: 0;      /* the bar itself is the panel's top edge */
    border-right: 0;    /* would otherwise be a hairline on the screen edge */
    padding: 0.35rem 0;
}

.menu-panel[hidden] {
    display: none;
}

.menu-panel a {
    padding: 0.5rem 1.1rem;
    /* Matches .topbar's own inline padding EXACTLY, so every label lands on
       the same right margin as CONTACT, RECEIVE and the button above it.
       If the bar's padding changes, change this with it. */
    padding-right: clamp(0.75rem, 2.5vw, 2rem);
    color: var(--berry);
    text-decoration: none;
    white-space: nowrap;
    /* Items align to the panel's right edge, which sits on the page's right
       margin — so every entry lines up under the button however long it is,
       and a longer future entry grows leftwards instead of shifting the set. */
    text-align: right;
}

.menu-panel a:hover,
.menu-panel a:focus-visible {
    color: var(--orange);
    background: rgba(255, 255, 255, 0.04);
}

/* --------------------------------------------- newsletter modal (RECEIVE) */
/* Markup is injected by assets/newsletter.js so it exists in exactly one
   place; only these styles are shared. */

.nl-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 30;
}

.nl-overlay.open {
    display: flex;
}

.nl-box {
    background: #111;
    border: 0.25rem solid #222;
    border-radius: 0.25rem;
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: min(90vw, 26rem);
    font-family: Genos, system-ui, sans-serif;
    font-size: 1.3rem;
    color: var(--berry);
}

.nl-box input {
    font-family: inherit;
    font-size: 1rem;
    background: #1c1c1c;
    color: #eaeaea;
    border: 1px solid #777;
    border-radius: 0.25rem;
    padding: 0.5rem 0.75rem;
    outline: none;
}

.nl-box input:focus {
    border-color: var(--berry);
}

.nl-msg {
    font-size: 0.9rem;
    color: #eaeaea;
    min-height: 1.5rem;
}

.nl-actions {
    display: flex;
    gap: 1.5rem;
    justify-content: flex-end;
}

.nl-actions a {
    cursor: pointer;
    color: var(--berry);
    text-decoration: none;
}

.nl-actions a:hover,
.nl-actions a:focus-visible {
    color: var(--orange);
}