/* Colors for the whole site. Light is the default (like the web app); dark is the earlier
   dark look. theme.js sets data-theme on <html>. Every color pair below passes WCAG AA. */
:root {
    color-scheme: light;
    --bg: #f9f6f7;
    --bg-alt: #ffffff;
    --surface: #ffffff;
    --icon-bg: #f5f5f5;
    --line: #e4dce0;
    --line-strong: #8a7f85;
    --text: #2b2427;
    --heading: #2D0F1D;
    --title: #6D2B4A;
    --text-2: #3d3539;
    --muted: #5e555a;
    --primary: #6D2B4A;
    --primary-hover: #4C1E34;
    --accent: #6D2B4A;
    --accent-hover: #4C1E34;
    --error: #c62828;
    --success: #2e7d32;
    --input-bg: #ffffff;
    --input-border: #8a7f85;
    --shadow: 0 10px 30px rgba(45, 15, 29, 0.12);
    --backdrop: rgba(20, 8, 14, 0.88);
    --beta-bg: #ffeacc;
    --beta-text: #663d00;
    --placeholder-bg: #e9e3e6;
    --placeholder-fg: #d3cacf;
    /* Same top bar as the web app (web/src/Components/Common/TopBar.jsx), in both themes. */
    --header-gradient: linear-gradient(90deg, #282428 0%, #461C32 50%, #93264A 100%);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0a0a0f;
    --bg-alt: #101018;
    --surface: #12121a;
    --icon-bg: #ffffff;
    --line: #23232e;
    --line-strong: #4a4a58;
    --text: #ffffff;
    --heading: #ffffff;
    --title: #ffffff;
    --text-2: #d4d6dd;
    --muted: #b9bcc6;
    /* #9B2154 only as a button background; as text it fails AA on the dark background. */
    --primary: #9B2154;
    --primary-hover: #7a1a43;
    --accent: #e8679f;
    --accent-hover: #f39bc0;
    --error: #ff8f8f;
    --success: #7fd99a;
    --input-bg: #0a0a0f;
    --input-border: #75758a;
    --shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    --backdrop: rgba(0, 0, 0, 0.88);
    --beta-bg: rgba(255, 170, 60, 0.16);
    --beta-text: #ffcf8a;
    --placeholder-bg: #262830;
    --placeholder-fg: #363944;
}

/* Light/dark switch in the gradient top bar */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.theme-toggle .icon-moon {
    fill: currentColor;
    stroke: none;
}

/* Shows the theme you switch to: the moon in light, the sun in dark. */
.theme-toggle .icon-sun,
:root[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
    display: block;
}

/* Cookie consent box, built by consent.js (#1173). A card at the bottom right; full width on narrow
   screens, so it never sits over the hero buttons. Only the middle part scrolls, so the heading and
   the buttons always show. */
.consent {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 100;
    width: 440px;
    /* Room for all three categories below the top bar. */
    max-height: calc(100vh - 112px);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--input-border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.consent[hidden] {
    display: none;
}

/* On a phone the box takes at most half the screen; the middle part scrolls. */
@media (max-width: 900px) {
    .consent {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
        max-height: 50vh;
        max-height: 50dvh;
        font-size: 0.875rem;
    }

    .consent-title {
        padding: 16px 16px 6px;
        font-size: 1rem;
    }

    .consent-body {
        padding: 0 16px;
    }

    .consent-category {
        padding: 8px 0;
    }

    .consent-actions {
        padding: 10px 16px 16px;
    }
}

.consent-title {
    margin: 0;
    padding: 20px 20px 8px;
    font-size: 1.125rem;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--heading);
}

/* Focus is moved here by the script; these are not controls, so no focus ring. */
.consent-title:focus,
main[tabindex="-1"]:focus {
    outline: none;
}

.consent-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 20px;
}

/* A fade at the bottom shows that there is more to scroll to. The padding at the bottom of the
   categories gives it empty space to cover when the list is scrolled to the end. */
.consent-body::after {
    content: "";
    position: sticky;
    bottom: 0;
    display: block;
    height: 24px;
    margin-top: -24px;
    background: linear-gradient(transparent, var(--surface));
    pointer-events: none;
}

.consent-intro {
    margin: 0 0 12px;
}

.consent-categories {
    margin: 0;
    padding: 0 0 16px;
    border: 0;
    min-width: 0;
}

.consent-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.consent-category {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
}

.consent-category input {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.consent-name {
    display: block;
    margin: 0;
    font-weight: 600;
    color: var(--heading);
}

label.consent-name {
    cursor: pointer;
}

.consent-always-on {
    font-weight: 400;
    color: var(--muted);
}

.consent-description {
    margin: 0;
    color: var(--muted);
    font-size: 0.875rem;
}

.consent-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 20px 20px;
    border-top: 1px solid var(--line);
}

.consent-main-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Like .btn-primary and .btn-secondary in index.html, which the legal pages do not have. */
.consent-btn {
    min-height: 44px;
    padding: 0 16px;
    border-radius: 4px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.consent-btn-primary {
    background: var(--primary);
    color: #ffffff;
    border: 0;
}

.consent-btn-primary:hover {
    background: var(--primary-hover);
}

.consent-btn-secondary {
    align-self: flex-start;
    background: transparent;
    color: var(--heading);
    border: 1px solid var(--line-strong);
}

.consent-btn-secondary:hover {
    border-color: var(--heading);
}

/* "Hantera kakor" in the footer: a button, since it opens the box, but it looks like the links. */
.consent-manage {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
}

.footer-links .consent-manage {
    color: var(--text-2);
}