/*
 * GregPlitt 2026 — base styles (Performance direction).
 * Reset + typography + body + link + focus. Consumes tokens.css.
 *
 * Hard-edged design: NO border-radius anywhere. NO rounded corners.
 * If a plugin/library injects radii, override globally.
 */

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }

/* Unified site-wide scrollbar — fixed 10px width on every page so the
   nav (and any other layout that depends on viewport width) lands in
   the same place on legacy and non-legacy pages. Without this, the
   browser default (17px on Windows) would compete with the parent
   theme's 12px custom scrollbar on gp-legacy pages and the chrome
   would shift across pages. */
html { scrollbar-width: thin; scrollbar-color: var(--gp-gold) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; -webkit-appearance: none; }
::-webkit-scrollbar-track { background: transparent; box-shadow: none; border-radius: 0; }
::-webkit-scrollbar-thumb { background-color: var(--gp-gold); border-radius: 0; box-shadow: none; }
::-webkit-scrollbar-thumb:hover { background-color: var(--gp-gold-deep); }
::-webkit-scrollbar-corner { background: transparent; }
/* Override parent-theme red ul scrollbar — same gold treatment */
ul::-webkit-scrollbar-thumb { background-color: var(--gp-gold); border-radius: 0; }

/* Body — true near-black, Manrope, sensible defaults */
body {
    background: var(--gp-bg);
    color: var(--gp-text);
    font-family: var(--gp-font-body);
    font-size: var(--gp-fs-body);
    line-height: var(--gp-lh-body);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Headings — Bebas Neue, weight 400, line-height tight, letter-spacing
   tuned per size at the component level (NOT a default cascade). */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--gp-font-display);
    font-weight: 400;
    line-height: var(--gp-lh-display-snug);
    letter-spacing: var(--gp-ls-display-normal);
    color: var(--gp-text);
}

h1 { font-size: var(--gp-fs-h1); line-height: var(--gp-lh-display); letter-spacing: var(--gp-ls-display-tight); }
h2 { font-size: var(--gp-fs-h2-sm); }
h3 { font-size: var(--gp-fs-card); letter-spacing: var(--gp-ls-display-wide); line-height: var(--gp-lh-display-normal); }
h4 { font-size: var(--gp-fs-card-sm); letter-spacing: var(--gp-ls-display-wide); }
h5, h6 { font-size: var(--gp-fs-btn); letter-spacing: var(--gp-ls-display-wide); }

/* Paragraphs */
p { font-family: var(--gp-font-body); font-size: var(--gp-fs-body); line-height: var(--gp-lh-body); }

/* Links — gold by default; muted when inside body copy via component overrides */
a {
    color: var(--gp-gold);
    text-decoration: none;
    transition: color var(--gp-dur-base) var(--gp-ease-standard);
}
a:hover  { color: var(--gp-gold-deep); }

/* Focus — visible, branded */
:focus-visible {
    outline: 2px solid var(--gp-gold);
    outline-offset: 3px;
}

/* Selection — match the gold-on-black brand for highlighted text */
::selection {
    background: var(--gp-gold);
    color: var(--gp-text-on-gold);
}

/* Images don't break layouts */
img, video { max-width: 100%; height: auto; display: block; }

/* Form resets — buttons + inputs inherit our type stack */
button, input, textarea, select {
    font-family: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 0;
}
button { cursor: pointer; }

/* Defensive radius override — no rounded corners ANYWHERE.
   If a plugin emits a class with border-radius, this caps it.
   Component-level :root tokens reinforce this is intentional. */
.gp-no-radius * { border-radius: 0 !important; }

/* Container utility — page sections use full width with internal gutter */
.gp-container {
    width: 100%;
    padding-inline: var(--gp-page-gutter);
}

/* Visually-hidden (a11y) */
.gp-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* Eyebrow row — gold hairline + mono label. Used in hero, sections, detail.
   Length variants via modifier; default to 24px line. */
.gp-eyebrow-row {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}
.gp-eyebrow-row__rule {
    display: inline-block;
    width: var(--gp-hairline-len);
    height: 1px;
    background: var(--gp-gold);
    flex-shrink: 0;
}
.gp-eyebrow-row--lg .gp-eyebrow-row__rule { width: var(--gp-hairline-len-lg); }
.gp-eyebrow-row__label {
    font-family: var(--gp-font-mono);
    font-size: var(--gp-fs-meta);
    letter-spacing: var(--gp-ls-meta-wide);
    text-transform: uppercase;
    color: var(--gp-gold);
}

/* Mono label — generic small mono uppercase used for breadcrumbs, meta */
.gp-mono {
    font-family: var(--gp-font-mono);
    font-size: var(--gp-fs-meta);
    letter-spacing: var(--gp-ls-meta);
    text-transform: uppercase;
    color: var(--gp-text-dim);
}
.gp-mono--gold { color: var(--gp-gold); }
.gp-mono--muted { color: var(--gp-text-muted); }