/*
 * Typografi enligt trunk/GrafiskDesignWeb.md.
 *
 * Laddas SIST av alla stilmallar. Skälet är att den skall vara den enda
 * auktoriteten på teckenstorlek: Bulma sätter egna storlekar på rubriker och
 * brödtext, och de tidigare egna reglerna satte ytterligare andra. Är den sista
 * i ordningen räcker det med selektorer på elementnivå för att vinna, utan
 * !important och utan uppskruvad specificitet.
 *
 * Det som gjorde omläggningen nödvändig: `.my-title` användes på 18 h1 OCH
 * 31 h2. En klass bar alltså två rubriknivåer, vilket gjorde det omöjligt att
 * skilja dem åt — en sektionsrubrik renderades lika stor som sidrubriken.
 * Lösningen är att storleken sitter på ELEMENTET, inte på klassen. Då får varje
 * rubrik sin nivås storlek oavsett vilken klass vyn råkar sätta, och ingen vy
 * behövde ändras.
 *
 * Storlekarna står i px eftersom profilen anger dem i px. Root är 16px, vilket
 * profilen förutsätter ("baserade på 16px root"); tidigare låg root på
 * clamp(16px, 1.2vw, 20px), så brödtexten kunde bli 20px och hela skalan gled.
 */

:root {
    --font-heading: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Roboto', -apple-system, 'Segoe UI', sans-serif;

    /* Skalan ur profilens tabell */
    --text-hero: 48px;
    --text-h1: 32px;
    --text-h2: 24px;
    --text-h3: 18px;
    --text-lead: 18px;
    --text-body: 16px;
    --text-label: 12px;
    --text-button: 13px;
    /* Profilens avsnitt om toppnavigation och sidfot anger 14px för
       navigationslänkar och för sidfotens grupprubriker — alltså inte samma som
       etikettraden i typografitabellen. */
    --text-nav: 14px;

    /* Radavstånd: brödtext och ingress 1.5, etiketter 1.4, rubriker 1.2 */
    --leading-heading: 1.2;
    --leading-body: 1.5;
    --leading-label: 1.4;

    /* Vikter. Ingen kursiv används enligt profilen. */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-bold: 700;

    /* Radlängd: max ~75 tecken för brödtext */
    --measure: 68ch;
}

/* Profilen: på skärmar under 768px skalas rubrikerna ned ett steg. Bara de tre
   översta nivåerna berörs — h3, brödtext och etiketter är redan små nog, och
   12px är profilens golv. */
@media (max-width: 767px) {
    :root {
        --text-hero: 32px;
        --text-h1: 24px;
        --text-h2: 20px;
    }
}

html {
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    line-height: var(--leading-body);
}

/* ── Rubriker ───────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    line-height: var(--leading-heading);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

/*
 * h4 används i kundkorten, där den ligger i en liten ruta. Profilen har ingen
 * nivå under h3, så h4 och nedåt hamnar på brödtextens storlek med rubrikens
 * typsnitt — mindre än h3 vore under profilens golv för rubriker.
 */
h4, h5, h6 {
    font-size: var(--text-body);
}

/*
 * `.my-title` och `.my-h3` sätter medvetet INGEN storlek. Storleken kommer
 * från elementet ovan. Klasserna bär bara typsnittet, så att en vy som sätter
 * dem på ett element som inte är en rubrik ändå får rätt familj.
 */
.my-title,
.my-h3 {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    line-height: var(--leading-heading);
}

/* ── Brödtext ───────────────────────────────────────────────────────────── */

p, li, dd, dt, address, blockquote, figcaption {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-body);
}

/*
 * Ingressen är profilens preamble: 18px Roboto 400. I den här kodbasen sitter
 * `.content` alltid direkt på stycket — samtliga tolv förekomster är
 * <p class="content"> — så selektorn är p.content, inte en avkomlingsselektor.
 */
p.content {
    font-size: var(--text-lead);
}

/*
 * Radlängd. Profilen anger max ~75 tecken, alltså 68ch. Utan detta löper
 * brödtexten över hela kolumnbredden på stora skärmar, vilket är den enskilt
 * vanligaste orsaken till att en text känns tung att läsa.
 *
 * Sätts på stycken, inte på behållaren, så att bilder och kort i samma kolumn
 * behåller sin bredd.
 */
.text-block p,
.content p,
.content li {
    max-width: var(--measure);
}

/* Centrerad text skall ha sin radlängd centrerad, annars hamnar den till
   vänster i kolumnen med ett tomrum till höger. */
.has-text-centered p,
.has-text-centered .content p {
    margin-left: auto;
    margin-right: auto;
}

/* ── Etiketter, knappar, navigation ─────────────────────────────────────── */

label {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-body);
}

/* Profilen: knappetikett 13px Roboto 500, teckenavstånd 0.01em */
.button,
.nov-button,
button {
    font-family: var(--font-body);
    font-size: var(--text-button);
    font-weight: var(--weight-medium);
    letter-spacing: 0.01em;
}

/* Profilen: navigationslänkar Montserrat 500, 14px. */
.navbar-item {
    font-family: var(--font-heading);
    font-size: var(--text-nav);
    font-weight: var(--weight-medium);
}

/* Bildtext, fot och småtext: 12px Roboto, radavstånd 1.4 */
.footer-text,
figcaption,
small {
    font-family: var(--font-body);
    font-size: var(--text-label);
    line-height: var(--leading-label);
}

/* Profilen: sidfotens grupprubriker är Montserrat 500, 14px, versaler med
   teckenavstånd 0.05em. Innehållsförteckningens rubrik är samma sorts
   sektionsetikett och följer med. */
.page-toc h2,
.site-footer h2 {
    font-family: var(--font-heading);
    font-size: var(--text-nav);
    font-weight: var(--weight-medium);
    letter-spacing: 0.05em;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

/*
 * Hero-rubriken låg på 52px i vikt 500 med egna nedskalningssteg på 35px, 25px
 * och 15px. Profilen anger 48px i vikt 700, och 32px under 768px.
 */
.button-and-text-inside-video h1 {
    font-family: var(--font-heading);
    font-size: var(--text-hero);
    font-weight: var(--weight-bold);
    line-height: var(--leading-heading);
    max-width: none;
    margin: 0 0 12px;
}

/*
 * Ingressen under hero-rubriken. Profilens preamble: 18px Roboto 400 med
 * radavstånd 1.5. Den bär meningen som tidigare satt i display-storlek inne i
 * rubriken, och har radlängd så att den inte löper över hela filmens bredd.
 */
.button-and-text-inside-video .hero-lead {
    font-family: var(--font-body);
    font-size: var(--text-lead);
    font-weight: var(--weight-regular);
    line-height: var(--leading-body);
    max-width: 44ch;
    margin: 0 0 24px;
}

/* ── Enkla textsidor ────────────────────────────────────────────────────── */

/*
 * Integritetspolicyn och felsidorna hade egna storlekar med ett eget
 * nedskalningssteg, där h2 blev 16px under 768px — alltså samma storlek som
 * brödtexten, vilket gjorde rubrikerna osynliga som rubriker. Nu samma skala
 * som resten av sajten.
 */
.text-page h1 { font-size: var(--text-h1); }
.text-page h2 { font-size: var(--text-h2); }

.text-page p,
.text-page li {
    font-size: var(--text-body);
    line-height: var(--leading-body);
}