/*
 * Typografien på hele nettstedet (inc/topp.php laster den på alle sider).
 *
 * Skriften er Nunito, fonten til merkevaren (assets/fonts/nunito/, lastet på
 * alle sider av inc/topp.php). Titlene har vekt 800, brødteksten 400, og ingen
 * tekst har bokstavavstand. De uthevede ordene i titlene står i samme farge og font som
 * resten, uten gradient. Stilarket bruker ikke @layer, så det slår Tailwind.
 *
 * Skalaen for overskriftene er flytende fra 360 til 1280 px bredde:
 *   h1     42–76 px   sidetittelen
 *   h2     34–60 px   overskriften på en seksjon
 *   stor   46–120 px  korte utsagn som egen seksjon (h2.pf-h2--stor)
 *   h3     24–36 px   mellomoverskrifter i en seksjon
 *   h4     19–24 px   titler på kort, i FAQ og i lister, også når de er h3
 *   h5     17–19 px
 *   h6     15–16 px
 *
 * Større enn før og med tydelige sprang mellom nivåene, etter mønster av
 * monday.com, som leker med størrelsene (Nohman, 19.10.2026).
 *
 * Utenfor skalaen står overskriftene i artikler og juridiske tekster
 * (.article-content), som har sin egen lesestørrelse, små etiketter med egen
 * størrelse, og app-illustrasjonene, som er målt i em.
 */

:root {
	--font-sans: "Nunito", system-ui, -apple-system, sans-serif;
	--font-serif: var(--font-sans);
	--tracking-tight: 0;
	--fs-h1: clamp(2.625rem, 1.8rem + 3.6vw, 4.75rem);
	--fs-h2: clamp(2.125rem, 1.49rem + 2.83vw, 3.75rem);
	--fs-stor: clamp(2.875rem, 1.2rem + 7.4vw, 7.5rem);
	--fs-h3: clamp(1.5rem, 1.19rem + 1.39vw, 2.25rem);
	--fs-h4: clamp(1.1875rem, 1.06rem + .54vw, 1.5rem);
	--fs-h5: clamp(1.0625rem, 1rem + .27vw, 1.1875rem);
	--fs-h6: clamp(.9375rem, .913rem + .109vw, 1rem);
}

body { font-family: var(--font-sans); }

/* Ingen bokstavavstand, også der den er satt i stilene eller i HTML-en */
body,
body * { letter-spacing: normal !important; }

/* Titlene i vekt 800 uten bokstavavstand, også klassene for titler som ikke er h1 til h6 */
:root body :is(h1, h2, h3, h4, h5, h6, .pf-h1, .pf-h2, .pf-h3, .pf-h4, .h-display, .h-section) { font-weight: 800 !important; letter-spacing: normal !important; }

/* De uthevede ordene i titlene: ingen gradient, samme font og samme farge
   som resten av tittelen. Nohman tok bort den lilla fargen 26.10.2026 */
:root body :is(h1, h2, h3, h4, h5, h6, .pf-h1, .pf-h2, .pf-h3, .pf-h4, .h-display, .h-section) :is(.kv-uthevet, .bs-uthevet, .ar-uthevet, .ko-uthevet, .pv-uthevet, .text-gradient, .serif-italic, .pf-aksent),
:root body :is(.kv-uthevet, .bs-uthevet, .ar-uthevet, .ko-uthevet, .pv-uthevet) {
	padding: 0 !important;
	background: none !important;
	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;
	color: inherit !important;
	-webkit-text-fill-color: currentColor !important;
	font: inherit !important;
}

/* ---------- Skalaen ---------- */

:root body :is(h1, h2, h3, h4, h5, h6):not(
	.article-content *,
	.pf-vindu *, .pf-mo *, .pf-panel *, .pf-godkj-scene *, .pf-hs-panel *, .pf-hs-m *,
	.exit-intent-modal *,
	.pf-merke, .ns-pakke-navn, .wp-block-heading,
	.text-xs, .text-sm, .uppercase
) {
	/* Størrelsen for nivået settes i reglene under, ellers h4 */
	font-size: var(--hh-fs, var(--fs-h4));
	line-height: var(--hh-lh, 1.35);
}

:root body h1 { --hh-fs: var(--fs-h1); --hh-lh: 1.04; }
/* H1 i toppene av sidene, der teksten står ved siden av et bilde, er litt
   mindre, så den holder seg på maks tre linjer (26.10.2026) */
:root body main h1.pf-h1 { --hh-fs: clamp(2.4rem, 1.25rem + 3vw, 4.25rem); }
:root body h2 { --hh-fs: var(--fs-h2); --hh-lh: 1.06; }
:root body h2.pf-h2--stor { --hh-fs: var(--fs-stor); --hh-lh: .98; }

/* Heroen på forsiden har tekst og bilde side om side, så tittelen er litt mindre enn h1 i skalaen */
:root body .pf-hero h1#pf-hero-tittel { --hh-fs: clamp(2.5rem, 1.1rem + 3.2vw, 4rem); --hh-lh: 1.02; }
@media (min-width: 960px) {
	.pf-hero #pf-hero-tittel .pf-linje:first-child { white-space: nowrap; }
}
:root body h5 { --hh-fs: var(--fs-h5); --hh-lh: 1.4; }
:root body h6 { --hh-fs: var(--fs-h6); --hh-lh: 1.4; }

/* h3 er stort sett titler på kort og i FAQ (h4 i skalaen). Mellomoverskriftene
   i seksjonene har disse klassene */
:root body h3:is(.pf-h3, .text-2xl, .text-3xl, .text-4xl, .hh-kk-tittel, .skv-panel-tittel, .ps-kort-tittel, .pf-pakke-navn, .pr-start-navn) { --hh-fs: var(--fs-h3); --hh-lh: 1.15; }

/* Ingressen under en tittel brytes jevnt, så siste linje aldri får bare ett
   eller to ord. Gjelder alle ingress-klassene (pf-ingress, pf-sml-ingress osv.),
   utsagnet på heltesidene og avsnittet rett under en h1 eller h2 i de eldre
   malene. Brødteksten i artikler og vilkår brytes som før. */
main :is(.pf-ingress, [class$="-ingress"], [class*="-ingress "], .pf-utsagn),
main :is(h1, h2) + p:not(:is(.article-content, .jr-tekst, .prose) *) { text-wrap: balance; }