/*
Theme Name: OSWH
Theme URI: https://oswh.ca
Description: Ottawa Senators Women's Hockey Club — a lightweight theme for player profiles and rosters. No page builder.
Author: OSW
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: oswh
*/

/* ============================================================
   Design tokens
   Palette derived from the club's broadcast identity: near-black
   ice-surface ground, Sens red, bone white, with a single warm
   metallic for captaincy marks and hover states.

   Two layers:
   1. Brand constants — the same in both themes (Sens red never changes).
   2. Semantic tokens — named by role, not colour, and reassigned
      per theme. Every rule in this file uses ONLY these, so the
      light/dark toggle is a matter of swapping this one block.
   ============================================================ */

:root {
	/* Brand constants -- identical in both themes */
	--osw-red:      #c8102e;   /* Sens red, primary */
	--osw-red-deep: #8f0a20;
	--osw-gold:     #b8862f;   /* captaincy, accents */

	/* Four type roles:
	   --osw-brand      Tiller (serif) -- the ghosted jersey number and the big
	                    statement H1. Rare, high-impact.
	   --osw-condensed  Oswald -- the athletic voice: H2/H3, roster subnav,
	                    player names, stat lines, buttons. Does most of the
	                    visible UI work.
	   --osw-body       Inter -- prose, bios, longer reading.
	   --osw-display is kept as an alias of condensed so existing rules that
	   reference it need not all change at once. */
	--osw-brand:     "Tiller", Georgia, "Times New Roman", serif;
	--osw-condensed: "Oswald", "Arial Narrow", sans-serif;
	--osw-display:   var(--osw-condensed);
	--osw-body:      "Inter", system-ui, -apple-system, sans-serif;

	/* Scale */
	--osw-step-6: clamp(3rem, 8vw, 6rem);
	--osw-step-5: clamp(2.25rem, 5vw, 3.75rem);
	--osw-step-4: clamp(1.75rem, 3.5vw, 2.5rem);
	--osw-step-3: 1.5rem;
	--osw-step-2: 1.125rem;
	--osw-step-1: 1rem;
	--osw-step-0: 0.875rem;
	--osw-step-min: 0.75rem;

	/* Space */
	--osw-gap: clamp(1rem, 2.5vw, 2rem);
	--osw-pad: clamp(1.5rem, 5.5vw, 5rem);

	--osw-maxw: 1200px;
	/* Fluid so ultra-wide displays gain real width instead of stopping at a
	   fixed number, while 1080p and 1440p keep sensible gutters. */
	--osw-maxw-wide: min(2200px, 94vw);
}

/* Mobile side gutters ~30% tighter than desktop -- applies everywhere
   --osw-pad is used: page wrap, footer, roster head, and the mobile nav
   panel's own inline padding. */
@media (max-width: 820px) {
	:root { --osw-pad: clamp(1rem, 3.75vw, 3.5rem); }
}

/* Dark theme -- the default, matching the mockup */
:root,
[data-theme="dark"] {
	/* Ground matches the average of the background texture, so anything that
	   fades to it -- card bases, the sticky header -- blends invisibly. */
	--osw-ground:    #151515;   /* page background */
	/* Relative to this file (css/base.css), so it must climb out of css/ to
	   reach the theme-root assets/ folder -- without the ../ this resolved to
	   .../css/assets/img/..., a path that's never existed, and the masthead
	   silently failed to load. */
	--osw-masthead: url("../assets/img/bg-dark_1920x1080.avif");
	--osw-panel:     #1e1e20;   /* raised surfaces */
	--osw-line:      #2c2c2e;   /* hairlines */
	--osw-ink:       #f5f3ee;   /* primary text */
	--osw-ink-mute:  #9a9aa4;   /* secondary text */
	--osw-ink-dim:   #5c5c62;   /* unselected nav/filter items -- 1-2 shades below ink-mute, still legible on dark ground */
	--osw-ghost:     #a01228;   /* the oversized number */
	--osw-ghost-op:  0.85;      /* outline reads lighter than a fill, so stronger */
	--osw-card:      #151515;   /* roster card base */
	--osw-card-fade: linear-gradient(180deg, transparent 8%, #151515 58%);
	--osw-badge-bg:  #151515;
	--osw-badge-ink: #ffffff;
	--osw-shadow:    0 20px 40px -24px rgba(0,0,0,0.9);
}

/* Light theme -- rink-bright, red carries the identity */
[data-theme="light"] {
	--osw-ground:    #f6f6f6;
	--osw-panel:     #ffffff;
	--osw-masthead: url("../assets/img/bg-light_1920x1080.avif");
	--osw-badge-bg:  #ffffff;
	--osw-badge-ink: #151515;
	--osw-line:      #e3e3e3;
	--osw-ink:       #14141a;
	--osw-ink-mute:  #6a6a72;
	--osw-ink-dim:   #a3a3aa;   /* unselected nav/filter items -- lighter than ink-mute since this theme's ground is light */
	--osw-ghost:     #b79257;   /* brand gold -- the ghosted number in light mode */
	--osw-ghost-op:  0.8;
	--osw-card:      #f6f6f6;
	--osw-card-fade: linear-gradient(180deg, transparent 8%, #f6f6f6 58%);
	--osw-shadow:    0 20px 40px -28px rgba(20,16,10,0.35);
}

/* ============================================================
   Reset-ish
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	color: var(--osw-ink);
	/* Flat ground -- the marble now lives only as a masthead banner behind the
	   page title, not as a full-viewport texture. */
	background-color: var(--osw-ground);
	font-family: var(--osw-body);
	font-size: var(--osw-step-1);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* Content masthead: the same marble texture used behind the roster's own
   title banner (.osw-roster__head::before in roster.css), applied here at
   the page level so every template gets it, not just the roster. Starts
   immediately below the header (#main is the first thing after it in every
   template) and fades into the flat --osw-ground colour within a
   viewport-relative band, so it reads as "textured near the top, plain
   below" consistently regardless of how long the page's content runs --
   a roster with forty players and a two-paragraph About page both get the
   same proportioned fade instead of one being textured for way longer than
   the other. Same full-bleed-beyond-the-wrapper technique as the roster
   masthead: absolute + inset:0 within a position:relative parent, pulled
   out to the viewport edges with the 50%-50vw margin trick. */
#main {
	position: relative;
}
#main::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* ~75% taller than the original clamp(18rem, 34vh, 30rem) -- the mask
	   stops below are unchanged percentages, so a taller box stretches both
	   the solid zone and the fade itself proportionally longer. */
	height: clamp(31.5rem, 59.5vh, 52.5rem);
	margin-inline: calc(50% - 50vw);
	background-image: var(--osw-masthead);
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	/* No blend mode: this texture averages RGB(12,12,12), darker than the
	   page's own #151515 ground on 98% of its pixels. Any "lighten"-family
	   blend mode (including Photoshop's "Lighter Color", which this was set
	   to approximate) shows whichever of source/backdrop is lighter -- so
	   against a background this close to it, almost the entire image gets
	   replaced by flat ground colour and only the brightest veins survive.
	   That's not a bug to work around, it's what that family of blend modes
	   does to a near-black image over a near-black background. Normal
	   compositing (no blend-mode) is what actually keeps it visible. */
	/* Solid near the top (behind the page title), then dissolves into the
	   page background well before the band's own bottom edge. */
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 92%);
	        mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 92%);
}

/* Page wrappers -- max width plus responsive side padding, shared by header,
   footer and the roster so everything lines up to the same gutters. */
.osw-wrap {
	max-width: var(--osw-maxw);
	margin-inline: auto;
	padding-inline: var(--osw-pad);
}
.osw-wrap--wide { max-width: var(--osw-maxw-wide); }

/* Visible keyboard focus */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
	outline: 2px solid var(--osw-red);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}