/**
 * SIKER — base layer.
 * Global behaviour plus the small set of typographic utilities the patterns lean on.
 * Anything reusable and visual lives in components.css.
 */

/* --------------------------------------------------------------------------
   Reset / global
   -------------------------------------------------------------------------- */

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

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

img {
	max-width: 100%;
	height: auto;
	display: block;
}

::selection {
	background: var(--ink-900);
	color: var(--paper);
}

/* Focus is never removed. 2px solid ink at 2px offset. */
:focus-visible {
	outline: 2px solid var(--ink-900);
	outline-offset: 2px;
}

.is-dark :focus-visible,
[data-tone="inverse"] :focus-visible {
	outline-color: var(--paper);
}

/* Anything anchored under the sticky header clears it. */
:target,
[id] {
	scroll-margin-top: calc(var(--header-h) + var(--space-5));
}

.siker-skip-link:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.siker-skip-link:focus {
	position: fixed;
	inset: var(--space-3) auto auto var(--space-3);
	z-index: calc(var(--z-modal) + 1);
	padding: var(--space-3) var(--space-5);
	background: var(--ink-900);
	color: var(--paper);
	font: var(--type-button);
	letter-spacing: var(--track-button);
	text-transform: uppercase;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@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;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   Section rhythm
   The site's vertical rhythm is fixed: eyebrow → 16px → title → 20px → support
   → 32px → CTA. Sections breathe at clamp(64px, 8vw, 136px).
   -------------------------------------------------------------------------- */

.siker-section {
	padding-block: var(--section-pad-y);
}

.siker-section--tight {
	padding-block: var(--section-pad-y-tight);
}

.siker-section--flush {
	padding-block: 0;
}

/* The three grounds. A page uses white plus at most one alt band and one
   inverse statement band. */
.siker-ground-alt {
	background: var(--surface-alt);
}

.siker-ground-inverse {
	background: var(--surface-inverse);
	color: var(--text-on-dark-muted);
}

.siker-ground-inverse :where(h1, h2, h3, h4, h5, .siker-display) {
	color: var(--paper);
}

.siker-ground-inverse :where(a:not(.wp-element-button)) {
	color: var(--paper);
}

.siker-ground-inverse :where(a:not(.wp-element-button)):hover {
	color: var(--bronze-300);
}

.siker-ground-inverse .siker-eyebrow {
	color: var(--ink-300);
}

/* Measure helpers. */
.siker-measure {
	max-width: var(--container-text);
}

.siker-measure-narrow {
	max-width: var(--container-narrow);
}

/* --------------------------------------------------------------------------
   Typographic utilities
   -------------------------------------------------------------------------- */

/* Eyebrow: tracked-out uppercase kicker. Bronze-700 only — bronze-500 fails
   4.5:1 at text sizes and is reserved for rules, numerals and 24px icon marks. */
.siker-eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--stack-eyebrow-to-title);
	font: var(--type-eyebrow);
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--text-eyebrow);
}

.siker-eyebrow--rule::before {
	content: "";
	width: 28px;
	height: 1px;
	flex: 0 0 auto;
	background: currentcolor;
	opacity: 0.6;
}

/* Display type: 800 weight, uppercase, tight. The loudest thing on a page. */
.siker-display-1,
.siker-display-2,
.siker-display-3 {
	font-family: var(--font-display);
	letter-spacing: var(--track-display);
	text-transform: uppercase;
	text-wrap: balance;
	margin: 0;
}

.siker-display-1 {
	font: var(--type-display-1);
	letter-spacing: var(--track-display);
	text-transform: uppercase;
}

.siker-display-2 {
	font: var(--type-display-2);
	letter-spacing: var(--track-display);
	text-transform: uppercase;
}

.siker-display-3 {
	font: var(--type-display-3);
	letter-spacing: var(--track-display);
	text-transform: uppercase;
}

.siker-lead {
	font: var(--type-lead);
	color: var(--text-body);
	max-width: var(--container-text);
}

.siker-ground-inverse .siker-lead {
	color: var(--text-on-dark-muted);
}

.siker-caption {
	font: var(--type-caption);
	color: var(--text-muted);
}

.siker-label {
	font: var(--type-label);
	letter-spacing: var(--track-nav);
	text-transform: uppercase;
}

/* Section titles are uppercase; property titles and body copy are sentence case. */
.siker-uppercase {
	text-transform: uppercase;
}

.siker-tabular {
	font-variant-numeric: tabular-nums;
}

/* A single bronze word inside a display headline. */
.siker-accent {
	color: var(--bronze-300);
}

:where(.siker-section, .siker-ground-alt) .siker-accent {
	color: var(--bronze-700);
}

/* --------------------------------------------------------------------------
   Reveal — fades and lifts a block in once, on first intersection.
   Progressive enhancement: without JS the block is simply visible.
   -------------------------------------------------------------------------- */

.siker-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity var(--dur-reveal) var(--ease-out) var(--siker-reveal-delay, 0ms),
		transform var(--dur-reveal) var(--ease-out) var(--siker-reveal-delay, 0ms);
}

.siker-reveal.is-revealed,
.no-js .siker-reveal {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.siker-reveal {
		opacity: 1;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Core block adjustments
   -------------------------------------------------------------------------- */

/* Photography sits on a dark plate so it reads as intentional before it loads. */
.wp-block-image img,
.wp-block-post-featured-image img,
.wp-block-cover__image-background {
	background-color: var(--surface-media);
}

/* Square corners everywhere. */
.wp-block-image img,
.wp-block-post-featured-image img,
.wp-block-cover,
.wp-block-button__link {
	border-radius: var(--radius-none);
}

/* Hairlines, not boxes. */
.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--border-hairline);
	opacity: 1;
	margin-block: var(--space-7);
}

.wp-block-separator.is-style-strong {
	border-top-color: var(--border-strong);
}

.siker-ground-inverse .wp-block-separator {
	border-top-color: var(--border-on-dark);
}

/* Lists read as body copy, not as UI. */
.wp-block-list {
	padding-left: 1.15em;
}

.wp-block-list li {
	margin-block: var(--space-2);
}

/* Core Details, used for every FAQ. */
.wp-block-details {
	border-top: 1px solid var(--border-hairline);
	padding-block: var(--space-5);
}

.wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-height: var(--tap-min);
	cursor: pointer;
	list-style: none;
	font: var(--type-h4);
	font-family: var(--font-display);
	letter-spacing: var(--track-tight);
	color: var(--text-strong);
	transition: var(--transition-control);
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "";
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	border: 1px solid var(--border-hairline);
	border-radius: 50%;
	background: currentcolor;
	mask: var(--siker-icon-plus) center / 16px no-repeat;
	transition:
		transform var(--dur-base) var(--ease-out),
		var(--transition-control);
}

.wp-block-details summary:hover {
	color: var(--bronze-700);
}

.wp-block-details[open] summary::after {
	transform: rotate(45deg);
	border-color: var(--border-strong);
}

.wp-block-details > :not(summary) {
	margin-block: var(--space-4) 0;
	max-width: 62ch;
	font: var(--type-body);
	color: var(--text-body);
}

.siker-ground-inverse .wp-block-details {
	border-top-color: var(--border-on-dark);
}

.siker-ground-inverse .wp-block-details summary {
	color: var(--paper);
}