/**
 * WIZSP Wheel — component layer.
 *
 * Design tokens live in theme.json. This file holds only what theme.json
 * cannot express: sticky behaviour, grid collapse, custom block styles,
 * focus states and motion.
 *
 * No colour, size, radius or spacing value is written literally here.
 * Everything references a token.
 */

/* ---------------------------------------------------------------
   1. Baseline
   --------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--wp--custom--header-height);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img,
video {
	max-width: 100%;
	height: auto;
}

:where(h1, h2, h3) {
	text-wrap: balance;
}

:where(p, li) {
	text-wrap: pretty;
}

/* Visible focus on every interactive element, never removed. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--sky);
	outline-offset: 3px;
	border-radius: var(--wp--custom--radius--sm);
}

/* Skip link. */
.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 12px 20px;
	background: var(--wp--preset--color--royal);
	color: var(--wp--preset--color--base);
	border-radius: 0 0 var(--wp--custom--radius--sm) 0;
	font-weight: 700;
}

.skip-link:focus {
	left: 0;
	top: 0;
}

/* ---------------------------------------------------------------
   2. Header
   --------------------------------------------------------------- */

.wizsp-header {
	position: sticky;
	top: 0;
	z-index: 100;
	transition:
		background-color var(--wp--custom--transition--base),
		box-shadow var(--wp--custom--transition--base),
		border-color var(--wp--custom--transition--base);
	border-bottom: 1px solid var(--wp--preset--color--border-subtle);
}

.wizsp-header.is-transparent {
	background-color: transparent;
	border-bottom-color: transparent;
	margin-bottom: calc(-1 * var(--wp--custom--header-height));
}

.wizsp-header.is-transparent :where(.wp-block-site-title a, .wp-block-site-tagline, .wp-block-navigation a) {
	color: var(--wp--preset--color--base);
}

.wizsp-header.is-transparent.is-scrolled {
	background-color: var(--wp--preset--color--base);
	border-bottom-color: var(--wp--preset--color--border-subtle);
	box-shadow: var(--wp--preset--shadow--1);
}

.wizsp-header.is-transparent.is-scrolled :where(.wp-block-site-title a, .wp-block-navigation a) {
	color: var(--wp--preset--color--royal);
}

.wizsp-header.is-transparent.is-scrolled .wp-block-site-tagline {
	color: var(--wp--preset--color--text-muted);
}

.wizsp-header .wp-block-site-title a {
	text-decoration: none;
	color: var(--wp--preset--color--royal);
}

.wizsp-header .wp-block-site-tagline {
	margin: 3px 0 0;
	color: var(--wp--preset--color--text-muted);
}

.wizsp-brand {
	gap: 12px;
}

.wizsp-brand__text {
	gap: 0;
}

.wizsp-header__nav {
	gap: 10px;
}

.wizsp-header .wp-block-navigation a {
	padding: 10px 14px;
	border-radius: var(--wp--custom--radius--sm);
	text-decoration: none;
	transition: background-color var(--wp--custom--transition--fast);
}

.wizsp-header .wp-block-navigation a:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--azure) 10%, transparent);
	text-decoration: none;
}

.wizsp-header.is-transparent:not(.is-scrolled) .wp-block-navigation a:hover {
	background-color: rgba(255, 255, 255, 0.16);
}

/* Mobile overlay menu — the comp had no mobile navigation at all. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--royal);
	padding-top: var(--wp--preset--spacing--60);
}

.wp-block-navigation__responsive-container.is-menu-open a {
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--large);
}

@media (max-width: 781px) {
	.wizsp-header__cta {
		display: none;
	}
}

/* ---------------------------------------------------------------
   3. Sections and grids
   --------------------------------------------------------------- */

.wizsp-section {
	scroll-margin-top: var(--wp--custom--header-height);
}

/* Replaces the comp's six !important breakpoint overrides. */
:where(.wizsp-g3, .wizsp-cards, .wizsp-news, .wizsp-stats, .wizsp-clublist, .wizsp-join__routes) {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.wizsp-g3,
.wizsp-clublist {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.wizsp-cards {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.wizsp-news {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.wizsp-stats {
	grid-template-columns: repeat(auto-fit, minmax(min(50% - 1rem, 180px), 1fr));
}

.wizsp-join__routes {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

:where(.wizsp-g3, .wizsp-cards, .wizsp-news, .wizsp-stats, .wizsp-clublist, .wizsp-join__routes) > .wp-block-column {
	flex-basis: auto !important;
	margin-left: 0 !important;
}

/* ---------------------------------------------------------------
   4. Block styles
   --------------------------------------------------------------- */

.is-style-wizsp-card {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--30);
	box-shadow: var(--wp--preset--shadow--1);
	transition:
		transform var(--wp--custom--transition--base),
		box-shadow var(--wp--custom--transition--base),
		border-color var(--wp--custom--transition--base);
}

.is-style-wizsp-card:hover,
.is-style-wizsp-card:focus-within {
	border-color: var(--wp--preset--color--azure);
	box-shadow: var(--wp--preset--shadow--3);
}

.is-style-wizsp-panel {
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--preset--shadow--3);
}

.is-style-wizsp-rounded img,
.is-style-wizsp-rounded {
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
}

.is-style-wizsp-kicker {
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--royal);
	margin-bottom: 0;
}

.is-style-wizsp-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	color: var(--wp--preset--color--text-body);
}

.is-style-wizsp-stat {
	color: var(--wp--preset--color--azure);
	font-variant-numeric: tabular-nums;
	margin-bottom: 4px;
}

.is-style-wizsp-check {
	list-style: none;
	padding-left: 0;
}

.is-style-wizsp-check li {
	padding-left: 28px;
	position: relative;
	margin-bottom: 10px;
}

.is-style-wizsp-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 14px;
	height: 8px;
	border-left: 2px solid var(--wp--preset--color--success);
	border-bottom: 2px solid var(--wp--preset--color--success);
	transform: rotate(-45deg);
}

/* Button variants. */
.is-style-wizsp-ghost .wp-block-button__link {
	background-color: transparent;
	color: currentColor;
	border: 2px solid currentColor;
	box-shadow: none;
}

.is-style-wizsp-ghost .wp-block-button__link:hover {
	background-color: color-mix(in srgb, currentColor 12%, transparent);
	box-shadow: none;
}

.is-style-wizsp-gold .wp-block-button__link {
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy-deep);
	box-shadow: 0 6px 16px -6px rgba(247, 168, 27, 0.6);
}

.is-style-wizsp-gold .wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--gold) 88%, black);
}

/* News cards. */
.is-style-wizsp-news > li,
.is-style-wizsp-news .wp-block-post {
	display: flex;
	flex-direction: column;
}

.is-style-wizsp-news .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--royal);
}

.is-style-wizsp-news .wp-block-post-title a:hover {
	color: var(--wp--preset--color--azure);
	text-decoration: underline;
}

.is-style-wizsp-news .wp-block-post-featured-image img {
	transition: transform var(--wp--custom--transition--base);
}

.is-style-wizsp-news .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

/* ---------------------------------------------------------------
   5. Hero and media
   --------------------------------------------------------------- */

.wizsp-hero {
	padding-top: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--60)) !important;
}

.wizsp-hero .wp-block-heading {
	text-shadow: 0 2px 24px rgba(15, 46, 99, 0.4);
}

.wizsp-gov .wp-block-media-text__media img {
	border-radius: var(--wp--custom--radius--lg);
}

.wizsp-video iframe {
	border-radius: var(--wp--custom--radius--lg);
	display: block;
}

.wizsp-event:last-child {
	border-bottom: 0 !important;
}

/* ---------------------------------------------------------------
   6. Forms
   --------------------------------------------------------------- */

:where(input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"], textarea, select) {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--wp--preset--color--border-default);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-strong);
	transition:
		border-color var(--wp--custom--transition--fast),
		box-shadow var(--wp--custom--transition--fast);
}

:where(input, textarea, select):focus {
	border-color: var(--wp--preset--color--sky);
	box-shadow: var(--wp--custom--focus-ring);
	outline: none;
}

:where(input, textarea).is-invalid {
	border-color: var(--wp--preset--color--error);
	box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.18);
}

.wizsp-form-message[data-state="error"] {
	color: var(--wp--preset--color--error);
}

.wizsp-form-message[data-state="success"] {
	color: var(--wp--preset--color--success);
}

/* ---------------------------------------------------------------
   7. Motion — opt-in only
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.wizsp-js .wizsp-reveal {
		opacity: 0;
		transform: translateY(20px);
		transition:
			opacity 600ms cubic-bezier(0.4, 0, 0.2, 1),
			transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
	}

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

	.is-style-wizsp-card:hover {
		transform: translateY(-4px);
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------------------------------------------------------------
   8. Print
   --------------------------------------------------------------- */

@media print {
	.wizsp-header,
	.wizsp-footer,
	.wizsp-nl,
	.wp-block-navigation {
		display: none !important;
	}

	body {
		color: black;
		background: white;
	}
}