/**
 * Teal Horizon — foundation.
 *
 * Base element styling, the typographic scale, layout primitives and the small
 * utility set the templates rely on.
 */

/* ---------------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------------ */

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

@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;
	}
}

body {
	background-color: var(--glc-background);
	color: var(--glc-on-background);
	font-family: var(--glc-font-body);
	font-size: var(--glc-text-base);
	line-height: var(--glc-leading-relaxed);
	font-weight: var(--glc-weight-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background-color: var(--glc-primary-fixed);
	color: var(--glc-on-primary-fixed);
}

/* ---------------------------------------------------------------------------
 * Typography
 * ------------------------------------------------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6,
.glc-headline {
	font-family: var(--glc-font-headline);
	color: var(--glc-on-background);
	line-height: var(--glc-leading-tight);
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.5rem, 1.6rem + 3.6vw, var(--glc-text-6xl));
	font-weight: var(--glc-weight-extrabold);
	letter-spacing: var(--glc-tracking-tighter);
	line-height: var(--glc-leading-display);
}

h2 {
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, var(--glc-text-3xl));
	font-weight: var(--glc-weight-bold);
	letter-spacing: var(--glc-tracking-tight);
}

h3 {
	font-size: var(--glc-text-xl);
	font-weight: var(--glc-weight-semibold);
	letter-spacing: var(--glc-tracking-tight);
}

h4 {
	font-size: var(--glc-text-lg);
	font-weight: var(--glc-weight-bold);
}

h5,
h6 {
	font-size: var(--glc-text-sm);
	font-weight: var(--glc-weight-bold);
}

/**
 * Comfortable measure for long-form copy only. Applying this to every <p>
 * would fight wide and full-width blocks, so it is scoped to prose contexts.
 */
.entry-content > p,
.glc-prose p {
	max-width: var(--glc-measure);
}

a {
	color: var(--glc-primary);
	text-decoration: none;
	transition: color var(--glc-duration) var(--glc-ease), opacity var(--glc-duration) var(--glc-ease);
}

a:hover,
a:focus-visible {
	color: var(--glc-surface-tint);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--glc-primary);
	outline-offset: 3px;
	border-radius: var(--glc-radius-lg);
}

blockquote {
	border-left: 3px solid var(--glc-primary-fixed-dim);
	padding-left: var(--glc-gutter);
	font-style: italic;
	color: var(--glc-secondary);
}

code,
kbd,
pre,
samp,
.glc-mono {
	font-family: var(--glc-font-mono);
}

hr {
	border: 0;
	height: 1px;
	background-color: color-mix(in srgb, var(--glc-outline-variant) 30%, transparent);
}

/* Type scale utilities — display sizes that sit outside the heading defaults. */

.glc-display-lg {
	font-family: var(--glc-font-headline);
	font-size: clamp(2.25rem, 1.5rem + 3vw, var(--glc-text-5xl));
	font-weight: var(--glc-weight-extrabold);
	letter-spacing: var(--glc-tracking-tighter);
	line-height: var(--glc-leading-display);
}

.glc-headline-md {
	font-family: var(--glc-font-headline);
	font-size: var(--glc-text-3xl);
	font-weight: var(--glc-weight-bold);
	letter-spacing: var(--glc-tracking-tight);
}

.glc-headline-sm {
	font-family: var(--glc-font-headline);
	font-size: var(--glc-text-xl);
	font-weight: var(--glc-weight-semibold);
	letter-spacing: var(--glc-tracking-tight);
}

.glc-body-lg {
	font-size: var(--glc-text-lg);
	line-height: var(--glc-leading-relaxed);
}

.glc-lead {
	font-size: var(--glc-text-lg);
	line-height: var(--glc-leading-relaxed);
	color: var(--glc-secondary);
	max-width: 36rem;
}

/**
 * Eyebrow — the small uppercase kicker above headings and inside cards.
 * Modifiers change colour only; size and tracking stay constant so that
 * stacked eyebrows across sections align optically.
 */
.glc-eyebrow {
	display: block;
	font-family: var(--glc-font-label);
	font-size: var(--glc-text-xs);
	font-weight: var(--glc-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--glc-tracking-eyebrow);
	color: var(--glc-primary);
}

.glc-eyebrow--micro {
	font-size: var(--glc-text-micro);
	letter-spacing: var(--glc-tracking-widest);
}

.glc-eyebrow--muted {
	color: var(--glc-secondary);
}

.glc-caption {
	font-size: var(--glc-text-sm);
	color: var(--glc-secondary);
	line-height: var(--glc-leading-normal);
}

.glc-caption--xs {
	font-size: var(--glc-text-xs);
}

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

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

@media (min-width: 768px) {
	.glc-container {
		padding-inline: var(--glc-gutter);
	}
}

.glc-container--narrow {
	max-width: 48rem;
}

.glc-main {
	padding-block: clamp(3rem, 1.5rem + 6vw, 5rem);
}

.glc-section {
	margin-bottom: clamp(4rem, 2rem + 8vw, var(--glc-section-gap));
}

/**
 * Section header — numbered title with a rule that fills the remaining space.
 * The rule is a flex child rather than a pseudo-element so it reflows cleanly
 * when the title wraps on narrow viewports.
 */
.glc-section__header {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: 3rem;
}

.glc-section__title {
	font-family: var(--glc-font-headline);
	font-size: var(--glc-text-3xl);
	font-weight: var(--glc-weight-bold);
	letter-spacing: var(--glc-tracking-tight);
	color: var(--glc-primary);
	margin: 0;
}

.glc-section__rule {
	flex: 1 1 auto;
	height: 1px;
	background-color: color-mix(in srgb, var(--glc-outline-variant) 30%, transparent);
}

/**
 * Editorial grid — the 12-column asymmetric grid from the source design.
 * Collapses to a single column below the medium breakpoint; children opt into
 * spans with .glc-col-N (medium and up only).
 */
.glc-editorial-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--glc-grid-gap);
}

@media (min-width: 768px) {
	.glc-editorial-grid {
		grid-template-columns: repeat(12, 1fr);
	}

	.glc-col-1 { grid-column: span 1; }
	.glc-col-2 { grid-column: span 2; }
	.glc-col-3 { grid-column: span 3; }
	.glc-col-4 { grid-column: span 4; }
	.glc-col-5 { grid-column: span 5; }
	.glc-col-6 { grid-column: span 6; }
	.glc-col-7 { grid-column: span 7; }
	.glc-col-8 { grid-column: span 8; }
	.glc-col-9 { grid-column: span 9; }
	.glc-col-10 { grid-column: span 10; }
	.glc-col-11 { grid-column: span 11; }
	.glc-col-12 { grid-column: span 12; }
}

/* Auto-fitting grids for card rows. */

.glc-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.glc-grid--2,
	.glc-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.glc-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.glc-grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.glc-grid--split {
		grid-template-columns: repeat(2, 1fr);
		gap: 4rem;
		align-items: start;
	}
}

.glc-stack {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.glc-stack--md {
	gap: 1.5rem;
}

.glc-stack--lg {
	gap: 3rem;
}

.glc-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
}

.glc-cluster--tight {
	gap: 0.5rem;
}

/* ---------------------------------------------------------------------------
 * Utilities
 * ------------------------------------------------------------------------ */

.glc-surface-lowest { background-color: var(--glc-surface-container-lowest); }
.glc-surface-low { background-color: var(--glc-surface-container-low); }
.glc-surface { background-color: var(--glc-surface-container); }
.glc-surface-high { background-color: var(--glc-surface-container-high); }
.glc-surface-highest { background-color: var(--glc-surface-container-highest); }

.glc-text-primary { color: var(--glc-primary); }
.glc-text-secondary { color: var(--glc-secondary); }
.glc-text-on-background { color: var(--glc-on-background); }

.glc-measure-none { max-width: none; }

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

.material-symbols-outlined {
	font-family: "Material Symbols Outlined";
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
}