/*
Theme Name: PJVA
Theme URI: https://pillagerjovolleyball.com
Author: Pillager JO Volleyball Association
Author URI: https://pillagerjovolleyball.com
Description: Custom block theme for the Pillager JO Volleyball Association — dark palette, condensed display type, glow-bordered cards, and a CSS marquee ticker. WooCommerce-ready.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 8.1
Version: 0.1.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pjva
Tags: full-site-editing, block-patterns, custom-colors, custom-menu, editor-style, sticky-post, threaded-comments, wide-blocks
*/

/*
 * theme.json carries the design system. This file carries only what
 * theme.json cannot express: the marquee keyframes and the glow-card
 * utility classes. Both are added in later tasks.
 */

/* ------------------------------------------------------------------ *
 * Marquee ticker — pure CSS, no JS. Applied by the marquee pattern.
 * ------------------------------------------------------------------ */

.pjva-marquee {
	overflow: hidden;
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
	padding-block: 16px;
}

.pjva-marquee__track {
	display: flex;
	width: max-content;
	flex-wrap: nowrap;
	animation: pjva-scroll-left 26s linear infinite;
}

.pjva-marquee__item {
	display: flex;
	align-items: center;
	gap: 22px;
	padding-inline: 22px;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--anton);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 1rem;
	color: var(--wp--preset--color--muted-foreground);
}

.pjva-marquee__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	flex-shrink: 0;
}

@keyframes pjva-scroll-left {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.pjva-marquee__track {
		animation: none;
		flex-wrap: wrap;
		width: 100%;
		justify-content: center;
	}

	.pjva-marquee__track > .pjva-marquee__item:nth-child(n+4) { display: none; }
}

/* ------------------------------------------------------------------ *
 * Glow cards — dark card with a pink glow on hover/focus-within.
 * ------------------------------------------------------------------ */

.pjva-glow-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 18px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.pjva-glow-card:hover,
.pjva-glow-card:focus-within {
	border-color: var(--wp--preset--color--primary);
	box-shadow:
		0 0 0 1px rgba(255, 111, 180, 0.25),
		0 20px 44px -20px rgba(255, 111, 180, 0.45);
	transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
	.pjva-glow-card { transition: none; }
	.pjva-glow-card:hover,
	.pjva-glow-card:focus-within { transform: none; }
}

/* Small square index badge inside feature cards ("01", "02", "03"). */
.pjva-card-index {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--wp--preset--color--surface-2);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--primary-bright);
	font-family: var(--wp--preset--font-family--anton);
	font-size: 1.2rem;
}

/* ------------------------------------------------------------------ *
 * Eyebrow label + pill tag — Space Mono utility type.
 * ------------------------------------------------------------------ */

.pjva-eyebrow {
	font-family: var(--wp--preset--font-family--space-mono);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-bright);
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.pjva-tag {
	align-self: flex-start;
	display: inline-block;
	font-family: var(--wp--preset--font-family--space-mono);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--on-primary);
	background: var(--wp--preset--color--primary-bright);
	padding: 4px 9px;
	border-radius: 999px;
}

/* ------------------------------------------------------------------ *
 * Sticky translucent header (matches the mockup's blur bar).
 * ------------------------------------------------------------------ */

/* Site Logo sits inline with the Anton site title in the header group. */
.pjva-site-header .wp-block-site-logo img {
	border-radius: 8px;
	display: block;
}

.pjva-site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(11, 10, 13, 0.86);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/*
 * Navigation collapses to the overlay (hamburger) up to 900px, not just
 * at core's hard-coded 600px — the 7-item menu wraps into the logo in
 * the 600–840px band. The inline menu returns at >=900px.
 */
@media (max-width: 899px) {
	.wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
}

/*
 * The open overlay inherits its background from the page root, which is
 * white — force the theme's dark ground and a readable link colour.
 */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--background) !important;
}

/*
 * The header's backdrop-filter makes it the containing block for the
 * overlay's `position: fixed`, collapsing it to the header's height.
 * Drop the filter while the menu is open so the overlay fills the screen.
 */
.has-modal-open .pjva-site-header {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--foreground);
}

/* Left-align the menu list in the full-screen overlay (the header nav is
 * right-justified, which the block turns into `align-items: flex-end` on
 * every nested flex column once it stacks — reads oddly in a panel). */
.wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-align: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start !important;
}

/* ------------------------------------------------------------------ *
 * Front-page sections — rhythm, dividers, anchored scroll offset.
 * ------------------------------------------------------------------ */

.pjva-section {
	border-bottom: 1px solid var(--wp--preset--color--border);
	scroll-margin-top: 80px;
}

.pjva-section:last-of-type { border-bottom: 0; }

.pjva-section-head {
	max-width: 720px;
	margin-bottom: 36px;
}

.pjva-section-head p { margin-top: 12px; }

@media (min-width: 900px) {
	.pjva-section-head {
		max-width: none;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 32px;
	}
	.pjva-section-head p {
		margin-top: 0;
		max-width: 42ch;
		text-align: right;
	}
}

/* ------------------------------------------------------------------ *
 * Static ticker strip (design1's non-scrolling variant).
 * ------------------------------------------------------------------ */

.pjva-ticker {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-block: 12px;
}

.pjva-ticker .wp-block-group {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	/* Tag flush left, text flush right: this used to happen by accident, via
	 * Gutenberg's "constrained" layout support pushing max-width + auto
	 * margins onto each *child* (not this container) -- an attribute that
	 * gets silently dropped by Gutenberg on every editor save regardless of
	 * what's edited (confirmed, not a guess -- see the commit that removed
	 * it). Stating the real intent directly here instead is both what fixes
	 * that bug and what actually reproduces the original spacing -- don't
	 * revert to the "layout" attribute or drop justify-content. */
	justify-content: space-between;
	max-width: 1180px;
	margin-inline: auto;
}

.pjva-ticker p { margin: 0; color: var(--wp--preset--color--on-primary); }

@media (max-width: 899px) {
	.pjva-ticker .wp-block-group {
		padding-inline: 20px;
	}
}

.pjva-ticker__tag {
	flex: none;
	font-family: var(--wp--preset--font-family--space-mono);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: var(--wp--preset--color--on-primary);
	color: var(--wp--preset--color--primary-bright);
	padding: 4px 10px;
	border-radius: 999px;
}

/* ------------------------------------------------------------------ *
 * Philosophy pillar cards — glow card with an accent top edge.
 * ------------------------------------------------------------------ */

.pjva-pillar-card {
	border-top: 3px solid var(--wp--preset--color--primary);
}

/* ------------------------------------------------------------------ *
 * Row lists + data tables — bordered, tabular, subtle row hover.
 * ------------------------------------------------------------------ */

.pjva-row-list,
.pjva-data-table {
	width: 100%;
	margin: 0;
}

.pjva-row-list table,
.pjva-data-table table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	overflow: hidden;
	font-variant-numeric: tabular-nums;
}

.pjva-row-list td,
.pjva-data-table td,
.pjva-data-table th {
	padding: 14px 18px;
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-align: left;
	font-size: 0.92rem;
	/* Long unbreakable values (emails, PO boxes) must wrap, not force
	 * the table wider than a phone / a narrow column. */
	overflow-wrap: anywhere;
	word-break: break-word;
}

.pjva-data-table th {
	font-family: var(--wp--preset--font-family--space-mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-foreground);
	background: var(--wp--preset--color--surface-2);
}

.pjva-row-list tr:last-child td,
.pjva-data-table tbody tr:last-child td { border-bottom: 0; }

.pjva-row-list td:first-child { color: var(--wp--preset--color--muted-foreground); }

/* Core only stacks columns at <=781px, which leaves the 3-/4-up card rows
 * and the two-up table layouts cramped in the 782–899px band. Stack every
 * front-page section's columns below 900px, matching the section-head
 * breakpoint. */
@media (max-width: 899px) {
	/* core forces `flex-wrap: nowrap !important` at >=782px, so match it */
	.pjva-section .wp-block-columns { flex-wrap: wrap !important; }
	.pjva-section .wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
}

.pjva-row-list td:last-child {
	text-align: right;
	font-family: var(--wp--preset--font-family--space-mono);
	color: var(--wp--preset--color--primary-bright);
}

.pjva-data-table tbody tr:hover { background: rgba(255, 111, 180, 0.05); }

/* Horizontal scroll safety for wide tables on narrow screens. */
.pjva-data-table { overflow-x: auto; }
.pjva-data-table table { min-width: 560px; }

/* "Every Player Rotates" — copy beside the court diagram. */
.pjva-rotation-note {
	margin-top: 32px;
	background: var(--wp--preset--color--surface-2);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	padding: 28px;
}

.pjva-rotation-note .wp-block-columns { align-items: center; }
.pjva-rotation-note svg { width: 100%; height: auto; }

/* ------------------------------------------------------------------ *
 * Announcements — date column beside body copy, in a bordered list.
 * ------------------------------------------------------------------ */

.pjva-news-list {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	overflow: hidden;
}

.pjva-news-item {
	padding: 24px 26px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.pjva-news-list > .pjva-news-item:last-child { border-bottom: 0; }

.pjva-news-item .wp-block-columns { align-items: baseline; }

.pjva-news-date {
	font-family: var(--wp--preset--font-family--space-mono);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-bright);
}

.pjva-news-item h3 {
	font-family: var(--wp--preset--font-family--work-sans);
	font-size: 1.1rem;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.35;
}

/* ------------------------------------------------------------------ *
 * Four Ways to Support — numbered glow cards.
 * ------------------------------------------------------------------ */

.pjva-support-card { scroll-margin-top: 80px; }

.pjva-support-num {
	font-family: var(--wp--preset--font-family--anton);
	font-size: 1.7rem;
	line-height: 1;
	color: var(--wp--preset--color--primary);
}

.pjva-support-card h3 { font-size: 1.1rem; }

/* ------------------------------------------------------------------ *
 * Closing CTA band — bordered panel with a corner glow.
 * ------------------------------------------------------------------ */

.pjva-cta-band {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 18px;
	padding: 44px;
}

.pjva-cta-band::after {
	content: "";
	position: absolute;
	right: -60px;
	top: -60px;
	width: 220px;
	height: 220px;
	background: radial-gradient(closest-side, rgba(255, 111, 180, 0.35), transparent 70%);
	pointer-events: none;
}

.pjva-cta-band .wp-block-columns { position: relative; align-items: center; }