@import url("../fonts/fonts.css");

/* ==========================================================================
   KR — tokens, base and primitives

   Loads first; the other three sheets are written against the custom
   properties defined here and are registered with this file as a dependency,
   so the cascade order is guaranteed by inc/enqueue.php rather than by luck.

   Contents:
     1.   Tokens
     2.   Reset & base
     3.   Utilities
     4.   Buttons
     22b. Site-wide overrides
     23.  Motion & print

   Accessibility note on colour. The KR design system is ink / paper / copper,
   and copper is where the measurements bite:

     #A9672E is 4.25:1 on paper and 3.86:1 on sand. Both are below WCAG AA, so
     the copper hue is reserved for FILLS, RULES AND LARGE DISPLAY TYPE, never
     for the small uppercase labels the design leans on ("Allar deildir →",
     news tags, the hero eyebrow). Those use --kr-copper-text (#985D29 —
     5.04:1 on paper, 4.58:1 on sand) or, on ink, --kr-copper-on-dark
     (#BA7133 — 4.82:1).

     Each of those numbers is measured against ONE flat backdrop, so a copper
     label is only safe on the backdrop its token was solved for. The dark
     CARD gradient — linear-gradient(155deg,#242424,#050505), shared by the
     home page's .kr-divcard, the registration .kr-infocard and the course
     cards — is not flat ink: its light end is #242424, where
     --kr-copper-on-dark drops to 4.06:1. That surface has its own token,
     --kr-copper-on-card (#C47B3C — 4.62:1 on #242424, so it holds across the
     whole gradient, and 5.48:1 on ink if a card is ever flattened).

     Where the backdrop is a PHOTOGRAPH there is no value to solve against at
     all, and copper is simply not available: .kr-hero__eyebrow and
     .kr-pagehead--media .kr-pagehead__eyebrow both go solid white.

     Solid white on #A9672E measures exactly 4.50:1 and passes, which is why
     buttons and the CTA banner carry #fff. That is the AA floor with no
     headroom, so anything small and light on copper wants either weight or
     the deeper --kr-copper-dark (#8A5325 — white is 6.28:1) under it.
     Translucent white never passes: rgba(255,255,255,.8) on copper is 2.94:1
     and must never ship. There is no token for it — text on copper is always
     --kr-on-copper.

     --kr-muted #6E6560 is 5.37:1 on paper; --kr-text-body #3E3833 is 10.9:1.

   This replaces the previous note about the red palette; the substitution
   pattern is the same one, applied to a different hue.
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* -- Brand ---------------------------------------------------------- */
	--kr-ink: #141414;         /* header, footer, hero, dark cards */
	--kr-paper: #FAF8F6;       /* page background */
	--kr-sand: #F1EDE8;        /* the Fréttir band */

	/* Copper. FILLS, RULES AND LARGE DISPLAY TYPE ONLY — see the note above. */
	--kr-copper: #A9672E;
	--kr-copper-dark: #8A5325; /* hover / pressed on copper fills */

	/* Text-safe copper. Use these wherever copper carries small type. */
	--kr-copper-text: #985D29;
	--kr-copper-on-dark: #BA7133;
	--kr-copper-on-card: #C47B3C;

	--kr-surface: #fff;

	/* Hairline on paper. --kr-border is the same rule; the two names exist
	   because the design calls it a line and the components call it a border. */
	--kr-line: rgb(0 0 0 / 12%);
	--kr-border: var(--kr-line);
	--kr-border-dark: rgb(255 255 255 / 14%);

	/* -- Text ----------------------------------------------------------- */
	--kr-text: var(--kr-ink);
	--kr-text-body: #3E3833;   /* 10.9:1 on paper */
	--kr-muted: #6E6560;       /* 5.37:1 on paper — AA */

	/* On ink. */
	--kr-on-dark: #EDEAE6;     /* 14.7:1 on ink */
	--kr-on-dark-muted: #B3ADA6; /* 8.3:1 on ink */

	/* On copper: always solid white. Nothing translucent clears AA there. */
	--kr-on-copper: #fff;

	/* -- Feedback -------------------------------------------------------- */
	/* Error stays red. It is a semantic colour, not a brand one. 6.2:1 on paper. */
	--kr-error: #B3261E;

	/* -- Type ----------------------------------------------------------- */
	--kr-font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
	--kr-font-body: Barlow, system-ui, -apple-system, "Segoe UI", sans-serif;

	/*
	 * Fluid scale. The design was authored in two fixed frames (402px and
	 * 1280px) using container-query units; each value below is the linear
	 * solve through those two points, capped so display type stops growing
	 * on very wide screens.
	 */
	--kr-fs-display: clamp(2.75rem, 1.31rem + 5.85vw, 6rem);
	--kr-fs-h1: clamp(2.5rem, 1.63rem + 3.6vw, 4.5rem);
	--kr-fs-h2: clamp(1.875rem, 1.49rem + 1.57vw, 2.75rem);
	--kr-fs-h3: clamp(1.625rem, 1.35rem + 1.12vw, 2.25rem);
	--kr-fs-h4: clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);
	--kr-fs-quote: clamp(1.4375rem, 1.19rem + 1vw, 1.875rem);
	--kr-fs-lead: clamp(0.9375rem, 0.83rem + 0.45vw, 1.1875rem);
	--kr-fs-body: 1rem;
	--kr-fs-small: 0.875rem;
	--kr-fs-micro: 0.75rem;
	--kr-fs-stat: clamp(2.5rem, 1.6rem + 3.6vw, 3.75rem);

	--kr-ls-display: 0.01em;
	--kr-ls-label: 0.08em;
	--kr-ls-wide: 0.14em;

	/* -- Space & shape --------------------------------------------------- */
	--kr-gutter: clamp(1.375rem, 0.9rem + 2.4vw, 3.5rem);
	--kr-section-y: clamp(2.5rem, 1.9rem + 2.5vw, 3.75rem);
	--kr-max: 1400px;

	--kr-radius-sm: 5px;
	--kr-radius: 9px;
	--kr-radius-btn: 10px; /* the design's button radius */
	--kr-radius-md: 14px;
	--kr-radius-lg: 16px;

	--kr-shadow: 0 18px 40px -28px rgb(20 20 20 / 45%);

	/* -- Motion ---------------------------------------------------------- */
	--kr-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--kr-dur: 0.3s;

	/* -- Focus ----------------------------------------------------------- */
	/* Copper-text, not copper: 5.04:1 against paper, comfortably over the 3:1
	   floor a focus indicator has to clear. */
	--kr-focus: var(--kr-copper-text);
	--kr-focus-light: #fff;
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--kr-paper);
	color: var(--kr-text);
	font-family: var(--kr-font-body);
	font-size: var(--kr-fs-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--kr-font-display);
	font-weight: 700;
	line-height: 1.05;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: var(--kr-ls-display);
}

p {
	margin: 0 0 1em;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--kr-copper-text);
	text-decoration: none;
}

a:hover {
	color: var(--kr-copper-dark);
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

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

/* On ink and copper surfaces a copper focus ring is invisible — invert it.
   .kr-hero is in the list for the same reason as the rest: its CTAs are a
   copper fill on a dark band, and a copper ring 3px outside a copper button
   is 1.17:1 against it and reads as part of the button. */
:where(.kr-dark, .kr-copper-bg, .kr-header, .kr-hero, .kr-wall, .kr-footer)
	:where(a, button, input, select, [tabindex]):focus-visible {
	outline-color: var(--kr-focus-light);
}

/* ==========================================================================
   3. Utilities
   ========================================================================== */

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

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

.kr-dark {
	background: var(--kr-ink);
	color: #fff;
}

.kr-copper-bg {
	background: var(--kr-copper);
	color: #fff;
}

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

/* Small uppercase Oswald label — the design's most repeated motif. */
.kr-kicker {
	font-family: var(--kr-font-display);
	font-size: var(--kr-fs-micro);
	font-weight: 500;
	letter-spacing: var(--kr-ls-wide);
	text-transform: uppercase;
	margin: 0;
	color: var(--kr-copper-text);
}

.kr-dark .kr-kicker,
.kr-hero .kr-kicker {
	color: var(--kr-copper-on-dark);
}

.kr-copper-bg .kr-kicker {
	color: var(--kr-on-copper);
}

.kr-kicker--rule {
	display: flex;
	align-items: center;
	gap: 10px;
}

.kr-kicker--rule::before {
	content: "";
	inline-size: 32px;
	block-size: 2px;
	background: var(--kr-copper);
	flex: none;
}

.kr-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-block-end: 1.625rem;
}

.kr-section-head h2 {
	font-size: var(--kr-fs-h2);
}

.kr-section-head--baseline {
	align-items: baseline;
}

.kr-section-sub {
	color: var(--kr-muted);
	font-size: var(--kr-fs-body);
}

/* Text link with a trailing arrow, e.g. "Allar fréttir →". */
/*
 * The "Allar deildir →" section link. pages.css defines .kr-sechead__link as
 * the same component; both now carry the design's 700 / 13px / .12em so the
 * two cannot drift. Converge them into one class when convenient.
 */
.kr-arrow-link {
	font-family: var(--kr-font-display);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kr-copper-text);
	white-space: nowrap;
}

.kr-arrow-link::after {
	content: " →";
}

.kr-copper-bg .kr-arrow-link {
	color: var(--kr-on-copper);
}

.kr-copper-bg .kr-arrow-link:hover {
	color: #fff;
}

/*
 * Stretches a link over its whole card so the entire card is clickable while
 * the accessible name stays the article title and there is one tab stop.
 */
.kr-stretch::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.kr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 44px; /* WCAG 2.2 target size */
	padding: 1rem 1.625rem;
	border: 2px solid transparent;
	border-radius: var(--kr-radius-btn);
	background: var(--kr-copper);
	color: #fff;
	font-family: var(--kr-font-display);
	font-size: var(--kr-fs-small);
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: background var(--kr-dur) ease, color var(--kr-dur) ease,
		border-color var(--kr-dur) ease;
}

.kr-btn:hover {
	background: var(--kr-copper-dark);
	color: #fff;
}

.kr-btn--sm {
	padding: 0.6875rem 1.375rem;
	font-size: var(--kr-fs-small);
	letter-spacing: 0.04em;
}

.kr-btn--ghost {
	background: rgb(255 255 255 / 12%);
	border-color: rgb(255 255 255 / 50%);
	color: #fff;
}

.kr-btn--ghost:hover {
	background: rgb(255 255 255 / 22%);
	border-color: #fff;
}

.kr-btn--white {
	background: #fff;
	color: var(--kr-copper-text);
}

.kr-btn--white:hover {
	background: var(--kr-paper);
	color: var(--kr-copper-dark);
}

.kr-btn--outline {
	background: transparent;
	border-color: var(--kr-ink);
	color: var(--kr-ink);
}

.kr-btn--outline:hover {
	background: var(--kr-ink);
	color: #fff;
}

.kr-btn--ink {
	background: var(--kr-ink);
	color: #fff;
}

.kr-btn--ink:hover {
	background: #000;
	color: #fff;
}

.kr-btn--block {
	display: flex;
	width: 100%;
}

.kr-btn[aria-disabled="true"],
.kr-btn:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

/* ==========================================================================
   22b. Site-wide overrides

   Requested directly, and deliberately kept here rather than in pages.css so
   the rule survives any later restyling of the section it targets.
   ========================================================================== */

/*
 * The filter capsule ships with a negative top margin so it floats up and
 * overlaps the band above it (-1.75rem, and -1rem at the narrow breakpoint).
 * This pushes it clear of that band instead. !important is what makes it
 * beat both of those, at every breakpoint.
 */
.kr-capsule {
	margin-top: 55px !important;
}

/* ==========================================================================
   23. Motion & print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}

	.kr-card:hover {
		transform: none;
	}
}

@media print {
	.kr-header,
	.kr-wall,
	.kr-footer,
	.kr-skip,
	.kr-tabs,
	.kr-btn {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}

	.kr-hero,
	.kr-pagehead {
		background: none;
		color: #000;
		min-height: 0;
	}

	.kr-hero__media,
	.kr-hero__scrim,
	.kr-pagehead__media {
		display: none;
	}
}