/* The theme has no block gap, so the band's heading and intro above the chooser are spaced here. */
.wp-block-heading:has(+ p + .k2fc-former) {
    margin-bottom: var(--wp--preset--spacing--xs);
}

.k2fc-former {
    container: k2fc-former / inline-size;
    display: grid;
    gap: var(--wp--preset--spacing--s);
    min-width: 0;

    &:not(:first-child) {
        margin-top: var(--wp--preset--spacing--m);
    }

    & fieldset {
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
    }

    & legend {
        margin-bottom: var(--wp--preset--spacing--s);
        padding: 0;
        font-weight: 600;
        font-size: 15px;
    }

    .k2fc-former__kortliste {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--wp--preset--spacing--s);
    }

    .k2fc-former__valg {
        display: grid;
        grid-template-rows: 1fr auto;
        min-width: 0;
    }

    .k2fc-former__etikett {
        width: fit-content;
        margin: 0 0 var(--wp--preset--spacing--s);
        padding: 4px 9px;
        border-radius: var(--wp--custom--radius--pille);
        background: var(--wp--custom--farge--gul-logo);
        color: var(--wp--preset--color--tekst);
        font-size: 12px;
        line-height: 1.4;
        font-weight: 600;
    }

    .k2fc-former__kort {
        position: relative;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: repeat(4, auto) 1fr auto auto;
        column-gap: 10px;
        height: 100%;
        min-width: 0;
        padding: 18px;
        border: 1px solid var(--wp--custom--farge--kant-valg);
        border-radius: var(--wp--custom--radius--xl);
        background: var(--wp--preset--color--hvit);
        color: var(--wp--preset--color--tekst);
        cursor: pointer;
        overflow-wrap: anywhere;

        > input[type="radio"] {
            position: absolute;
            inset: 20px 18px auto auto;
            width: 18px;
            height: 18px;
            margin: 0;
            accent-color: var(--wp--preset--color--gronn);
            flex: none;
        }

        > :not(input, .k2fc-former__ikon) {
            grid-column: 1 / -1;
        }

        .k2fc-former__ikon {
            grid-column: 1;
            grid-row: 1;
            inline-size: 26px;
            block-size: 26px;
            background: var(--wp--preset--color--gronn);
            -webkit-mask: var(--k2fc-ikon, none) center / contain no-repeat;
            mask: var(--k2fc-ikon, none) center / contain no-repeat;
        }

        .k2fc-former__ikon--campus {
            --k2fc-ikon: url("../../icons/presentation.svg");
        }

        .k2fc-former__ikon--nettundervisning {
            --k2fc-ikon: url("../../icons/video.svg");
        }

        .k2fc-former__ikon--nettstudier {
            --k2fc-ikon: url("../../icons/clock.svg");
        }

        &:has(> .k2fc-former__ikon) .k2fc-former__tittel {
            grid-column: 2;
            margin-top: 2px;
        }

        .k2fc-former__merke {
            grid-row: 2;
            justify-self: start;
            margin-top: var(--wp--preset--spacing--xs);
            padding: 4px 9px;
            border-radius: var(--wp--custom--radius--pille);
            background: var(--wp--custom--farge--gul-logo);
            color: var(--wp--preset--color--tekst);
            font-size: 12px;
            line-height: 1.4;
            font-weight: 600;
        }

        :is(.k2fc-former__tekst, .k2fc-former__undertekst) {
            margin-top: var(--wp--preset--spacing--xs);
            font-size: 14px;
            line-height: 1.55;
            color: var(--wp--preset--color--tekst-sek);
        }

        .k2fc-former__tekst {
            grid-row: 3;
        }

        .k2fc-former__undertekst {
            grid-row: 4;
        }

        .k2fc-former__prisnote {
            grid-row: 7;
            margin-top: 1px;
            font-size: 12px;
            line-height: 1.4;
            color: var(--wp--preset--color--tekst-sek);
        }

        &:has(:checked) {
            border-color: var(--wp--preset--color--gronn);
            box-shadow: 0 1px 2px #14181c0a, 0 10px 28px #14181c14;
        }

        &:has(input:focus-visible) {
            outline: 3px solid var(--wp--preset--color--gronn);
            outline-offset: 4px;
        }
    }

    .k2fc-former__tittel {
        grid-row: 1;
        padding-right: 24px;
        font-family: var(--wp--preset--font-family--tittel);
        font-weight: 600;
        font-size: 18px;
        line-height: 1.2;
        letter-spacing: -0.02em;
    }

    .k2fc-former__pris {
        grid-row: 6;
        margin-top: var(--wp--preset--spacing--s);
        padding-top: 10px;
        border-top: 1px solid var(--wp--custom--farge--border);
        font-family: var(--wp--preset--font-family--tittel);
        font-weight: 600;
        font-size: 20px;
        letter-spacing: -0.02em;
    }

    .k2fc-former__hopplenke {
        justify-self: start;
        padding-block: 12px;
        font-size: 14px;
        text-underline-offset: 3px;
    }

    .k2fc-former__panel {
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        scroll-margin-top: var(--wp--preset--spacing--m);

        .k2fc-former__paneltittel {
            margin: 0 0 12px;
            font-size: 19px;
        }
    }
}

@container k2fc-former (min-width: 640px) {
    .k2fc-former .k2fc-former__kortliste {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 20px;
    }
}

.k2fc-form-panel {
    display: grid;
    gap: var(--wp--preset--spacing--m);
    min-width: 0;

    .k2fc-form-panel__undertekst {
        margin: 0;
        padding-inline-start: 14px;
        border-inline-start: 3px solid var(--wp--preset--color--gronn);
        font-size: 14px;
        line-height: 1.6;
        color: var(--wp--preset--color--tekst-sek);
    }

    /* The wide gap always lands right above the dates, whether or not notes come between. */
    &:has(> .k2fc-form-panel__noter > .k2fc-kursdatoer:first-child) {
        gap: var(--wp--preset--spacing--l);
    }

    .k2fc-form-panel__noter {
        min-width: 0;

        > :first-child {
            margin-top: 0;
        }

        > :last-child {
            margin-bottom: 0;
        }

        > :not(.k2fc-kursdatoer) {
            max-width: 920px;
        }

        > .k2fc-kursdatoer:not(:first-child) {
            margin-top: var(--wp--preset--spacing--l);
        }
    }

    + .k2fc-kursdatoer {
        margin-top: var(--wp--preset--spacing--l);
    }
}

.k2fc-kursdatoer {
    container: k2fc-dates / inline-size;
    width: 100%;
    max-width: 920px;
    min-width: 0;
    line-height: 1.5;
    overflow-wrap: anywhere;

    + .k2fc-kursdatoer {
        margin-top: var(--wp--preset--spacing--ml);
    }

    .k2fc-kursdatoer__tittel {
        margin: 0 0 12px;
        font-family: var(--wp--preset--font-family--brod);
        font-size: 11px;
        line-height: 1.5;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-weight: 700;
        color: var(--wp--preset--color--tekst-sek);
    }

    :is(.k2fc-kursdatoer__lopende, .k2fc-kursdatoer__kontakt) {
        margin: 0 0 var(--wp--preset--spacing--s);
    }

    & table {
        display: table;
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
    }

    & caption {
        display: table-caption;
        padding: 0 0 var(--wp--preset--spacing--s);
        text-align: left;
        font-size: 14px;
        font-weight: 400;
        color: var(--wp--preset--color--tekst-sek);
    }

    & thead {
        position: static;
        display: table-header-group;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
    }

    & tbody {
        display: table-row-group;
    }

    & tr {
        display: table-row;
    }

    :is(td, th) {
        display: table-cell;
        padding: 16px 16px 16px 0;
        border: 0;
        border-top: 1px solid var(--wp--custom--farge--border);
        text-align: left;
        vertical-align: middle;
        font-size: 15px;

        &:last-child {
            padding-right: 0;
        }
    }

    & thead th {
        padding-block: 0 8px;
        border: 0;
        font-size: 12px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-weight: 700;
        color: var(--wp--preset--color--tekst-sek);

        &:last-child {
            width: 34%;
            text-align: right;
        }
    }

    .k2fc-kursdatoer__gruppetittel {
        display: table-cell;
        padding-top: var(--wp--preset--spacing--m);
        color: var(--wp--preset--color--gronn);
        font-weight: 600;
    }

    & td[data-label]::before {
        content: none;
    }

    .k2fc-kursdatoer__oppstart {
        font-weight: 600;
    }

    & time {
        white-space: nowrap;
    }

    .k2fc-kursdatoer__plasser {
        display: block;
        margin-bottom: 10px;
        font-size: 13px;
        color: var(--wp--preset--color--tekst-sek);
    }

    .k2fc-kursdatoer__flere {
        margin-top: var(--wp--preset--spacing--m);
    }
}

@container k2fc-dates (max-width: 640px) {
    .k2fc-kursdatoer {
        & table,
        & caption,
        & tbody,
        & tr,
        & td,
        .k2fc-kursdatoer__gruppetittel {
            display: block;
        }

        & caption {
            width: 100%;
        }

        & thead {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            overflow: hidden;
            clip-path: inset(50%);
        }

        .k2fc-kursdatoer__rad {
            padding: var(--wp--preset--spacing--s) 0;
            border-top: 1px solid var(--wp--custom--farge--border);

            + .k2fc-kursdatoer__rad {
                margin-top: 0;
            }
        }

        & td {
            padding: 0;
            border: 0;

            + td {
                margin-top: 12px;
            }
        }

        & td[data-label] {
            display: block;
            font-weight: 500;

            &::before {
                content: attr(data-label);
                display: block;
                color: var(--wp--preset--color--tekst-sek);
                font-size: 11px;
                font-weight: 700;
                letter-spacing: 0.08em;
                text-transform: uppercase;
            }
        }

        .k2fc-kursdatoer__gruppetittel {
            margin-block: 20px 12px;
            padding: 0;
            border: 0;
        }

        .k2fc-kursdatoer__handling .k2fc-kursdatoer__pamelding {
            width: 100%;
        }
    }
}

.k2fc-moduler {
    min-width: 0;
    line-height: 1.6;

    .k2fc-moduler__liste {
        margin: 0 0 var(--wp--preset--spacing--ml);
        padding: 0;
        list-style: none;
    }

    .k2fc-moduler__modul {
        padding-block: var(--wp--preset--spacing--m);

        + .k2fc-moduler__modul {
            border-top: 1px solid var(--wp--custom--farge--border);
        }

        &:first-child {
            padding-top: 0;
        }

        .k2fc-moduler__hode {
            margin: 0 0 12px;
        }
    }

    & summary {
        min-height: 44px;
        padding-block: 8px;
        cursor: pointer;
        color: var(--wp--preset--color--tekst);

        &::marker {
            color: var(--wp--preset--color--gronn);
        }
    }

    & details[open] > summary {
        margin-bottom: 12px;
    }

    .k2fc-moduler__tittel {
        font-family: var(--wp--preset--font-family--tittel);
        font-size: 19px;
        line-height: 1.3;
        font-weight: 600;
        letter-spacing: -0.01em;
    }

    .k2fc-moduler__beskrivelse {
        max-width: var(--wp--custom--maal-brod);
        color: var(--wp--preset--color--tekst-sek);

        > :first-child {
            margin-top: 0;
        }

        > :last-child {
            margin-bottom: 0;
        }
    }

    .k2fc-moduler__priser {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 24px;
        margin: var(--wp--preset--spacing--s) 0 0;
        font-size: 14px;
        overflow-wrap: anywhere;
    }

    & dt {
        color: var(--wp--preset--color--tekst-sek);
    }

    & dd {
        max-width: 16ch;
        margin: 0;
        text-align: right;
        font-family: var(--wp--preset--font-family--tittel);
        font-size: 15px;
        font-weight: 600;
        color: var(--wp--preset--color--tekst);
    }

    .k2fc-moduler__totaltittel {
        margin: 0;
        padding-top: var(--wp--preset--spacing--m);
        border-top: 1px solid var(--wp--custom--farge--border);
        font-size: 19px;
    }

    .k2fc-moduler__priser--total {
        max-width: 640px;
        font-size: 16px;
    }
}

:is(.k2fc-former, .k2fc-form-panel, .k2fc-kursdatoer, .k2fc-moduler) [hidden] {
    display: none !important;
}

:is(.k2fc-former, .k2fc-form-panel, .k2fc-kursdatoer, .k2fc-moduler) .k2fc-skjult {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (hover: hover) {
    .k2fc-former .k2fc-former__kort:hover {
        background: var(--wp--preset--color--gul-tint);
        border-color: var(--wp--custom--farge--sjogronn);
        box-shadow: 0 4px 14px #14181c10;

        .k2fc-former__pris {
            border-top-color: var(--wp--custom--farge--border-gull);
        }

        &:has(:checked) {
            border-color: var(--wp--preset--color--gronn);
            box-shadow: 0 1px 2px #14181c0a, 0 10px 28px #14181c14;
        }
    }
}

@media (prefers-reduced-motion: no-preference) {
    .k2fc-former .k2fc-former__kort {
        transition: var(--wp--custom--overgang);
    }
}

@media (min-width: 700px) {
    .k2fc-former {
        gap: var(--wp--preset--spacing--m);

        &:not(:first-child) {
            margin-top: var(--wp--preset--spacing--ml);
        }

        & legend {
            margin-bottom: 20px;
        }

        .k2fc-former__kort {
            padding: var(--wp--preset--spacing--m);

            > input[type="radio"] {
                inset: 26px 24px auto auto;
            }
        }
    }

    .k2fc-form-panel {
        &:has(> .k2fc-form-panel__noter > .k2fc-kursdatoer:first-child) {
            gap: var(--wp--preset--spacing--xl);
        }

        .k2fc-form-panel__noter > .k2fc-kursdatoer:not(:first-child) {
            margin-top: var(--wp--preset--spacing--xl);
        }
    }

    .k2fc-form-panel + .k2fc-kursdatoer {
        margin-top: var(--wp--preset--spacing--xl);
    }

    .k2fc-moduler .k2fc-moduler__modul {
        padding-block: var(--wp--preset--spacing--ml);

        &:first-child {
            padding-top: 0;
        }
    }
}

@container k2fc-former (min-width: 984px) {
    .k2fc-former {
        .k2fc-former__kortliste {
            gap: var(--wp--preset--spacing--m);
        }

        .k2fc-former__kort {
            padding: 26px;

            > input[type="radio"] {
                inset: 28px 26px auto auto;
            }
        }

        .k2fc-former__pris {
            font-size: 22px;
        }
    }

    .k2fc-former:has(.k2fc-former__valg:nth-child(3)) {
        .k2fc-form-panel__undertekst,
        .k2fc-form-panel__noter > :not(.k2fc-kursdatoer),
        .k2fc-kursdatoer {
            max-width: calc((100% * 2 - var(--wp--preset--spacing--m)) / 3);
        }
    }
}

.k2fc-kursdatoer {
    .k2fc-kursdatoer__handling {
        text-align: right;
    }

    .k2fc-kursdatoer__flere {
        padding: 0 2px;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--wp--preset--color--gronn);
        font-size: 15px;
        text-decoration: underline;
        text-underline-offset: 4px;

        &:hover {
            background: transparent;
            color: var(--wp--preset--color--gronn-dyp);
        }
    }

    .k2fc-kursdatoer__lopende {
        border-inline-start: 3px solid var(--wp--preset--color--gronn);
        padding-inline-start: 14px;
    }
}

@container k2fc-dates (max-width: 640px) {
    .k2fc-kursdatoer .k2fc-kursdatoer__handling {
        text-align: left;
    }
}

.k2fc-moduler {
    container: k2fc-modules / inline-size;
}

@container k2fc-modules (min-width: 984px) {
    .k2fc-moduler .k2fc-moduler__modul {
        > details[open]::details-content {
            display: contents;
        }

        > details[open],
        &:not(:has(details)) {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 230px;
            gap: 4px 28px;
            align-items: start;

            > :is(summary, .k2fc-moduler__hode) {
                grid-column: 1;
                grid-row: 1;
            }

            > .k2fc-moduler__beskrivelse {
                grid-column: 1;
                grid-row: 2;
            }

            > .k2fc-moduler__priser {
                grid-column: 2;
                grid-row: 1 / span 2;
                margin: 0;
                gap: 4px 20px;
            }
        }
    }
}

.is-style-seksjon-tonet .k2fc-moduler {
    .k2fc-moduler__modul + .k2fc-moduler__modul,
    .k2fc-moduler__totaltittel {
        border-top-color: var(--wp--custom--farge--border-mork);
    }
}