/* ==========================================================================
   Linköping City Airport – tillgänglighetsanpassad styling
   Kontrast: text >= 4.5:1, UI-komponenter >= 3:1 (WCAG 1.4.3, 1.4.11).
   Relativa enheter + flytande layout så text kan förstoras 200 % (1.4.4).
   ========================================================================== */

:root {
    --lpi-blue: #00427a;        /* mot vit: ~9.9:1 */
    --lpi-blue-dark: #002f57;
    --lpi-ink: #1a1a1a;         /* mot vit: ~16:1 */
    --lpi-grey: #5a6472;        /* mot vit: ~5.1:1 */
    --lpi-border: #767676;      /* mot vit: 4.48:1 */
    --lpi-bg-soft: #f2f5f8;
    --lpi-accent: #ffd400;      /* markering: aktiv flik i toppmenyn + sökträffar */

    /* Typsnitt: byts i admin (Färgtema och typsnitt). Endast systemtypsnitt – inga filer laddas ner,
       så texten syns direkt och inga tredjepartsanrop görs (CSP: font-src 'self'). */
    --lpi-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --lpi-font-heading: var(--lpi-font-body);
    --lpi-error: #b3261e;       /* mot vit: ~6.4:1 */
    --lpi-success: #1b5e20;     /* mot vit: ~8.1:1 */
    --lpi-warning: #7a4b00;     /* mot vit: ~7.3:1 */
    --lpi-critical: #8c1d18;    /* mot vit: ~7.9:1 */
    --lpi-focus: var(--lpi-blue);
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

/* Ankarlänkar får inte hamna under den sticky toppbaren.
   --site-header-h mäts upp av js/site-nav.js och har en rimlig fallback. */
[id] { scroll-margin-top: calc(var(--site-header-h, 4.5rem) + 0.75rem); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    color: var(--lpi-ink);
    background: #ffffff;
    font-size: 1rem;
    line-height: 1.6;
    font-family: var(--lpi-font-body);
}

/* Rubrikerna kan ha ett eget typsnitt (t.ex. serif rubriker med sans-brödtext). De ärver annars
   --lpi-font-heading som pekar på brödtextens typsnitt. */
h1, h2, h3, h4, h5, h6,
.block-heading,
.site-header__brand {
    font-family: var(--lpi-font-heading);
}

/* Skiplänk (2.4.1) */
.skip-link {
    position: fixed;
    left: -9999px;
    top: 0;
    z-index: 2000;          /* ovanför den sticky toppbaren */
    padding: 0.75rem 1rem;
    background: var(--lpi-blue-dark);
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Synligt fokus (2.4.7) */
a:focus, button:focus, input:focus, select:focus, textarea:focus,
summary:focus, [tabindex]:focus, :focus-visible {
    outline: 3px solid var(--lpi-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Länkar (1.4.3, 2.4.4) */
a { color: var(--lpi-blue); text-decoration: underline; }
a:hover { color: var(--lpi-blue-dark); text-decoration-thickness: 2px; }
a:visited { color: #4a2a7a; }

/* Endast för skärmläsare */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Sidhuvud och meny – klistermärkt toppbar som följer med vid skroll (2.4.5) */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--lpi-blue-dark);
    padding: 0.4rem 0;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .3);
}
.site-header__inner { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; align-items: center; justify-content: space-between; }
.site-header__brand { margin: 0; font-size: 1.2rem; font-weight: 700; flex: 0 0 auto; }
/* Vit platta bakom logotypen så att både mörk och ljus logotyp blir läsbar mot den mörka baren. */
.site-header__brand a {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border-radius: 6px;
    padding: 0.3rem 0.7rem;
    text-decoration: none;
    white-space: nowrap;
}
.site-header__brand a:hover, .site-header__brand a:focus { color: var(--lpi-blue-dark); text-decoration: underline; }
.site-header__logo { display: block; width: auto; max-width: 60vw; }

/* Menyn ligger i en egen skrollbar rad så att toppbaren aldrig blir flerradig. */
.site-nav-area {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.3rem 0.25rem;   /* plats för fokusmarkeringen */
    -webkit-overflow-scrolling: touch;
}
.site-nav { list-style: none; display: flex; flex-wrap: nowrap; gap: 0.25rem; margin: 0; padding: 0; }
.site-nav a {
    display: inline-block;
    white-space: nowrap;
    color: #ffffff;
    text-decoration: none;
    padding: 0.4rem 0.65rem;
    border-radius: 4px;
    border-bottom: 3px solid transparent;
}
.site-nav a:hover, .site-nav a:focus { color: #ffffff; text-decoration: underline; text-decoration-thickness: 2px; }

/* Aktuell sektion markeras med färg + vikt + ram (inte enbart färg, 1.4.1). */
.site-nav a.is-active {
    background: #ffffff;
    color: var(--lpi-blue-dark);
    font-weight: 700;
    border-bottom-color: var(--lpi-accent);
}
.site-nav a.is-active:hover, .site-nav a.is-active:focus { color: var(--lpi-blue-dark); }

/* Huvudinnehåll */
main { display: block; }
main:focus-visible { outline: 3px solid var(--lpi-focus); outline-offset: 4px; }

.hero { background: var(--lpi-bg-soft); padding: 2rem 0; border-bottom: 1px solid var(--lpi-border); }
.hero__intro { max-width: 60ch; font-size: 1.125rem; }

/* Hero med bild: bilden täcker hela bredden (kant till kant) och beskärs i höjdled, så att höjden
   blir rimlig på både mobil och desktop. Texten ligger under bilden – ingen text över bilden, vilket
   gör kontrasten oberoende av motivet (WCAG 1.4.3).

   Högden följer bildens eget förhållande, 1920 × 600 (samma som rekommendationen i admin), i stället
   för en fast pixlarhöjd. Då blir beskärningen identisk på alla skärmbredder – en uppladdad 1920 × 600
   visas dessutom utan att något skärs bort. Tidigare gav en fast höjd helt olika utsnitt beroende på
   fönsterbredd (en remsa på en bred skärm, ett porträtt på en smal). */
.hero--image { padding: 0 0 2rem; overflow: hidden; }
.hero--image .container { padding-top: 1.75rem; }

.hero__media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center;
}

/* Ramen håller bildförhållandet och klipper zoomen, så att en större zoom aldrig spiller över
   sidan. Fokuspunkten (object-position) sitter på bilden. */
.hero__frame {
    aspect-ratio: 1920 / 600;
    max-height: 70vh;
    overflow: hidden;
}

/* Mobil: samma regel ger en alldeles för låg bild (≈120 px på en telefon), så där beskärs bilden
   medvetet hårdare i höjdled – ett medvetet undantag, inte en slump. */
@media (max-width: 575.98px) {
    .hero__frame {
        aspect-ratio: 16 / 9;
        max-height: none;
    }
}

/* Bildblock: skalas proportionellt (beskärs inte), har den bredd som satts i innehållet och
   centreras när den är smalare än kolumnen. */
.block-image { margin: 1.5rem auto; max-width: 100%; }
.block-image img { display: block; width: 100%; height: auto; border-radius: 8px; }
.block-image figcaption { margin-top: 0.5rem; color: var(--lpi-grey); font-size: 0.95rem; }

/* "Visa först efter knapptryck": en riktig knapp som öppnar innehållet i en svävande ruta.
   Dialogen är ett native <dialog>-element – fokusfälla, Esc och bakgrundsklick ingår. */
.block-reveal__cta { margin: 1.75rem 0; }

.block-reveal__button {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--lpi-blue-dark);
    color: #ffffff;
    border: 2px solid var(--lpi-blue-dark);
    border-radius: 6px;
    padding: 0.7rem 1.35rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 31, 61, .18);
    transition: background 120ms ease, box-shadow 120ms ease;
}
.block-reveal__button:hover { background: #001f3d; box-shadow: 0 4px 12px rgba(0, 31, 61, .26); }
.block-reveal__button:focus-visible { outline: 3px solid var(--lpi-accent, #ffd400); outline-offset: 2px; }
.block-reveal__icon { width: 1.15em; height: 1.15em; }

.block-dialog {
    border: 0;
    padding: 0;
    border-radius: 12px;
    width: min(46rem, calc(100vw - 2rem));
    max-height: min(88vh, 60rem);
    overflow: auto;
    background: #fff;
    color: var(--lpi-ink);
    box-shadow: 0 24px 64px rgba(16, 24, 40, .32);
}
.block-dialog::backdrop { background: rgba(16, 24, 40, .55); }

.block-dialog__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem 0.5rem;
    position: sticky;
    top: 0;
    background: #fff;
    border-bottom: 1px solid var(--lpi-border);
}
.block-dialog__title { margin: 0; font-size: 1.3rem; line-height: 1.3; }

.block-dialog__close {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--lpi-border);
    border-radius: 50%;
    background: #fff;
    color: var(--lpi-ink);
    cursor: pointer;
}
.block-dialog__close:hover { background: var(--lpi-bg-soft); }
.block-dialog__close:focus-visible { outline: 3px solid var(--lpi-accent, #ffd400); outline-offset: 2px; }
.block-dialog__close svg { width: 1.1rem; height: 1.1rem; }

.block-dialog__body { padding: 1rem 1.5rem 1.5rem; overflow-x: auto; }

/* Innehåll som inte får plats (t.ex. en bred tabell) scrollar i sidled i stället för att klämmas
   ihop – både i den svävande rutan och i vanliga block på smala skärmar. Sidan som helhet ska
   aldrig scrolla i sidled. */
.block-html { overflow-x: auto; }
.block-html table { max-width: none; }

/* Ingen sidscroll bakom en öppen dialog. */
body:has(dialog[open]) { overflow: hidden; }

.site-section { padding: 2rem 0; border-top: 1px solid #d7dde4; }
.site-section__intro { max-width: 70ch; color: var(--lpi-grey); }
.site-section__image { max-width: 100%; height: auto; }

.block-heading { margin-top: 2rem; }
.block-html { max-width: 75ch; }
.block-html ul, .block-html ol { padding-left: 1.5rem; }

/* Statusindikator (1.4.1 – aldrig enbart färg) */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    border: 2px solid;
    border-radius: 999px;
    font-weight: 700;
    background: #ffffff;
}
.status-badge--green { color: var(--lpi-success); border-color: var(--lpi-success); }
.status-badge--yellow { color: var(--lpi-warning); border-color: var(--lpi-warning); }
.status-badge--red { color: var(--lpi-critical); border-color: var(--lpi-critical); }

/* Flygtavla (1.3.1 semantisk tabell i markup) */
.flight-board caption { text-align: left; font-weight: 700; padding-bottom: 0.5rem; color: var(--lpi-ink); }
.flight-status { font-weight: 700; }
.flight-status--ontime { color: var(--lpi-success); }
.flight-status--delayed { color: var(--lpi-warning); }
.flight-status--cancelled { color: var(--lpi-critical); }
.flight-status--unknown { color: var(--lpi-grey); }

/* Incidenter */
.incident-card {
    border: 2px solid var(--lpi-border);
    border-left-width: 8px;
    border-radius: 4px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    background: #ffffff;
}
.incident-card--green { border-left-color: var(--lpi-success); }
.incident-card--yellow { border-left-color: var(--lpi-warning); }
.incident-card--red { border-left-color: var(--lpi-critical); }

.incident-meta { display: grid; grid-template-columns: minmax(10rem, auto) 1fr; gap: 0.25rem 1rem; }
.incident-meta dt { font-weight: 700; }
.incident-meta dd { margin: 0; }

.incident-updates { list-style: none; padding-left: 0; }
.incident-updates li { padding: 0.5rem 0; border-top: 1px solid #d7dde4; }
.incident-updates time { display: block; color: var(--lpi-grey); font-size: 0.9rem; }

/* Press */
.press-filter__list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; }
.press-filter__list a {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border: 2px solid var(--lpi-border);
    border-radius: 4px;
    text-decoration: none;
}
.press-filter__list a.is-active { background: var(--lpi-blue-dark); color: #ffffff; border-color: var(--lpi-blue-dark); }

.press-list { list-style: none; padding-left: 0; }
.press-list > li { margin-bottom: 1.5rem; }
.press-category { font-weight: 700; color: var(--lpi-blue); }
.press-meta { color: var(--lpi-grey); }

/* Formulär – kompakt rutnät (3.3.1, 3.3.2, 3.3.3)
   1.4.10 Reflow: rutnätet kollapsar till EN kolumn så snart kolumnen inte får
   plats (auto-fit + min()), vilket ger korrekt beteende vid 320 px och 200 % zoom.
   Träffytor >= 44 px och etiketten ligger kvar ovanför sitt fält (3.3.2). */
.dynamic-form { max-width: 50rem; }

.dynamic-form fieldset { border: 1px solid var(--lpi-border); border-radius: 4px; padding: 0.85rem 1rem 1rem; }
.dynamic-form legend { font-weight: 700; font-size: 1.0625rem; padding: 0 0.35rem; }

.form-grid {
    display: grid;
    /* 18rem: två kolumner på desktop (en 50rem-form får plats med 2 x 18rem + gap,
       men inte 3) och en kolumn så snart kolumnen inte får plats. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 0.85rem 1rem;
    align-items: start;
}

.form-field { margin: 0; }                  /* avståndet sköts av rutnätets gap */
.form-field--wide { grid-column: 1 / -1; }  /* textarea, kryssruta, fil */

.form-field > label { display: block; font-weight: 700; margin-bottom: 0.2rem; }
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    max-width: 100%;
    padding: 0.5rem 0.6rem;                 /* >= 44 px hög träffyta */
    border: 2px solid var(--lpi-border);
    border-radius: 4px;
    font-size: 1rem;                        /* 16 px: ingen autozoom på iOS */
    color: var(--lpi-ink);
    background: #ffffff;
}
.form-field textarea { min-height: 5.5rem; resize: vertical; }

/* Honeypot i formulären: ligger utanför skärmen, hoppas över i tabbordningen och är dolt för
   skärmläsare (aria-hidden). Människor ser det aldrig – bottar som fyller i "alla fält" gör det,
   och då avvisas inskicket på servern. Använder inte display:none, eftersom en del bottar hoppar
   över fält som är helt dolda. */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Tidsfält: två rullistor (timme och minut) i stället för <input type="time">, som visar 12-timmars-
   format (AM/PM) när webbläsarens språk är engelska. Rullisterna visar alltid 24 timmar. */
.time-input { display: flex; align-items: center; gap: 0.25rem; }
.time-input select { width: auto; min-width: 4.75rem; }
.time-input__separator { font-weight: 700; }

.dynamic-form form > button[type="submit"] { margin-top: 0.85rem; }
.form-field--error input,
.form-field--error select,
.form-field--error textarea { border-color: var(--lpi-error); border-width: 3px; }

.required-marker { color: var(--lpi-error); font-weight: 700; }
.field-help { display: block; color: var(--lpi-grey); font-size: 0.9rem; margin-top: 0.25rem; }
.field-error { color: var(--lpi-error); font-weight: 700; margin: 0.25rem 0 0; }

.checkbox-row { display: flex; gap: 0.5rem; align-items: flex-start; }
.checkbox-row input { width: auto; max-width: none; margin-top: 0.35rem; }
.checkbox-row label { font-weight: 400; }

.error-summary {
    border: 3px solid var(--lpi-error);
    border-radius: 4px;
    background: #fdf3f2;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.error-summary h3 { margin-top: 0; color: var(--lpi-error); }

.success-message {
    border: 3px solid var(--lpi-success);
    border-radius: 4px;
    background: #f2f8f3;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.success-message p { margin: 0; color: var(--lpi-success); font-weight: 700; }

button[type="submit"] {
    background: var(--lpi-blue-dark);
    color: #ffffff;
    border: 2px solid var(--lpi-blue-dark);
    border-radius: 4px;
    padding: 0.6rem 1.25rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}
button[type="submit"]:hover { background: #001f3d; }
button[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Sidfot */
.site-footer { background: var(--lpi-bg-soft); border-top: 1px solid var(--lpi-border); padding: 1.5rem 0; margin-top: 2rem; }
.site-footer__nav { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; padding: 0; }
.site-footer__meta { color: var(--lpi-grey); }

/* Tabeller */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 0.5rem; border-bottom: 1px solid #d7dde4; }
.table thead th { border-bottom: 2px solid var(--lpi-ink); }

/* Tabeller i redaktörsinnehåll (t.ex. cookiepolicyn). Redigeraren skriver <table> utan klass, och då
   ger varken Bootstrap eller vi någon luft: cellerna klistrar ihop och en cell med en enda rad
   hamnar mitt i en hög rad (webbläsarens standard är vertical-align: middle). */
.block-html table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1rem;
}
.block-html th,
.block-html td {
    text-align: left;
    vertical-align: top;
    padding: 0.5rem;
    border-bottom: 1px solid #d7dde4;
    /* Långa tekniska strängar (t.ex. .AspNetCore.Antiforgery) radbryts när de inte får plats.
       Här står break-word och inte anywhere: anywhere gör att cellens minsta bredd blir ett enda
       tecken, och då kan en tabell i en smal yta (t.ex. en dialogruta) klämmas ihop till en bokstav
       per kolumn i stället för att radbryta. */
    overflow-wrap: break-word;
    word-break: normal;
    /* Ingen kolumn blir smalare än så här – rubriker som "Skyftelslängd" ska stå på en rad eller två,
       inte staplas. */
    min-width: 5rem;
}
.block-html thead th { border-bottom: 2px solid var(--lpi-ink); }
.block-html code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    background: var(--lpi-bg-soft);
    padding: 0.1em 0.3em;
    border-radius: 4px;
}

/* En tabell behöver mer bredd än löptextens 75 tecken. Där en tabell finns får blocket använda hela
   bredden, men texten runt omkring behåller sin läsbara radlängd. :has stöds av moderna webbläsare –
   utan stöd gäller 75ch rakt igenom, vilket fortfarande fungerar eftersom cellerna radbryter. */
.block-html:has(table) { max-width: 100%; }
.block-html:has(table) > p,
.block-html:has(table) > ul,
.block-html:has(table) > ol,
.block-html:has(table) > h3,
.block-html:has(table) > h4 { max-width: 75ch; }

.empty-state { color: var(--lpi-grey); font-style: italic; }

/* --- Lodrät sektionsmeny (scrollspy) -----------------------------------------
   Visas när man skrollat förbi heron och markerar var på sidan man är.
   Progressiv förbättring: kräver js/site-nav.js – annars finns toppmenyn kvar
   som vanliga ankarlänkar. */
.section-nav {
    position: fixed;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    z-index: 90;
    min-width: 3.5rem;
    background: #ffffff;
    border: 2px solid var(--lpi-border);
    border-radius: 8px;
    padding: 0.5rem 0.4rem;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .18);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
}
.section-nav.is-visible { opacity: 1; visibility: visible; }

.section-nav__title {
    margin: 0 0 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--lpi-grey);
    text-align: right;
}
.section-nav__list { list-style: none; margin: 0; padding: 0; }

.section-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.3rem 0.35rem;
    border-radius: 4px;
    color: var(--lpi-ink);
    text-decoration: none;
    font-size: 0.95rem;
}
.section-nav__link:hover, .section-nav__link:focus {
    background: var(--lpi-bg-soft);
    color: var(--lpi-blue-dark);
    text-decoration: underline;
}

.section-nav__dot {
    flex: 0 0 auto;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--lpi-grey);
}
.section-nav__label { white-space: nowrap; }

/* Aktuell sektion: ifylld punkt + vikt + bakgrund (aldrig enbart färg, 1.4.1). */
.section-nav__link.is-active {
    background: var(--lpi-bg-soft);
    color: var(--lpi-blue-dark);
    font-weight: 700;
}
.section-nav__link.is-active .section-nav__dot {
    background: var(--lpi-blue-dark);
    border-color: var(--lpi-blue-dark);
    width: 0.9rem;
    height: 0.9rem;
}

/* Mellanbredd: kompakt punkträcke. Aktuell sektions rubrik visas ALLTID
   (aldrig hover-beroende, 1.4.13) – och alla rubriker visas när man pekar eller
   tabbar inom menyn, så ingen information är enbart hover-beroende. */
@media (min-width: 1200px) and (max-width: 1759.98px) {
    .section-nav__title { display: none; }
    .section-nav__label {
        display: none;
        position: absolute;
        right: calc(100% + 0.5rem);
        top: 50%;
        transform: translateY(-50%);
        background: #ffffff;
        border: 2px solid var(--lpi-border);
        border-radius: 4px;
        padding: 0.1rem 0.5rem;
        font-size: 0.85rem;
        font-weight: 400;
        color: var(--lpi-ink);
    }
    .section-nav__link.is-active .section-nav__label { display: block; }
    .section-nav:hover .section-nav__label,
    .section-nav:focus-within .section-nav__label { display: block; }
}

/* Små skärmar: toppmenyn (som nu skrollar horisontellt) räcker. */
@media (max-width: 1199.98px) { .section-nav { display: none; } }

/* --- Global sökning i toppbaren ---------------------------------------------- */
.site-search { position: relative; flex: 0 0 auto; }

/* --- Driftstatus i toppbaren ------------------------------------------------- */
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.7rem;
    border: 2px solid var(--lpi-border);
    border-radius: 999px;
    background: #ffffff;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
}
.status-chip__dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: currentColor;
}
/* Driftstatuschipen behåller alltid sin färg. Utan de här raderna tar den globala länkfärgen
   över: `a:visited` (lila) gjorde att chipen bytte färg efter ett klick, och `a:hover` gjorde den
   blå. Varje läge listas därför uttryckligen (webbläsare tillåter inte :visited inuti :is()). */
.status-chip--green,
.status-chip--green:visited,
.status-chip--green:hover,
.status-chip--green:focus { color: var(--lpi-success); border-color: var(--lpi-success); }

.status-chip--yellow,
.status-chip--yellow:visited,
.status-chip--yellow:hover,
.status-chip--yellow:focus { color: var(--lpi-warning); border-color: var(--lpi-warning); }

.status-chip--red,
.status-chip--red:visited,
.status-chip--red:hover,
.status-chip--red:focus { color: var(--lpi-critical); border-color: var(--lpi-critical); }
.status-chip:hover, .status-chip:focus { text-decoration: underline; }

@media (max-width: 767.98px) {
    .status-chip { font-size: 0.82rem; padding: 0.25rem 0.55rem; }
}

.site-search__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
}
.site-search__toggle:hover,
.site-search__toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .4);
}
.site-search__icon { width: 1.25rem; height: 1.25rem; }

.site-search__panel {
    /* Fäst mot fönstret (inte mot knappen) – annars hamnar panelen utanför kanten
       när sökfältet ligger långt till höger i en smal menyrad. */
    position: fixed;
    top: calc(var(--site-header-h, 4.5rem) + 0.5rem);
    right: 1rem;
    left: auto;
    z-index: 120;
    width: min(30rem, calc(100vw - 2rem));
    padding: 0.9rem 1rem 1rem;
    background: #ffffff;
    border: 2px solid var(--lpi-border);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
}
.site-search__panel[hidden] { display: none; }

.site-search__label { display: block; font-weight: 700; margin-bottom: 0.3rem; }
.site-search__row { display: flex; gap: 0.5rem; align-items: stretch; }
.site-search__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.5rem 0.6rem;
    border: 2px solid var(--lpi-border);
    border-radius: 4px;
    font-size: 1rem;
    color: var(--lpi-ink);
    background: #ffffff;
}
.site-search__close {
    flex: 0 0 auto;
    width: 2.8rem;
    border: 2px solid var(--lpi-border);
    border-radius: 4px;
    background: #ffffff;
    color: var(--lpi-ink);
    cursor: pointer;
}
.site-search__close svg { width: 1rem; height: 1rem; }
.site-search__close:hover { background: var(--lpi-bg-soft); }

.site-search__status { margin: 0.6rem 0 0; font-size: 0.9rem; color: var(--lpi-grey); }
.site-search__status:empty { display: none; }

.site-search__results {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    max-height: 22rem;
    overflow-y: auto;
}
.site-search__results li + li { border-top: 1px solid #e3e8ee; }
.site-search__result {
    display: block;
    padding: 0.55rem 0.5rem;
    border-radius: 4px;
    text-decoration: none;
    color: var(--lpi-ink);
}
.site-search__result:hover, .site-search__result:focus { background: var(--lpi-bg-soft); }
.site-search__result-title { display: block; font-weight: 700; color: var(--lpi-blue-dark); }
.site-search__result-snippet { display: block; font-size: 0.92rem; color: var(--lpi-grey); }
.site-search__result-snippet mark { background: var(--lpi-accent); color: #1a1a1a; padding: 0 0.1em; }
.site-search__result-meta { display: block; font-size: 0.8rem; color: var(--lpi-grey); margin-top: 0.15rem; }

/* Markerad träff på sidan (sätts av site-search.js). */
mark.search-hit {
    background: var(--lpi-accent);
    color: #1a1a1a;
    padding: 0.1em 0.15em;
    border-radius: 2px;
    scroll-margin-top: calc(var(--site-header-h, 4.5rem) + 4rem);
}

/* Smala skärmar: panelen fyller bredden under toppbaren. */
@media (max-width: 575.98px) {
    .site-search__panel { left: 0.75rem; right: 0.75rem; width: auto; }
}

/* --- Cookie-samtycke ---------------------------------------------------------- */
.cookie-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 110;
    background: #ffffff;
    border-top: 3px solid var(--lpi-blue-dark);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .18);
}
.cookie-consent[hidden] { display: none; }

.cookie-consent__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}
.cookie-consent__text { flex: 1 1 24rem; min-width: 0; }
.cookie-consent__title { margin: 0 0 0.2rem; font-size: 1.05rem; }
.cookie-consent__text p { margin: 0; max-width: 70ch; }

.cookie-consent__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cookie-consent__btn {
    padding: 0.55rem 1.1rem;
    border: 2px solid var(--lpi-blue-dark);
    border-radius: 4px;
    background: #ffffff;
    color: var(--lpi-blue-dark);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}
.cookie-consent__btn--primary { background: var(--lpi-blue-dark); color: #ffffff; }
.cookie-consent__btn:hover { background: var(--lpi-bg-soft); }
.cookie-consent__btn--primary:hover { background: #001f3d; color: #ffffff; }

/* --- Menystilar (väljs i admin: Varumärke → Meny) -----------------------------
   Klasserna sätts på en wrapper i layouten av MenuStyles.CssClass. Standardvalen
   (auto / hoger / platta) motsvarar exakt reglerna ovan, så en sajt som inte valt
   någon stil ser likadan ut som förut. */

/* Alla etiketter synliga hela tiden – ingen text är hover-beroende (1.4.13). */
.menu--rail-etiketter .section-nav {
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

@media (min-width: 1200px) {
    .menu--rail-etiketter .section-nav__title { display: block; }
    .menu--rail-etiketter .section-nav__label {
        position: static;
        display: block;
        transform: none;
        background: none;
        border: 0;
        padding: 0;
        font-size: 0.95rem;
        font-weight: inherit;
        color: inherit;
    }
}

/* Räcket avstängt – toppmenyn används i stället. */
.menu--rail-dold .section-nav,
.menu--rail-dold .section-nav.is-visible { display: none; }

/* Räcket i vänsterkanten: punkterna först, etiketterna fälls ut åt höger. */
.menu--side-vanster .section-nav { right: auto; left: 0.75rem; }
.menu--side-vanster .section-nav__link { flex-direction: row-reverse; justify-content: flex-start; }
.menu--side-vanster .section-nav__title { text-align: left; }

@media (min-width: 1200px) and (max-width: 1759.98px) {
    .menu--side-vanster .section-nav__label { right: auto; left: calc(100% + 0.5rem); }
}

/* Hur aktuell sektion markeras i toppmenyn. Alla varianter behåller fet text och en
   markeringsfärgad underkant, så tillståndet aldrig förmedlas enbart med färg (1.4.1). */
.menu--top-understrykning .site-nav a.is-active {
    background: transparent;
    color: #ffffff;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    border-bottom-color: var(--lpi-accent);
}
.menu--top-understrykning .site-nav a.is-active:hover,
.menu--top-understrykning .site-nav a.is-active:focus { color: #ffffff; }

.menu--top-ram .site-nav a.is-active {
    box-shadow: inset 0 0 0 2px var(--lpi-accent);
    border-bottom-color: var(--lpi-accent);
}

/* Respektera reducerad rörelse */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}