/*
 * GSCC Child Theme — Main Styles
 *
 * Editorial sports-magazine aesthetic. Deep navy + cricket gold.
 * Built for WCAG 2.1 AA on a small VM — no heavy frameworks, pure CSS.
 *
 * Load order (set in functions.php):
 *   1. Google Fonts
 *   2. Astra parent style.css
 *   3. tokens.css (CSS custom properties)
 *   4. main.css (this file) — overrides + component styles
 */

/* ─────────────────────────────────────────────────────────────────
   1. BASE — typography, resets, color foundations
   ───────────────────────────────────────────────────────────────── */

body {
	font-family: var(--gscc-font-body);
	font-size: var(--gscc-text-base);
	line-height: var(--gscc-lh-normal);
	color: var(--gscc-ink);
	background-color: var(--gscc-cream);
	font-feature-settings: 'kern' 1, 'liga' 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Selection */
::selection {
	background: var(--gscc-gold);
	color: var(--gscc-navy);
}

/* Headings — Playfair Display, editorial rhythm */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	font-family: var(--gscc-font-display);
	font-weight: var(--gscc-weight-bold);
	color: var(--gscc-navy);
	letter-spacing: var(--gscc-tracking-tight);
	line-height: var(--gscc-lh-tight);
	margin: 0 0 var(--gscc-space-4);
}

h1 {
	font-size: clamp(2.5rem, 5vw + 1rem, var(--gscc-text-4xl));
	font-weight: var(--gscc-weight-black);
}

h2 {
	font-size: clamp(1.75rem, 3vw + 1rem, var(--gscc-text-3xl));
}

h3 {
	font-size: clamp(1.35rem, 2vw + 0.75rem, var(--gscc-text-2xl));
}

h4 {
	font-size: var(--gscc-text-xl);
}

h5 {
	font-size: var(--gscc-text-lg);
}

h6 {
	font-size: var(--gscc-text-base);
	text-transform: uppercase;
	letter-spacing: var(--gscc-tracking-caps);
	font-family: var(--gscc-font-body);
	font-weight: var(--gscc-weight-semi);
	color: var(--gscc-ink-muted);
}

/* Body copy rhythm */
p {
	margin: 0 0 var(--gscc-space-4);
	max-width: var(--gscc-max-width-prose);
}

p + p {
	margin-top: var(--gscc-space-4);
}

/* Links — subtle underline, gold on hover */
a {
	color: var(--gscc-navy);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: var(--gscc-gold);
	transition: color var(--gscc-duration-fast) var(--gscc-ease-standard);
}

a:hover,
a:focus-visible {
	color: var(--gscc-gold-dark);
	text-decoration-color: currentColor;
}

/* Focus — visible, accessible */
:focus-visible {
	outline: 2px solid var(--gscc-gold);
	outline-offset: 2px;
	border-radius: var(--gscc-radius-sm);
}

/* Site identity — the logo icon carries the brand on its own.
   Hide the site title + tagline text so the header reads as logo only. */
.site-branding .site-title,
.ast-site-identity .site-title,
.ast-site-title-wrap .site-title,
.site-branding .site-description,
.ast-site-identity .site-description {
	display: none;
}

/* Logo / site-title / navigation links — no underline (structural, not prose). */
.site-branding a,
.ast-site-identity a,
.custom-logo-link,
.main-header-menu a,
.main-navigation a,
#ast-hf-menu-1 a,
.ast-builder-menu a,
.ast-primary-header-bar a {
	text-decoration: none;
}

/* Primary navigation — editorial treatment.
   Medium weight (not bold), Work Sans, tighter caps tracking, smaller
   size so it reads as structural nav rather than headline-level text. */
.main-header-menu .menu-link,
.main-header-menu > .menu-item > a,
.ast-primary-header-bar .main-header-menu a,
.ast-builder-menu .menu-item > a,
nav.main-header-menu a {
	font-family: var(--gscc-font-body);
	font-weight: var(--gscc-weight-medium);
	font-size: var(--gscc-text-sm);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gscc-navy);
	transition: color var(--gscc-duration-fast) var(--gscc-ease-standard);
}

.main-header-menu .menu-link:hover,
.main-header-menu > .menu-item > a:hover,
.main-header-menu .current-menu-item > a,
.main-header-menu .current-menu-parent > a,
.ast-primary-header-bar .main-header-menu a:hover {
	color: var(--gscc-gold-dark);
}

/* Submenu (dropdown) items — cleaner, no caps */
.main-header-menu .sub-menu a,
.main-header-menu ul.sub-menu .menu-link {
	font-size: var(--gscc-text-sm);
	letter-spacing: 0;
	text-transform: none;
	font-weight: var(--gscc-weight-regular);
}

/* Strong — weight adjustment for Work Sans */
strong, b {
	font-weight: var(--gscc-weight-semi);
}

/* Code and mono */
code, pre, kbd {
	font-family: var(--gscc-font-mono);
	font-size: 0.9em;
}

/* Blockquote — editorial pull quote */
blockquote {
	border-left: 3px solid var(--gscc-gold);
	padding: var(--gscc-space-2) 0 var(--gscc-space-2) var(--gscc-space-5);
	margin: var(--gscc-space-6) 0;
	font-family: var(--gscc-font-display);
	font-style: italic;
	font-size: var(--gscc-text-lg);
	color: var(--gscc-navy);
	line-height: var(--gscc-lh-snug);
}

/* HR — gold with spacing */
hr {
	border: 0;
	height: 2px;
	background: var(--gscc-gold);
	margin: var(--gscc-space-7) 0;
	max-width: 80px;
}

/* Lists — readable spacing */
ul, ol {
	margin: 0 0 var(--gscc-space-4);
	padding-left: var(--gscc-space-5);
	max-width: var(--gscc-max-width-prose);
}

li {
	margin-bottom: var(--gscc-space-2);
	line-height: var(--gscc-lh-relaxed);
}

/* Images — responsive by default */
img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ─────────────────────────────────────────────────────────────────
   2. LAYOUT — container, grid helpers
   ───────────────────────────────────────────────────────────────── */

.gscc-container {
	width: 100%;
	max-width: var(--gscc-max-width);
	margin-inline: auto;
	padding-inline: var(--gscc-gutter);
}

@media (min-width: 900px) {
	.gscc-container {
		padding-inline: var(--gscc-gutter-lg);
	}
}

.gscc-prose {
	max-width: var(--gscc-max-width-prose);
}

/* Stack utility — vertical rhythm */
.gscc-stack > * + * {
	margin-top: var(--gscc-space-4);
}

.gscc-stack-lg > * + * {
	margin-top: var(--gscc-space-6);
}

/* ─────────────────────────────────────────────────────────────────
   3. COMPONENTS — buttons, cards, badges
   ───────────────────────────────────────────────────────────────── */

/* Button — primary (navy solid) and secondary (gold outline) */
.gscc-btn,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--gscc-space-3) var(--gscc-space-5);
	font-family: var(--gscc-font-body);
	font-weight: var(--gscc-weight-semi);
	font-size: var(--gscc-text-base);
	letter-spacing: var(--gscc-tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	border: 2px solid var(--gscc-navy);
	border-radius: var(--gscc-radius-sm);
	background-color: var(--gscc-navy);
	color: var(--gscc-cream);
	cursor: pointer;
	transition:
		background-color var(--gscc-duration-base) var(--gscc-ease-standard),
		border-color var(--gscc-duration-base) var(--gscc-ease-standard),
		color var(--gscc-duration-base) var(--gscc-ease-standard),
		transform var(--gscc-duration-fast) var(--gscc-ease-standard);
}

.gscc-btn:hover,
.gscc-btn:focus-visible,
.wp-block-button__link:hover {
	background-color: var(--gscc-gold);
	border-color: var(--gscc-gold);
	color: var(--gscc-navy);
	transform: translateY(-1px);
	text-decoration: none;
}

.gscc-btn--outline,
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border-color: var(--gscc-navy);
	color: var(--gscc-navy);
}

.gscc-btn--outline:hover {
	background-color: var(--gscc-navy);
	color: var(--gscc-cream);
}

.gscc-btn--gold {
	background-color: var(--gscc-gold);
	border-color: var(--gscc-gold);
	color: var(--gscc-navy);
}

.gscc-btn--gold:hover {
	background-color: var(--gscc-navy);
	border-color: var(--gscc-navy);
	color: var(--gscc-cream);
}

/* Card */
.gscc-card {
	background: #ffffff;
	border: var(--gscc-border);
	border-radius: var(--gscc-radius-md);
	padding: var(--gscc-space-6);
	box-shadow: var(--gscc-shadow-sm);
	transition: box-shadow var(--gscc-duration-base) var(--gscc-ease-standard),
	            transform var(--gscc-duration-base) var(--gscc-ease-standard);
}

.gscc-card:hover {
	box-shadow: var(--gscc-shadow-md);
	transform: translateY(-2px);
}

.gscc-card__title {
	margin-top: 0;
	font-size: var(--gscc-text-xl);
}

.gscc-card__meta {
	font-family: var(--gscc-font-mono);
	font-size: var(--gscc-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--gscc-tracking-caps);
	color: var(--gscc-gold-dark);
	margin-bottom: var(--gscc-space-2);
}

/* Badge / Eyebrow label — used above headings */
.gscc-eyebrow {
	display: inline-block;
	font-family: var(--gscc-font-mono);
	font-size: var(--gscc-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--gscc-tracking-caps);
	color: var(--gscc-gold-dark);
	margin-bottom: var(--gscc-space-3);
	padding-left: var(--gscc-space-4);
	position: relative;
}

.gscc-eyebrow::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: var(--gscc-space-3);
	height: 1px;
	background: var(--gscc-gold);
}

/* ─────────────────────────────────────────────────────────────────
   4. PATTERNS — headers, footers, site-specific
   ───────────────────────────────────────────────────────────────── */

/* Editorial page header — used above long-form pages like "About Us" */
.gscc-page-header {
	padding: var(--gscc-space-9) 0 var(--gscc-space-7);
	border-bottom: var(--gscc-border);
	margin-bottom: var(--gscc-space-7);
}

.gscc-page-header__title {
	max-width: 20ch;
	margin-bottom: var(--gscc-space-3);
}

.gscc-page-header__lead {
	font-size: var(--gscc-text-lg);
	color: var(--gscc-ink-muted);
	max-width: var(--gscc-max-width-prose);
	line-height: var(--gscc-lh-relaxed);
}

/* Score / fixture callout — uses mono type for scorecard feel */
.gscc-score {
	font-family: var(--gscc-font-mono);
	font-variant-numeric: tabular-nums;
	font-weight: var(--gscc-weight-semi);
	color: var(--gscc-navy);
}

.gscc-score--win {
	color: var(--gscc-success);
}

.gscc-score--loss {
	color: var(--gscc-danger);
}

/* When a page opens with a full-bleed .gscc-hero, remove Astra's default
   entry title wrapper AND collapse the top padding on every content
   wrapper up the chain. Otherwise a band of body/cream shows between
   the site header and the hero — especially visible against a navy hero. */
body:has(.gscc-hero) .entry-header,
body:has(.gscc-hero) .ast-single-post-header,
body:has(.gscc-hero) .ast-archive-title {
	display: none;
}

body:has(.entry-content > .gscc-hero:first-child) #content,
body:has(.entry-content > .gscc-hero:first-child) .ast-container,
body:has(.entry-content > .gscc-hero:first-child) #primary,
body:has(.entry-content > .gscc-hero:first-child) #main,
body:has(.entry-content > .gscc-hero:first-child) article.ast-article-single,
body:has(.entry-content > .gscc-hero:first-child) .entry-content {
	padding-top: 0;
	margin-top: 0;
}

/* Mirror of the flush-top rule: when a page ENDS with a full-bleed block
   (CTA band, banner image), remove the bottom padding from Astra's content
   wrappers so the block sits flush against the site footer. */
body:has(.entry-content > .alignfull:last-child) #content,
body:has(.entry-content > .alignfull:last-child) .ast-container,
body:has(.entry-content > .alignfull:last-child) #primary,
body:has(.entry-content > .alignfull:last-child) #main,
body:has(.entry-content > .alignfull:last-child) article.ast-article-single,
body:has(.entry-content > .alignfull:last-child) .entry-content {
	padding-bottom: 0;
	margin-bottom: 0;
}

/* Hero — full-bleed editorial page opener.
   Author as a wp:group with align=full and className="gscc-hero",
   containing an inner wp:group with className="gscc-hero__inner".
   Inside the inner group: optional .gscc-eyebrow paragraph, an h1,
   and a .gscc-hero__lead paragraph. */
.gscc-hero {
	background: var(--gscc-cream-dark);
	padding: var(--gscc-space-9) 0 var(--gscc-space-8);
	margin: 0 0 var(--gscc-space-8);
	border-bottom: 3px solid var(--gscc-gold);
	position: relative;
}

.gscc-hero .gscc-hero__inner {
	max-width: var(--gscc-max-width);
	margin-inline: auto;
	padding: 0 var(--gscc-gutter);
}

.gscc-hero h1,
.gscc-hero .wp-block-heading {
	font-size: clamp(2.75rem, 6vw + 1rem, var(--gscc-text-hero));
	line-height: var(--gscc-lh-tight);
	font-weight: var(--gscc-weight-black);
	max-width: 18ch;
	margin: 0 0 var(--gscc-space-5);
	letter-spacing: -0.03em;
	color: var(--gscc-navy);
}

.gscc-hero__lead {
	font-size: clamp(var(--gscc-text-lg), 1.2vw + 1rem, var(--gscc-text-xl));
	line-height: var(--gscc-lh-relaxed);
	color: var(--gscc-ink-muted);
	max-width: 56ch;
	font-family: var(--gscc-font-body);
	font-weight: var(--gscc-weight-regular);
}

.gscc-hero .gscc-eyebrow {
	margin-bottom: var(--gscc-space-4);
}

@media (min-width: 900px) {
	.gscc-hero {
		padding: var(--gscc-space-10) 0 var(--gscc-space-9);
	}

	.gscc-hero .gscc-hero__inner {
		padding: 0 var(--gscc-gutter-lg);
	}
}

/* Navy variant — statement pages (e.g. Home). */
.gscc-hero--navy {
	background: var(--gscc-navy);
}

.gscc-hero--navy h1,
.gscc-hero--navy .wp-block-heading {
	color: var(--gscc-cream);
}

.gscc-hero--navy .gscc-hero__lead {
	color: rgba(247, 243, 236, 0.78);
}

.gscc-hero--navy .gscc-eyebrow {
	color: var(--gscc-gold-light);
}

.gscc-hero--navy .gscc-eyebrow::before {
	background: var(--gscc-gold-light);
}

/* Stat grid — scorecard-style numerical callouts.
   Author as a wp:columns with className="gscc-stat-grid", each inner
   wp:column gets className="gscc-stat". Inside each stat, use three
   paragraphs with classes: gscc-stat__number, gscc-stat__label,
   and (optional) gscc-stat__detail. */
.wp-block-columns.gscc-stat-grid {
	margin-block: var(--gscc-space-8);
	padding: var(--gscc-space-7) var(--gscc-gutter);
	border-top: var(--gscc-border);
	border-bottom: var(--gscc-border);
	gap: var(--gscc-space-6);
}

@media (min-width: 900px) {
	.wp-block-columns.gscc-stat-grid {
		padding-inline: var(--gscc-gutter-lg);
	}
}

.gscc-stat {
	display: flex;
	flex-direction: column;
	gap: var(--gscc-space-2);
}

.gscc-stat p {
	max-width: none;
	margin: 0;
}

.gscc-stat__number {
	font-family: var(--gscc-font-mono);
	font-size: clamp(2.25rem, 4vw + 1rem, var(--gscc-text-3xl));
	font-weight: var(--gscc-weight-semi);
	color: var(--gscc-navy);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.gscc-stat__label {
	font-family: var(--gscc-font-body);
	font-size: var(--gscc-text-sm);
	text-transform: uppercase;
	letter-spacing: var(--gscc-tracking-caps);
	color: var(--gscc-ink-muted);
	font-weight: var(--gscc-weight-semi);
}

.gscc-stat__detail {
	font-family: var(--gscc-font-body);
	font-size: var(--gscc-text-base);
	color: var(--gscc-ink-muted);
	line-height: var(--gscc-lh-snug);
}

/* Feature grid — responsive card grid for parallel offerings.
   Author as a wp:group with className="gscc-feature-grid", containing
   inner wp:group blocks with className="gscc-feature".
   Each feature has an h3 title and a paragraph body. Auto-fits
   between 2 and 4 columns depending on viewport width. */
.gscc-feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--gscc-space-5);
	margin-block: var(--gscc-space-8);
}

.gscc-feature {
	background: #ffffff;
	border: var(--gscc-border);
	border-top: 3px solid var(--gscc-gold);
	padding: var(--gscc-space-6);
	display: flex;
	flex-direction: column;
	gap: var(--gscc-space-3);
	transition: transform var(--gscc-duration-base) var(--gscc-ease-standard),
	            box-shadow var(--gscc-duration-base) var(--gscc-ease-standard);
}

.gscc-feature:hover {
	transform: translateY(-2px);
	box-shadow: var(--gscc-shadow-md);
}

.gscc-feature h3,
.gscc-feature .wp-block-heading {
	margin: 0;
	font-family: var(--gscc-font-display);
	font-size: var(--gscc-text-xl);
	font-weight: var(--gscc-weight-bold);
	color: var(--gscc-navy);
	line-height: var(--gscc-lh-snug);
	letter-spacing: -0.01em;
}

.gscc-feature p {
	margin: 0;
	max-width: none;
	font-size: var(--gscc-text-base);
	color: var(--gscc-ink-muted);
	line-height: var(--gscc-lh-relaxed);
}

/* CTA band — full-bleed navy section for strong calls-to-action.
   Author as a wp:group with align=full and className="gscc-cta-band",
   containing an inner wp:group with className="gscc-cta-band__inner".
   Inside: optional .gscc-eyebrow, h2, paragraph, wp:buttons. */
.gscc-cta-band {
	background: var(--gscc-navy);
	color: var(--gscc-cream);
	padding: var(--gscc-space-9) 0;
	margin: var(--gscc-space-9) 0 0;
}

.gscc-cta-band .gscc-cta-band__inner {
	max-width: var(--gscc-max-width);
	margin-inline: auto;
	padding: 0 var(--gscc-gutter);
	text-align: center;
}

@media (min-width: 900px) {
	.gscc-cta-band {
		padding: var(--gscc-space-10) 0;
	}

	.gscc-cta-band .gscc-cta-band__inner {
		padding-inline: var(--gscc-gutter-lg);
	}
}

.gscc-cta-band h2,
.gscc-cta-band .wp-block-heading {
	color: var(--gscc-cream);
	font-size: clamp(2rem, 4vw + 1rem, var(--gscc-text-3xl));
	font-weight: var(--gscc-weight-black);
	max-width: 22ch;
	margin: 0 auto var(--gscc-space-5);
	line-height: var(--gscc-lh-tight);
}

.gscc-cta-band p {
	color: rgba(247, 243, 236, 0.78);
	max-width: 56ch;
	margin: 0 auto var(--gscc-space-6);
	font-size: var(--gscc-text-lg);
	line-height: var(--gscc-lh-relaxed);
}

.gscc-cta-band .gscc-eyebrow {
	color: var(--gscc-gold-light);
	margin-bottom: var(--gscc-space-4);
}

.gscc-cta-band .gscc-eyebrow::before {
	background: var(--gscc-gold-light);
}

.gscc-cta-band .wp-block-buttons {
	justify-content: center;
	margin-top: var(--gscc-space-5);
}

.gscc-cta-band .wp-block-button__link {
	background: var(--gscc-gold);
	border-color: var(--gscc-gold);
	color: var(--gscc-navy);
}

.gscc-cta-band .wp-block-button__link:hover,
.gscc-cta-band .wp-block-button__link:focus-visible {
	background: var(--gscc-cream);
	border-color: var(--gscc-cream);
	color: var(--gscc-navy);
}

/* Hero — home variant. Taller, more dramatic landing band.
   Combine with .gscc-hero--navy for the dark statement treatment. */
.gscc-hero--home {
	padding: var(--gscc-space-9) 0;
}

@media (min-width: 900px) {
	.gscc-hero--home {
		padding: var(--gscc-space-10) 0;
		min-height: 68vh;
		display: flex !important;
		align-items: center;
	}
}

/* Buttons inside the hero — align left (unlike CTA band which is centered). */
.gscc-hero .wp-block-buttons {
	margin-top: var(--gscc-space-6);
	gap: var(--gscc-space-3);
}

/* Navy hero button styling — primary (gold filled) + outline (cream border). */
.gscc-hero--navy .wp-block-button__link {
	background: var(--gscc-gold);
	border-color: var(--gscc-gold);
	color: var(--gscc-navy);
}

.gscc-hero--navy .wp-block-button__link:hover,
.gscc-hero--navy .wp-block-button__link:focus-visible {
	background: var(--gscc-cream);
	border-color: var(--gscc-cream);
	color: var(--gscc-navy);
}

/* Outline variant — needs high specificity to beat Astra's inline rule
   `.wp-block-button.is-style-outline>.wp-block-button__link.wp-element-button:not(.has-background)`
   which forces ast-global-color-0 (now gold) as the background. */
.gscc-hero--navy .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:not(.has-background),
.gscc-hero--navy .wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--gscc-cream);
	color: var(--gscc-cream);
}

.gscc-hero--navy .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:not(.has-background):hover,
.gscc-hero--navy .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.gscc-hero--navy .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background: var(--gscc-cream);
	border-color: var(--gscc-cream);
	color: var(--gscc-navy);
}

/* Feature card — linked title variant.
   When the h3 inside a .gscc-feature contains an <a>, treat the whole card
   as a navigable portal. The arrow slides forward on hover. */
.gscc-feature h3 a,
.gscc-feature .wp-block-heading a {
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: baseline;
	gap: var(--gscc-space-2);
}

.gscc-feature h3 a::after,
.gscc-feature .wp-block-heading a::after {
	content: '→';
	font-family: var(--gscc-font-mono);
	color: var(--gscc-gold);
	font-weight: var(--gscc-weight-regular);
	transition: transform var(--gscc-duration-base) var(--gscc-ease-standard);
}

.gscc-feature:hover h3 a::after,
.gscc-feature:focus-within h3 a::after {
	transform: translateX(6px);
}

.gscc-feature h3 a:focus-visible {
	outline: 2px solid var(--gscc-gold);
	outline-offset: 4px;
}

/* Image placeholder — stands in for an unset image during development.
   Replace the wp:group with className="gscc-image-placeholder" with a real
   wp:image or wp:cover block when an actual image is available.
   Variants: --wide (21:9), --tall (4:5), --square (1:1). */
.gscc-image-placeholder {
	background: var(--gscc-cream-dark);
	border: 2px dashed var(--gscc-grey);
	border-radius: var(--gscc-radius-md);
	min-height: 240px;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--gscc-space-2);
	padding: var(--gscc-space-7);
	margin-block: var(--gscc-space-6);
}

.gscc-image-placeholder > * {
	max-width: none;
	text-align: center;
	margin: 0;
}

.gscc-image-placeholder__label {
	font-family: var(--gscc-font-mono);
	font-size: var(--gscc-text-sm);
	text-transform: uppercase;
	letter-spacing: var(--gscc-tracking-caps);
	color: var(--gscc-gold-dark);
	font-weight: var(--gscc-weight-semi);
}

.gscc-image-placeholder__hint {
	font-size: var(--gscc-text-xs);
	color: var(--gscc-ink-muted);
	font-family: var(--gscc-font-body);
}

.gscc-image-placeholder--wide {
	aspect-ratio: 21 / 9;
	min-height: 0;
}

.gscc-image-placeholder--tall {
	aspect-ratio: 4 / 5;
	min-height: 0;
}

.gscc-image-placeholder--square {
	aspect-ratio: 1 / 1;
	min-height: 0;
}

/* When a placeholder is the alignfull banner, give it some margin separation */
.gscc-image-placeholder.alignfull {
	margin-block: 0;
	border-left: none;
	border-right: none;
	border-radius: 0;
}

/* Hero banner image — full-bleed photo between sections.
   Constrain max-height so a tall-aspect source doesn't blow up the layout.
   Margin-block: 0 keeps the image itself from adding space. */
.wp-block-image.gscc-hero-banner,
.gscc-hero-banner,
figure.wp-block-image.alignfull {
	margin-block: 0;
}

.gscc-hero-banner img {
	width: 100%;
	max-height: 640px;
	object-fit: cover;
	display: block;
}

/* Collapse cream bands around full-bleed banner images.
   The image itself has no margin, but the hero above has margin-bottom
   and sections below (stat grid, CTA band, etc.) have margin-top.
   Rules below pull the image up and flatten the next section down. */
.gscc-hero + figure.wp-block-image.alignfull,
.gscc-hero + .wp-block-image.gscc-hero-banner {
	margin-top: calc(-1 * var(--gscc-space-8));
}

figure.wp-block-image.alignfull + .wp-block-columns,
figure.wp-block-image.alignfull + .wp-block-group,
figure.wp-block-image.alignfull + .gscc-cta-band,
.gscc-hero-banner + .wp-block-columns.gscc-stat-grid,
.gscc-hero-banner + .gscc-cta-band {
	margin-top: 0;
}

/* Section preceding a banner loses its bottom margin, so the banner
   sits flush against it (covers the 2nd home-page banner case). */
.wp-block-group:has(+ figure.wp-block-image.alignfull),
.wp-block-columns:has(+ figure.wp-block-image.alignfull),
.gscc-feature-grid:has(+ figure.wp-block-image.alignfull),
.gscc-feature-grid:has(+ .gscc-hero-banner) {
	margin-bottom: 0;
}

/* Split-section image — in a column, natural width, capped height.
   Subtle rounded corner so it reads as a composed editorial element. */
.gscc-split-image {
	margin-block: 0;
}

.gscc-split-image img {
	width: 100%;
	max-height: 640px;
	object-fit: cover;
	display: block;
	border-radius: var(--gscc-radius-md);
}

/* Site footer — rendered by themes/gscc-child/footer.php.
   Two-layer composition: editorial main area (navy) + compact bar
   (navy-dark) containing copyright and required legal links.
   Gold top rule distinguishes it from CTA bands which share the navy bg. */
.gscc-site-footer {
	background: var(--gscc-navy);
	color: var(--gscc-cream);
	margin-top: 0;
	border-top: 3px solid var(--gscc-gold);
}

.gscc-site-footer__inner {
	max-width: var(--gscc-max-width);
	margin-inline: auto;
	padding: 0 var(--gscc-gutter);
}

@media (min-width: 900px) {
	.gscc-site-footer__inner {
		padding-inline: var(--gscc-gutter-lg);
	}
}

.gscc-site-footer__main {
	padding: var(--gscc-space-9) 0 var(--gscc-space-8);
}

.gscc-site-footer__columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gscc-space-7);
}

@media (min-width: 700px) {
	.gscc-site-footer__columns {
		grid-template-columns: 1.5fr 1fr 1.2fr;
		gap: var(--gscc-space-7);
	}
}

.gscc-site-footer__heading {
	font-family: var(--gscc-font-display);
	font-size: var(--gscc-text-xl);
	font-weight: var(--gscc-weight-bold);
	color: var(--gscc-cream);
	margin: 0 0 var(--gscc-space-2);
	max-width: none;
	line-height: var(--gscc-lh-snug);
}

.gscc-site-footer__tagline {
	font-family: var(--gscc-font-body);
	font-size: var(--gscc-text-sm);
	color: rgba(247, 243, 236, 0.68);
	margin: 0 0 var(--gscc-space-5);
	line-height: var(--gscc-lh-relaxed);
	max-width: none;
}

.gscc-site-footer__label {
	font-family: var(--gscc-font-mono);
	font-size: var(--gscc-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--gscc-tracking-caps);
	color: var(--gscc-gold-light);
	margin: 0 0 var(--gscc-space-4);
	font-weight: var(--gscc-weight-semi);
	max-width: none;
}

.gscc-site-footer__nav {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--gscc-space-2);
}

.gscc-site-footer__nav li {
	margin: 0;
	line-height: var(--gscc-lh-snug);
}

.gscc-site-footer a {
	color: var(--gscc-cream);
	text-decoration: none;
	transition: color var(--gscc-duration-fast) var(--gscc-ease-standard);
}

.gscc-site-footer a:hover,
.gscc-site-footer a:focus-visible {
	color: var(--gscc-gold-light);
	text-decoration: none;
}

.gscc-site-footer__social {
	display: flex;
	gap: var(--gscc-space-5);
	margin-top: var(--gscc-space-3);
}

.gscc-site-footer__social a {
	font-family: var(--gscc-font-mono);
	font-size: var(--gscc-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--gscc-tracking-caps);
	color: rgba(247, 243, 236, 0.78);
	padding-bottom: 2px;
	border-bottom: 1px solid rgba(201, 162, 39, 0.5);
}

.gscc-site-footer__social a:hover {
	color: var(--gscc-gold-light);
	border-bottom-color: var(--gscc-gold-light);
}

.gscc-site-footer__address {
	font-style: normal;
	font-size: var(--gscc-text-base);
	line-height: var(--gscc-lh-relaxed);
	margin: 0 0 var(--gscc-space-3);
	color: rgba(247, 243, 236, 0.85);
}

.gscc-site-footer__email {
	margin: 0 0 var(--gscc-space-3);
	max-width: none;
}

.gscc-site-footer__training-note {
	font-family: var(--gscc-font-mono);
	font-size: var(--gscc-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--gscc-tracking-caps);
	color: var(--gscc-gold-light);
	margin: 0;
	max-width: none;
}

/* Bottom bar — darker strip with copyright and required legal links */
.gscc-site-footer__bar {
	background: var(--gscc-navy-dark);
	padding: var(--gscc-space-4) 0;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.gscc-site-footer__bar .gscc-site-footer__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--gscc-space-5);
	flex-wrap: wrap;
}

.gscc-site-footer__copyright {
	font-size: var(--gscc-text-sm);
	color: rgba(247, 243, 236, 0.56);
	margin: 0;
	max-width: none;
}

.gscc-site-footer__legal {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: var(--gscc-space-5);
	flex-wrap: wrap;
}

.gscc-site-footer__legal a {
	font-size: var(--gscc-text-sm);
	color: rgba(247, 243, 236, 0.72);
}

@media (max-width: 700px) {
	.gscc-site-footer__bar .gscc-site-footer__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ─────────────────────────────────────────────────────────────────
   5. UTILITIES — sparingly used single-purpose helpers
   ───────────────────────────────────────────────────────────────── */

.gscc-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Skip link — accessibility */
.skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: var(--gscc-navy);
	color: var(--gscc-cream);
	padding: var(--gscc-space-3) var(--gscc-space-4);
	z-index: 999;
	text-decoration: none;
	font-weight: var(--gscc-weight-semi);
}

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

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}