/* NFK CheckID. Kundens HEX-farger.
   CheckID styrer tekst og språk. */
:root {
    color-scheme: only light;
    --nfk-blue: #008da8;
    --nfk-white: #ffffff;
    --nfk-black: #302e2f;
    --nfk-gray: #eaebec;
    --favicon-url: url('https://cdn-universe.fortytwo.io/checkid/nordlandfk/logo.png');
    --logo-url-colorful: url('https://cdn-universe.fortytwo.io/checkid/nordlandfk/svart-logo-01.png');
    --logo-url-white: url('https://cdn-universe.fortytwo.io/checkid/nordlandfk/svart-logo-01.png');
    --logo-height: 140px;
    --logo-width: 428px;
    --nfk-android-notice: "Merk: Identitetsverifisering krever Android 14 eller nyere.";
}

/* Match all existing page backgrounds, including the completed page. */
body.background-gray,
body.background-purple,
body:not(.background-gray):not(.background-purple) {
    color-scheme: only light;
    background: var(--nfk-white);
    color: var(--nfk-black);
    border-top: 8px solid var(--nfk-blue);
    box-sizing: border-box;
}

body main.app,
body main.app.background-purple,
body main.app.background-gray {
    background: transparent;
}

body .app > .container {
    align-items: center;
}

/* Preserve logo assets and responsive sizing. */
body:is(.background-gray, .background-purple,
    :not(.background-gray):not(.background-purple))
:is(.logo-colorful, .logo-white) {
    align-self: center;
    margin-inline: auto;
    width: min(var(--logo-width), calc(100vw - 48px));
    max-width: calc(100vw - 48px);
    height: var(--logo-height);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: none;
}

/* Override text colors from all existing background variants. */
body:is(.background-gray, .background-purple,
    :not(.background-gray):not(.background-purple))
:is(h1, .text-color-accent, .text-color-alternative, .text-color-muted) {
    color: var(--nfk-black);
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
}

body .app > .container > div > p,
body.completed-background-gradient .app > .container > p,
body.completed-background-gradient .app > .container > div > p {
    width: 100%;
    text-align: center;
    color: var(--nfk-black);
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
}

body h1.heading-1 {
    width: 100%;
    max-width: 760px;
    text-align: center;
    white-space: normal;
    font-size: clamp(30px, 3vw, 40px);
    line-height: 1.15;
    opacity: 1;
}

/* Solid light-gray cards instead of translucent backgrounds. */
body .bottom-card {
    background: var(--nfk-gray);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--nfk-black);
    text-align: center;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
}

body .bottom-card > .container {
    background: transparent;
    color: var(--nfk-black);
    text-align: center;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
}

body .bottom-card p {
    color: var(--nfk-black);
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
}

body .bottom-card a:not([class*="button"]) {
    color: var(--nfk-black);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/* Android-krav. Legges inn over "Powered by"-linjen i kortfoten.
   v2-layouten rendrer denne teksten hardkodet, så den kan ikke
   styres fra appsettings-configen. */
body .bottom-card > .container > div.justify-content-between::before {
    content: var(--nfk-android-notice);
    display: block;
    width: 100%;
    max-width: 36ch;
    margin: 0 auto 4px;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    color: var(--nfk-black);
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
}

body.completed-background-gradient main.app > .container > h1 + p {
    font-size: 20px;
    line-height: 1.4;
}

/* Dark buttons with white text; blue remains a brand accent. */
body .app :is(.button-primary, .button-secondary.index-cta-button) {
    background: var(--nfk-black);
    color: var(--nfk-white);
    -webkit-text-fill-color: currentColor;
    border: 2px solid var(--nfk-black);
    text-shadow: none;
}

body .app .button-secondary:not(.index-cta-button) {
    background: var(--nfk-white);
    color: var(--nfk-black);
    -webkit-text-fill-color: currentColor;
    border: 2px solid var(--nfk-blue);
    text-shadow: none;
}

body:is(.background-gray, .background-purple,
    :not(.background-gray):not(.background-purple))
.app :is(.button-primary, .button-secondary) :is(span, svg) {
    color: inherit;
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
}

body .app :is(.button-primary, .button-secondary) svg {
    stroke: currentColor;
}

body .app :is(.button-primary, .button-secondary):not(:disabled):not([aria-disabled="true"]):hover {
    border-color: var(--nfk-blue);
    box-shadow: 0 0 0 2px var(--nfk-blue);
}

body :is(a, button, input, select, textarea):focus-visible {
    outline: 3px solid var(--nfk-black);
    outline-offset: 4px;
}

/* Username and Temporary Access Pass information. */
main.app div.padding-medium.background-color-secondary {
    background: var(--nfk-gray);
    color: var(--nfk-black);
    text-align: center;
    overflow-wrap: anywhere;
}

main.app div.padding-medium.background-color-secondary
div.display-flex.align-items-center.gap-small {
    justify-content: center;
    width: 100%;
}

/* Instructions for steps 1-4. */
main.app div.display-flex.flex-direction-column.gap-medium:has(> div.display-flex.flex-direction-row.gap-medium .list-bullet) {
    background: var(--nfk-gray);
    color: var(--nfk-black);
    border-radius: 12px;
    padding: 16px 20px;
}

main.app .list-bullet {
    background: var(--nfk-white);
    color: var(--nfk-black);
    -webkit-text-fill-color: currentColor;
    border: 2px solid var(--nfk-blue);
    box-sizing: border-box;
}

/* Preserve the separate Logout row. */
main.app > .container > div.display-inline-flex:has(form[action="/logout"]) {
    display: flex;
    flex-direction: column;
    align-items: center;
}

main.app > .container > div.display-inline-flex:has(form[action="/logout"]) > button,
main.app > .container > div.display-inline-flex:has(form[action="/logout"]) > form[action="/logout"] {
    width: 160px;
}

main.app > .container > div.display-inline-flex:has(form[action="/logout"]) > form[action="/logout"] button[type="submit"] {
    width: 100%;
}

body .index-footer,
body .index-footer :is(p, a, span) {
    color: var(--nfk-black);
    -webkit-text-fill-color: currentColor;
    text-align: center;
    text-shadow: none;
}

/* Text on the no-matching-account page. */
main.app .container div:has(img[src="/v2/assets/hilde_waiting.png"]) p.text-size-large {
    color: var(--nfk-black);
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
}

@media (max-width: 480px) {
    body:is(.background-gray, .background-purple,
        :not(.background-gray):not(.background-purple))
    :is(.logo-colorful, .logo-white) {
        width: calc(100vw - 48px);
        max-width: calc(100vw - 48px);
        height: 90px;
    }

    body .bottom-card,
    body .bottom-card > .container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        height: auto;
        min-height: auto;
        max-height: none;
        overflow: visible;
    }

    body .bottom-card > .container {
        padding-bottom: 32px;
    }

    body .bottom-card > .container > div.justify-content-between::before {
        max-width: 100%;
        padding-inline: 8px;
        box-sizing: border-box;
        font-size: 13px;
    }

    main.app div.display-flex.flex-direction-column.gap-medium:has(> div.display-flex.flex-direction-row.gap-medium .list-bullet) {
        width: 100%;
        box-sizing: border-box;
        padding: 14px 18px;
        gap: 6px;
        row-gap: 6px;
        text-align: left;
    }

    main.app div.display-flex.flex-direction-column.gap-medium:has(> div.display-flex.flex-direction-row.gap-medium .list-bullet)
    > div.display-flex.flex-direction-row.gap-medium {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr);
        column-gap: 10px;
        row-gap: 0;
        align-items: start;
        justify-content: start;
        width: 100%;
        min-height: 38px;
        text-align: left;
    }

    main.app div.display-flex.flex-direction-column.gap-medium:has(> div.display-flex.flex-direction-row.gap-medium .list-bullet)
    > div.display-flex.flex-direction-row.gap-medium .list-bullet {
        grid-column: 1;
        width: 28px;
        min-width: 28px;
        height: 28px;
        min-height: 28px;
        margin-top: 0;
        align-self: start;
        justify-self: start;
    }

    main.app div.display-flex.flex-direction-column.gap-medium:has(> div.display-flex.flex-direction-row.gap-medium .list-bullet)
    > div.display-flex.flex-direction-row.gap-medium > span.text-size-small {
        grid-column: 2;
        display: block;
        width: 100%;
        min-width: 0;
        text-align: left;
        line-height: 1.2;
    }

    main.app div.display-flex.flex-direction-column.gap-medium:has(> div.display-flex.flex-direction-row.gap-medium .list-bullet)
    > div.display-flex.flex-direction-row.gap-medium > span.text-size-small span {
        text-align: left;
        line-height: inherit;
    }
}