/* =====================================================
   1. KNAPPER I HEADEREN
===================================================== */
.settings-button,
.jp-navigation-toggle {
    display:flex;
    align-items:center;
    gap:.45rem;
    border:1px solid rgba(255,255,255,.35);
    border-radius:999px;
    background:rgba(15,23,42,.15);
    color:#fff;
    padding:.55rem .85rem;
    cursor:pointer;
    font:600 .82rem Montserrat,sans-serif;
}

.settings-button:hover,
.jp-navigation-toggle:hover {
    background:rgba(15,23,42,.28);
    transform:translateY(-1px);
}

.settings-button i,
.jp-navigation-toggle i {
    font-size:1.1rem;
}

/* =====================================================
   2. INDSTILLINGSVINDUE
===================================================== */
.settings-open {
    overflow:hidden;
}

.settings-modal[hidden] {
    display:none;
}

.settings-modal {
    position:fixed;
    inset:0;
    z-index:3000;
    display:grid;
    place-items:center;
    padding:1rem;
}

.settings-modal__backdrop {
    position:absolute;
    inset:0;
    background:rgba(2,6,15,.8);
    backdrop-filter:blur(7px);
}

.settings-modal__dialog {
    position:relative;
    width:min(850px,100%);
    max-height:calc(100vh - 2rem);
    overflow:auto;
    border:1px solid color-mix(in srgb,var(--color-primary) 32%,#334155);
    border-radius:20px;
    background:color-mix(in srgb,var(--color-bg) 94%,#fff 6%);
    box-shadow:0 30px 90px rgba(0,0,0,.55);
    color:#cbd5e1;
}

.settings-modal__header {
    position:sticky;
    top:0;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:1.25rem 1.5rem;
    border-bottom:1px solid rgba(148,163,184,.14);
    background:color-mix(in srgb,var(--color-bg) 94%,#fff 6%);
}

.settings-modal__header h2 {
    margin:.1rem 0 0;
}

.settings-modal__eyebrow {
    color:var(--color-primary-light);
    font-size:.7rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.1em;
}

.settings-modal__close {
    display:grid;
    width:2.4rem;
    height:2.4rem;
    place-items:center;
    border:0;
    border-radius:50%;
    background:rgba(148,163,184,.12);
    color:var(--color-white);
    cursor:pointer;
    font-size:1.2rem;
}

/* =====================================================
   3. FELTER OG VALGMULIGHEDER
===================================================== */
.settings-modal form {
    padding:0 1.5rem 1.5rem;
}

.settings-modal fieldset {
    margin:1.4rem 0 0;
    padding:0;
    border:0;
}

.settings-modal legend {
    color:var(--color-white);
    font-size:1.05rem;
    font-weight:700;
}

.settings-modal fieldset>p {
    margin:.15rem 0 .8rem;
    color:#91a4bd;
    font-size:.78rem;
}

.settings-options {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
    gap:.65rem;
}

.settings-switch {
    display:flex;
    align-items:center;
    gap:.8rem;
    margin:1rem 0;
    padding:.85rem 1rem;
    border:1px solid rgba(148,163,184,.16);
    border-radius:12px;
    background:rgba(148,163,184,.055);
    cursor:pointer;
}

.settings-switch input {
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.settings-switch__control {
    position:relative;
    flex:none;
    width:46px;
    height:25px;
    border-radius:999px;
    background:#475569;
    transition:.18s ease;
}

.settings-switch__control::after {
    position:absolute;
    top:3px;
    left:3px;
    width:19px;
    height:19px;
    border-radius:50%;
    background:#fff;
    content:'';
    transition:.18s ease;
}

.settings-switch input:checked + .settings-switch__control {
    background:var(--color-primary);
}

.settings-switch input:checked + .settings-switch__control::after {
    transform:translateX(21px);
}

.settings-switch input:focus-visible + .settings-switch__control {
    outline:3px solid color-mix(in srgb,var(--color-primary) 40%,transparent);
    outline-offset:3px;
}

.settings-switch > span:last-child {
    display:flex;
    flex-direction:column;
}

.settings-switch strong { color:var(--color-white);font-size:.82rem; }
.settings-switch small { color:#91a4bd;font-size:.7rem;line-height:1.4; }

.settings-option {
    position:relative;
    cursor:pointer;
}

.settings-option input {
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.settings-option>span {
    display:flex;
    min-height:94px;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    padding:.8rem;
    border:1px solid rgba(148,163,184,.16);
    border-radius:12px;
    background:rgba(148,163,184,.055);
    transition:.18s ease;
}

.settings-option>span>i {
    color:var(--color-primary-light);
    font-size:1.3rem;
}

.settings-option strong {
    color:var(--color-white);
    font-size:.82rem;
}

.settings-option small {
    color:#91a4bd;
    font-size:.67rem;
    line-height:1.35;
}

.settings-option input:checked+span {
    border-color:var(--color-primary);
    background:color-mix(in srgb,var(--color-primary) 13%,transparent);
    box-shadow:inset 0 0 0 1px var(--color-primary);
}

.settings-option input:focus-visible+span {
    outline:3px solid color-mix(in srgb,var(--color-primary) 40%,transparent);
    outline-offset:2px;
}

/* Kan beholdes, selv om temavalg er skjult midlertidigt. */
.settings-options--theme {
    grid-template-columns:repeat(5,1fr);
}

.settings-option--theme>span {
    min-height:82px;
}

.settings-option--theme b {
    display:block;
    width:100%;
    height:24px;
    margin-bottom:.45rem;
    border-radius:6px;
    background:var(--preview-bg);
    overflow:hidden;
}

.settings-option--theme b i {
    display:block;
    width:38%;
    height:100%;
    background:var(--preview-accent);
}

/* =====================================================
   4. HANDLINGSKNAPPER
===================================================== */
.settings-modal__actions {
    display:flex;
    justify-content:flex-end;
    gap:.7rem;
    margin-top:1.6rem;
    padding-top:1.2rem;
    border-top:1px solid rgba(148,163,184,.14);
}

.settings-modal__actions button {
    padding:.7rem 1rem;
    border:1px solid rgba(148,163,184,.2);
    border-radius:9px;
    background:transparent;
    color:var(--color-white);
    cursor:pointer;
    font:600 .8rem Montserrat,sans-serif;
}

.settings-modal__actions .is-primary {
    border-color:var(--color-primary);
    background:var(--color-primary);
    color:#071711;
}


/* =====================================================
   5. KOMPAKTE FANER
===================================================== */
:root[data-navigation="compact"] .jp-tabs {
    height:2.35rem;
}

:root[data-navigation="compact"] body {
    padding-top:6.85rem;
}

:root[data-navigation="compact"] .jp-tab {
    flex-basis:165px;
    min-width:90px;
    height:2rem;
    border-radius:7px 7px 0 0;
}

:root[data-navigation="compact"] .jp-tab__icon {
    width:1.15rem;
    height:1.15rem;
}

:root[data-navigation="compact"] .jp-tabs__tool,:root[data-navigation="compact"] .jp-tabs__new {
    width:1.9rem;
    height:1.9rem;
}

:root[data-navigation="sidebar"] .jp-tabs,:root[data-navigation="menu"] .jp-tabs {
    display:none;
}

:root[data-navigation="sidebar"] body {
    padding-top:4.5rem;
    padding-left:245px;
}

:root[data-navigation="menu"] body {
    padding-top:7.55rem;
}

/* =====================================================
   6. FÆLLES NAVIGATION
===================================================== */
.jp-site-navigation {
    position:fixed;
    z-index:94;
    background:#101b2e;
    box-shadow:0 8px 24px rgba(0,0,0,.24);
}

.jp-site-navigation__head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:var(--color-white);
}

.jp-site-navigation__head button {
    display:none;
    border:0;
    background:transparent;
    color:var(--color-white);
    font-size:1.25rem;
}

.jp-site-navigation__links a {
    color:#b7c7d9;
    font-weight:600;
    font-size:.78rem;
}

.jp-site-navigation__links a:hover,.jp-site-navigation__links a[aria-current="page"] {
    background:color-mix(in srgb,var(--color-primary) 14%,transparent);
    color:var(--color-primary-light);
}

.jp-site-navigation__links i {
    color:var(--color-primary-light);
    font-size:1rem;
}

/* =====================================================
   7. SIDEBJÆLKE
===================================================== */
:root[data-navigation="sidebar"] .jp-site-navigation {
    top:0;
    bottom:0;
    left:0;
    width:245px;
    padding:0 .7rem 1rem;
    overflow-y:auto;
    border-right:1px solid rgba(92,225,183,.14);
}

.jp-sidebar-season {
    display:none;
}

:root[data-navigation="sidebar"] .jp-sidebar-season {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:4.5rem;
    margin:0 -.7rem 1rem;
    padding:.45rem .7rem .35rem 1rem;
    overflow:hidden;
    border-bottom:1px solid rgba(92,225,183,.18);
    background:radial-gradient(circle at 85% 45%,rgba(92,225,183,.22),transparent 55%),#162238;
}

.jp-sidebar-season__text {
    position:relative;
    z-index:2;
    display:flex;
    min-width:0;
    flex-direction:column;
}

.jp-sidebar-season__text small {
    color:#91a4bd;
    font-size:.55rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.07em;
}

.jp-sidebar-season__text strong {
    color:var(--color-white);
    font-size:.76rem;
    line-height:1.25;
}

.jp-sidebar-season img {
    position:relative;
    z-index:1;
    flex:none;
    width:62px;
    height:62px;
    object-fit:contain;
    object-position:center bottom;
    filter:drop-shadow(0 5px 8px rgba(0,0,0,.3));
}

.jp-sidebar-season[data-season="spring"] { background:radial-gradient(circle at 85% 40%,rgba(244,180,208,.25),transparent 55%),#18283a; }
.jp-sidebar-season[data-season="summer"] { background:radial-gradient(circle at 85% 35%,rgba(250,204,21,.25),transparent 55%),#17283a; }
.jp-sidebar-season[data-season="autumn"] { background:radial-gradient(circle at 85% 40%,rgba(217,119,6,.25),transparent 55%),#272016; }
.jp-sidebar-season[data-season="winter"] { background:radial-gradient(circle at 85% 40%,rgba(186,230,253,.25),transparent 55%),#15263a; }
.jp-sidebar-season[data-season="christmas"] { background:radial-gradient(circle at 85% 40%,rgba(239,68,68,.3),transparent 52%),linear-gradient(135deg,#123025,#172238); }

:root[data-navigation="sidebar"] .jp-site-navigation__head {
    padding:.3rem .65rem 1rem;
}

:root[data-navigation="sidebar"] .jp-site-navigation__links {
    display:grid;
    gap:.3rem;
}

:root[data-navigation="sidebar"] .jp-site-navigation__links a {
    display:flex;
    align-items:center;
    gap:.65rem;
    padding:.7rem;
    border-radius:8px;
}

/* =====================================================
   8. MENUBJÆLKE
===================================================== */
:root[data-navigation="menu"] .jp-site-navigation {
    top:4.5rem;
    left:0;
    width:100%;
    min-height:3.05rem;
    border-bottom:1px solid rgba(92,225,183,.14);
}

:root[data-navigation="menu"] .jp-site-navigation__head {
    display:none;
}

:root[data-navigation="menu"] .jp-site-navigation__links {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    max-width:1400px;
    min-height:3.05rem;
    margin:0 auto;
    padding:.35rem 16px;
    gap:.2rem .35rem;
    overflow:visible;
}

:root[data-navigation="menu"] .jp-site-navigation__links a {
    display:flex;
    align-items:center;
    flex:0 0 auto;
    gap:.35rem;
    padding:.45rem .55rem;
    border-radius:7px;
    white-space:nowrap;
    font-size:.72rem;
}

:root[data-navigation="menu"] .jp-site-navigation__links::-webkit-scrollbar {
    display:none;
}

.jp-navigation-toggle {
    display:none;
}


/* =====================================================
   9. RESPONSIVT DESIGN
===================================================== */
@media(max-width:800px) {
    .settings-button span {
    display:none;
}

  .settings-button {
    width:2.5rem;
    height:2.5rem;
    justify-content:center;
    padding:0;
}

  .settings-options--theme {
    grid-template-columns:repeat(2,1fr);
}

  .settings-modal__dialog {
    max-height:100vh;
    border-radius:15px;
}

  :root[data-navigation="sidebar"] body {
    padding-left:0;
}

  :root[data-navigation="sidebar"] .jp-site-navigation {
    width:min(290px,85vw);
    transform:translateX(-105%);
    transition:transform .25s ease;
    z-index:150;
}

  :root[data-navigation="sidebar"] .jp-site-navigation.is-open {
    transform:translateX(0);
}

  :root[data-navigation="sidebar"] .jp-site-navigation__head button {
    display:block;
}

  :root[data-navigation="sidebar"] .jp-navigation-toggle {
    display:flex;
}

}


@media(max-width:1100px) {
    :root[data-navigation="menu"] .jp-site-navigation__links {
    justify-content:flex-start;
    overflow-x:auto;
    scrollbar-width:none;
}

}

@media(max-width:520px) {
    .settings-options,.settings-options--theme {
    grid-template-columns:repeat(2,1fr);
}
.settings-modal form,.settings-modal__header {
    padding-left:1rem;
    padding-right:1rem;
}

}

@media(max-width:1100px) {
    :root[data-navigation="menu"] .jp-site-navigation__links {
    justify-content:flex-start;
    overflow-x:auto;
    scrollbar-width:none;
}

}

@media(max-width:520px) {
    .settings-options,.settings-options--theme {
    grid-template-columns:repeat(2,1fr);
}
.settings-modal form,.settings-modal__header {
    padding-left:1rem;
    padding-right:1rem;
}

}
/* Ens størrelse på alle sæsonbokse */
.settings-options--season {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: 115px;
}

.settings-options--season .settings-option {
    display: block;
    width: 100%;
    height: 100%;
}

.settings-options--season .settings-option > span {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0.8rem;

    justify-content: center;
    box-sizing: border-box;
}

/* Tablet */
@media screen and (max-width: 800px) {
    .settings-options--season {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobil */
@media screen and (max-width: 480px) {
    .settings-options--season {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   MOBIL – INDSTILLINGER I STÅENDE FORMAT
===================================================== */
@media (max-width: 600px) {

    .settings-modal {
        place-items: stretch;
        padding: 0;
    }

    .settings-modal__dialog {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border: 0;
        border-radius: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .settings-modal__header {
        padding: 1rem;
    }

    .settings-modal__header h2 {
        font-size: 1.35rem;
    }

    .settings-modal__eyebrow {
        font-size: 0.62rem;
    }

    .settings-modal form {
        padding: 0 1rem 1rem;
    }

    .settings-modal fieldset {
        margin-top: 1.15rem;
    }

    .settings-modal legend {
        font-size: 0.95rem;
    }

    .settings-modal fieldset > p {
        font-size: 0.72rem;
    }

    /* Alle normale valgmuligheder */
    .settings-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    /* Temaer */
    .settings-options--theme {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-option > span {
        min-height: 82px;
        padding: 0.7rem;
    }

    .settings-option strong {
        font-size: 0.76rem;
    }

    .settings-option small {
        font-size: 0.62rem;
    }

    .settings-option > span > i {
        font-size: 1.15rem;
    }

    /* Til/fra-indstillinger */
    .settings-switch {
        gap: 0.65rem;
        margin: 0.7rem 0;
        padding: 0.75rem;
    }

    .settings-switch strong {
        font-size: 0.76rem;
    }

    .settings-switch small {
        font-size: 0.64rem;
    }

    /* Gem / nulstil */
    .settings-modal__actions {
        position: sticky;
        bottom: 0;
        z-index: 2;

        margin: 1.2rem -1rem -1rem;
        padding: 0.8rem 1rem;

        background: color-mix(
            in srgb,
            var(--color-bg) 94%,
            #fff 6%
        );

        border-top: 1px solid rgba(148, 163, 184, 0.14);
    }

    .settings-modal__actions button {
        flex: 1;
        padding: 0.75rem 0.5rem;
        font-size: 0.72rem;
    }
}


/* Ekstra små telefoner */
@media (max-width: 380px) {

    .settings-options {
        grid-template-columns: 1fr;
    }

    .settings-options--theme {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}