/**
 * Base: design tokens, light reset and the components shared by all blocks.
 *
 * Loaded on the front end and inside the block editor, so anything here must
 * be safe in both. Header, footer and template styles live in site.css.
 *
 * Breakpoints (min-width): 640px, 768px, 1024px. Header nav switches at 1100px.
 */

/* ---------------------------------------------------------------------------
 * Tokens
 * Colors and fonts come from theme.json so the editor and the CSS agree.
 * ------------------------------------------------------------------------ */

:root {
	--gs-accent: var(--wp--preset--color--accent, #d63200);
	--gs-navy: var(--wp--preset--color--navy, #1e3448);
	--gs-navy-deep: var(--wp--preset--color--navy-deep, #082a40);
	--gs-cream: var(--wp--preset--color--cream, #faf8f5);
	--gs-sand: var(--wp--preset--color--sand, #e8e2d9);
	--gs-white: var(--wp--preset--color--white, #fff);
	--gs-ink: var(--wp--preset--color--ink, #111827);
	--gs-body: var(--wp--preset--color--body, #4b5563);
	--gs-muted: var(--wp--preset--color--muted, #6b7280);

	--gs-font-heading: var(--wp--preset--font-family--heading, Manrope, system-ui, sans-serif);
	--gs-font-body: var(--wp--preset--font-family--body, Inter, system-ui, sans-serif);

	--gs-gutter: 1.5rem;
	--gs-max: 1920px;
	--gs-prose: 768px;
	--gs-wide: 1200px;
	--gs-header-h: 72px;

	--gs-radius: 0.375rem;
	--gs-radius-card: 0.25rem;
	--gs-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--gs-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--gs-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
	--gs-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--gs-ease-out: cubic-bezier(0, 0, 0.2, 1);
}

@media (min-width: 768px) {
	:root {
		--gs-gutter: 3rem;
	}
}

@media (min-width: 1100px) {
	:root {
		--gs-header-h: 80px;
	}
}

/* ---------------------------------------------------------------------------
 * Reset
 * Scoped to theme components so plugin output keeps its own defaults.
 * ------------------------------------------------------------------------ */

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

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

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

a {
	color: inherit;
}

::selection {
	background: var(--gs-accent);
	color: #fff;
}

:where(.gs-section, .gs-header, .gs-footer, .gs-page-header, .gs-archive) :where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, address) {
	margin: 0;
}

:where(.gs-section, .gs-header, .gs-footer) :where(ul, ol) {
	padding: 0;
	list-style: none;
}

:where(.gs-section, .gs-header, .gs-footer, .gs-page-header, .gs-archive) :where(a) {
	text-decoration: none;
}

:where(.gs-section, .gs-header, .gs-footer) :focus-visible,
.gs-btn:focus-visible,
.gs-text-link:focus-visible {
	outline: 2px solid var(--gs-accent);
	outline-offset: 3px;
}

.gs-icon {
	flex-shrink: 0;
}

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

/* ---------------------------------------------------------------------------
 * Layout
 * ------------------------------------------------------------------------ */

/* Every section block uses this as its outer element. */
.gs-section {
	position: relative;
	padding-inline: var(--gs-gutter);
	overflow: hidden;
}

.gs-container {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--gs-max);
	margin-inline: auto;
}

/* Full bleed decorative layer behind a section's content. */
.gs-section__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.gs-section__bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
 * Type components
 * ------------------------------------------------------------------------ */

.gs-eyebrow {
	display: block;
	margin-bottom: 1rem;
	font-family: var(--gs-font-body);
	font-size: 0.6875rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--gs-navy) 60%, transparent);
}

.gs-heading {
	margin: 0;
	font-family: var(--gs-font-heading);
	font-weight: 800;
	letter-spacing: -0.05em;
	text-transform: uppercase;
	color: var(--gs-navy);
}

.gs-heading--lg {
	margin-bottom: 1.5rem;
	font-size: 2.25rem;
	line-height: 1;
}

.gs-heading--md {
	margin-bottom: 1rem;
	font-size: 1.875rem;
	line-height: 2.25rem;
}

@media (min-width: 768px) {
	.gs-heading--lg {
		font-size: 3rem;
	}

	.gs-heading--md {
		font-size: 2.25rem;
		line-height: 2.5rem;
	}
}

.gs-accent {
	color: var(--gs-accent);
}

/* Short accent bar under a heading. */
.gs-rule {
	display: block;
	width: 3rem;
	height: 3px;
	margin-bottom: 1.5rem;
	background: var(--gs-accent);
}

/* Thinner bar used inside cards and the footer. */
.gs-dash {
	display: block;
	width: 2rem;
	height: 2px;
	background: var(--gs-accent);
}

.gs-dash--muted {
	background: color-mix(in srgb, var(--gs-accent) 40%, transparent);
}

.gs-lead {
	max-width: 48rem;
	font-size: 1.125rem;
	line-height: 1.625;
	color: var(--gs-muted);
}

.gs-section-heading > :last-child {
	margin-bottom: 0;
}

.gs-section-heading--center {
	text-align: center;
}

.gs-section-heading--center .gs-rule,
.gs-section-heading--center .gs-lead {
	margin-inline: auto;
}

/* Dark sections. */
.gs-section--dark {
	background: var(--gs-navy-deep);
	color: #fff;
}

.gs-section--dark .gs-eyebrow {
	color: rgb(255 255 255 / 0.5);
}

.gs-section--dark .gs-heading {
	color: #fff;
}

.gs-section--dark .gs-lead {
	color: rgb(255 255 255 / 0.6);
}

/* ---------------------------------------------------------------------------
 * Buttons and links
 * ------------------------------------------------------------------------ */

.gs-btn {
	display: inline-block;
	padding: 1rem 2rem;
	border: 0;
	border-radius: var(--gs-radius);
	background: var(--gs-accent);
	color: #fff;
	font-family: var(--gs-font-heading);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.25rem;
	letter-spacing: 0.1em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: filter 0.15s var(--gs-ease), box-shadow 0.3s var(--gs-ease), transform 0.15s var(--gs-ease), background-color 0.3s var(--gs-ease), color 0.3s var(--gs-ease);
}

.gs-btn:hover {
	filter: brightness(1.1);
}

.gs-btn--sm {
	padding: 0.75rem 1.5rem;
	font-size: 0.75rem;
	line-height: 1rem;
}

.gs-btn--sm:hover,
.gs-btn--block:hover {
	box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--gs-accent) 20%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--gs-accent) 20%, transparent);
}

.gs-btn--sm:active {
	transform: scale(0.95);
}

.gs-btn--block {
	display: block;
	width: 100%;
	padding: 1rem;
	font-size: 0.75rem;
	line-height: 1rem;
	letter-spacing: 0.2em;
}

.gs-btn--outline {
	background: transparent;
	color: var(--gs-navy);
	box-shadow: inset 0 0 0 2px var(--gs-navy);
}

.gs-btn--outline:hover {
	background: var(--gs-navy);
	color: #fff;
	filter: none;
}

.gs-section--dark .gs-btn--outline {
	color: #fff;
	box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.6);
}

.gs-section--dark .gs-btn--outline:hover {
	background: #fff;
	color: var(--gs-navy);
}

.gs-text-link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--gs-accent);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.25rem;
	white-space: nowrap;
	text-decoration: none;
	transition: color 0.15s var(--gs-ease);
}

.gs-text-link:hover {
	color: color-mix(in srgb, var(--gs-accent) 80%, transparent);
}

/* ---------------------------------------------------------------------------
 * Scroll reveal
 * Only active when site.js is running (html.js). Never in the editor.
 * ------------------------------------------------------------------------ */

html.js [data-gs-reveal] {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.7s var(--gs-ease-out), transform 0.7s var(--gs-ease-out);
}

html.js [data-gs-reveal="left"] {
	transform: translateX(-30px);
}

html.js [data-gs-reveal="right"] {
	transform: translateX(20px);
}

html.js [data-gs-reveal].is-visible,
html.js.gs-no-reveal [data-gs-reveal] {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html.js [data-gs-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------------
 * Text content between sections (core blocks)
 * The same rules style the editor canvas through .is-root-container.
 * ------------------------------------------------------------------------ */

/* Left aligned with the section content, like the rest of the design. */
.gs-entry__content > :where(:not(.gs-section)) {
	width: min(100% - 2 * var(--gs-gutter), var(--gs-prose));
	margin-block: 1.5rem;
	margin-right: auto;
	margin-left: max(var(--gs-gutter), (100% - var(--gs-max)) / 2);
}

.gs-entry__content > :where(.alignwide) {
	width: min(100% - 2 * var(--gs-gutter), var(--gs-wide));
}

.gs-entry__content > :where(.alignfull) {
	width: 100%;
	margin-inline: 0;
}

.gs-entry__content > :where(:not(.gs-section)):first-child {
	margin-top: 4rem;
}

.gs-entry__content > :where(:not(.gs-section)):last-child {
	margin-bottom: 7rem;
}

.gs-entry__content > .gs-section + :where(:not(.gs-section)) {
	margin-top: 5rem;
}

.gs-entry__content > :where(:not(.gs-section)):has(+ .gs-section) {
	margin-bottom: 5rem;
}

:is(.gs-entry__content, .is-root-container) > :is(p, ul, ol, table, figure, blockquote) {
	color: var(--gs-body);
	font-size: 1.125rem;
	line-height: 1.625;
}

:is(.gs-entry__content, .is-root-container) > :is(h1, h2, h3, h4, h5, h6) {
	margin-top: 3rem;
	font-family: var(--gs-font-heading);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
	color: var(--gs-navy);
}

:is(.gs-entry__content, .is-root-container) > h1 {
	font-size: 2.25rem;
}

:is(.gs-entry__content, .is-root-container) > h2 {
	font-size: 1.875rem;
}

:is(.gs-entry__content, .is-root-container) > h3 {
	font-size: 1.5rem;
}

:is(.gs-entry__content, .is-root-container) > :is(h4, h5, h6) {
	font-size: 1.125rem;
	letter-spacing: 0;
}

:is(.gs-entry__content, .is-root-container) > :is(p, ul, ol, blockquote) a {
	color: var(--gs-accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

:is(.gs-entry__content, .is-root-container) > :is(ul, ol) {
	padding-left: 1.25em;
}

:is(.gs-entry__content, .is-root-container) > :is(ul, ol) li + li {
	margin-top: 0.5em;
}

:is(.gs-entry__content, .is-root-container) > blockquote {
	padding: 0.25rem 0 0.25rem 1.5rem;
	border-left: 3px solid var(--gs-accent);
	color: var(--gs-navy);
}

:is(.gs-entry__content, .is-root-container) > blockquote cite {
	display: block;
	margin-top: 0.75rem;
	font-size: 0.875rem;
	font-style: normal;
	color: var(--gs-muted);
}

:is(.gs-entry__content, .is-root-container) > .wp-block-image img {
	border-radius: var(--gs-radius-card);
}

:is(.gs-entry__content, .is-root-container) > .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
}

:is(.gs-entry__content, .is-root-container) > .wp-block-table :is(th, td) {
	padding: 0.75rem 1rem;
	border: 1px solid var(--gs-sand);
	text-align: left;
}

:is(.gs-entry__content, .is-root-container) > .wp-block-table th {
	background: var(--gs-cream);
	font-family: var(--gs-font-heading);
	color: var(--gs-navy);
}

:is(.gs-entry__content, .is-root-container) > hr {
	height: 1px;
	border: 0;
	background: var(--gs-sand);
}

/* ---------------------------------------------------------------------------
 * Editor placeholder for empty blocks
 * ------------------------------------------------------------------------ */

.gs-placeholder {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 2rem;
	border: 1px dashed var(--gs-sand);
	border-radius: var(--gs-radius-card);
	background: #fff;
	color: var(--gs-muted);
	font-family: var(--gs-font-body);
	font-size: 0.875rem;
	text-align: center;
}

.gs-placeholder strong {
	font-family: var(--gs-font-heading);
	color: var(--gs-navy);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}