/*
 * Reset, typography base, container, and shared primitives (buttons, focus,
 * screen-reader utilities). Section-specific styles live in their own files.
 */

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

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

body {
	margin: 0;
	background: var(--ark-bg-900);
	color: var(--ark-text-primary);
	font-family: var(--ark-font-sans);
	font-size: var(--ark-fs-body);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/* Reserves space for the fixed-bottom cookie banner (assets/js/cookie-consent.js
   keeps --cookie-banner-height current) so its content never renders hidden
   underneath it while the banner is visible. */
#primary.site-main {
	padding-bottom: var(--cookie-banner-height);
	transition: padding-bottom 200ms var(--ark-ease);
}

img,
svg {
	display: block;
	max-width: 100%;
}

h1,
h2,
h3,
h4 {
	font-family: var(--ark-font-sans);
	font-weight: 600;
	line-height: 1.15;
	color: var(--ark-text-primary);
	margin: 0 0 0.5em;
}

p {
	margin: 0 0 1em;
	color: var(--ark-text-secondary);
}

a {
	color: inherit;
	text-decoration: none;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Container — DESIGN.md §9 */
.container {
	max-width: var(--ark-container-max);
	width: calc(100% - var(--ark-container-pad) * 2);
	margin-inline: auto;
}

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

/* Honeypot field — hidden from sighted and assistive users, never removed from the DOM/tab flow via display:none (which some bots skip filling anyway, but this avoids an empty visible block regressing if the rule is ever dropped). */
.ark-hp-field {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: fixed;
	top: -100px;
	left: 16px;
	z-index: 1000;
	background: var(--ark-surface-700);
	color: var(--ark-text-primary);
	padding: 12px 20px;
	border-radius: var(--ark-radius-sm);
	transition: top 150ms var(--ark-ease);
}

.skip-link:focus {
	top: 16px;
	width: auto;
	height: auto;
	clip: auto;
	overflow: visible;
}

:focus-visible {
	outline: 2px solid var(--ark-border-titanium);
	outline-offset: 2px;
}

/* Buttons — Machined Titanium primary, ghost secondary (DESIGN.md §5–6) */
.ark-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 50px;
	padding-inline: 28px;
	border-radius: var(--ark-radius-md);
	border: 1px solid transparent;
	font-family: var(--ark-font-sans);
	font-weight: 600;
	font-size: 0.95rem;
	white-space: nowrap;
	cursor: pointer;
	transition:
		transform 150ms var(--ark-ease),
		background 150ms var(--ark-ease),
		border-color 150ms var(--ark-ease);
}

/*
 * The [hidden] attribute's UA-stylesheet `display:none` loses to ANY
 * author rule that sets display on the same element at equal specificity
 * (author origin always beats UA origin) — so `.ark-btn` alone silently
 * un-hides a hidden button. Restore it explicitly wherever `.ark-btn` is used.
 */
.ark-btn[hidden] {
	display: none;
}

.ark-btn--primary {
	background: var(--ark-cta-primary-bg);
	border-color: var(--ark-cta-primary-border);
	color: #FFFFFF;
	font-weight: 700;
	/* Micro-effect only — contrast itself comes from the gradient stops (tokens.css). */
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.22);
	box-shadow: var(--ark-cta-primary-shadow);
}

.ark-btn--primary:hover,
.ark-btn--primary:focus-visible {
	background: var(--ark-cta-primary-bg-hover);
	transform: translateY(-1px);
}

.ark-btn--secondary {
	background: rgba(7, 17, 26, 0.35);
	border-color: rgba(166, 159, 147, 0.55);
	color: var(--ark-text-primary);
}

.ark-btn--secondary:hover,
.ark-btn--secondary:focus-visible {
	background: rgba(166, 159, 147, 0.08);
	border-color: rgba(184, 176, 166, 0.75);
}

/*
 * Explicit personal-data consent control — template-parts/shared/
 * consent-checkbox.php, reused by every PII-collecting lead form.
 * Shared here (not a page-specific stylesheet) because the partial itself
 * is used across 7 different form templates/pages. Layout/error-color
 * match the pattern solutions-calculator.css established first.
 */
.ark-consent {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px 10px;
	margin: 14px 0;
}

.ark-consent input[type="checkbox"] {
	flex-shrink: 0;
	margin-top: 3px;
	accent-color: var(--ark-text-primary);
}

.ark-consent label {
	flex: 1 1 240px;
	font-size: 0.85rem;
	color: var(--ark-text-secondary);
}

.ark-consent label a {
	color: var(--ark-text-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ark-consent input[aria-invalid="true"] {
	outline: 2px solid #C7593F;
	outline-offset: 2px;
}

.ark-consent__error {
	flex-basis: 100%;
	margin: 4px 0 0;
	font-size: 0.8rem;
	color: #C7593F;
}

.ark-consent__error[hidden] {
	display: none;
}

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