/* VisionLAN - Rich text content styling (.cms-content)
   Used on: news articles, CMS pages, event descriptions, rules
   Also imported in TinyMCE via content_css for WYSIWYG preview */

/* Lesespalta for en hel side med brodtekst.
   Se `.cms-content` under for hvorfor 40rem og ikke 800px. */
.cms-page {
    max-width: 40rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

/* Sidetittelen.
   `base.css` setter ingen `font-size` paa `h1` — den falt derfor til
   nettleserens standard paa 2em (32 px), altsaa MINDRE enn sine egne
   seksjonsoverskrifter paa 37,6 px. Tittelen saa forglemt ut fordi den
   bokstavelig talt var mindre enn alt under seg.

   `clamp` og ikke en fast verdi, saa den foelger samme mal som de andre
   offentlige sidetitlene (`.lp-sec-head h2`). */
.cms-page-title {
    font-size: clamp(2.2rem, 5vw, 3.1rem);
    line-height: 1.1;
    margin: 0 0 2rem;
}

/* ── Maalet ──
   0,95 rem i en spalte paa 800 px gir ~105 tegn per linje. Typografisk
   standard er 45-75, med 66 som optimum. Over ~90 mister oyet RETUREN: naar
   blikket skal tilbake til venstre kant etter en linje, treffer det feil
   linje. Det leses som «tung tekst», men er et navigasjonsproblem.

   1,05 rem i 40rem (640 px) gir ~76 tegn. De to henger sammen: krymper man
   spalta uten aa oke skriften, blir linja kort OG teksten fortsatt liten. */
.cms-content {
    color: var(--vl-text, #e6edf3);
    line-height: 1.75;
    font-size: 1.05rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* First child should not have top margin */
.cms-content > *:first-child {
    margin-top: 0;
}

/* Last child should not have bottom margin */
.cms-content > *:last-child {
    margin-bottom: 0;
}

/* ── Overskrifter ──

   Skalaen er bygget MOT brodteksten, ikke satt uavhengig av den. Da
   brodteksten gikk fra 0,95 til 1,05 rem, kollapset den gamle skalaen:

     h3  1,20 rem  ->  1,14x brodtekst   praktisk talt usynlig
     h4  1,05 rem  ->  1,00x             noyaktig samme storrelse
     h5  0,95 rem  ->  0,90x             MINDRE enn brodteksten

   Resultatet var at en side ble «bare tekst» — squint-testen fant ingen
   struktur, fordi det ikke var noen.

   Ny skala, ~1,3x mellom hvert trinn, alt regnet fra 1,05 rem:

     h2  2,35 rem  ->  2,24x    seksjon
     h3  1,65 rem  ->  1,57x    underseksjon
     h4  1,25 rem  ->  1,19x    baeres ogsaa av farge og vekt
     h5  0,92 rem  ->  0,88x    en ETIKETT, ikke en overskrift

   ── Hvorfor saa stort ──

   2,35 rem er 37,6 px mot en brodtekst paa 16,8 px. Det ser stort ut i en
   CSS-fil og normalt paa skjerm: lesespalta er 640 px, saa en h2 tar under
   halvannen linje. Skalaen er valgt mot MAALET, ikke mot skjermbredden — det
   er forholdet mellom overskrift og spalte som avgjor om den virker stor
   eller ropende.

   Over 2,5 rem begynner en toords overskrift aa brekke i to linjer paa 640
   px, og da er den ikke lenger en overskrift man skummer forbi.

   h5/h6 er mindre enn brodteksten MED VILJE: de er merkelapper i
   versaler, en annen slags ting, ikke et svakere trinn paa samme stige.

   ── Nivaaene brukes om hverandre ──

   `/page/informasjon` har ti h3 og ingen h2. `/page/regler` har én h2.
   `/page/foreldre` har begge. Forfatterne velger nivaa etter foelelse, saa
   BADE h2 og h3 maa lese som en tydelig seksjonsoverskrift — h3 kan vaere
   underordnet, men den kan ikke vaere utydelig. */

.cms-content h1 {
    font-size: 2.6rem;
    margin-top: 3rem;
    margin-bottom: 1rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--vl-text, #e6edf3);
}

/* Luft OVER, ikke rundt. En overskrift med like mye luft paa begge sider
   flyter mellom to avsnitt; med tyngden over binder den seg til teksten den
   innleder. Forholdet er omtrent 4:1. */
.cms-content h2 {
    font-size: 2.35rem;
    margin-top: 4.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--vl-text, #e6edf3);
}

.cms-content h3 {
    font-size: 1.65rem;
    margin-top: 3.25rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--vl-text, #e6edf3);
}

.cms-content h4 {
    font-size: 1.25rem;
    margin-top: 2.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--vl-text, #e6edf3);
}

.cms-content h5,
.cms-content h6 {
    font-size: 0.92rem;
    margin-top: 2rem;
    margin-bottom: 0.4rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--vl-text-muted, #8b949e);
}

/* Den forste overskriften skal ikke skyve seg vekk fra sidetittelen. */
.cms-content > :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}

/* ── Paragraphs & text ── */

.cms-content p {
    margin-bottom: 1.05em;
}

.cms-content strong,
.cms-content b {
    font-weight: 700;
    color: var(--vl-text, #e6edf3);
}

/* ── Links ── */

.cms-content a {
    color: var(--vl-primary, #6c5ce7);
    text-decoration: underline;
    text-decoration-color: rgba(108, 92, 231, 0.4);
    text-underline-offset: 2px;
    transition: color 0.15s, text-decoration-color 0.15s;
}
.cms-content a.btn {
    color: inherit;
    text-decoration: none;
}

.cms-content a:hover {
    color: var(--vl-accent, #a29bfe);
    text-decoration-color: var(--vl-accent, #a29bfe);
}

/* ── Images ── */

.cms-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--vl-radius, 16px);
    margin: 1em 0;
    display: block;
}

/* Centered images (TinyMCE alignment) */
.cms-content img[style*="margin-left: auto"],
.cms-content img.aligncenter {
    margin-left: auto;
    margin-right: auto;
}

/* ── Bilder og innbygginger med oppsett ──
   Blokkeditoren lagrer et OPPSETT, ikke maal: `full`, `medium`, `left` eller
   `right`. Maalene ligger her, saa de kan endres for alt innhold paa én gang —
   og saa de kan legges om paa smal skjerm, der «tekst ved siden av» ikke
   finnes som mulighet.

   `figure` eier avstanden; bildet inni nullstiller sin egen. */

.cms-content figure { margin: 1.4em 0; }
.cms-content figure img { margin: 0; width: 100%; }

.cms-content figcaption {
    margin-top: 0.55em;
    font-size: 0.84rem;
    color: var(--vl-text-muted, #8b949e);
    line-height: 1.5;
}

.cms-content .fig--medium {
    max-width: 60%;
    margin-inline: auto;
}

.cms-content .fig--left,
.cms-content .fig--right {
    max-width: 42%;
    margin-top: 0.35em;
}
.cms-content .fig--left {
    float: left;
    margin-right: 1.6em;
    margin-bottom: 1em;
}
.cms-content .fig--right {
    float: right;
    margin-left: 1.6em;
    margin-bottom: 1em;
}

/* En float som ikke lukkes renner ut av innholdet og legger seg over det som
   kommer etter. Overskrifter starter paa ny linje; broedtekst wrapper, som er
   hele poenget. */
.cms-content::after {
    content: "";
    display: block;
    clear: both;
}
.cms-content h2,
.cms-content h3 { clear: both; }

/* Under 640px er det ikke plass til tekst ved siden av noe som helst. */
@media (max-width: 640px) {
    .cms-content .fig--medium,
    .cms-content .fig--left,
    .cms-content .fig--right {
        float: none;
        max-width: 100%;
        margin-inline: 0;
    }
}

/* ── Innbygginger ──
   Ramma faar hoyden fra `aspect-ratio`, satt av `BlockRenderer` per tjeneste.
   Uten den ville en iframe uten innhold vaert null piksler hoy til den lastet. */

.cms-content .embed-frame {
    position: relative;
    width: 100%;
    border-radius: var(--vl-radius, 16px);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
}
.cms-content .embed-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    /* `.cms-content iframe` lenger nede gir alle iframes `margin: 1em 0`. Paa
       et absolutt plassert element med `inset: 0` FLYTTER den elementet i
       stedet for aa gi det luft — kartet la seg 15px for lavt og ble klippet
       nederst. */
    margin: 0;
}

/* ── Lists ── */

.cms-content ul,
.cms-content ol {
    margin-bottom: 1em;
    padding-left: 1.5em;
}

.cms-content li {
    margin-bottom: 0.35em;
}

.cms-content li > ul,
.cms-content li > ol {
    margin-top: 0.35em;
    margin-bottom: 0;
}

/* ── Blockquotes ── */

.cms-content blockquote {
    border-left: 3px solid var(--vl-primary, #6c5ce7);
    padding: 0.75rem 1rem;
    margin: 1.5em 0;
    color: var(--vl-text-muted, #8b949e);
    font-style: italic;
    background: var(--vl-glass, rgba(255, 255, 255, 0.03));
    border-radius: 0 var(--vl-radius-sm, 8px) var(--vl-radius-sm, 8px) 0;
}

.cms-content blockquote p:last-child {
    margin-bottom: 0;
}

/* ── Tables ── */

.cms-content table {
    width: 100%;
    margin: 1em 0;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.cms-content th,
.cms-content td {
    border: 1px solid var(--vl-border, #30363d);
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.cms-content th {
    background: var(--vl-glass, rgba(255, 255, 255, 0.03));
    font-weight: 600;
    color: var(--vl-text, #e6edf3);
}

.cms-content tr:nth-child(even) td {
    background: var(--vl-glass, rgba(255, 255, 255, 0.02));
}

/* ── Code ── */

.cms-content code {
    background: var(--vl-glass, rgba(255, 255, 255, 0.06));
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.88em;
    color: var(--vl-accent, #a29bfe);
}

.cms-content pre {
    background: var(--vl-surface-2, #161b22);
    padding: 1rem;
    border-radius: var(--vl-radius-sm, 8px);
    overflow-x: auto;
    margin: 1em 0;
    border: 1px solid var(--vl-border, #30363d);
}

.cms-content pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: 0.88rem;
    color: var(--vl-text, #e6edf3);
}

/* ── Horizontal rules ── */

.cms-content hr {
    border: none;
    border-top: 1px solid var(--vl-border, #30363d);
    margin: 2em 0;
}

/* ── Embedded media (iframes, videos) ── */

.cms-content iframe,
.cms-content video {
    max-width: 100%;
    border-radius: var(--vl-radius, 16px);
    margin: 1em 0;
}

/* ── Lightbox ── */

.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.lightbox-overlay.lightbox-active {
    opacity: 1;
    pointer-events: auto;
}

/* Scenen holder ETT element — et bilde eller en video. Den er en egen boks og
   ikke bare en `<img>`, fordi en `<video>` som bare bytter `src` kan fortsette
   å spille lyden fra den forrige mens den laster den nye. */
.lightbox-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 92vw;
    max-height: 88vh;
}

.lightbox-media {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.lightbox-active .lightbox-media {
    transform: scale(1);
}

/* Bildeteksten står over telleren, ikke i stedet for den — de svarer på hvert
   sitt spørsmål: «hva er dette» og «hvor er jeg i serien». */
.lightbox-caption {
    position: absolute;
    bottom: 3.25rem;
    left: 50%;
    transform: translateX(-50%);
    max-width: min(90vw, 640px);
    text-align: center;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.9rem;
    line-height: 1.4;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s;
    line-height: 1;
    padding: 0.25rem;
}

.lightbox-close:hover {
    opacity: 1;
}

/* Nav arrows */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    font-size: 1.25rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s, background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-nav:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }

/* Counter */
.lightbox-counter {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}

/* Clickable cursor hint for images in .cms-content */
.cms-content img {
    cursor: zoom-in;
}

/* ── Legacy class alias ── */

.event-description {
    line-height: 1.7;
    color: var(--vl-text-muted, #8b949e);
}

.event-description p {
    margin-bottom: 0.75rem;
}

.event-description img {
    max-width: 100%;
    height: auto;
    border-radius: var(--vl-radius, 16px);
}