/**
 * Typography — Rub a Lamp
 * Skriftstile og navngivne tekst-klasser
 * Tokens hentes fra tokens.css
 * Opdateret: 2026-03-04
 *
 * Nunito Sans loades som lokal variabel TTF via @font-face
 *
 * Base: html font-size 125% → 1rem = 20px
 *
 * Indhold:
 * 1. Font-face
 * 2. Base rem-størrelse
 * 3. Base typografi
 * 4. H-tags
 * 5. Navngivne tekststile
 * 6. Links
 * 7. Mobil (@media max-width: 480px)
 * 8. 4-spaltet tekst shortcode
 */


/* ============================================================
   1. FONT-FACE
   Variabel font — dækker vægt 100–900
   ============================================================ */

@font-face {
    font-family:  'Nunito Sans';
    src:          url('../fonts/NunitoSans-VariableFont_YTLCopszwdthwght.ttf') format('truetype');
    font-weight:  100 900;
    font-style:   normal;
    font-display: swap;
}


/* ============================================================
   2. BASE REM-STØRRELSE
   1rem = 20px
   ============================================================ */

html {
    font-size: 125%; /* 1rem = 20px */
}

@media (max-width: 768px) {

    html {
        font-size: 112.5%; /* 1rem = 18px */
    }

}

@media (max-width: 480px) {
    html {
        font-size: 125%; /* 1rem = 20px */
    }
}


/* ============================================================
   3. BASE TYPOGRAFI
   ============================================================ */

body {
    font-family:             var(--font-base);
    font-weight:             var(--font-light);
    font-size:               var(--text-body);
    font-variation-settings: var(--font-variation);
    color:                   var(--color-black);
    background:              var(--color-bg);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p {
    font-family:             var(--font-base);
    font-weight:             var(--font-light);
    font-size:               var(--text-body);
    font-variation-settings: var(--font-variation);
    color:                   var(--color-black);
    line-height:             var(--leading-normal);
    margin:                  0 0 1em;
}

strong, b {
    font-weight: var(--font-bold);
}


/* ============================================================
   4. H-TAGS
   ============================================================ */

h1 {
    font-family:             var(--font-base);
    font-weight:             var(--font-semibold);
    font-size:               2.1rem;
    font-variation-settings: var(--font-variation);
    line-height:             var(--leading-hero);
    color:                   var(--color-black);
    margin:                  0 0 0.5em;
}

h2 {
    font-family:             var(--font-base);
    font-weight:             var(--font-bold);
    font-size:               1.4rem;
    font-variation-settings: var(--font-variation);
    line-height:             var(--leading-normal);
    color:                   var(--color-black);
    margin:                  0 0 0.5em;
}

h3 {
    font-family:             var(--font-base);
    font-weight:             var(--font-semibold);
    font-size:               1rem;
    font-variation-settings: var(--font-variation);
    line-height:             var(--leading-normal);
    color:                   var(--color-black);
    margin:                  0 0 0.5em;
}

h4, h5, h6 {
    font-family:             var(--font-base);
    font-weight:             var(--font-regular);
    font-size:               1rem;
    font-variation-settings: var(--font-variation);
    line-height:             var(--leading-normal);
    color:                   var(--color-black);
    margin:                  0 0 0.5em;
}


/* ============================================================
   5. NAVNGIVNE TEKSTSTILE
   ============================================================ */

/* --- Logo / Site Title --- */
.ral-logo {
    font-family:             var(--font-base);
    font-weight:             var(--font-bold);
    font-size:               var(--text-logo);
    font-variation-settings: var(--font-variation);
    color:                   var(--color-black);
    line-height:             var(--leading-normal);
}

/* --- Navigation links --- */
.ral-nav {
    font-family:             var(--font-base);
    font-weight:             var(--font-regular);
    font-size:               var(--text-nav);
    font-variation-settings: var(--font-variation);
    color:                   var(--color-black);
    line-height:             var(--leading-normal);
}

.ral-nav a.active,
.ral-nav a:hover {
    color: var(--color-primary);
}

/* --- Hero Headline --- */
.ral-hero-headline {
    font-family:             var(--font-base);
    font-weight:             var(--font-semibold);
    font-size:               var(--text-hero);
    font-variation-settings: var(--font-variation);
    color:                   var(--color-white);
    line-height:             var(--leading-hero);
}

/* --- Sektion H2 --- */
.ral-h2 {
    font-family:             var(--font-base);
    font-weight:             var(--font-bold);
    font-size:               var(--text-h2);
    font-variation-settings: var(--font-variation);
    color:                   var(--color-black);
    line-height:             var(--leading-normal);
}

/* --- Intro tekst (blå, semibold) --- */
.ral-intro-primary {
    font-family:             var(--font-base);
    font-weight:             var(--font-semibold);
    font-size:               var(--text-body);
    font-variation-settings: var(--font-variation);
    color:                   var(--color-primary);
    line-height:             var(--leading-normal);
}

/* --- Brødtekst --- */
.ral-body {
    font-family:             var(--font-base);
    font-weight:             var(--font-light);
    font-size:               var(--text-body);
    font-variation-settings: var(--font-variation);
    color:                   var(--color-black);
    line-height:             var(--leading-intro);
}

/* --- Brødtekst på mørk baggrund --- */
.ral-body--light {
    color: var(--color-white);
}

/* --- Case titel (under billeder på forsiden) --- */
.ral-case-title {
    font-family:             var(--font-base);
    font-weight:             var(--font-semibold);
    font-size:               var(--text-body);
    font-variation-settings: var(--font-variation);
    color:                   var(--color-black);
    line-height:             var(--leading-normal);
}

/* --- Kontaktinfo navn --- */
.ral-contact-name {
    font-family:             var(--font-base);
    font-weight:             var(--font-semibold);
    font-size:               var(--text-body);
    font-variation-settings: var(--font-variation);
    color:                   var(--color-black);
    line-height:             var(--leading-normal);
    margin-bottom:           0.25rem;
}

/* --- Kontaktinfo data --- */
.ral-contact-info {
    font-family:             var(--font-base);
    font-weight:             var(--font-light);
    font-size:               var(--text-body);
    font-variation-settings: var(--font-variation);
    color:                   var(--color-black);
    line-height:             var(--leading-normal);
}

/* --- Knaptekst --- */
.ral-btn-label {
    font-family:             var(--font-base);
    font-weight:             var(--font-light);
    font-size:               var(--text-btn);
    font-variation-settings: var(--font-variation);
    color:                   var(--color-white);
    line-height:             var(--leading-normal);
    text-align:              center;
}


/* ============================================================
   6. LINKS
   ============================================================ */

a {
    color:           var(--color-primary);
    text-decoration: none;
    transition:      opacity 0.3s ease;
}

a:hover {
    opacity: 1;
}


/* ============================================================
   7. MOBIL — 480px
   ============================================================ */

@media (max-width: 480px) {

    /* Intro brødtekst skifter fra Light til Regular på mobil */
    .ral-intro-primary,
    .ral-body {
        font-weight: var(--font-regular);
    }

    /* Hero headline farve bibeholdes hvid */
    .ral-hero-headline {
        color: var(--color-white);
    }

}


/* ============================================================
   8. 4-SPALTET TEKST SHORTCODE
   ============================================================ */

.ral-4col {
    display:               grid;
    grid-template-columns: 1fr 3fr;
    gap:                   var(--space-xs);
    width:                 100%;
}

.ral-4col__secondary {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-xs);
}

.ral-4col__primary p {
    color:       var(--color-primary);
    font-weight: var(--font-semibold);
    margin:      0 0 1em;
}

.ral-4col__item p {
    margin: 0 0 1em;
}

.ral-4col__item p:last-child {
    margin-bottom: 0;
}

/* Tablet — 2 kolonner */
@media (max-width: 768px) {

    .ral-4col {
        grid-template-columns: 1fr 1fr;
    }

    .ral-4col__secondary {
        grid-template-columns: 1fr;
        gap:                   1em;
    }

}

/* Mobil — 1 kolonne */
@media (max-width: 480px) {

    .ral-4col {
        grid-template-columns: 1fr;
        gap:                   1em;
    }

}