/*
Theme Name: 630 Volleyball
Theme URI: https://630volleyball.com
Author: Nino Chavez
Description: Block theme for the 630 Volleyball rebuild. Presentation only — every dynamic surface is rendered by the club-content-630 plugin, which owns the LeagueApps read layer. Design tokens come from site-prototype/src/themes.css (Direction A) and are not re-derived here.
Version: 0.2.27
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: six30
*/

/* ============================================================
   Token alias layer.

   theme.json emits --wp--preset--color--brand and friends.
   site-prototype/src/site.css was written against --brand,
   --ink, --hero-a. Aliasing here means assets/site.css ports
   near-verbatim and the prototype invariant holds: no literal
   colour or font in the structural stylesheet, tokens only.

   Do NOT rename the prototype's tokens to match WordPress. The
   prototype is the source of the design and has to stay
   readable on its own.
   ============================================================ */

:root {
	--brand:        var(--wp--preset--color--brand);
	--brand-press:  var(--wp--preset--color--brand-press);
	/* Same derivation as themes.css: the focus ring rides the brand.
	   Undefined here it falls to currentColor — an ink ring that looks
	   deliberate and is not. */
	--focus:        var(--brand);
	--info:         var(--wp--preset--color--info);
	--urgent:       var(--wp--preset--color--urgent);
	--ink:          var(--wp--preset--color--ink);
	--ink-2:        var(--wp--preset--color--ink-2);
	--muted:        var(--wp--preset--color--muted);
	--line:         var(--wp--preset--color--line);
	--page:         var(--wp--preset--color--page);
	--card:         var(--wp--preset--color--card);
	--hero-a:       var(--wp--preset--color--hero-a);
	--hero-b:       var(--wp--preset--color--hero-b);
	--hero-c:       var(--wp--preset--color--hero-c);
	--on-hero:      var(--wp--preset--color--on-hero);
	--on-hero-dim:  var(--wp--preset--color--on-hero-dim);
	--hero-eyebrow: var(--wp--preset--color--hero-eyebrow);

	--font-display: var(--wp--preset--font-family--display);
	--font-body:    var(--wp--preset--font-family--body);
	--font-mono:    var(--wp--preset--font-family--mono);

	--display-xl:   var(--wp--preset--font-size--display-xl);
	--display-lg:   var(--wp--preset--font-size--display-lg);
	--display-md:   var(--wp--preset--font-size--display-md);
	--body:         var(--wp--preset--font-size--body);
	--small:        var(--wp--preset--font-size--small);

	/* Layout tokens live in themes.css in the prototype. WordPress does not
	   load that file, so the alias layer must carry the same three values or
	   every max-width declaration in assets/site.css becomes invalid. */
	--layout-wide:      1240px;
	--layout-ultrawide: 1440px;
	--measure:          820px;

	/* Structural rhythm. Not theme.json presets, because these are
	   not choices an editor should be offered — they are the grid. */
	--track-display:  -0.032em;
	--weight-display: 800;
	--case-eyebrow:   uppercase;
	--radius:         12px;
	--radius-sm:      9px;
	--radius-pill:    999px;
	--gutter:         clamp(18px, 4vw, 52px);
	--rhythm:         26px;
	--hero-pad:       clamp(30px, 5vw, 58px);
	--card-shadow:    0 1px 2px rgba(21, 24, 29, .05);
	--card-border:    1px solid var(--line);
}

/* assets/site.css establishes the same ultrawide rule, but this authored
 * token sheet loads after that generated file in WordPress. Restate the
 * breakpoint here so the later 1240px default cannot silently win. */
@media (min-width: 2200px) {
	:root {
		--layout-wide: var(--layout-ultrawide);
	}
}

/* ============================================================
   Fixes carried in from research/site-design-audit.md, so the
   rebuild does not inherit findings already recorded against
   the prototype. Each one names its finding.
   ============================================================ */

/* A1 — retired 2026-08-10. The finding ("the prototype had no
   :focus-visible rule anywhere") was fixed at the source: the focus
   grammar now lives in site.css (standard, I-2) — one global brand
   ring, token-swapped to white on the dark bands. The info-blue rule
   that patched the gap here loaded after site.css and was silently
   overriding that grammar, which is how a fix outlives its finding
   and becomes the defect. Nothing replaces it in this file. */

/* V3 — the prototype set .hero-media { order: -1 } below 900px, so
   on a phone the media came first and pushed the headline to y=630.
   The audience sentence is the strongest asset on the site and no
   other club in the region has one; it leads. */
@media (max-width: 900px) {
	.hero-grid { grid-template-columns: 1fr; }
	.hero-media { order: 0; }
}

/* P1 — the homepage shipped ~1.4MB on a phone, three quarters of it an
   autoplaying video. The poster carries the same information at 83KB, and
   desktop still gets the motion.

   The selector matches `.hero-media.has-video video` rather than
   `.hero-media video` deliberately: the generated stylesheet sets
   `display: block` at that specificity, so the shorter selector loses on
   specificity no matter which file loads last. Measured, not assumed — the
   first version of this rule looked correct and did nothing. */
@media (max-width: 900px) {
	.hero-media.has-video video { display: none; }
	.hero-media .video-fallback { display: block; width: 100%; height: 100%; object-fit: cover; }
}

/* Keep 44px touch targets in the one-column phone footer without turning each
   desktop route into a 44px row. Deep pages live in their section hubs now;
   the footer is orientation, not a full sitemap. */
@media (max-width: 599px) {
	.ft-grid a {
		display: block;
		min-height: 44px;
		line-height: 44px;
		padding: 0;
	}
}

/* ============================================================
   Block-wrapper reconciliation — deliberately almost empty.

   An earlier version of this file carried ~70 lines here: the hero forced
   full-bleed, the Register pill un-painted off its wrapper, door cards given
   back their dark ink. Every one of those existed because the port had
   re-authored the prototype's components as core blocks with new class names,
   so `assets/site.css` shipped correctly and then matched nothing — 64 of its
   84 class selectors were inert on the rendered site.

   The port now calls the prototype's own renderers, so the DOM those rules
   were written against is the DOM on the page. Reconciling a difference that
   no longer exists is how a stylesheet accumulates rules nobody can delete.
   Only what WordPress genuinely adds stays below.
   ============================================================ */

/* WordPress wraps a `core/table` in a figure and paints its own borders.
   The prototype's .tbl owns the table's look. */
.wp-block-table.is-style-facts,
.wp-block-table { margin: 0; }

/* Skip link — WordPress renders one, but unstyled it is invisible
   until focused and then unreadable against the hero. */
.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100;
	background: var(--card);
	color: var(--ink);
	padding: 10px 16px;
	border-radius: var(--radius-sm);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

/* The facility flyover is a supporting shot, not a second hero.
   `.hero-media` sizes to its container, so at 1240px the 16:9 video rendered
   697px tall and the band came to 935px — the largest block on the homepage
   after the listing, for the least important content on it. Capped and cropped
   rather than scaled, so the framing stays wide instead of letterboxing.

   Desktop only. Below 900px the video is already display:none and the poster
   stands in at 340px, which is the right size on the device that matters. */
@media (min-width: 901px) {
	.facility-band .hero-media {
		max-height: 340px;
	}

	.facility-band .hero-media video,
	.facility-band .hero-media .video-fallback {
		max-height: 340px;
		object-fit: cover;
	}
}

/* Reusable staff profiles can carry a short biography after the role. Keep the
   same quiet hierarchy as the existing portrait-card metadata; the directory
   block is content structure, while this remains a presentation decision. */
.facts.portraits .person-role,
.facts.portraits .person-bio {
	color: var(--on-hero-dim);
	opacity: 1;
}

.facts.portraits .person-bio {
	font-size: .79rem;
	line-height: 1.55;
}

.facts.portraits .person-bio :where(p, li) { color: inherit; }
.facts.portraits .person-bio strong { color: var(--on-hero); }
.facts.portraits .person-bio > :first-child { margin-top: 8px; }
.facts.portraits .person-bio > :last-child { margin-bottom: 0; }
.facts.portraits .person-contact { margin-top: 8px; }