/* ==========================================================================
   Base: reset, typography, utilities
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-height) + 16px);
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: var(--lh-snug);
	letter-spacing: -.02em;
}

p, ul, ol, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }
svg.icon { flex-shrink: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

::selection { background: var(--color-accent); color: #fff; }

:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Utilities */
.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.mono { font-family: var(--font-mono); }

.accent { color: var(--color-accent); }

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

.skip-link:focus {
	position: fixed;
	top: 12px; left: 12px;
	z-index: 100;
	width: auto; height: auto;
	clip: auto;
	padding: 10px 16px;
	background: var(--color-surface);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   Link UX — one hover/focus language: brand violet (--color-accent), same as the menu.
   ========================================================================== */
a { transition: color .15s ease, border-color .15s ease, text-decoration-color .15s ease; }

/* Inline text links: violet + underline on hover/focus */
.entry-content a:not(.btn),
.accordion__body a,
.catalog-seo a,
.catalog-empty a,
.rk-src a,
.pa-guide a,
.a84, .a229, .a249, .c74, .c122, .k111, .k180 {
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}
.entry-content a:not(.btn):is(:hover, :focus-visible),
.accordion__body a:is(:hover, :focus-visible),
.catalog-seo a:is(:hover, :focus-visible),
.catalog-empty a:is(:hover, :focus-visible),
.rk-src a:is(:hover, :focus-visible),
.pa-guide a:is(:hover, :focus-visible),
.a84:is(:hover, :focus-visible), .a229:is(:hover, :focus-visible), .a249:is(:hover, :focus-visible),
.c74:is(:hover, :focus-visible), .c122:is(:hover, :focus-visible),
.k111:is(:hover, :focus-visible), .k180:is(:hover, :focus-visible) {
	color: var(--color-accent);
	border-color: var(--color-accent);
	text-decoration-color: currentColor;
}

/* Card / list links: title turns violet when the whole link is hovered or focused */
main a:is(:hover, :focus-visible) :is(h2, h3, h4) { color: var(--color-accent); transition: color .15s ease; }
main :is(.section--dark, .card--dark, [class*="hero"]) a:is(:hover, :focus-visible) :is(h2, h3, h4) { color: var(--color-accent-soft); }

/* Unclassed links inside running text (FAQ answers, ranking copy, lists): always look like links */
main :is(p, li, dd, td) a:not([class]) {
	color: var(--color-indigo);
	font-weight: 500;
	text-decoration-line: underline;
	text-decoration-color: rgba(83, 74, 183, .35);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}
main :is(p, li, dd, td) a:not([class]):is(:hover, :focus-visible) {
	color: var(--color-accent);
	text-decoration-color: currentColor;
}
.section--dark :is(p, li) a:not([class]) { color: var(--color-accent-soft); text-decoration-color: currentColor; }

/* Keep the focus ring inside the FAQ row so it doesn't cut through the answer text */
summary:focus-visible { outline-offset: -2px; }