/* ==========================================================================
   02 – GRUNN
   --------------------------------------------------------------------------
   Grunnstil for hele siden: skrift, Peace Sans, overskrifter, lenker,
   fokusramme og hjelpeklasser. Ingen komponenter her (se 03), ingen
   sidespesifikke regler (se 10–14). Bare var(--kc-…), ingen verdier.
   ========================================================================== */

/* ---- Peace Sans --------------------------------------------------------
   Lastet fra temaets egen fil. Én vekt – aldri fet eller kursiv. */
@font-face {
	font-family: "Peace Sans";
	src: url("../fonts/PeaceSans.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

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

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

body {
	margin: 0;
	background: var(--kc-surface);
	color: var(--kc-ink);
	font-family: var(--kc-font);
	font-size: var(--kc-tekst-body);
	line-height: var(--kc-lh-body);
	-webkit-font-smoothing: antialiased;
}

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

p {
	margin: 0 0 var(--kc-luft-4);
}

/* ---- Overskrifter ------------------------------------------------------
   h1–h3 og klassene .kc-h1–.kc-h3 (for elementer som skal se ut som en
   overskrift uten å være det i dokumentstrukturen). Peace Sans, én vekt. */
h1, h2, h3,
.kc-h1, .kc-h2, .kc-h3 {
	margin: 0;
	font-family: var(--kc-font-display);
	font-weight: var(--kc-vekt-normal);
	color: inherit;
}

h1, .kc-h1 { font-size: var(--kc-tekst-h1); line-height: var(--kc-lh-h1); }
h2, .kc-h2 { font-size: var(--kc-tekst-h2); line-height: var(--kc-lh-h2); }
h3, .kc-h3 { font-size: var(--kc-tekst-h3); line-height: var(--kc-lh-h3); }

/* h4–h6 brukes av WooCommerce enkelte steder; de settes som fet brødtekst. */
h4, h5, h6 {
	margin: 0;
	font-size: var(--kc-tekst-body);
	line-height: var(--kc-lh-body);
	font-weight: var(--kc-vekt-fet);
}

/* ---- Lenker ------------------------------------------------------------ */
a {
	color: var(--kc-ink);
}

a:hover {
	color: var(--kc-navy-mork);
}

/* ---- Fokusramme --------------------------------------------------------
   Bare ved tastaturnavigering. Følger elementets form (border-radius).
   På marine flater (toppstripe, banner, bunntekst) er rammen hvit. */
:focus-visible {
	outline: var(--kc-fokus-bredde) solid var(--kc-fokus-farge);
	outline-offset: var(--kc-fokus-luft);
}

.kc-mork :focus-visible {
	outline-color: var(--kc-fokus-farge-mork);
}

/* ---- Tekststørrelser som hjelpeklasser --------------------------------- */
.kc-liten {
	font-size: var(--kc-tekst-liten);
	line-height: var(--kc-lh-liten);
}

.kc-mini {
	font-size: var(--kc-tekst-mini);
	line-height: var(--kc-lh-mini);
}

.kc-dempet {
	color: var(--kc-ink-muted);
}

.kc-fet {
	font-weight: var(--kc-vekt-fet);
}

/* Tall som skal stå rett under hverandre (beløp, antall). */
.kc-tall {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ---- Skjult tekst for skjermlesere -------------------------------------
   .screen-reader-text er WordPress/WooCommerce sin klasse; .kc-skjult er vår.
   Samme regel, så de oppfører seg likt. */
.kc-skjult,
.screen-reader-text {
	position: absolute !important; /* !important: WooCommerce setter position på enkelte elementer med samme klasse */
	width: var(--kc-strek);
	height: var(--kc-strek);
	padding: 0;
	margin: calc(var(--kc-strek) * -1);
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* «Hopp til innhold»-lenken blir synlig når den får fokus. */
.kc-hopp:focus {
	position: fixed !important; /* !important: overstyrer .kc-skjult over */
	top: var(--kc-luft-2);
	left: var(--kc-luft-2);
	width: auto;
	height: auto;
	clip: auto;
	z-index: 100;
	padding: var(--kc-luft-2) var(--kc-luft-4);
	background: var(--kc-surface);
	border-radius: var(--kc-r-md);
}

/* ---- Innholdsbredde ---------------------------------------------------- */
.kc-bredde {
	max-width: var(--kc-innhold-maks);
	margin-inline: auto;
	padding-inline: var(--kc-sidemarg);
}