/*
 * Base — typography scale, containers, focus, global element defaults.
 *
 * Kadence emits its own `h1 { font-size: 44px }`-style rules as inline CSS on
 * the `kadence-global` handle. Every stylesheet here declares that handle as a
 * dependency, so these rules load afterwards and win on source order at equal
 * specificity. That is why the selectors below are deliberately plain elements
 * and why nothing here needs `!important` — do not "strengthen" them.
 */

/* -- Type scale ---------------------------------------------------------- */

body {
	font-family: var(--smi-font-body);
	font-size: var(--smi-text-body);
	line-height: var(--smi-leading-body);
	color: var(--smi-ink);
	background-color: var(--smi-white);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--smi-font-head);
	color: var(--smi-navy);
	font-weight: 600;
	margin-block: 0 var(--smi-space-3);
	text-wrap: balance;
}

h1 {
	font-size: var(--smi-text-h1);
	line-height: var(--smi-leading-tight);
	letter-spacing: var(--smi-track-heading);
}

h2 {
	font-size: var(--smi-text-h2);
	line-height: var(--smi-leading-heading);
	letter-spacing: var(--smi-track-heading);
}

h3 {
	font-size: var(--smi-text-h3);
	line-height: 1.3;
}

h4 {
	font-size: var(--smi-text-h4);
	line-height: 1.35;
}

h5, h6 {
	font-size: var(--smi-text-body);
	line-height: 1.4;
}

/*
 * Display — the hero headline only. Poppins 700 is reserved for this; every
 * other heading is 600, and the contrast between them is what gives the hero
 * its weight without needing a larger size.
 */
.smi-display {
	font-family: var(--smi-font-head);
	font-size: var(--smi-text-display);
	font-weight: 700;
	line-height: var(--smi-leading-tight);
	letter-spacing: var(--smi-track-display);
	color: var(--smi-navy);
	margin-block: 0 var(--smi-space-4);
}

/* Sentence case for headings, not Title Case and not ALL CAPS (§4.3). Caps are
   reserved for eyebrow labels and the logo descriptor. */
.smi-eyebrow {
	display: block;
	font-family: var(--smi-font-body);
	font-size: var(--smi-text-label);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: var(--smi-track-label);
	text-transform: uppercase;
	color: var(--smi-muted);
	margin-block-end: var(--smi-space-2);
}

.smi-lead {
	font-size: var(--smi-text-body-lg);
	line-height: var(--smi-leading-loose);
	color: var(--smi-muted);
}

.smi-meta,
small {
	font-size: var(--smi-text-small);
	line-height: 1.5;
	color: var(--smi-muted);
}

p {
	margin-block: 0 var(--smi-space-3);
}

/* Body copy maxes out at 70 characters per line (§4.3). Applied to prose
   containers, not globally — a specification table wants the full width. */
.smi-prose > p,
.smi-prose > ul,
.smi-prose > ol {
	max-inline-size: var(--smi-measure);
}

/* Numbers in specification tables align vertically down a column (§4.3). */
.smi-specs,
.smi-figure,
table {
	font-variant-numeric: tabular-nums;
}

a {
	color: var(--smi-navy);
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--smi-navy-600);
}

/* -- Focus --------------------------------------------------------------- */

/*
 * WCAG 2.1 AA requires a visible focus state (PRD §10.4). Gold reads clearly
 * against both the white page and the navy header, and the 2px offset keeps it
 * off the element's own border so it stays legible on a bordered input.
 */
:focus-visible {
	outline: 3px solid var(--smi-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Only suppress the default ring where :focus-visible is supported, so keyboard
   users on older browsers keep a focus indicator. */
@supports selector(:focus-visible) {
	:focus:not(:focus-visible) {
		outline: none;
	}
}

.smi-skip-link {
	position: absolute;
	inset-inline-start: var(--smi-space-3);
	inset-block-start: -100px;
	z-index: 999;
	padding: var(--smi-space-2) var(--smi-space-3);
	background: var(--smi-navy);
	color: var(--smi-white);
	border-radius: var(--smi-radius-btn);
	transition: inset-block-start var(--smi-duration) var(--smi-ease);
}

.smi-skip-link:focus {
	inset-block-start: var(--smi-space-3);
	color: var(--smi-white);
}

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

.smi-container {
	inline-size: 100%;
	max-inline-size: var(--smi-container);
	margin-inline: auto;
	padding-inline: var(--smi-space-3);
}

@media (min-width: 640px) {
	.smi-container {
		padding-inline: var(--smi-space-4);
	}
}

/*
 * Page rhythm — one rule owns the gap between the header and the content, and
 * between the content and the footer: 40px on mobile, 80px from 1024px.
 *
 * It lives on Kadence's `main.wrap` because that is the only wrapper every
 * template shares. Anything that used to contribute its own top padding here
 * (the page and archive heroes) is zeroed below, so the two do not stack.
 */
main.wrap {
	padding-block: var(--smi-page-gap);
}

:root {
	--smi-page-gap: 40px;
}

@media (min-width: 1024px) {
	:root {
		--smi-page-gap: 80px;
	}
}

/*
 * The front page is the exception: its hero is a full-bleed navy band that
 * must meet the header with no white gap above it, and every section below
 * carries its own padding.
 */
body.home main.wrap {
	padding-block: 0;
}

.smi-section {
	padding-block: var(--smi-space-6);
}

@media (min-width: 1024px) {
	.smi-section {
		padding-block: var(--smi-space-8);
	}
}

/*
 * Alternating section background — the 60% white / surface split (§3.5).
 *
 * The gradient runs white → surface → white top to bottom, so a surface band
 * meets the white sections on either side without a visible seam. Flat
 * --smi-surface against flat white produces a hard 3%-luminance step across
 * the full page width, which is exactly the kind of edge that makes a layout
 * read as stacked boxes.
 */
.smi-section--surface {
	background-color: var(--smi-surface);
	background-image: linear-gradient(180deg, #FDFDFE 0%, var(--smi-surface) 22%, var(--smi-surface) 78%, #FDFDFE 100%);
}

/*
 * Two surface sections in a row read as one oversized block with a strange gap
 * in the middle. That happens on the home page whenever a listing band between
 * them has no inventory to show, so a hairline keeps the rhythm legible rather
 * than depending on the database being populated.
 */
.smi-section--surface + .smi-section--surface {
	border-block-start: 1px solid var(--smi-border);
}

/*
 * Navy bands get the same treatment as the hero, one step quieter: an accent
 * bloom top-right, a teal bloom bottom-left, over a diagonal ramp. Matching
 * the hero matters — a flat navy CTA halfway down the page next to a graded
 * navy hero reads as two different navies rather than one brand colour.
 */
.smi-section--navy {
	position: relative;
	isolation: isolate;
	background-color: var(--smi-navy);
	background-image:
		radial-gradient(ellipse 55% 70% at 85% 0%, rgba(var(--smi-accent-rgb), .13), transparent 62%),
		radial-gradient(ellipse 50% 60% at 8% 100%, rgba(var(--smi-teal-rgb), .18), transparent 60%),
		linear-gradient(150deg, #154974 0%, var(--smi-navy) 50%, #081F37 100%);
	color: var(--smi-white);
}

/* Hairline top rule so a navy band lands against the white section above with
   an edge rather than a raw colour change. */
.smi-section--navy::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	block-size: 1px;
	background-image: linear-gradient(to right, transparent, rgba(var(--smi-accent-rgb), .45), transparent);
}

.smi-section--navy h1,
.smi-section--navy h2,
.smi-section--navy h3,
.smi-section--navy h4 {
	color: var(--smi-white);
}

.smi-section--navy .smi-eyebrow,
.smi-section--navy .smi-lead,
.smi-section--navy .smi-meta {
	color: rgba(255, 255, 255, .78);
}

.smi-section__head {
	margin-block-end: var(--smi-space-5);
}

/* An accent rule is how the accent appears in a heading — never accent type (§3.4). */
.smi-rule {
	inline-size: 48px;
	block-size: 3px;
	border: 0;
	margin: 0 0 var(--smi-space-3);
	background-color: var(--smi-accent);
	border-radius: var(--smi-radius-pill);
}

/* Responsive grid — 1 / 2 / 3 columns per PRD §10.3. */
.smi-grid {
	display: grid;
	gap: var(--smi-space-4);
	grid-template-columns: 1fr;
}

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

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

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

/* -- Media --------------------------------------------------------------- */

img,
svg,
video {
	max-inline-size: 100%;
	block-size: auto;
}

/* -- Utility ------------------------------------------------------------- */

/*
 * The HTML `hidden` attribute only carries user-agent priority, so any
 * component that sets its own `display` (flex, grid, inline-flex) silently
 * defeats it — which is how a "hidden" Load More button kept rendering under
 * an empty results grid. One global rule makes the attribute mean what every
 * script on this site already assumes it means.
 */
[hidden] {
	display: none !important;
}

.smi-visually-hidden {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.smi-stack > * + * {
	margin-block-start: var(--smi-space-3);
}

/* -- Global polish --------------------------------------------------------
   Small sitewide details. Individually none of these is noticed; together they
   are most of the difference between a themed site and a designed one.
   ------------------------------------------------------------------------ */

/*
 * Selection in brand navy. Left at the browser default this is the one place
 * an OS accent colour (bright blue on Windows, and this audience is largely on
 * Windows and Android) overrides the palette on every page.
 */
::selection {
	background-color: rgba(var(--smi-navy-rgb), .92);
	color: var(--smi-white);
}

/*
 * Anchor jumps land under the sticky header without this. `scroll-behavior` is
 * deliberately NOT set globally — smooth scrolling applies to programmatic
 * scrolls too, which makes the AJAX filter's jump-to-results crawl the length
 * of the page on every filter change.
 */
html {
	scroll-padding-block-start: 96px;
}

/*
 * Scrollbar, Firefox first then WebKit. `color-scheme: light` is what stops
 * Chrome and Edge rendering form controls and the scrollbar in dark mode for
 * visitors with a dark OS theme — the page is a light design and half-dark
 * controls on it look broken.
 */
:root {
	color-scheme: light;
	scrollbar-color: var(--smi-muted-light) var(--smi-surface);
	scrollbar-width: thin;
}

::-webkit-scrollbar {
	inline-size: 12px;
	block-size: 12px;
}

::-webkit-scrollbar-track {
	background-color: var(--smi-surface);
}

::-webkit-scrollbar-thumb {
	background-color: #C2C9D4;
	border: 3px solid var(--smi-surface);
	border-radius: var(--smi-radius-pill);
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--smi-muted-light);
}

/*
 * Images fade in as they decode instead of painting top-to-bottom. Scoped to
 * listing and article imagery — applied globally it would also catch the logo
 * and inline icons, which are usually already cached and would flicker.
 */
.smi-card__media img,
.smi-news-card__media img {
	animation: smi-img-in var(--smi-duration-mid) var(--smi-ease) both;
}

@keyframes smi-img-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.smi-card__media img,
	.smi-news-card__media img {
		animation: none;
	}
}