/**
 * Gridiron Godz — theme stylesheet.
 * Loaded in editor (via add_editor_style) and on the frontend.
 * Per-block styles are scoped under build/blocks/<slug>/style-index.css.
 *
 * Cascade order:
 *   reset  → tokens/base CSS that should never beat block authoring
 *   theme  → site chrome (header, footer, layout shells)
 *   blocks → per-block overrides
 *   utility → low-stakes helpers
 *
 * theme.json's auto-generated rules use :where(), so they sit below all
 * named layers — meaning we don't need !important to override them.
 */

@layer reset, theme, blocks, utility;

/* ===== DESIGN TOKENS ====================================================
   Single source of truth for spacing, sizing, surfaces, and motion. Every
   section block should reference these — they are NOT redefined per block. */

:root {
	/* Section rhythm */
	--gg-section-py: clamp(3rem, 5vw, 5rem);
	--gg-section-px: clamp(1.25rem, 4vw, 3rem);
	--gg-section-max: 1240px;
	--gg-section-narrow-max: 880px;

	/* Type scale */
	--gg-section-heading-size: clamp(1.875rem, 2.5vw + 1rem, 3rem);
	--gg-section-subhead-size: clamp(1rem, 0.3vw + 0.95rem, 1.125rem);
	--gg-eyebrow-size: 0.8125rem;
	--gg-eyebrow-tracking: 0.18em;

	/* Motion */
	--gg-easing: cubic-bezier(0.22, 1, 0.36, 1);
	--gg-trans-fast: 150ms ease;
	--gg-trans-base: 200ms ease;
	--gg-trans-smooth: 280ms var(--gg-easing);

	/* Radii */
	--gg-radius-card: 16px;
	--gg-radius-section: 20px;
	--gg-radius-pill: 999px;

	/* Shadows */
	--gg-shadow-card: 0 12px 28px rgb(11 18 32 / 0.08);
	--gg-shadow-hover: 0 16px 40px rgb(11 18 32 / 0.12);
	--gg-shadow-deep: 0 24px 64px rgb(11 18 32 / 0.18);
	--gg-shadow-brand: 0 8px 20px rgb(31 123 176 / 0.28);

	/* Surfaces */
	--gg-surface-dark-bg: linear-gradient(135deg, #050913 0%, #0B1220 60%, #163C5A 100%);
	--gg-surface-arena-bg:
		radial-gradient(70% 80% at 80% 20%, rgb(31 123 176 / 0.4) 0%, transparent 60%),
		linear-gradient(135deg, #050913 0%, #0B1220 50%, #1F7BB0 100%);

	/* A11y focus ring */
	--gg-focus-ring: 0 0 0 3px var(--wp--preset--color--brand);
}

/* ===== RESET ============================================================ */

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

	/* Universal focus-visible — restore visible keyboard focus that some
	   resets remove. Always uses brand-blue ring with 2px offset. */
	*:focus-visible {
		outline: 2px solid var(--wp--preset--color--brand);
		outline-offset: 2px;
		border-radius: 4px;
	}
	/* Don't double-outline when an element manages its own focus state
	   (e.g. buttons that show a box-shadow ring instead). */
	:where(.wp-block-button__link, .gg-header__cta, .gg-cta__btn, .gg-split__btn, .gg-fitem):focus-visible {
		outline: 0;
		box-shadow: var(--gg-focus-ring);
	}

	html {
		scroll-behavior: smooth;
		-webkit-text-size-adjust: 100%;
		text-rendering: optimizeLegibility;
	}

	html, body {
		overflow-x: clip;
		max-width: 100vw;
	}

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

	/* Media never exceeds its container. */
	img, picture, video, svg, iframe {
		max-width: 100%;
		height: auto;
		display: block;
	}

	/* Word breaks for long, unbreakable strings (URLs, labels). */
	:where(p, h1, h2, h3, h4, h5, h6, li) {
		overflow-wrap: anywhere;
	}

	/* Tables can blow out — make them scroll inside their container. */
	:where(table) {
		max-width: 100%;
		display: block;
		overflow-x: auto;
	}

	/* Pre/code shouldn't push the layout. */
	:where(pre) {
		max-width: 100%;
		overflow-x: auto;
	}

	::selection {
		background: var(--wp--preset--color--brand);
		color: var(--wp--preset--color--ink);
	}

	@media (prefers-reduced-motion: reduce) {
		*, *::before, *::after {
			animation-duration: 1ms !important;
			transition-duration: 1ms !important;
			scroll-behavior: auto !important;
		}
	}
}

/* ===== THEME — site chrome =============================================== */

@layer theme {

	/* Header is now a self-contained gg/site-header block — its CSS lives
	   in build/blocks/site-header/style-index.css and loads with the block. */

	/* ---- Footer --------------------------------------------------------- */

	.gg-footer { color: #fff; }
	.gg-footer h1, .gg-footer h2, .gg-footer h3, .gg-footer h4 { color: #fff; }

	.gg-footer__links {
		list-style: none;
		padding: 0; margin: 0;
		display: flex; flex-direction: column;
		gap: 0.5rem;
	}
	.gg-footer__links a {
		display: inline-flex; align-items: center;
		min-height: 32px;
		color: #fff;
		opacity: 0.7;
		text-decoration: none;
		transition: opacity 150ms ease, color 150ms ease;
	}
	.gg-footer__links a:hover {
		opacity: 1;
		color: var(--wp--preset--color--brand);
	}

	.gg-footer__meta { line-height: 1.6; }

	/* ---- Page shell ---------------------------------------------------
	 * Each section block owns its own padding/surface internally. We just
	 * need to kill WP's auto-injected blockGap between siblings so sections
	 * sit flush without inheriting `margin-block-start: 1.25rem` from
	 * `:where(.is-layout-flow|constrained) > *`.
	 */

	.gg-main {
		display: flex;
		flex-direction: column;
		--wp--style--block-gap: 0;
	}

	.gg-main .wp-block-post-content { --wp--style--block-gap: 0; }
	.gg-funnel-page > .wp-block-post-content { --wp--style--block-gap: 0; }

	/* ---- Single post ---------------------------------------------------- */

	.gg-single__head { gap: 0.5rem; }
	.gg-single__body :is(p, li) {
		font-size: 1.0625rem;
		line-height: 1.7;
		color: var(--wp--preset--color--graphite);
	}
	.gg-single__body img { border-radius: 12px; }
}

/* ===== BLOCKS — components and core block tweaks ========================= */

@layer blocks {

	/* ---- Buttons — canonical hover, never bg/text collision ---------- */

	.wp-block-button__link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		font-weight: 600;
		transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
	}

	/* Filled (default) — brand bg + ink text, deepens to brand-deep on hover. */
	.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
		background-color: var(--wp--preset--color--brand-deep);
		color: #fff;
		transform: translateY(-1px);
		box-shadow: 0 8px 20px rgb(31 123 176 / 0.28);
	}

	/* Outline — transparent fill, ink border + ink text by default. */
	.wp-block-button.is-style-outline .wp-block-button__link {
		background: transparent;
		color: var(--wp--preset--color--ink);
		border: 2px solid var(--wp--preset--color--ink);
	}
	.wp-block-button.is-style-outline .wp-block-button__link:hover {
		background-color: var(--wp--preset--color--ink);
		color: #fff;
		border-color: var(--wp--preset--color--ink);
		transform: translateY(-1px);
	}

	/* Outline on dark surfaces (hero, CTA) — white border + white text,
	   flips to brand fill + ink text on hover. Single source of truth. */
	.gg-btn--on-dark .wp-block-button__link,
	.gg-hero .wp-block-button.is-style-outline .wp-block-button__link,
	.gg-cta .wp-block-button.is-style-outline .wp-block-button__link {
		color: #fff;
		border-color: rgb(255 255 255 / 0.85);
	}
	.gg-btn--on-dark .wp-block-button__link:hover,
	.gg-hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
	.gg-cta .wp-block-button.is-style-outline .wp-block-button__link:hover {
		background-color: var(--wp--preset--color--brand);
		color: var(--wp--preset--color--ink);
		border-color: var(--wp--preset--color--brand);
	}

	/* ---- Post grid (blog/archive cards) -------------------------------- */

	.gg-postcard {
		overflow: hidden;
		transition: transform 240ms ease, box-shadow 240ms ease;
	}
	.gg-postcard:hover {
		transform: translateY(-2px);
		box-shadow: 0 16px 40px rgb(11 18 32 / 0.10);
	}
	.gg-postcard .wp-block-post-featured-image { margin: 0; overflow: hidden; }
	.gg-postcard .wp-block-post-featured-image img {
		transition: transform 600ms ease;
	}
	.gg-postcard:hover .wp-block-post-featured-image img { transform: scale(1.03); }
	.gg-postcard .wp-block-post-title a { color: var(--wp--preset--color--ink); text-decoration: none; }
	.gg-postcard .wp-block-post-title a:hover { color: var(--wp--preset--color--brand-deep); }

	/* ---- Pagination ---------------------------------------------------- */

	.gg-pagination { gap: 0.5rem; }
	.gg-pagination :is(a, span) {
		display: inline-flex; align-items: center; justify-content: center;
		min-width: 44px; min-height: 44px;
		padding-inline: 0.875rem;
		border-radius: 999px;
		font-weight: 600;
		font-size: 0.875rem;
		color: var(--wp--preset--color--ink);
		text-decoration: none;
		transition: background 150ms ease, color 150ms ease;
	}
	.gg-pagination a:hover { background: var(--wp--preset--color--surface); }
	.gg-pagination .current { background: var(--wp--preset--color--ink); color: #fff; }

	/* ---- Gravity Forms ------------------------------------------------- */

	.gform_wrapper { font-family: var(--wp--preset--font-family--body); }
	.gform_wrapper .gform_fields { gap: clamp(0.75rem, 1.5vw, 1.25rem); }

	.gform_wrapper .gfield_label {
		margin-bottom: 0.4rem;
		font-size: 0.8125rem;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--wp--preset--color--ink);
	}

	.gform_wrapper :is(input[type=text], input[type=email], input[type=tel], input[type=number], textarea, select) {
		width: 100%;
		min-height: 48px;
		padding: 0.85rem 1rem;
		border: 1px solid var(--wp--preset--color--line);
		border-radius: 12px;
		background: #fff;
		font-size: 1rem;
		color: var(--wp--preset--color--ink);
		transition: border-color 150ms ease, box-shadow 150ms ease;
	}
	.gform_wrapper :is(input, textarea, select):focus {
		outline: none;
		border-color: var(--wp--preset--color--brand);
		box-shadow: 0 0 0 4px rgb(91 182 232 / 0.2);
	}

	.gform_wrapper :is(.gform_button, button[type=submit]) {
		width: 100%;
		min-height: 52px;
		margin-top: 0.5rem;
		padding: 0.95rem 2rem;
		background: var(--wp--preset--color--brand);
		color: var(--wp--preset--color--ink);
		font-family: var(--wp--preset--font-family--body);
		font-size: 0.9375rem;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		border: 0;
		border-radius: 999px;
		cursor: pointer;
		transition: background 150ms ease, color 150ms ease, transform 150ms ease;
	}
	.gform_wrapper :is(.gform_button, button[type=submit]):hover {
		background: var(--wp--preset--color--brand-deep);
		color: #fff;
		transform: translateY(-1px);
	}

	.gform_confirmation_message {
		padding: 2rem;
		background: var(--wp--preset--color--surface);
		border-inline-start: 3px solid var(--wp--preset--color--brand);
		border-radius: 12px;
		font-size: 1.0625rem;
		line-height: 1.6;
	}
}

/* ===== UTILITY ========================================================== */

@layer utility {

	/* Scroll reveal — applied via animations.js. */
	.gg-anim {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 600ms ease, transform 600ms ease;
		will-change: opacity, transform;
	}
	.gg-anim.is-visible { opacity: 1; transform: none; }

	/* Stagger children when parent gets .gg-anim-stagger. */
	.gg-anim-stagger > * {
		opacity: 0;
		transform: translateY(12px);
		transition: opacity 500ms ease, transform 500ms ease;
	}
	.gg-anim-stagger.is-visible > * { opacity: 1; transform: none; }
	.gg-anim-stagger.is-visible > *:nth-child(2) { transition-delay: 60ms; }
	.gg-anim-stagger.is-visible > *:nth-child(3) { transition-delay: 120ms; }
	.gg-anim-stagger.is-visible > *:nth-child(4) { transition-delay: 180ms; }
	.gg-anim-stagger.is-visible > *:nth-child(5) { transition-delay: 240ms; }

	/* Arena background utility — drop class on any group block. */
	.gg-arena-bg {
		position: relative;
		overflow: clip;
		isolation: isolate;
		color: #fff;
		background:
			radial-gradient(70% 80% at 80% 20%, rgb(31 123 176 / 0.4) 0%, transparent 60%),
			linear-gradient(135deg, #050913 0%, #0B1220 50%, #1F7BB0 100%);
	}
	.gg-arena-bg::before {
		content: '';
		position: absolute; inset: 0; z-index: -1;
		opacity: 0.5;
		mix-blend-mode: screen;
		pointer-events: none;
		background:
			url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='b' x1='0' x2='1' y1='0' y2='1'><stop offset='0' stop-color='%235BB6E8'/><stop offset='1' stop-color='%231F7BB0'/></linearGradient></defs><path d='M-40 0 L260 0 L210 230 L380 230 L120 540 L170 320 L0 320 Z' fill='url(%23b)'/><path d='M1640 -40 L1300 -40 L1430 200 L1240 200 L1500 480 L1620 280 L1480 280 L1640 80 Z' fill='%23ffffff' opacity='0.85'/><path d='M-20 360 L300 360 L240 480 L420 480 L160 720 L240 560 L40 560 Z' fill='%23ffffff' opacity='0.92'/><path d='M1640 940 L1340 940 L1400 720 L1220 720 L1500 460 L1430 660 L1620 660 Z' fill='url(%23b)'/><path d='M-20 940 L320 940 L260 800 L460 800 L180 540 L260 740 L60 740 Z' fill='%23ffffff' opacity='0.88'/></svg>")
				center / cover no-repeat;
	}
	.gg-arena-bg :where(h1, h2, h3, h4, h5, h6) { color: #fff; }
	.gg-arena-bg :where(.gg-secheading__eyebrow) { color: var(--wp--preset--color--brand); }
	.gg-arena-bg :where(.gg-secheading__subhead, p) { color: rgb(255 255 255 / 0.85); }

	/* No-FOUC */
	body:not(.is-loaded) main { opacity: 0; }
	body.is-loaded main { opacity: 1; transition: opacity 200ms ease; }

	/* ---- Consent multi-participant form -------------------------------- */

	.gg-consent {
		display: flex;
		flex-direction: column;
		gap: 2rem;
	}

	.gg-consent__list {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	.gg-consent__participant {
		background: var(--wp--preset--color--white);
		border: 1px solid var(--wp--preset--color--line);
		border-radius: var(--gg-radius-card);
		padding: clamp(1.25rem, 2.5vw, 2rem);
		animation: gg-consent-in 320ms var(--gg-easing);
	}

	.gg-consent__participant[hidden] { display: none; }

	.gg-consent__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		margin-bottom: 1.25rem;
		padding-bottom: 1rem;
		border-bottom: 1px solid var(--wp--preset--color--line);
	}

	.gg-consent__num {
		font-family: var(--wp--preset--font-family--display);
		font-size: 1.25rem;
		font-weight: 400;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--wp--preset--color--ink);
	}

	.gg-consent__remove {
		background: transparent;
		border: 0;
		padding: 0.4rem 0.75rem;
		font-family: var(--wp--preset--font-family--body);
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--wp--preset--color--slate);
		cursor: pointer;
		border-radius: var(--gg-radius-pill);
		transition: background var(--gg-trans-fast), color var(--gg-trans-fast);
	}
	.gg-consent__remove:hover {
		background: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--ink);
	}

	.gg-consent__actions {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.75rem;
	}

	.gg-consent__add {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.85rem 1.75rem;
		min-height: 48px;
		background: var(--wp--preset--color--ink);
		color: #fff;
		font-family: var(--wp--preset--font-family--body);
		font-size: 0.875rem;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		border: 0;
		border-radius: var(--gg-radius-pill);
		cursor: pointer;
		transition: background var(--gg-trans-base), color var(--gg-trans-base), transform var(--gg-trans-base), box-shadow var(--gg-trans-base);
	}
	.gg-consent__add:hover {
		background: var(--wp--preset--color--brand);
		color: var(--wp--preset--color--ink);
		transform: translateY(-1px);
		box-shadow: var(--gg-shadow-brand);
	}
	.gg-consent__add[disabled] {
		opacity: 0.4;
		cursor: not-allowed;
		background: var(--wp--preset--color--slate);
	}
	.gg-consent__add[disabled]:hover { transform: none; box-shadow: none; }

	.gg-consent__hint {
		margin: 0;
		font-size: 0.8125rem;
		color: var(--wp--preset--color--slate);
		text-align: center;
	}

	@keyframes gg-consent-in {
		from { opacity: 0; transform: translateY(12px); }
		to   { opacity: 1; transform: none; }
	}
}

/* ===== RESPONSIVE ======================================================= */

@media (max-width: 768px) {
	.gg-footer .wp-block-columns { gap: 2rem; }
	.gg-footer .wp-block-column { flex-basis: 100%; }
	.gg-footer__legal { justify-content: center; text-align: center; }
}

@media print {
	.gg-header, .gg-footer { display: none; }
	a { color: inherit; text-decoration: underline; }
}