/* Plus Jakarta Sans (SIL Open Font License 1.1, see fonts/PlusJakartaSans-OFL.txt).
   Served from this site, so no request goes to Google. */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url('fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url('fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Colours: dark (default) and light ──────────────────────────────────────
   Every colour of the site comes from these variables. Without a choice in the menu the device
   decides (prefers-color-scheme); a choice sets data-theme="light"/"dark" on <html> (cookie ev_theme).
   rgba(var(--fg-rgb), a) is "the text colour at a": white on dark, ink on light. */
:root {
    color-scheme: dark;
    --bg: #140b13;
    --bg-rgb: 20, 11, 19;
    --fg-rgb: 255, 255, 255;
    --surface: #1c111a;
    --surface-2: #22151f;
    --surface-3: #2c1c29;
    --text: #f3ebe6;
    --text-2: #dccfc8;
    --text-3: #b3a39c;
    --muted: #a08f96;
    --faint: #a08e99; /* at least 4.5:1 on the chips and the footer (WCAG AA, checked by the browser tests) */
    --faint-2: #5e4c58;
    --body-text: #e6dcd6;
    --accent: #FFB13B;
    --accent-rgb: 255, 177, 59;
    --accent-2: #FFD27A;
    --accent-text: #FFB13B; /* the accent as text colour on the page background */
    --on-accent: #1a0e18; /* text on an accent-coloured surface */
    --accent-2-rgb: 255, 210, 122;
    --accent-hover: #ffc566;
    --accent-2-hover: #ffe4a8;
    --link: #FF9A6C;
    --link-2: #d9a48c;
    --red: #F87171;
    --red-2: #fca5a5;
    --pink-2: #F9A8D4;
    --amber: #FBBF24;
    --amber-2: #c9a24a;
    --green: #23CF77;
    --green-2: #86EFAC;
    --green-3: #34D399;
    --orange-2: #fdba74;
    --blue-2: #93c5fd;
    --violet: #A78BFA;
    --film: #f5d38a;
    --fab-a: #241420;
    --fab-b: #4a2140;
    --fab-c: #2a1626;
    --fab-d: #5a2a4c;
    /* "Entdecken": the glow of the gate in the logo, the same in both themes, dark ink on it */
    --discover-a: #F26B4F;
    --discover-b: #FFB13B;
    --discover-rgb: 242, 107, 79;
    --discover-ring: #FFD27A;
    --on-discover: #1a0e18;
    /* Cards, chips and buttons at rest: a breath lighter than the page (white on the light page) */
    --raised-3: rgba(255, 255, 255, 0.03);
    --raised-4: rgba(255, 255, 255, 0.04);
    --raised-5: rgba(255, 255, 255, 0.05);
    /* Category colours as chip text (pastels): unchanged on dark, darkened on light */
    --chip-ink: 100%;
    --chip-ink-base: #000000;
    --chip-tint: 18%;
    /* Bootstrap's dark classes (table-dark, text-light, …) follow the theme */
    --bsx-table-bg: #212529;
    --bsx-table-color: #fff;
    --bsx-table-border: #4d5154;
    --bsx-table-stripe: rgba(255, 255, 255, 0.05);
    --bsx-table-hover: rgba(255, 255, 255, 0.075);
    --bsx-text-light: #f8f9fa;
    --bsx-dropdown-bg: #343a40;
    --bsx-dropdown-color: #dee2e6;
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg: #faf5f1;
    --bg-rgb: 250, 245, 241;
    --fg-rgb: 30, 18, 28;
    --surface: #ffffff;
    --surface-2: #ffffff;
    --surface-3: #ffffff;
    --text: #1e121c;
    --text-2: #3a2a35;
    --text-3: #54424d;
    --muted: #6a5a63;
    --faint: #75636d;
    --faint-2: #9a8a94;
    --body-text: #1e121c;
    --accent: #c2410c;
    --accent-rgb: 194, 65, 12;
    --accent-2: #9a3412;
    --accent-text: #9a3412; /* #c2410c is too light for small text on the light background */
    --on-accent: #ffffff;
    --accent-2-rgb: 154, 52, 18;
    --accent-hover: #d9531c;
    --accent-2-hover: #7c2d12;
    --link: #b4441f;
    --link-2: #8a4a2e;
    --red: #dc2626;
    --red-2: #b91c1c;
    --pink-2: #be185d;
    --amber: #b45309;
    --amber-2: #92400e;
    --green: #15803d;
    --green-2: #166534;
    --green-3: #047857;
    --orange-2: #c2410c;
    --blue-2: #1d4ed8;
    --violet: #6d28d9;
    --film: #92400e;
    --fab-a: #ffffff;
    --fab-b: #fde7d6;
    --fab-c: #fff8f2;
    --fab-d: #fbd9c0;
    --raised-3: #ffffff;
    --raised-4: #ffffff;
    --raised-5: #ffffff;
    --chip-ink: 42%;
    --chip-ink-base: #1e121c;
    --chip-tint: 30%;
    --bsx-table-bg: #ffffff;
    --bsx-table-color: #1e121c;
    --bsx-table-border: #dee2e6;
    --bsx-table-stripe: rgba(0, 0, 0, 0.03);
    --bsx-table-hover: rgba(0, 0, 0, 0.05);
    --bsx-text-light: #1e121c;
    --bsx-dropdown-bg: #ffffff;
    --bsx-dropdown-color: #1e121c;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        color-scheme: light;
        --bg: #faf5f1;
        --bg-rgb: 250, 245, 241;
        --fg-rgb: 30, 18, 28;
        --surface: #ffffff;
        --surface-2: #ffffff;
        --surface-3: #ffffff;
        --text: #1e121c;
        --text-2: #3a2a35;
        --text-3: #54424d;
        --muted: #6a5a63;
        --faint: #75636d;
        --faint-2: #9a8a94;
        --body-text: #1e121c;
        --accent: #c2410c;
        --accent-rgb: 194, 65, 12;
        --accent-2: #9a3412;
        --accent-text: #9a3412;
        --on-accent: #ffffff;
        --accent-2-rgb: 154, 52, 18;
        --accent-hover: #d9531c;
        --accent-2-hover: #7c2d12;
        --link: #b4441f;
        --link-2: #8a4a2e;
        --red: #dc2626;
        --red-2: #b91c1c;
        --pink-2: #be185d;
        --amber: #b45309;
        --amber-2: #92400e;
        --green: #15803d;
        --green-2: #166534;
        --green-3: #047857;
        --orange-2: #c2410c;
        --blue-2: #1d4ed8;
        --violet: #6d28d9;
        --film: #92400e;
        --fab-a: #ffffff;
        --fab-b: #fde7d6;
        --fab-c: #fff8f2;
        --fab-d: #fbd9c0;
        --raised-3: #ffffff;
        --raised-4: #ffffff;
        --raised-5: #ffffff;
        --chip-ink: 42%;
        --chip-ink-base: #1e121c;
        --chip-tint: 30%;
        --bsx-table-bg: #ffffff;
        --bsx-table-color: #1e121c;
        --bsx-table-border: #dee2e6;
        --bsx-table-stripe: rgba(0, 0, 0, 0.03);
        --bsx-table-hover: rgba(0, 0, 0, 0.05);
        --bsx-text-light: #1e121c;
        --bsx-dropdown-bg: #ffffff;
        --bsx-dropdown-color: #1e121c;
    }
}

.table-dark {
    --bs-table-bg: var(--bsx-table-bg);
    --bs-table-color: var(--bsx-table-color);
    --bs-table-border-color: var(--bsx-table-border);
    --bs-table-striped-bg: var(--bsx-table-stripe);
    --bs-table-striped-color: var(--bsx-table-color);
    --bs-table-hover-bg: var(--bsx-table-hover);
    --bs-table-hover-color: var(--bsx-table-color);
    --bs-table-active-bg: var(--bsx-table-hover);
    --bs-table-active-color: var(--bsx-table-color);
}

.text-light {
    color: var(--bsx-text-light) !important;
}

.dropdown-menu-dark {
    --bs-dropdown-bg: var(--bsx-dropdown-bg);
    --bs-dropdown-color: var(--bsx-dropdown-color);
    --bs-dropdown-link-color: var(--bsx-dropdown-color);
    --bs-dropdown-border-color: rgba(var(--fg-rgb), 0.15);
    --bs-dropdown-link-hover-bg: rgba(var(--fg-rgb), 0.08);
    --bs-dropdown-link-hover-color: var(--bsx-dropdown-color);
}

:root {
    --bs-body-font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html, body {
    font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

body {
    padding: 20px;
    background-color: var(--bg);
    color: var(--body-text);
}

.category-container {
    background-color: #3e3e3e;
    padding: 10px;
    border-radius: 5px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Start page: the app takes at least one screen, so the links below it stay below the fold while it loads */
.app-root {
    min-height: 100vh;
    min-height: 100dvh;
}

/* Pictures that fail to load (site.js marks them): hidden, the placeholder rendered after them shows instead */
img.img-failed { display: none !important; }
.img-fallback { display: none !important; }
img.img-failed + .img-fallback { display: flex !important; }
.discover-media img.img-failed + .img-fallback { display: inline-block !important; }