/*
 * Fælles klassisk layout.
 * Siderne bruger stadig deres egne grids og funktionelle komponenter, men den
 * ydre præsentation er nu en enkel header/main/footer uden ramme-i-ramme-look.
 */

:root {
    --bg-body: #292929;
    --bg-container: #222222;
    --bg-boxes: #353535;
    --bg-main: #303030;
    --red-primary: #e98686;
    --red-text: #ffb1b1;
    --text-light: #f7f7f7;
    --text-muted: #c7c7c7;
    --shadow-glow-large: none;
    --shadow-glow-text: none;
    --shadow-glow-small: none;
}

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    padding: 0;
    background: var(--bg-body);
}

#hoved-container,
body[data-design="nordisk"] #hoved-container,
body[data-design="kreativ"] #hoved-container {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    gap: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#side-header,
body[data-design="nordisk"] #side-header,
body[data-design="kreativ"] #side-header {
    min-height: 82px;
    padding: 16px max(22px, calc((100vw - 1240px) / 2));
    gap: 28px;
    background: var(--bg-container);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#header-logo,
body[data-design="nordisk"] #header-logo,
body[data-design="kreativ"] #header-logo {
    height: 50px;
    filter: none;
}

#header-titel,
.footer-titel,
#fejl-overskrift {
    text-shadow: none;
}

.header-menu-link,
.header-menu-link:hover,
.header-menu-link:focus-visible,
.header-menu-link.er-aktiv {
    text-shadow: none;
}

.header-menu-link::after,
body[data-design="nordisk"] .header-menu-link::after,
body[data-design="kreativ"] .header-menu-link::after {
    height: 1px;
    box-shadow: none;
}

.header-design-link,
.header-logout-button {
    border: 0;
    border-radius: 3px;
    background: color-mix(in srgb, var(--bg-main) 75%, transparent);
}

#side-indhold,
body[data-design="nordisk"] #side-indhold,
body[data-design="kreativ"] #side-indhold {
    width: 100%;
    padding: clamp(34px, 5vw, 72px) max(20px, calc((100vw - 1120px) / 2));
    background: var(--bg-main);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#dynamisk-indhold {
    width: 100%;
    max-width: 1120px;
}

/* Forsidens gamle regler bruger id-selektorer og skal derfor nulstilles
   eksplicit for at følge det nye, kantløse udtryk. */
#services-container .service-boks,
#domaene-info-boks {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#services-container .service-boks:hover {
    transform: none;
    box-shadow: none;
}

#domaene-info-boks {
    padding-inline: 0;
    background: transparent;
}

#side-footer,
body[data-design="nordisk"] #side-footer,
body[data-design="kreativ"] #side-footer {
    padding: 44px max(22px, calc((100vw - 1240px) / 2)) 22px;
    background: var(--bg-container);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#footer-bundlinje {
    border-top-color: color-mix(in srgb, var(--text-muted) 24%, transparent);
}

.footer-social-link,
.footer-kontakt-knap,
body[data-design="kreativ"] .footer-social-link,
body[data-design="kreativ"] .footer-kontakt-knap {
    border: 0;
    border-radius: 3px;
    box-shadow: none;
}

/* Indholdsflader adskilles med luft og tone, ikke med rammer og glød. */
body:not([data-page="demo-erp"]):not([data-page="demo-webshop"]):not([data-page="demo-oplevelser"]) :where(
    .service-boks,
    .pris-kort,
    .vilkaar-sektion,
    .privatliv-sektion,
    .design-kort,
    .design-tip,
    .portal-card,
    .portal-panel,
    .calculator-options fieldset,
    .calculator-result,
    .work-metrics article,
    .work-filter,
    .work-task,
    .conversation-filters,
    .invoice-document,
    .invoice-payment,
    .agreement-accept,
    .agreement-live-summary,
    .kontakt-prisoverslag
) {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body:not([data-page="demo-erp"]):not([data-page="demo-webshop"]):not([data-page="demo-oplevelser"]) :where(
    .service-boks,
    .pris-kort,
    .vilkaar-sektion,
    .privatliv-sektion,
    .portal-card,
    .portal-panel,
    .calculator-options fieldset,
    .calculator-result,
    .work-metrics article,
    .work-filter,
    .work-task,
    .conversation-filters
) {
    background: transparent;
}

/* Formularfelter skal stadig kunne genkendes, men uden tegnede bokskanter. */
body:not([data-page="demo-erp"]):not([data-page="demo-webshop"]):not([data-page="demo-oplevelser"]) :where(
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
) {
    border: 0;
    border-radius: 3px;
    box-shadow: inset 0 -2px color-mix(in srgb, var(--red-primary) 45%, transparent);
}

body:not([data-page="demo-erp"]):not([data-page="demo-webshop"]):not([data-page="demo-oplevelser"]) :where(
    button,
    .portal-navigation-link,
    .portal-website-link,
    .admin-edit-link,
    .admin-cancel-link,
    .invoice-filter,
    .calculator-contact
) {
    border: 0;
    border-radius: 3px;
    box-shadow: none;
}

body:not([data-page="demo-erp"]):not([data-page="demo-webshop"]):not([data-page="demo-oplevelser"]) :where(
    h1,
    h2,
    h3
) {
    text-shadow: none;
}

@media screen and (max-width: 1180px) {
    #header-navigation {
        border-top: 0;
    }
}

@media screen and (max-width: 768px) {
    body {
        padding: 0;
    }

    #hoved-container {
        width: 100%;
        min-height: 100vh;
        padding: 0;
        gap: 0;
    }

    #side-header {
        padding: 12px 16px;
    }

    #side-indhold {
        padding: 32px 16px 46px;
    }

    #side-footer {
        padding: 36px 18px 18px;
    }
}

@media screen and (max-width: 560px) {
    #header-menu-liste {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 12px;
    }

    .header-menu-link {
        text-align: left;
    }
}