:root {
    --topstory: hsl(60, 100%, 50%);
}

    .teaser--topstory {
        --teaser-section-color: var(--body-color);
        background-color: var(--topstory) !important;
    }

        .teaser--topstory .teaser-section {
            font-size: 1rem;
        }

        .teaser--topstory .teaser-title {
            font-weight: 900;
        }


    .banner-label {
        flex-basis: 100%;
        text-align: center;
        font-size: 0.75rem;
        color: #777;
        margin-bottom: 4px;
    }


    .banner-label-topscroll {
        flex-basis: 100%;
        text-align: center;
        font-size: .75rem;
        color: #777;
        margin-bottom: 4px;
        position: absolute;
        z-index: 999;
        right: 10px;
    }


    .article-content p a, .article-bodytext p a, .article-bodytext ul a {
        text-decoration: underline !important
    }


    .Kommentar-skribent, .grundskrift-kursiv {
        font-style: italic;
    }

    @media (max-width: 768px) {
        .banner--display, .banner--spot {
            width: auto !important;
        }
    }

    div#cke_1_contents {
        height: 300px !important;
    }

    .zone-sm zone-topic-clusters {
        background-color: #00ff21 !important;
        color: #fff;
    }

    .topic-faq a {
        color: #fff !important;
        text-decoration: underline !important
    }

    .lm-banner:has(.banner--interscroll,.banner--topscroll) .bannercontent {
        background-position: center !important;
    }
    /*.lm-banner:has(.banner--interscroll) {
    height: 120vh;
}
*/
    /* ─── Article image carousel modal ─── */
    body.modal-open {
        overflow: auto !important;
        padding-right: 0 !important;
    }

    .carousel-icon {
        background-color: rgba(255, 255, 255, 0.9);
        border-color: rgba(255, 255, 255, 0.8);
        color: #333;
        z-index: 3;
        padding: 0.2rem;
        display: block;
    }

    .carousel-icon .icon {
        width: 1.25rem;
        height: 1.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .carousel-icon .icon svg {
        width: 1.25rem;
        height: 1.25rem;
        display: block;
        fill: currentColor;
    }

    #article-img-carousel .modal-dialog {
        margin: 12px;
    }

    @media (min-width: 576px) {
        #article-img-carousel .modal-dialog {
            margin-right: auto;
            margin-left: auto;
        }
    }

    #article-img-carousel .carousel-caption {
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        top: auto !important;
        padding: 0.75rem 1rem !important;
        background: #fff !important;
        background-image: none !important;
        color: #333 !important;
        font-size: 0.875rem;
        line-height: 1.4;
        text-align: left;
        border-radius: 0 0 var(--modal-border-radius, 0.5rem) var(--modal-border-radius, 0.5rem);
    }

    #article-img-carousel .carousel-item {
        overflow: visible;
    }

    #article-img-carousel .carousel-item::before,
    #article-img-carousel .carousel-item::after,
    #article-img-carousel .carousel-caption::before,
    #article-img-carousel .carousel-caption::after {
        display: none !important;
    }

    #article-img-carousel .carousel-item img {
        border-radius: var(--modal-border-radius, 0.5rem) var(--modal-border-radius, 0.5rem) 0 0;
        width: 100%;
        height: auto;
        display: block;
        background: #fff;
    }

    /* Neutralize .ratio class on carousel images so they keep natural aspect */
    #article-img-carousel .carousel-item .ratio {
        position: static;
        --aspect-ratio: none;
    }

    #article-img-carousel .carousel-item .ratio::before {
        display: none;
        padding-top: 0;
    }

    #article-img-carousel .carousel-item .ratio > * {
        position: static;
    }

    #article-img-carousel .carousel-inner {
        overflow: visible;
    }

    #article-img-carousel .modal-body {
        overflow: visible;
        padding: 0;
        background: transparent;
    }

    #article-img-carousel .modal-content {
        overflow: visible;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    #article-img-carousel .btn-close {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        z-index: 10;
        background-color: rgba(255,255,255,0.9);
        border-radius: 50%;
        padding: 0.65rem;
        opacity: 1;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }

    @media (min-width: 768px) {
        #article-img-carousel .carousel-indicators {
            margin-bottom: -2rem;
        }
    }

    #article-img-carousel .carousel-control-prev,
    #article-img-carousel .carousel-control-next {
        width: 3rem;
        height: 3rem;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        background-color: rgba(0,0,0,0.4);
        border: 0;
        border-radius: 50%;
        opacity: 0.8;
        padding: 0;
    }

    #article-img-carousel .carousel-control-prev:hover,
    #article-img-carousel .carousel-control-next:hover {
        background-color: rgba(0,0,0,0.6);
        opacity: 1;
    }

    @media (min-width: 768px) {
        #article-img-carousel .carousel-control-prev {
            left: -3.5rem;
        }

        #article-img-carousel .carousel-control-next {
            right: -3.5rem;
        }
    }

    #article-img-carousel .carousel-control-prev-icon,
    #article-img-carousel .carousel-control-next-icon {
        width: 1.5rem;
        height: 1.5rem;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: 0;
        transform: translate(-50%, -50%);
    }

    #article-img-carousel .carousel-control-prev-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M10.5 2.5 L5 8 L10.5 13.5'/%3e%3c/svg%3e");
    }

    #article-img-carousel .carousel-control-next-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M5.5 2.5 L11 8 L5.5 13.5'/%3e%3c/svg%3e");
    }

    /* Mobile: stack indicators and arrows below the image */
    @media (max-width: 767.98px) {
        #article-img-carousel .carousel {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        #article-img-carousel .carousel-inner {
            order: 1;
            width: 100%;
        }

        #article-img-carousel .carousel-indicators {
            order: 2;
            position: static;
            width: 100%;
            margin: 0.75rem auto 0;
        }

        #article-img-carousel .carousel-control-prev,
        #article-img-carousel .carousel-control-next {
            order: 3;
            position: relative;
            top: auto;
            left: auto;
            right: auto;
            transform: none;
            display: inline-block;
            margin: 0.5rem 0.25rem 0;
            flex: none;
            background-color: rgba(0,0,0,0.4);
            touch-action: manipulation;
            transition: none;
        }

        #article-img-carousel .carousel-control-prev:hover,
        #article-img-carousel .carousel-control-prev:focus,
        #article-img-carousel .carousel-control-prev:active,
        #article-img-carousel .carousel-control-next:hover,
        #article-img-carousel .carousel-control-next:focus,
        #article-img-carousel .carousel-control-next:active {
            background-color: rgba(0,0,0,0.4) !important;
            opacity: 0.8 !important;
        }
    }


    .article blockquote:before {
        content: "“";
        position: absolute;
        top: -.35rem;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        width: 3rem;
        height: 2rem;
        font-size: 6rem;
        line-height: 1;
        font-family: georgia;
        color: #036d76;
        text-align: center;
    }

    .article blockquote {
        display: block;
        border-width: 2px 0;
        border-style: solid;
        border-color: rgba(0, 0, 0, .125);
        padding: 2rem 0 1.5rem;
        margin: 2rem auto;
        position: relative;
        max-width: 80%;
    }

        .article blockquote:after {
            content: attr(cite);
            display: block;
            text-align: right;
            color: #036d76;
            margin-top: .5rem;
        }


    .Kommentar-skribent {
        width: auto;
        margin-bottom: 1rem !important;
    }

    /* Afsenderlinjen er typisk et <p> med ren inline-tekst. display:flex fra
       base-CSS'en gør HVER direkte børneknude til sit eget flex-item, så
       "…Hals</em>, b<em>yrådsmedlem…" bliver til tre kolonner ved siden af
       hinanden - og det løsrevne "b" ender i sin egen. Flex hører til
       billedvarianten (img + p); en ren tekstlinje skal sættes som block. */
    p.Kommentar-skribent {
        display: block;
    }

    /* Samme problem i en <div> uden billede. Egen regel og ikke lagt i
       selektørlisten ovenfor: en browser uden :has() ville kassere HELE reglen. */
    .Kommentar-skribent:not(:has(img)) {
        display: block;
    }

    blockquote p:last-of-type {
        margin-bottom: 0;
    }

    .citat-person, .hojre-kursiv {
        display: block !important;
        font-style: italic !important;
        text-align: right !important;
    }

    .related-article .card-body {
        padding: 1rem !important;
    }
    /* Mobile (default) */
    .banner--display:has(*) {
        min-height: 250px;
    }
    /* Desktop (min-width: 992px = Bootstrap's lg breakpoint) */
    @media (min-width: 992px) {
        .banner--display:has(*) {
            min-height: 190px;
        }

        .hidden-spinner {
            display: none !important;
        }
    }

    .video-wrapper {
        position: relative;
        width: 100%;
        max-width: 976px; /* Adjust as needed */
        height: 0;
        padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    }

        .video-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }


    .theme-primary a {
        color: hsla(0, 0%, 100%, 0.95) !important;
    }


    .paywall:before {
        content: "";
        position: absolute;
        z-index: 0;
        top: -171px;
        height: 167px;
        width: 100%;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.9) 100%);
        /*background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, 0.75) 24%, hsla(0, 0%, 100%, 0.9) 77%, #fff);*/
    }

    .article-preview {
        max-height: 160px;
        overflow: hidden;
        position: relative;
    }

        .article-preview::before {
            content: "";
            position: absolute;
            bottom: 0;
            height: 160px; /* adjust if needed */
            width: 100%;
            background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 100%);
            pointer-events: none;
            z-index: 1;
        }


    .lm-banner:has(.banner--interscroll) .banner--interscroll {
        top: 0;
    }
    /* Skærmbredde ≥ 992px og pixel‐ratio ≥ 1.25 (125 % og op) */
    @media (min-width: 992px) and (min-resolution: 1.25dppx) {
        .lm-banner:has(.banner--interscroll) {
            --scroll-banner-offset: -40px;
        }
        /*    .featured-news {
        display: none
    }*/
    }
    /* Samme med dpi‐notation */
    @media (min-width: 992px) and (min-resolution: 120dpi) {
        .lm-banner:has(.banner--interscroll) {
            --scroll-banner-offset: -25px;
        }
        /*    .featured-news {
        display: none
    }*/
    }
    /* Ældre WebKit/Firefox‐prefixer */
    @media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 992px) and (-moz-device-pixel-ratio: 1.25) {
        .lm-banner:has(.banner--interscroll) {
            --scroll-banner-offset: -40px;
        }
        /* .featured-news {
        display: none
    }*/
    }

    @media (max-width: 600px) {

        .banner--spot iframe, .banner--display iframe {
            position: relative !important
        }
    }

    .hoest-tour-ticker h6.teaser-title {
        font-size: 1.3rem;
        margin: 0 auto;
    }



    .inline-banner {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        padding: 8px 16px;
        background: #f5f5f5;
        color: #222;
        border: 1px solid #ccc;
        border-radius: 6px;
    }

        .inline-banner .logo svg {
            height: 60px;
            width: auto;
            display: block;
        }

        .inline-banner .copy {
            font-size: 20px;
            font-weight: 600;
            line-height: 1.3
        }

        .inline-banner .highlight-banner {
            font-size: 28px;
            font-weight: 800;
            color: #004c97;
            display: block;
            margin: 0 0 4px 0
        }

        .inline-banner .dash {
            margin: 0 6px;
            font-weight: 400;
            color: #555
        }
        /* Size caps per format */
        .inline-banner .w980 {
            max-width: 980px;
            min-height: 80px
        }

        .inline-banner .w380 {
            max-width: 380px;
            min-height: 180px
        }

    @media (max-width: 768px) {
        .inline-banner {
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: 12px;
            padding: 16px;
        }

            .inline-banner .logo {
                display: flex;
                justify-content: center;
            }

                .inline-banner .logo svg {
                    width: 100%;
                    max-width: 200px; /* eller en størrelse du ønsker */
                    height: auto;
                }

            .inline-banner .copy {
                font-size: 18px;
            }

            .inline-banner .highlight-banner {
                font-size: 24px;
            }
    }



    .video-ad-banner {
        margin: 20px 0 30px 0;
        overflow: hidden;
        transition: max-height 0.6s ease-out, opacity 0.6s ease-out, margin 0.6s ease-out;
        max-height: 500px;
        opacity: 1;
    }

        .video-ad-banner.collapsed {
            max-height: 0;
            opacity: 0;
            margin: 0;
        }

    .injected-banner-text {
        display: block;
        text-align: center;
        font-size: 14px;
        color: #666;
        margin-bottom: 10px;
    }

    .video-container {
        border: 1px solid #000;
        margin-bottom: 40px;
        height: 343px;
        position: relative;
        background: #000;
    }

    .vjs-ad-top {
        padding-bottom: 56.25%;
        position: relative;
        background: #000;
    }

    #linkOverlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
    }

    #replayContainer {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
        display: none;
    }

        #replayContainer.active {
            display: block;
        }

    #replayButton, #followLinkButton {
        background: rgba(0, 0, 0, 0.8);
        color: white;
        border: none;
        padding: 20px;
        border-radius: 10px;
        cursor: pointer;
        text-align: center;
        margin: 10px;
        transition: background 0.3s ease;
    }

        #replayButton:hover, #followLinkButton:hover {
            background: rgba(0, 0, 0, 0.9);
        }

        #replayButton svg, #followLinkButton svg {
            width: 60px;
            height: 60px;
            margin-bottom: 10px;
        }

    #closeAdButtonContainer {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 10;
    }

    #closeAdButton {
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 8px 12px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;
        transition: background 0.3s ease;
    }

        #closeAdButton:hover {
            background: rgba(0, 0, 0, 0.9);
        }

    #audioButtonContainer {
        position: absolute;
        bottom: 10px;
        right: 10px;
        z-index: 10;
    }

    #toggleAudioButton {
        width: 40px;
        height: 40px;
        background: rgba(0, 0, 0, 0.8);
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 18px;
        transition: background 0.3s ease;
    }

        #toggleAudioButton:hover {
            background: rgba(0, 0, 0, 0.9);
        }

        #toggleAudioButton.audioOff::before {
            content: "🔇";
        }

        #toggleAudioButton.audioOn::before {
            content: "🔊";
        }

    .video-player {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 18px;
    }

    @media (max-width: 768px) {
        .video-ad-banner {
            margin: 10px 0 20px 0;
        }

        .video-container {
            height: 200px;
        }

        #replayButton, #followLinkButton {
            padding: 15px;
        }

            #replayButton svg, #followLinkButton svg {
                width: 40px;
                height: 40px;
            }
    }

    .page {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    .page-content {
        flex: 1;
    }

    .featured-news {
        height: auto;
        overflow-x: clip;
    }

    .featured-news .teaser-media {
        aspect-ratio: 16 / 9 !important;
    }

    .featured-news .teaser-img,
    .featured-news .teaser-media > img {
        aspect-ratio: 16 / 9 !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: cover !important;
    }

    .page-header {
        background-color: #fff;
    }

    .page-content, .page-footer {
        background-color: var(--body-bg, #fff);
        position: relative;
        z-index: 1;
    }

    .card--teaser {
        border-radius: 0 !important;
        border: none !important;
    }

    .eu-box {
        border: 1px solid #000; /* small border */
        background-color: #d2d2d2;
        padding: 15px; /* optional but recommended */
        margin-bottom: 20px;
    }
    /* Blå faktaboks */
    .card.bg-blue {
        background-color: #0d6efd; /* Bootstrap primary blue */
        color: #ffffff;
    }
        /* Tekst i faktaboksen */
        .card.bg-blue p,
        .card.bg-blue li,
        .card.bg-blue h2 {
            color: #ffffff;
        }
        /* Links: hvide og fede */
        .card.bg-blue a {
            color: #ffffff;
            font-weight: 700;
            text-decoration: underline !important;
        }
            /* Hover/focus for links */
            .card.bg-blue a:hover,
            .card.bg-blue a:focus {
                color: #e6e6e6;
                text-decoration: none !important;
            }
        /* Knap i bunden – tilpasset blå baggrund */
        .card.bg-blue .btn-outline-secondary {
            color: #ffffff;
            border-color: #ffffff;
        }

            .card.bg-blue .btn-outline-secondary:hover {
                background-color: #ffffff;
                color: #0d6efd;
            }






/* Fejlrapport #4237655 — Faktaboks-trunkering (håndteres serverside i
   DocumentFactBox.razor; her er kun styling af inline "Læs mere"-link). */
a.factbox-laes-mere,
.factbox-laes-mere {
    color: hsl(208, 100%, 32%);
    cursor: pointer;
    font-weight: 600;
    margin-left: 0.25em;
    user-select: none;
    white-space: nowrap;
    text-decoration: none !important;
}

a.factbox-laes-mere:hover,
.factbox-laes-mere:hover {
    text-decoration: underline !important;
    color: hsl(208, 100%, 24%);
}


/* ──────────────────────────────────────────────────────────────────────────
   Web-font FOUT / CLS mitigation
   The Google Fonts (Bitter, Lora, PT Serif) are loaded with display=swap. Until
   they arrive the browser paints the generic `serif` (Times New Roman), then
   swaps — that is the visible font/size change and layout shift seen on the
   front page, ticker and header during load.

   These metric-matched fallback faces map Times New Roman onto each web font's
   metrics, so the pre-swap text occupies the same width/height and the swap no
   longer shifts layout. Override values were measured from the live fonts
   (canvas TextMetrics) against Times New Roman; line-gap-override is 0% because
   none of the three define a line gap. They are inserted between the web font
   and the generic `serif` in each stack (mirrors --body-font-family, the
   heading rule and .article-subtitle in effektivt.min.css).
   ────────────────────────────────────────────────────────────────────────── */
@font-face {
    font-family: "Bitter Fallback";
    src: local("Times New Roman"), local("Times");
    size-adjust: 111.95%;
    ascent-override: 83.97%;
    descent-override: 24.12%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Lora Fallback";
    src: local("Times New Roman"), local("Times");
    size-adjust: 113.78%;
    ascent-override: 88.77%;
    descent-override: 23.73%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "PT Serif Fallback";
    src: local("Times New Roman"), local("Times");
    size-adjust: 107.93%;
    ascent-override: 96.36%;
    descent-override: 26.87%;
    line-gap-override: 0%;
}

:root {
    --body-font-family: "Bitter", "Bitter Fallback", serif;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: "Lora", "Lora Fallback", serif;
}

.article-subtitle {
    font-family: "PT Serif", "PT Serif Fallback", serif;
}

/* ──────────────────────────────────────────────────────────────────────────
   TopicCluster (tag) hero – 16:9 image instead of the wide cover background.
   Desktop/tablet: 16:9. Below 720px: 4:3 with the image centered.
   A grid ::before establishes a *minimum* height from the aspect-ratio, so a
   long title/summary grows the hero downward instead of being clipped – no
   character limit on the text.
   ────────────────────────────────────────────────────────────────────────── */
/* Full-width band behind the centered hero – ambient blurred backdrop of the
   same header image so the centered 16:9 card doesn't float on an empty surface.
   No extra image production: it reuses --tagview-ambient set on the element. */
.lm-canvas-tagview.tagview-hero-band {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding-block: clamp(1.5rem, 4vw, 3rem) !important;
    background-color: var(--bs-primary, #2c5234);
}

    .lm-canvas-tagview.tagview-hero-band::before {
        content: "";
        position: absolute;
        inset: -40px;
        z-index: -1;
        background-image: var(--tagview-ambient);
        background-size: cover;
        background-position: center;
        filter: blur(34px) brightness(0.55) saturate(1.1);
        transform: scale(1.12);
    }

.tagview-hero {
    display: grid;
    grid-template-areas: "stack";
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
    background-color: var(--bs-primary, #2c5234);
}

    .tagview-hero::before {
        content: "";
        grid-area: stack;
        aspect-ratio: 16 / 9;
    }

    /* Stack the image and the text overlay in the same grid cell */
    .tagview-hero > * {
        grid-area: stack;
        min-width: 0;
    }

.tagview-hero-img {
    align-self: stretch;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.tagview-hero-overlay {
    align-self: end;
    z-index: 1;
    width: 100%;
    padding-block: clamp(1.25rem, 4vw, 3rem);
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.45) 45%,
        rgba(0, 0, 0, 0) 85%);
}

    .tagview-hero .cover-title,
    .tagview-hero .cover-text {
        color: #fff;
    }

    .tagview-hero .cover-text {
        margin-bottom: 0;
        color: rgba(255, 255, 255, 0.92);
    }

/* Below 720px: 4:3 ratio with the image centered */
@media (max-width: 719.98px) {
    .tagview-hero::before {
        aspect-ratio: 4 / 3;
    }

    .tagview-hero-img {
        object-position: center center;
    }
}

/* HTML-only ticker items (Manual ticker with no image/heading/link – the editor supplies raw
   TickerHTML, typically <a><img></a>). Make the artwork fill the 20rem slide card and drop the
   inline-image gap. Inline styles in the TickerHTML still win, so this is only a sensible default. */
.featured-news .card--teaser > .ticker-html,
.featured-news .card--teaser > .ticker-html > a {
    display: block;
}

.featured-news .card--teaser > .ticker-html img {
    display: block;
    width: 100%;
    height: auto;
}

/* Compact the desktop top-nav links (was 1rem, set on .navbar). Scoped to the header nav so other
   navbars are unaffected; overrides.css loads after effektivt.min.css, so this wins. */
.lm-navbar-navigation {
    --navbar-nav-link-padding-x: 0.75rem;
}

/* Center the main nav items so the shorter Høst-Tour pill stays vertically centered (the navbar-nav
   has no align-items, so it would otherwise stretch and top-align the pill). Not the icon buttons. */
.lm-navbar-navigation .navbar-nav:not(.nav-btns) {
    align-items: center;
}

/* Seasonal "Høst-Tour" CTA in the desktop top nav: primary-teal pill, kept short so it isn't too tall
   (default nav-link padding is 0.75rem top/bottom). */
.lm-navbar-navigation .nav-link.nav-link--hoesttour {
    font-weight: 700;
    color: #fff;
    background-color: hsl(190, 56%, 30%);
    border-radius: 999px;
    padding-block: 0.35rem;
}

.lm-navbar-navigation .nav-link.nav-link--hoesttour:hover {
    color: #fff;
    background-color: hsl(190, 56%, 38%);
}

/* "Høst-Tour" badge on teaser images for documents tagged 84. Rendered as a real element inside
   .teaser-media (which is position:relative + overflow:hidden), so it anchors to and is clipped to
   the image box; z-index keeps it above the gallery/video ::before tint (z-index:1). */
.teaser-media .teaser-hoesttour {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    background-color: #f5b301;
    color: #fff;
    font-weight: 700;
    font-size: 0.72rem;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* På horisontale teasere er billedboksen kun clamp(5rem, 30%, 12rem) bred, så 20px-indrykket lander
   midt i miniaturen. Trækkes ind i hjørnet fra md og op (under md er teaseren stacked, se nedenfor). */
@media (min-width: 768px) {
    .teaser--horizontal .teaser-media .teaser-hoesttour {
        top: 10px;
        left: 10px;
    }
}

/* Horisontale teasere stables på mobil. .teaser--horizontal er ikke et selvstændigt layout - det er
   basis-.teaser (som er stacked) med seks variabler skrevet ovenpå, så vi sætter blot de seks tilbage
   til deres basisværdier under md. Billedet bliver dermed fuldbredde 16:9 i stedet for en 5-12rem
   miniature - hvilket også giver Høst-Tour-badgen plads.
   Tickeren (.featured-news) bruger også .teaser--horizontal men skal forblive en miniature-række
   på alle bredder - derfor undtaget via :not(). */
@media (max-width: 767.98px) {
    .teaser--horizontal:not(.featured-news *) {
        --teaser-flex-direction: column;
        --teaser-media-width: auto;
        --teaser-media-margin: var(--teaser-offset) var(--teaser-offset) 0;
        --teaser-body-width: auto;
        --teaser-title-size: clamp(1.0625rem, 0.5874rem + 3.3049cqi, 3rem);
    }

    /* i zoner er body-padding sat til et venstreindryk beregnet til sidebilledet */
    .zone .teaser--horizontal {
        --teaser-body-padding: var(--spacing-base) 0;
    }
}


/* ===== LmPagination (fejlrapport #5091790) - holdes ens paa tvaers af tenants ===== */
.lm-pagination {
	--lm-pg-accent: #036d76;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	margin: 1.5rem 0;
}

.lm-pagination__label {
	font-size: .875rem;
	color: #6c757d;
}

.lm-pagination__items {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .3rem;
}

.lm-pagination__btn {
	min-width: 2.375rem;
	height: 2.375rem;
	padding: 0 .625rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--lm-pg-accent);
	border-radius: 999px;
	background: transparent;
	color: var(--lm-pg-accent);
	text-decoration: none;
	font-weight: 500;
	font-size: .9375rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

a.lm-pagination__btn:hover,
button.lm-pagination__btn:hover {
	background: color-mix(in srgb, var(--lm-pg-accent) 12%, transparent);
	color: var(--lm-pg-accent);
	text-decoration: none;
}

.lm-pagination__btn--active {
	background: var(--lm-pg-accent);
	border-color: var(--lm-pg-accent);
	color: #fff;
	cursor: default;
}

.lm-pagination__btn--disabled,
.lm-pagination__btn:disabled {
	color: #adb5bd;
	border-color: #dee2e6;
	background: transparent;
	cursor: default;
	pointer-events: none;
}

.lm-pagination__ellipsis {
	min-width: 1.5rem;
	text-align: center;
	color: #6c757d;
	user-select: none;
}

@media (max-width: 575.98px) {
	/* Mobil: alt skal passe paa EN linje (ingen orphan-wrap). Midtervinduet skjules,
	   og foerste/sidste-pilene skjules - "1" og sidste sidetal ER allerede de links. */
	.lm-pagination__btn--middle:not(.lm-pagination__btn--active),
	.lm-pagination__btn--first,
	.lm-pagination__btn--last {
		display: none;
	}

	.lm-pagination__items {
		gap: .25rem;
	}

	.lm-pagination__btn {
		min-width: 2.125rem;
		height: 2.125rem;
		padding: 0 .5rem;
		font-size: .875rem;
	}

	.lm-pagination__ellipsis {
		min-width: 1rem;
	}

	/* To midtpunkter (aktiv side midt i arkivet) fylder for meget paa mobil:
	   skjul dem og kollaps deres efterfoelgende ellipse, saa "... ..." aldrig opstaar. */
	.lm-pagination__btn--midpoint-paired,
	.lm-pagination__btn--midpoint-paired + .lm-pagination__ellipsis {
		display: none;
	}
}


@media (max-width: 374.98px) {
	/* Smalleste enheder: skjul ogsaa inderste boundary-sidetal, saa raekken aldrig wrapper. */
	.lm-pagination__btn--boundary-inner:not(.lm-pagination__btn--active) {
		display: none;
	}
}

/* Fade-in af listen efter sideskift (LmPagination) - perceived feedback ved hurtige loads. */
.lm-fade-in {
	animation: lmFadeIn .3s ease-out;
}

@keyframes lmFadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

/* ─── Google Preferred Sources ───────────────────────────────────────────────
   CTA'en er et deeplink til https://www.google.com/preferences/source, ikke Googles
   publisher.js-knap: scriptet initialiserer kun ved sideload, og AppRoutes kører
   InteractiveServer, så <head> genindlæses aldrig ved intern navigation.
   Google-G'et må ikke farves om, så knapfladen er altid hvid med Googles egen
   kantfarve (#dadce0) - resten af boksen er husets sandfarve. */

.preferred-source {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	gap: .5625rem;
	font-family: var(--font-sans-serif);
	font-weight: 600;
	line-height: 1.2;
	border-radius: 50rem;
	background-color: var(--white);
	color: var(--body-color);
	text-decoration: none !important;
	transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

	.preferred-source:hover,
	.preferred-source:focus {
		background-color: var(--gray-100);
		border-color: var(--gray-400);
		box-shadow: 0 2px 5px rgba(0, 0, 0, .08);
		color: var(--body-color);
	}

	.preferred-source:focus-visible {
		outline: 3px solid rgba(var(--primary-rgb), .45);
		outline-offset: 2px;
	}

.preferred-source-glyph {
	flex: none;
	display: block;
}

.preferred-source-label {
	white-space: nowrap;
}

.preferred-source-label--short {
	display: none;
}

/* Chip - artiklens byline */
.preferred-source--chip {
	min-height: 44px;
	padding: 0 1.125rem;
	border: 1px solid var(--gray-300);
	font-size: var(--fs-sm);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

	.preferred-source--chip .preferred-source-glyph {
		width: 18px;
		height: 18px;
	}

/* Pille - footerens ikonrække */
.preferred-source--pill {
	min-height: 40px;
	padding: 0 .9375rem;
	border: 1px solid #dadce0;
	font-size: var(--fs-xs);
	color: #3c4043;
	box-shadow: 0 1px 2px rgba(60, 64, 67, .14);
}

	.preferred-source--pill .preferred-source-glyph {
		width: 17px;
		height: 17px;
	}

/* Knap - inde i båndet */
.preferred-source--button {
	min-height: 52px;
	padding: 0 1.625rem;
	border: 1px solid #dadce0;
	font-size: var(--fs-base);
	color: #3c4043;
	box-shadow: 0 1px 3px rgba(60, 64, 67, .15);
}

	.preferred-source--button .preferred-source-glyph {
		width: 20px;
		height: 20px;
	}

/* Båndet - artikelbund og forside */
.preferred-source-band {
	display: flex;
	align-items: center;
	gap: var(--spacing-xl);
	background-color: hsl(45, 35%, 90%);
	border: 1px solid var(--tertiary);
	border-radius: var(--border-radius);
	padding: var(--spacing-lg) var(--spacing-xl);
	margin-bottom: var(--spacing-xl);
}

.preferred-source-band-text {
	flex: 1 1 auto;
}

.preferred-source-band-kicker {
	display: block;
	font-family: var(--font-sans-serif);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--secondary);
	margin-bottom: .375rem;
}

.preferred-source-band-headline {
	font-family: Lora, serif;
	font-weight: 600;
	font-size: var(--fs-lg);
	line-height: 1.3;
	margin: 0 0 .5rem;
	color: var(--body-color);
}

.preferred-source-band-body {
	margin: 0;
	font-size: var(--fs-base);
	line-height: 1.6;
	color: var(--body-light-color);
	max-width: 68ch;
}

.preferred-source-band-action {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: .5rem;
}

.preferred-source-note {
	font-family: var(--font-sans-serif);
	font-size: var(--fs-2xs);
	line-height: 1.4;
	color: var(--gray-500);
	text-align: center;
	text-wrap: pretty;
	max-width: 18.125rem;
}

/* Chippen ligger til højre i byline-rækken, men kun når rækken faktisk er en række */
@media (min-width: 768px) {
	.byline-preferred-source {
		margin-left: auto;
	}
}

/* Mobil: chippen får stadig sin egen linje under forfatteren, men er ikke længere en
   knap i fuld bredde. Den er en lav meta-stribe: hairline over (.byline's egen
   border-bottom lukker den nedadtil), ingen ramme, ingen flade, chevron yderst til
   højre. Så læses den som en linje i bylinen frem for som en CTA, der konkurrerer med
   artiklens egne knapper. row-gap gør luften over hairlinen lig med padding under den. */
@media (max-width: 767.98px) {
	.byline-row {
		row-gap: .5rem;
	}

	.byline-preferred-source .preferred-source--chip {
		width: 100%;
		justify-content: flex-start;
		min-height: 0;
		gap: .5rem;
		padding: .5rem 0;
		border: 0;
		border-top: 1px solid var(--gray-300);
		border-radius: 0;
		background-color: transparent;
		box-shadow: none;
		font-size: var(--fs-2xs);
		color: var(--body-light-color);
	}

		.byline-preferred-source .preferred-source--chip:hover,
		.byline-preferred-source .preferred-source--chip:focus {
			background-color: transparent;
			box-shadow: none;
			color: var(--body-color);
		}

		.byline-preferred-source .preferred-source--chip:focus-visible {
			outline-offset: -2px;
		}

		.byline-preferred-source .preferred-source--chip .preferred-source-glyph {
			width: 15px;
			height: 15px;
		}

		/* Chevron viser at striben fører ud af sitet. Tegnet med borders og ikke som
		   tegnet ›: husets sans-font mangler glyffen og rendere en tofu-firkant.
		   Dekorativ - hele linkets tekst står allerede i aria-label. */
		.byline-preferred-source .preferred-source--chip::after {
			content: "";
			flex: none;
			margin-left: auto;
			margin-right: .125rem;
			width: .375rem;
			height: .375rem;
			border-top: 1.5px solid var(--gray-500);
			border-right: 1.5px solid var(--gray-500);
			transform: rotate(45deg);
		}
}

@media (max-width: 767.98px) {
	.preferred-source-band {
		flex-direction: column;
		align-items: stretch;
		gap: var(--spacing-md);
		padding: var(--spacing-md);
	}

	.preferred-source-band-action {
		align-items: stretch;
	}

	.preferred-source--button {
		width: 100%;
	}

	.preferred-source-note {
		max-width: none;
	}
}

/* ─── Planlagt blackout (Components/Shared/Common/ScheduledBlackout.razor) ────
   Overlayet skal ligge over ALT paa siden - ogsaa OneSignal-overlayet
   (z-index 999999, inline i AppEffektivt.razor) og #modal-search .close
   (99999). Derfor den ekstreme vaerdi frem for husets normale skala.

   Scroll-laasen er ren CSS via :has() og ikke en klasse paa <body>. Tre grunde:
   Blazor kan slet ikke saette body-klasser uden JS-interop; laasen virker
   dermed ogsaa i det prerenderede HTML, hvor der endnu ikke er nogen circuit;
   og den rydder sig selv op i samme oejeblik Blazor fjerner overlayet fra DOM.
   !important er noedvendigt, fordi linje 76 i denne fil bevidst ophaever
   Bootstraps .modal-open-laas globalt med samme vaegt.
   :has() bruges i forvejen flere steder i filen, saa der er ingen ny
   browserrisiko. 100dvh frem for 100vh, saa mobilbrowserens adressebjaelke
   ikke efterlader en stribe af siden synlig under overlayet. */
html:has(.blackout),
body:has(.blackout) {
	height: 100dvh;
	overflow: hidden !important;
}

.blackout {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: clamp(1.5rem, 6vw, 4rem) clamp(1.25rem, 6vw, 3rem);
	background: #000;
	color: #fff;
	text-align: center;
}

	/* Husets normale fokusmarkering er en primaerfarvet glow, som forsvinder paa
	   sort. Her skal den vaere hvid for at kunne ses. */
	.blackout :focus-visible {
		outline: 3px solid #fff;
		outline-offset: 3px;
	}

	.blackout-inner {
		width: 100%;
		max-width: 44rem;
		margin: auto;
	}

	.blackout-title {
		margin: 0 0 clamp(1.25rem, 4vw, 2rem);
		font-family: var(--font-sans-serif);
		font-size: clamp(1.75rem, 7vw, 3.5rem);
		font-weight: 800;
		line-height: 1.05;
		letter-spacing: .01em;
		text-transform: uppercase;
		color: #fff;
	}

	.blackout-lead {
		margin: 0 0 clamp(1rem, 3vw, 1.5rem);
		font-size: clamp(1.0625rem, 2.4vw, 1.375rem);
		font-weight: 600;
		line-height: 1.45;
		color: #fff;
	}

	.blackout-body {
		margin: 0 0 clamp(1.75rem, 5vw, 2.5rem);
		font-size: clamp(.9375rem, 2vw, 1.0625rem);
		line-height: 1.6;
		color: rgba(255, 255, 255, .78);
	}

		.blackout-body > p {
			margin: 0 0 .75rem;
		}

			.blackout-body > p:last-child {
				margin-bottom: 0;
			}

	/* CTA'en er sidens eneste vej videre, saa den er den hvide flade. Pilen er en
	   ren glyf her - modsat .preferred-source-chippen, hvor husets sans mangler
	   tegnet - fordi overlayet saetter sin egen skrifttype.
	   Selektoren er bevidst .blackout .blackout-cta og ikke bare .blackout-cta:
	   temaets a:not(.btn, .gallery, .collection-image, .teaser, .nav-link) i
	   effektivt.min.css har specificitet (0,1,1) og ville ellers farve linket
	   turkis med --theme-accent. To klasser slaar den uden !important. */
	.blackout .blackout-cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: .625rem;
		min-height: 3.25rem;
		padding: .875rem 1.75rem;
		border: 2px solid #fff;
		border-radius: 50rem;
		background-color: #fff;
		color: #000;
		font-family: var(--font-sans-serif);
		font-size: clamp(.9375rem, 2vw, 1.0625rem);
		font-weight: 700;
		letter-spacing: .02em;
		text-transform: uppercase;
		text-decoration: none !important;
		transition: background-color .15s ease-in-out, color .15s ease-in-out;
	}

		.blackout .blackout-cta:hover,
		.blackout .blackout-cta:focus {
			background-color: transparent;
			color: #fff;
		}

	.blackout-cta-arrow {
		font-size: 1.1em;
		line-height: 1;
	}

	.blackout-return {
		margin: clamp(1.5rem, 4vw, 2rem) 0 0;
		font-size: var(--fs-sm);
		color: rgba(255, 255, 255, .6);
	}

	/* Bevidst underordnet CTA'en: en tekstknap, ikke en konkurrerende flade. */
	.blackout-skip {
		margin-top: clamp(1.25rem, 3vw, 1.75rem);
		padding: .5rem .25rem;
		border: 0;
		background: none;
		color: rgba(255, 255, 255, .6);
		font-family: var(--font-sans-serif);
		font-size: var(--fs-sm);
		text-decoration: underline;
		text-underline-offset: .25em;
		cursor: pointer;
		transition: color .15s ease-in-out;
	}

		.blackout-skip:hover,
		.blackout-skip:focus {
			color: #fff;
		}

@media (prefers-reduced-motion: no-preference) {
	.blackout {
		animation: blackout-fade .35s ease-out both;
	}

	@keyframes blackout-fade {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}
}

@media (max-width: 767.98px) {
	.blackout {
		align-items: flex-start;
	}

	.blackout .blackout-cta {
		width: 100%;
	}
}