/* ==========================================================================
   Sportzey Design System — tokens
   "for the athlete within" — coach's notebook / tournament poster / street court.

   Every token is prefixed --sz-. This is deliberate and load-bearing: base.css
   already defines --white, --text-primary, --text-secondary and --shadow-md/lg/xl
   in :root with different values. Without the prefix, whichever stylesheet loads
   last would silently repaint either this design system or all 12 legacy pages.
   ========================================================================== */

@font-face {
    font-family: "Jersey25";
    /* Relative URL, not {% static %} — CSS can't use template tags, and
       ManifestStaticFilesStorage rewrites relative url() refs to hashed names. */
    src: url("../fonts/Jersey25-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* base palette — warm parchment, never stark white */
    --sz-paper-50: #FBF5E8;
    --sz-paper-100: #F5E8CC;
    --sz-paper-200: #EFDCB8;
    --sz-paper-300: #E4CC9C;

    /* ink navy — type, rules, line art */
    --sz-ink-900: #1B2530;
    --sz-ink-800: #232F3D;
    --sz-ink-700: #3B4A5E;
    --sz-ink-500: #5E6E82;
    --sz-ink-300: #8FA0AF;
    --sz-ink-100: #D7DEE4;

    /* one competitive accent — CTAs, active states, score marks */
    --sz-accent-600: #B33B22;
    --sz-accent-500: #D4491F;
    --sz-accent-400: #E8632F;

    --sz-success-600: #2F6B3A;
    --sz-danger-600: #A3281F;
    --sz-white: #FFFDF7;

    /* semantic aliases */
    --sz-surface-page: var(--sz-paper-200);
    --sz-surface-card: var(--sz-paper-100);
    --sz-surface-card-raised: var(--sz-white);
    --sz-surface-ink: var(--sz-ink-900);

    --sz-text-primary: var(--sz-ink-900);
    --sz-text-secondary: var(--sz-ink-700);
    --sz-text-muted: var(--sz-ink-500);
    --sz-text-on-ink: var(--sz-paper-100);
    --sz-text-on-accent: var(--sz-white);

    --sz-brand-accent: var(--sz-accent-500);
    --sz-border-hairline: rgba(27, 37, 48, 0.16);

    /* type */
    --sz-font-display: "Jersey25", "Oswald", sans-serif;
    --sz-font-ui: "Oswald", "Arial Narrow", sans-serif;
    --sz-font-editorial: "PT Serif", Georgia, serif;

    /* effects — low warm shadows, a card on a desk not a floating panel */
    --sz-shadow-card: 0 1px 0 rgba(27, 37, 48, 0.06), 0 6px 16px rgba(27, 37, 48, 0.10);
    --sz-shadow-raised: 0 2px 4px rgba(27, 37, 48, 0.08), 0 14px 28px rgba(27, 37, 48, 0.14);
    --sz-shadow-press: 0 1px 0 rgba(27, 37, 48, 0.08) inset;

    /* bold, deliberate ink rules — hand-ruled notebook lines, not gray hairlines */
    --sz-border-w-default: 1.5px;
    --sz-border-w-bold: 3px;

    --sz-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --sz-duration-fast: 120ms;
    --sz-duration-base: 200ms;

    --sz-nav-h: 68px;

    /* ---------------------------------------------------------------- layout
       One set of gutters/rhythm every page reads from, so section padding is
       identical across the site instead of each stylesheet re-deriving it. */
    --sz-gutter: clamp(16px, 5vw, 64px);
    --sz-section-y: clamp(56px, 9vw, 130px);
    --sz-section-y-tight: clamp(40px, 6vw, 80px);
    --sz-stack: clamp(16px, 2.5vw, 20px);
    --sz-maxw: 1360px;
    --sz-maxw-text: 880px;

    /* Minimum comfortable tap target (WCAG 2.5.8 is 24px; 44px is Apple's HIG
       and what we hold interactive chrome to). */
    --sz-tap: 44px;

    /* Full-viewport heights that don't jump when mobile browser chrome slides
       away. svh/dvh land as a progressive upgrade below. */
    --sz-vh-full: 100vh;
    --sz-vh-hero: 86vh;
}

@supports (height: 100svh) {
    :root {
        --sz-vh-full: 100svh;
        --sz-vh-hero: 86svh;
    }
}

/* Phones: the display face is drawn for poster scale, so it needs a touch more
   air between lines and slightly softer tracking to stay readable small. */
@media (max-width: 600px) {
    :root {
        --sz-border-w-bold: 2.5px;
    }
}

/* --------------------------------------------------------------------------
   Global ergonomics
   -------------------------------------------------------------------------- */

html {
    /* Stop iOS from re-flowing type when the device rotates. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Anchor jumps and in-page scrolls must clear the sticky nav. */
html:has(.sz-nav) {
    scroll-padding-top: calc(var(--sz-nav-h) + 12px);
}

/* Notched phones in landscape: keep content out of the sensor housing. */
@supports (padding: max(0px)) {
    .sz-nav__inner,
    .sz-footer,
    .sz-navmenu {
        padding-left: max(var(--sz-gutter), env(safe-area-inset-left));
        padding-right: max(var(--sz-gutter), env(safe-area-inset-right));
    }
}

/* --------------------------------------------------------------------------
   Shared primitives, all namespaced so they can never leak into legacy pages.
   -------------------------------------------------------------------------- */

.sz-grain {
    position: relative;
    isolation: isolate;
}

.sz-grain::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../images/Theme.png");
    background-size: 480px 480px;
    opacity: 0.45;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}

.sz-btn {
    display: inline-block;
    background: var(--sz-brand-accent);
    color: var(--sz-text-on-accent);
    border: none;
    padding: 15px 30px;
    font-family: var(--sz-font-ui);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--sz-duration-fast) var(--sz-ease-out),
                transform var(--sz-duration-fast) var(--sz-ease-out);
}

.sz-btn:hover {
    background: var(--sz-accent-600);
    color: var(--sz-text-on-accent);
}

/* press reads like a rubber stamp, matching the letterpress logo */
.sz-btn:active {
    transform: scale(0.97);
    box-shadow: var(--sz-shadow-press);
}

.sz-btn--ink {
    background: var(--sz-surface-ink);
    color: var(--sz-paper-100);
}

.sz-btn--ink:hover {
    background: var(--sz-accent-600);
}

.sz-btn:disabled,
.sz-btn[aria-disabled="true"] {
    background: var(--sz-paper-50);
    color: var(--sz-ink-500);
    border: var(--sz-border-w-default) solid var(--sz-ink-300);
    cursor: not-allowed;
}

.sz-btn--big {
    padding: 20px 48px;
    font-size: 19px;
    letter-spacing: 0.12em;
}

/* outline ghost button — ink on paper, fills ink on hover */
.sz-btn-ghost {
    display: inline-block;
    background: transparent;
    color: var(--sz-ink-900);
    border: var(--sz-border-w-default) solid var(--sz-ink-900);
    padding: 15px 32px;
    font-family: var(--sz-font-ui);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--sz-duration-fast) var(--sz-ease-out),
                color var(--sz-duration-fast) var(--sz-ease-out);
}

.sz-btn-ghost:hover {
    background: var(--sz-ink-900);
    color: var(--sz-paper-100);
}

.sz-btn-ghost:active {
    transform: scale(0.96);
}

/* light variant for ink-navy sections */
.sz-btn-ghost--light {
    color: var(--sz-paper-100);
    border-color: var(--sz-paper-100);
}

.sz-btn-ghost--light:hover {
    background: var(--sz-paper-100);
    color: var(--sz-ink-900);
}

/* section eyebrow — "Q1 — THE SCOREBOARD NOBODY CHECKS" */
.sz-eyebrow {
    font-family: var(--sz-font-display);
    font-size: 16px;
    letter-spacing: 0.3em;
    color: var(--sz-ink-900);
}

.sz-eyebrow--accent {
    color: var(--sz-accent-600);
}

.sz-eyebrow--glow {
    color: var(--sz-accent-400);
}

/* pill chip — lowercase feature tags */
.sz-chip {
    border: 1px solid var(--sz-ink-900);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    color: var(--sz-ink-700);
}

/* accent text helpers */
.sz-accent {
    color: var(--sz-accent-500);
}

.sz-outline-accent {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--sz-accent-600);
}

.sz-outline-glow {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--sz-accent-400);
}

/* rotated rubber-stamp label */
.sz-stamp {
    display: inline-block;
    font-family: var(--sz-font-display);
    color: var(--sz-accent-600);
    border: var(--sz-border-w-bold) solid var(--sz-accent-600);
    padding: 7px 18px;
    transform: rotate(-3deg);
}

/* scroll reveal — JS adds .is-revealed, delay comes from data-reveal */
.sz-reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 620ms var(--sz-ease-out), transform 620ms var(--sz-ease-out);
}

.sz-reveal.is-revealed {
    opacity: 1;
    transform: none;
}

/* Phones travel a shorter distance and settle faster — a 34px rise tuned for a
   1440px canvas reads as sluggish drift on a 390px one. */
@media (max-width: 768px) {
    .sz-reveal {
        transform: translateY(20px);
        transition-duration: 460ms;
    }
}

/* --------------------------------------------------------------------------
   Cross-cutting responsive + input-modality rules

   These sit in the shared layer on purpose: every page was repeating the same
   hover/tap/type-size corrections, and hover effects that only make sense with
   a mouse were firing as stuck states after a tap on touch screens.
   -------------------------------------------------------------------------- */

/* Hover lifts and tilts are pointer-only. On touch they latch on after a tap
   and stay until you tap elsewhere, which reads as a rendering bug. */
@media (hover: none) {
    .sz-btn:hover,
    .sz-btn--ink:hover,
    .sz-btn-ghost:hover,
    .sz-btn-ghost--light:hover {
        background: var(--sz-brand-accent);
        color: var(--sz-text-on-accent);
    }

    .sz-btn--ink:hover {
        background: var(--sz-surface-ink);
        color: var(--sz-paper-100);
    }

    .sz-btn-ghost:hover {
        background: transparent;
        color: var(--sz-ink-900);
    }

    .sz-btn-ghost--light:hover {
        background: transparent;
        color: var(--sz-paper-100);
    }
}

/* Interactive chrome clears the 44px tap target. Buttons keep their designed
   padding; this only guarantees the floor. */
.sz-btn,
.sz-btn-ghost {
    min-height: var(--sz-tap);
}

/* iOS zooms the whole page when a focused field is under 16px. Every form
   control in the system therefore holds 16px at phone widths. */
@media (max-width: 768px) {
    input,
    select,
    textarea {
        font-size: 16px;
    }
}

/* Keyboard focus must stay visible even where a component clears outlines. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--sz-accent-500);
    outline-offset: 2px;
}

/* The paper grain is a full-bleed multiply layer. On phones it is a large
   repeated paint for a texture that is barely legible at that size, so it is
   dialled back rather than dropped. */
@media (max-width: 600px) {
    .sz-grain::before {
        background-size: 320px 320px;
        opacity: 0.3;
    }
}

/* Marquees, parallax and decorative motion all collapse together so a single
   OS preference gives a genuinely still page. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .sz-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}