/*
 * gogo-theme.css - layer 3 of 5 (foundation, tokens, THEME, components, app).
 *
 * Two jobs only: the self-hosted font faces plus base typography on bare elements, and the
 * re-skin of the vendored fwk-* foundation onto the gogo tokens (Sleeve: black pill buttons,
 * hairline cards, calm controls with a visible focus ring). No new fwk-* class is authored
 * here (canon K3), no hex (K4), no !important (K1).
 */

/* ---- Fonts (self-hosted, latin subset, OFL; licences beside the files) ------------------ */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"),
         url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-latin-wght-italic.woff2") format("woff2-variations"),
         url("../fonts/inter-latin-wght-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Base typography (bare elements: the theme layer's own job) -------------------------- */
html {
    font-family: var(--gogo-font-sans);
    font-size: var(--gogo-body-size);
    font-weight: var(--gogo-weight-regular);
    line-height: var(--gogo-body-leading);
    color: var(--gogo-text);
    background: var(--gogo-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--gogo-font-sans);
    color: var(--gogo-text);
    background: var(--gogo-page);
}

h1, h2, h3, h4, h5, h6,
.fwk-h1, .fwk-h2, .fwk-h3, .fwk-h4 {
    font-family: var(--gogo-font-display);
    color: var(--gogo-text-strong);
    text-transform: none;
}

h1, .fwk-h1 {
    font-size: var(--gogo-h1-size);
    font-weight: var(--gogo-h1-weight);
    letter-spacing: var(--gogo-h1-tracking);
    line-height: var(--gogo-h1-leading);
    margin: 0 0 var(--gogo-space-6);
}

h2, .fwk-h2 {
    font-size: var(--gogo-h2-size);
    font-weight: var(--gogo-h2-weight);
    letter-spacing: var(--gogo-h2-tracking);
    line-height: var(--gogo-h2-leading);
    margin: var(--gogo-space-12) 0 var(--gogo-space-4);
}

h3, .fwk-h3 {
    font-size: var(--gogo-h3-size);
    font-weight: var(--gogo-h3-weight);
    line-height: var(--gogo-h3-leading);
    margin: var(--gogo-space-8) 0 var(--gogo-space-3);
}

h4, .fwk-h4 {
    font-size: var(--gogo-body-size);
    font-weight: var(--gogo-weight-semibold);
    line-height: var(--gogo-h3-leading);
    margin: var(--gogo-space-6) 0 var(--gogo-space-2);
}

p, ul, ol, dl, pre, address, fieldset, figure {
    margin: 0 0 var(--gogo-space-5);
}

a, .fwk-link {
    color: var(--gogo-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover, .fwk-link:hover {
    color: var(--gogo-link-hover);
}

:focus-visible {
    outline: var(--gogo-focus-width) solid var(--gogo-focus-ring);
    outline-offset: 2px;
}

/* Browsers draw strong text at 700; the site has two weights, so it takes the semibold. */
strong, b {
    font-weight: var(--gogo-weight-semibold);
}

code, kbd, samp, pre {
    font-family: var(--gogo-font-mono);
}

:not(pre) > code {
    font-size: 0.875em;
    color: var(--gogo-text-strong);
    background: var(--gogo-surface);
    border: var(--gogo-hairline-width) solid var(--gogo-border);
    border-radius: var(--gogo-radius-sm);
    padding: 1px var(--gogo-space-1);
    white-space: normal;
}

small, .fwk-text-small {
    font-size: var(--gogo-small-size);
    line-height: var(--gogo-small-leading);
}

.fwk-text-meta {
    font-size: var(--gogo-small-size);
    color: var(--gogo-text-muted);
}

hr, .fwk-hr {
    border-top: var(--gogo-hairline-width) solid var(--gogo-border);
    margin: var(--gogo-space-8) 0;
}

/* ---- Container: the 1200px frame on the 4px grid (16px phone gutter, 32px from 640px) ----- */
.fwk-container {
    max-width: var(--gogo-container-max);
    padding-left: var(--gogo-gutter);
    padding-right: var(--gogo-gutter);
}

/* ---- Subnav (route-link tabs use the class only, never the fwk-tab attribute) ------------ */
.fwk-subnav > * > :first-child {
    font-size: var(--gogo-small-size);
    font-weight: var(--gogo-weight-regular);
    text-transform: none;
    color: var(--gogo-text-muted);
    text-decoration: none;
}

.fwk-subnav-pill > * > :first-child {
    border-radius: var(--gogo-radius-pill);
    border: var(--gogo-hairline-width) solid var(--gogo-border);
    padding: var(--gogo-space-1) var(--gogo-space-4);
}

.fwk-subnav-pill > * > a:hover {
    background-color: transparent;
    color: var(--gogo-text-strong);
    border-color: var(--gogo-text-strong);
}

.fwk-subnav-pill > .fwk-active > a {
    background-color: var(--gogo-button-primary-bg);
    color: var(--gogo-button-primary-fg);
    border-color: var(--gogo-button-primary-bg);
}

/* ---- Tables (catalog pages) --------------------------------------------------------------- */
.fwk-table th {
    font-family: var(--gogo-font-mono);
    font-size: var(--gogo-label-size);
    font-weight: var(--gogo-label-weight);
    letter-spacing: var(--gogo-label-tracking);
    text-transform: uppercase;
    color: var(--gogo-text-muted);
}

.fwk-table td {
    font-size: var(--gogo-small-size);
    color: var(--gogo-text);
}

.fwk-table-divider > tr:not(:first-child),
.fwk-table-divider > :not(:first-child) > tr,
.fwk-table-divider > :first-child > tr:not(:first-child) {
    border-top: var(--gogo-hairline-width) solid var(--gogo-border);
}

/* ---- Buttons: pills ---------------------------------------------------------------------- */
.fwk-button {
    font-family: var(--gogo-font-sans);
    font-size: var(--gogo-small-size);
    font-weight: var(--gogo-weight-semibold);
    text-transform: none;
    line-height: calc(var(--gogo-touch) - 2px);
    padding: 0 var(--gogo-space-6);
    border-radius: var(--gogo-radius-pill);
    text-decoration: none;
}

.fwk-button-primary {
    background-color: var(--gogo-button-primary-bg);
    color: var(--gogo-button-primary-fg);
    border: var(--gogo-hairline-width) solid var(--gogo-button-primary-bg);
}

.fwk-button-primary:hover,
.fwk-button-primary:focus {
    background-color: var(--gogo-button-primary-bg-hover);
    color: var(--gogo-button-primary-fg);
}

/* The secondary pill is white with an ink label, so it reads on the grey page; a transparent
   one with a hairline nearly vanished there (owner, 1 Oct 2026). */
.fwk-button-default {
    background-color: var(--gogo-canvas);
    color: var(--gogo-text-strong);
    border: var(--gogo-hairline-width) solid var(--gogo-border-control);
}

.fwk-button-default:hover,
.fwk-button-default:focus {
    background-color: var(--gogo-canvas);
    color: var(--gogo-text-strong);
    border-color: var(--gogo-text-strong);
}

.fwk-button:focus-visible {
    outline: var(--gogo-focus-width) solid var(--gogo-focus-ring);
    outline-offset: 2px;
}

/* ---- Cards: hairline, 24px radius, no heavy shadow --------------------------------------- */
.fwk-card {
    border-radius: var(--gogo-radius-card);
}

.fwk-card-default {
    background-color: var(--gogo-canvas);
    color: var(--gogo-text);
    border: var(--gogo-hairline-width) solid var(--gogo-border);
    box-shadow: var(--gogo-shadow-none);
}

.fwk-card-default.fwk-card-hover:hover {
    background-color: var(--gogo-canvas);
    border-color: var(--gogo-text-strong);
    box-shadow: var(--gogo-shadow-none);
}

.fwk-card-body {
    padding: var(--gogo-space-6);
}

.fwk-card-title,
.fwk-card-default .fwk-card-title {
    font-size: var(--gogo-h3-size);
    font-weight: var(--gogo-h3-weight);
    line-height: var(--gogo-h3-leading);
    color: var(--gogo-text-strong);
}

/* A heading that opens a card sits on the card's own padding, not the 48px heading gap. */
.fwk-card-body > :first-child {
    margin-top: 0;
}

@media (min-width: 640px) {
    .fwk-card-body {
        padding: var(--gogo-space-8);
    }
}

/* ---- Form controls: calm, with a visible focus ring -------------------------------------- */
.fwk-input,
.fwk-select,
.fwk-textarea {
    font-family: var(--gogo-font-sans);
    font-size: var(--gogo-body-size);
    color: var(--gogo-text-strong);
    background-color: var(--gogo-canvas);
    border: var(--gogo-hairline-width) solid var(--gogo-border-control);
    border-radius: var(--gogo-radius-sm);
    padding: 0 var(--gogo-space-4);
}

.fwk-input,
.fwk-select:not([multiple]):not([size]) {
    height: 48px;
}

.fwk-input:focus,
.fwk-select:focus,
.fwk-textarea:focus {
    background-color: var(--gogo-canvas);
    color: var(--gogo-text-strong);
    border-color: var(--gogo-text-strong);
    outline: var(--gogo-focus-width) solid var(--gogo-focus-ring);
    outline-offset: 2px;
}

.fwk-form-label {
    font-size: var(--gogo-small-size);
    font-weight: var(--gogo-weight-semibold);
    color: var(--gogo-text-strong);
}

.fwk-radio,
.fwk-checkbox {
    width: 20px;
    height: 20px;
    background-color: var(--gogo-canvas);
    border: var(--gogo-hairline-width) solid var(--gogo-border-control);
}

.fwk-radio:focus,
.fwk-checkbox:focus {
    background-color: var(--gogo-canvas);
    border-color: var(--gogo-text-strong);
    outline: var(--gogo-focus-width) solid var(--gogo-focus-ring);
    outline-offset: 2px;
}

.fwk-radio:checked,
.fwk-checkbox:checked,
.fwk-radio:checked:focus,
.fwk-checkbox:checked:focus {
    background-color: var(--gogo-button-primary-bg);
    border-color: var(--gogo-button-primary-bg);
}

/* Invalid field: the danger border; the text stays ink. */
.fwk-input.fwk-form-danger,
.fwk-input.fwk-form-danger:focus {
    color: var(--gogo-text-strong);
    border-color: var(--gogo-danger);
}

/* ---- Alerts: a quiet panel with a coloured left rule; ink text, except success, which is
   green text and rule on white so a thank-you reads friendly (owner, 4 Oct 2026) ----------- */
.fwk-alert {
    margin-bottom: var(--gogo-space-5);
    padding: var(--gogo-space-4) var(--gogo-space-5);
    background: var(--gogo-surface);
    color: var(--gogo-text-strong);
    border: var(--gogo-hairline-width) solid var(--gogo-border);
    border-left-width: 3px;
    border-radius: var(--gogo-radius-sm);
}

.fwk-alert-success {
    background: var(--gogo-canvas);
    color: var(--gogo-success);
    border-left-color: var(--gogo-success);
}

.fwk-alert-danger {
    background: var(--gogo-canvas);
    color: var(--gogo-text-strong);
    border-left-color: var(--gogo-danger);
}

/* ---- Navbar: transparent (the capsule in gogo-custom.css supplies the surface) ------------ */
.fwk-navbar-container:not(.fwk-navbar-transparent) {
    background: transparent;
}

.fwk-navbar-nav > li > a,
.fwk-navbar-item,
.fwk-navbar-toggle {
    min-height: var(--gogo-touch);
    font-family: var(--gogo-font-sans);
    font-size: var(--gogo-small-size);
    font-weight: var(--gogo-weight-regular);
    text-transform: none;
    color: var(--gogo-text-muted);
    text-decoration: none;
}

.fwk-navbar-nav > li:hover > a,
.fwk-navbar-nav > li > a:hover,
.fwk-navbar-nav > li.fwk-active > a,
.fwk-navbar-toggle:hover {
    color: var(--gogo-text-strong);
}

.fwk-navbar-toggle {
    min-width: var(--gogo-touch);
    color: var(--gogo-text-strong);
}

/* ---- Off-canvas: an ink drawer with light links ------------------------------------------ */
.fwk-offcanvas-bar {
    background: var(--gogo-inverse-bg);
    color: var(--gogo-inverse-text);
}

.fwk-offcanvas-bar .fwk-nav-default > li > a {
    font-size: var(--gogo-body-size);
    color: var(--gogo-inverse-muted);
    text-decoration: none;
    min-height: var(--gogo-touch);
}

.fwk-offcanvas-bar .fwk-nav-default > li > a:hover,
.fwk-offcanvas-bar .fwk-nav-default > li.fwk-active > a {
    color: var(--gogo-inverse-text);
}

/* The current page in the drawer: white and underlined, two cues like the desktop capsule. */
.fwk-offcanvas-bar .fwk-nav-default > li.fwk-active > a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

.fwk-offcanvas-bar .fwk-button-primary {
    background-color: var(--gogo-inverse-text);
    color: var(--gogo-text-strong);
    border-color: var(--gogo-inverse-text);
}

/* The menu's close button is a full tap target, not the bare 24px icon. */
.fwk-offcanvas-close {
    color: var(--gogo-inverse-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--gogo-touch);
    min-height: var(--gogo-touch);
}