/* Base layer — element defaults + layout primitives + buttons.
   Depends on tokens.css. Prefix everything OHC-facing with .ohc- to stay
   collision-free when merged into the Bootstrap/Canvas-themed production site. */

:where(.ohc-scope, .ohc-scope *, .ohc-scope *::before, .ohc-scope *::after) { box-sizing: border-box; }

.ohc-scope {
	margin: 0;
	color: var(--ohc-ink);
	background: var(--ohc-surface);
	font-family: var(--ohc-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* :where() keeps the default link styling at zero specificity, so component
   rules (.ohc-brand, .ohc-btn, .ohc-foot a, …) win without needing overrides.
   --ohc-acc-text is a darker teal that clears WCAG AA on a light ground. */
:where(.ohc-scope) a { color: var(--ohc-acc-text); text-decoration: none; }
:where(.ohc-scope) a:hover { text-decoration: underline; }
.ohc-scope img { max-width: 100%; height: auto; }

.ohc-scope :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--ohc-acc-text);
	outline-offset: 3px;
	border-radius: 3px;
}

.ohc-wrap { max-width: var(--ohc-maxw); margin: 0 auto; padding: 0 var(--ohc-pad); }
.ohc-section { padding: var(--ohc-s-9) 0; }
.ohc-band-paper { background: var(--ohc-paper); }

/* Accessible-name-only content: visible to screen readers, removed from layout. */
.ohc-visually-hidden {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.ohc-kicker {
	display: inline-block;
	font-family: var(--ohc-font-mono);
	font-size: var(--ohc-fs-xs);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ohc-acc-text);
	font-weight: 700;
	margin-bottom: var(--ohc-s-3);
}

.ohc-h1 {
	font-family: var(--ohc-font-display);
	font-weight: 700;
	font-size: var(--ohc-fs-h1);
	line-height: 1.05;
	letter-spacing: -.022em;
	margin: 0 0 var(--ohc-s-5);
}
.ohc-h2 {
	font-family: var(--ohc-font-display);
	font-weight: 700;
	font-size: var(--ohc-fs-h2);
	line-height: 1.15;
	letter-spacing: -.018em;
	margin: 0 0 var(--ohc-s-3);
}
.ohc-sub { color: var(--ohc-muted); font-size: var(--ohc-fs-md); line-height: 1.6; max-width: 62ch; margin: 0; }

/* Buttons */
.ohc-btn {
	display: inline-flex; align-items: center; gap: var(--ohc-s-2);
	padding: var(--ohc-s-4) var(--ohc-s-6); border-radius: var(--ohc-r-sm);
	font-weight: 700; font-size: var(--ohc-fs-base); text-decoration: none;
	border: 1px solid transparent; cursor: pointer; transition: .15s;
}
.ohc-btn:hover { text-decoration: none; }
/* Default link colour is now zero-specificity (:where), so these class rules win. */
.ohc-btn-primary { background: var(--ohc-acc); color: #04211c; }
.ohc-btn-primary:hover { background: var(--ohc-acc-2); color: #04211c; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(16,168,142,.16), 0 16px 34px rgba(16,168,142,.22); }
.ohc-btn-ghost { border-color: var(--ohc-line); color: var(--ohc-ink); background: transparent; }
.ohc-btn-ghost:hover { border-color: var(--ohc-acc); color: var(--ohc-acc-text); }

/* Fixed + above the sticky header (z 30) so keyboard focus is never covered. */
.ohc-skip {
	position: fixed; left: 16px; top: -60px; z-index: 100;
	background: var(--ohc-surface); color: var(--ohc-ink);
	border: 1px solid var(--ohc-line); padding: 10px 14px; border-radius: var(--ohc-r-sm);
}
.ohc-skip:focus { top: 12px; }

/* Native control sizing and motion preferences apply across the view layer. */
.ohc-btn { font-family: inherit; line-height: 1.5; }
.ohc-btn:disabled { cursor: default; opacity: .65; }
.ohc-foot { --ohc-acc-text: #34d0b4; }
@media (prefers-reduced-motion: reduce) {
	.ohc-scope *, .ohc-scope *::before, .ohc-scope *::after {
		animation: none !important; transition: none !important; scroll-behavior: auto !important;
	}
}