/* begin license *
 *
 * "Sponsor Mee" is een website voor extra sponsoracties per project
 *
 * All rights reserved.
 *
 * Copyright (C) 2026 Seecr (Seek You Too B.V.) https://seecr.nl
 *
 * This file is part of "Sponsor Mee"
 *
 * end license */

/*
 * Sponsor Mee huisstijl on top of Bootstrap 5.3 (see doc/huisstijl.md).
 * Colours and fonts come from huisstijl/kleuren/kleuren.css and huisstijl/fonts/fonts.css;
 * here they are mapped onto Bootstrap's variables and SWL's (swl.css follows --bs-*).
 * Contrast: running text only stroop, bruin or roest on room/white; karamel only for
 * large text and surfaces. Buttons are stroop with room text.
 */

:root, [data-bs-theme=light] {
    --bs-body-font-family: var(--sm-font-tekst);
    --bs-body-bg: var(--sm-room);
    --bs-body-bg-rgb: 255, 248, 238;
    --bs-body-color: var(--sm-stroop);
    --bs-body-color-rgb: 43, 26, 16;
    --bs-emphasis-color: var(--sm-stroop);
    --bs-emphasis-color-rgb: 43, 26, 16;
    --bs-heading-color: var(--sm-stroop);
    --bs-secondary-color: var(--sm-bruin);
    --bs-secondary-color-rgb: 92, 64, 48;
    --bs-secondary-bg: var(--sm-zand);
    --bs-tertiary-bg: var(--sm-zand);
    --bs-tertiary-bg-rgb: 243, 227, 200;
    --bs-border-color: var(--sm-lijn);
    --bs-primary: var(--sm-karamel);
    --bs-primary-rgb: 184, 110, 34;
    --bs-link-color: var(--sm-roest);
    --bs-link-color-rgb: 168, 88, 26;
    --bs-link-hover-color: var(--sm-stroop);
    --bs-link-hover-color-rgb: 43, 26, 16;
    --bs-focus-ring-color: rgba(184, 110, 34, .4);

    /* SWL's own buttons and switches: stroop with room text, like ours */
    --swl-accent: var(--sm-stroop);
    --swl-accent-fg: var(--sm-room);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--sm-font-kop);
    font-weight: 700;
}

/* Header: horizontal logo on white, clear space of a quarter of the badge height (48 / 4) */
.sm-header {
    background: var(--sm-wit);
    border-bottom: 1px solid var(--sm-lijn);
}
.sm-logo {
    padding: 12px 0;
    margin-right: 12px;
}
.sm-logo img {
    display: block;
    height: 48px;
    width: auto;
}

/* Buttons */
.btn {
    font-family: var(--sm-font-kop);
    font-weight: 600;
}
.btn-primary {
    --bs-btn-color: var(--sm-room);
    --bs-btn-bg: var(--sm-stroop);
    --bs-btn-border-color: var(--sm-stroop);
    --bs-btn-hover-color: var(--sm-room);
    --bs-btn-hover-bg: var(--sm-bruin);
    --bs-btn-hover-border-color: var(--sm-bruin);
    --bs-btn-active-color: var(--sm-room);
    --bs-btn-active-bg: var(--sm-bruin);
    --bs-btn-active-border-color: var(--sm-bruin);
    --bs-btn-disabled-color: var(--sm-room);
    --bs-btn-disabled-bg: var(--sm-bruin);
    --bs-btn-disabled-border-color: var(--sm-bruin);
    --bs-btn-focus-shadow-rgb: 184, 110, 34;
}
.btn-outline-primary,
.btn-outline-secondary {
    --bs-btn-color: var(--sm-stroop);
    --bs-btn-border-color: var(--sm-karamel);
    --bs-btn-hover-color: var(--sm-room);
    --bs-btn-hover-bg: var(--sm-stroop);
    --bs-btn-hover-border-color: var(--sm-stroop);
    --bs-btn-active-color: var(--sm-room);
    --bs-btn-active-bg: var(--sm-stroop);
    --bs-btn-active-border-color: var(--sm-stroop);
    --bs-btn-disabled-color: var(--sm-bruin);
    --bs-btn-disabled-border-color: var(--sm-lijn);
    --bs-btn-focus-shadow-rgb: 184, 110, 34;
}

/* Cards and form fields are white on the room background */
.card {
    --bs-card-bg: var(--sm-wit);
    --bs-card-border-color: var(--sm-lijn);
}
.form-control, .form-select {
    background-color: var(--sm-wit);
}
.form-control:focus, .form-select:focus {
    border-color: var(--sm-karamel);
    box-shadow: 0 0 0 .25rem rgba(184, 110, 34, .25);
}

/* Home */
.sm-intro {
    background: var(--sm-zand);
    border-radius: 1rem;
    padding: 2rem;
}
.sm-intro p:last-child {
    margin-bottom: 0;
}
.sm-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.sm-badges li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    width: 6rem;
    font-weight: 600;
    text-align: center;
}

/* User management (users/list.j2): "Nieuw wachtwoord instellen" folds open under a user */
.sm-user-password {
    margin: 0 0 .75rem 3rem;
}
.sm-user-password summary {
    color: var(--bs-link-color);
    cursor: pointer;
    width: fit-content;
}

/* A notice that stands out, e.g. "Sponsor Mee is in ontwikkeling" on the homepage */
.sm-notice {
    background: var(--sm-wit);
    border: 2px solid var(--sm-karamel);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    margin-top: 1.5rem;
}
.sm-notice p:last-child {
    margin-bottom: 0;
}

/* A small label, e.g. "Bèta"; capitals only through text-transform (doc/huisstijl.md, Naam) */
.sm-label {
    display: inline-block;
    background: var(--sm-stroop);
    color: var(--sm-room);
    font-family: var(--sm-font-kop);
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: .15rem .6rem;
    margin-bottom: .5rem;
}

/* Footer: who makes Sponsor Mee, quiet, on one line with the Seecr logo on the left (it wraps on
   a narrow screen); the logo grey, in colour on hover */
.sm-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .5rem .75rem;
    margin-top: 4rem;
    padding-top: .75rem;
    padding-bottom: 1rem;
    border-top: 1px solid var(--bs-border-color);
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: .875rem;
}
.sm-footer p {
    margin: 0;
}
.sm-version {
    margin-left: .5rem;
    white-space: nowrap;
}
.sm-seecr {
    display: inline-block;
}
.sm-seecr img {
    display: block;
    height: 20px;
    width: auto;
    filter: grayscale(1);
    opacity: .55;
    transition: filter .2s, opacity .2s;
}
.sm-seecr:hover img,
.sm-seecr:focus-visible img {
    filter: none;
    opacity: 1;
}

/* Login: stacked logo centred above the form */
.sm-logo-stacked {
    display: block;
    margin: 0 auto 2rem;
    max-width: 100%;
    height: auto;
}

/*
 * Dark colours: data-bs-theme="dark" on <html>, set by swl's theme.js (the switch in page.j2).
 * See "Donkere modus" in doc/huisstijl.md: a stroop background, room text, wafel as the accent,
 * cacao for cards, drop for the header and inputs, and the white logo.
 * Contrast (WCAG): room on stroop 15.8, zand on stroop 13.2, wafel on stroop 8.3, stroop on
 * wafel 8.3, room on the card colour 13.9, input borders on stroop 5.7.
 */
[data-bs-theme=dark] {
    color-scheme: dark;

    --bs-body-bg: var(--sm-stroop);
    --bs-body-bg-rgb: 43, 26, 16;
    --bs-body-color: var(--sm-room);
    --bs-body-color-rgb: 255, 248, 238;
    --bs-emphasis-color: var(--sm-room);
    --bs-emphasis-color-rgb: 255, 248, 238;
    --bs-heading-color: var(--sm-room);
    --bs-secondary-color: var(--sm-zand);
    --bs-secondary-color-rgb: 243, 227, 200;
    --bs-secondary-bg: var(--sm-cacao);
    --bs-tertiary-bg: var(--sm-cacao);
    --bs-tertiary-bg-rgb: 55, 36, 24;
    --bs-border-color: var(--sm-bruin);
    --bs-primary: var(--sm-wafel);
    --bs-primary-rgb: 227, 174, 92;
    --bs-link-color: var(--sm-wafel);
    --bs-link-color-rgb: 227, 174, 92;
    --bs-link-hover-color: var(--sm-room);
    --bs-link-hover-color-rgb: 255, 248, 238;
    --bs-focus-ring-color: rgba(227, 174, 92, .45);

    --swl-accent: var(--sm-wafel);
    --swl-accent-fg: var(--sm-stroop);
}

[data-bs-theme=dark] .sm-header {
    background: var(--sm-drop);
    border-bottom-color: var(--sm-bruin);
}
[data-bs-theme=dark] .btn-primary {
    --bs-btn-color: var(--sm-stroop);
    --bs-btn-bg: var(--sm-wafel);
    --bs-btn-border-color: var(--sm-wafel);
    --bs-btn-hover-color: var(--sm-stroop);
    --bs-btn-hover-bg: var(--sm-room);
    --bs-btn-hover-border-color: var(--sm-room);
    --bs-btn-active-color: var(--sm-stroop);
    --bs-btn-active-bg: var(--sm-room);
    --bs-btn-active-border-color: var(--sm-room);
    --bs-btn-disabled-color: var(--sm-stroop);
    --bs-btn-disabled-bg: var(--sm-zand);
    --bs-btn-disabled-border-color: var(--sm-zand);
    --bs-btn-focus-shadow-rgb: 227, 174, 92;
}
[data-bs-theme=dark] .btn-outline-primary,
[data-bs-theme=dark] .btn-outline-secondary {
    --bs-btn-color: var(--sm-room);
    --bs-btn-border-color: var(--sm-wafel);
    --bs-btn-hover-color: var(--sm-stroop);
    --bs-btn-hover-bg: var(--sm-wafel);
    --bs-btn-hover-border-color: var(--sm-wafel);
    --bs-btn-active-color: var(--sm-stroop);
    --bs-btn-active-bg: var(--sm-wafel);
    --bs-btn-active-border-color: var(--sm-wafel);
    --bs-btn-disabled-color: var(--sm-zand);
    --bs-btn-disabled-border-color: var(--sm-bruin);
    --bs-btn-focus-shadow-rgb: 227, 174, 92;
}
[data-bs-theme=dark] .card {
    --bs-card-bg: var(--sm-cacao);
    --bs-card-border-color: var(--sm-bruin);
}
[data-bs-theme=dark] .form-control,
[data-bs-theme=dark] .form-select {
    background-color: var(--sm-drop);
    border-color: var(--sm-hazelnoot);
}
[data-bs-theme=dark] .form-control:focus,
[data-bs-theme=dark] .form-select:focus {
    border-color: var(--sm-wafel);
    box-shadow: 0 0 0 .25rem rgba(227, 174, 92, .3);
}
[data-bs-theme=dark] .sm-intro {
    background: var(--sm-cacao);
}
[data-bs-theme=dark] .sm-notice {
    background: var(--sm-cacao);
    border-color: var(--sm-wafel);
}
[data-bs-theme=dark] .sm-seecr img {
    filter: grayscale(1) invert(1);
    opacity: .6;
}
[data-bs-theme=dark] .sm-seecr:hover img,
[data-bs-theme=dark] .sm-seecr:focus-visible img {
    filter: none;
    opacity: 1;
}
[data-bs-theme=dark] .sm-label {
    background: var(--sm-wafel);
    color: var(--sm-stroop);
}

/* Logos: the colour version on light, the white one on dark (doc/huisstijl.md) */
:root:not([data-bs-theme=dark]) .sm-on-dark,
[data-bs-theme=dark] .sm-on-light {
    display: none !important;
}