/*
 * Thema Standaard - algemene opmaak: rustig en typografisch.
 * Geladen in de <head> via Theme::siteCss('header.css'), direct na de kleurvariabelen (Theme::cssVariables()).
 * Deel 1: de algemene regels van de kern (gelijk aan assets/css/site/header.css; een thema met een eigen header.css
 * moet die zelf hebben). Deel 2: dit thema (klassen st-*).
 * Kleuren via Bootstrap-variabelen (donkere modus klopt vanzelf); accent = var(--primary-color) uit Aanpassen.
 */

/* ===================================================================== Deel 1: algemene regels van de kern */
/* Pagina-opbouw */
body {
    padding-top: 0; /* Verwijder padding omdat we geen fixed navbar gebruiken */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--text-color);
}

/* Top links bar (zwarte balk) */
.top-links {
    background-color: #333;
    color: white;
    padding: 5px 0;
    font-size: 0.9rem;
}

.top-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

.top-links a {
    color: white;
    text-decoration: none;
}

.top-links a:hover {
    text-decoration: underline;
}

/* Logo area */
.navbar-brand {
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 15px;
}

.navbar-brand img {
    height: 60px;
    width: auto;
}

/* Embleem + sitenaam als tekst (Theme::logoHtml()): scherp op elke
   maat, i.p.v. de kleine tekst in het brede logo-plaatje */
.logo-tekst {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.05;
    font-family: var(--heading-font, "Nunito", sans-serif);
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}
.logo-tekst__boven {
    font-size: 14px;
    letter-spacing: 0.02em;
    color: #1a1a1a;
}
.logo-tekst__onder {
    font-size: 23px;
    letter-spacing: 0.01em;
    color: var(--logo-kleur, #111111);
}

/* Dropdown styling */
.dropdown-menu {
    min-width: 220px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-radius: 0 0 8px 8px;
    border: 1px solid rgba(0,0,0,0.1);
    padding: 10px 0;
    margin-top: 0;
}

.dropdown-item {
    padding: 8px 20px;
    display: flex;
    align-items: center;
}

.dropdown-item:hover {
    background-color: rgba(var(--primary-rgb), 0.1);
}

.dropdown-item i {
    width: 20px;
    text-align: center;
    margin-right: 10px;
    color: var(--primary-color);
}

/* Search form styling */
.search-form {
    display: flex;
    align-items: center;
}

.search-form .form-control {
    height: 38px;
    border-radius: 20px 0 0 20px;
    border-right: none;
}

.search-form .btn {
    border-radius: 0 20px 20px 0;
    background-color: white;
    border: 1px solid #ced4da;
    border-left: none;
    color: #777;
}

.search-form .btn:hover {
    color: var(--primary-color);
}

/* Content section */
.content {
    flex: 1;
}

/* Alert styling */
.alert {
    border-radius: 8px;
    border-left: 4px solid;
}

.alert-success {
    border-left-color: #198754;
}

.alert-danger {
    border-left-color: #dc3545;
}

.alert-warning {
    border-left-color: #ffc107;
}

.alert-info {
    border-left-color: #0dcaf0;
}

/* Mobile responsive styling */
@media (max-width: 992px) {
    .navbar-brand img {
        height: 45px;
    }
    .logo-tekst__boven { font-size: 11px; }
    .logo-tekst__onder { font-size: 18px; }

    .top-links ul {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }
}

.volunteer-btn {
    position: relative;
    animation: pulse 2s infinite;
    background-color: #ff6b00 !important; /* Complementary color to green */
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}


/* ===================================================================== Deel 2: thema Standaard */
:root {
    --st-tekstbreedte: 42rem;                 /* leeskolom, zoals contentSize in theme.json */
    --st-ruimte: clamp(2rem, 5vw, 4.5rem);    /* ruimte tussen grote blokken */
    --st-lijn: var(--bs-border-color-translucent);
    --st-zacht: var(--bs-secondary-color);
}

body.st {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* Typografie: grote, lichte koppen met strakke letterafstand */
.st .site-content h1, .st .site-content .h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
.st .site-content h2, .st .site-content .h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.st .site-content h3, .st .site-content .h3 { font-size: 1.4rem; }
.st .site-content :is(h1, h2, h3, h4, .h1, .h2, .h3, .h4) {
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--bs-emphasis-color);
}
.st .site-content a:not(.btn):not(.badge):not(.nav-link):not(.page-link):not(.dropdown-item) {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}
.st .site-content a:not(.btn):not(.badge):not(.nav-link):not(.page-link):not(.dropdown-item):hover {
    color: var(--primary-color);
    text-decoration-thickness: 2px;
}
.st .site-content :is(h1, h2, h3, h4, .card-title) a:not(.badge) { text-decoration: none; }
.st ::selection { background: var(--primary-color); color: var(--primary-contrast, #fff); }

/* Knoppen: vlak, in de accentkleur uit Aanpassen (de kern zet .btn-primary al op die kleur) */
.st .btn { border-radius: 0.25rem; font-weight: 500; padding: 0.6rem 1.25rem; }
.st .btn-sm { padding: 0.35rem 0.85rem; }

/* Vlak: geen kaders en schaduwen in de inhoud */
.st .site-content .card { border: 0; box-shadow: none !important; background: transparent; border-radius: 0; }
.st .site-content .card-header { background: transparent; border: 0; padding-left: 0; padding-right: 0; }
.st .site-content .card-body { padding-left: 0; padding-right: 0; }
.st .site-content .shadow, .st .site-content .shadow-sm { box-shadow: none !important; }
.st .site-content img { border-radius: 0.25rem; }
.st .badge { font-weight: 500; letter-spacing: 0.01em; border-radius: 0.2rem; }
.st .form-control, .st .form-select { border-radius: 0.25rem; padding: 0.6rem 0.8rem; }
.st .form-control:focus, .st .form-select:focus { border-color: var(--bs-emphasis-color); box-shadow: 0 0 0 1px var(--bs-emphasis-color); }

/* Pagina-opbouw: ruim, en een smalle leeskolom voor losse pagina's zonder kolommen */
.st .site-content { padding-top: var(--st-ruimte) !important; padding-bottom: var(--st-ruimte) !important; }
.st .site-content > .pagina-inhoud, .st .site-content .post-content, .st .site-content .faq-content { max-width: var(--st-tekstbreedte); }
.st .site-content blockquote { border-left: 2px solid var(--bs-emphasis-color); padding-left: 1.25rem; font-size: 1.2em; }
.st .site-content hr { border-color: var(--st-lijn); opacity: 1; }
.st .pagina-kruimel .breadcrumb { font-size: 0.85rem; }

/* Overslaan naar de inhoud (toegankelijkheid) */
.st-naar-inhoud { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 2000; background: var(--bs-body-bg); padding: 0.5rem 1rem; }

/* --------------------------------------------------------------------- Kop */
.st-kop { background: var(--bs-body-bg); border-bottom: 1px solid var(--st-lijn); }
.st-kop__binnen { display: flex; align-items: center; gap: 1.5rem; min-height: 5rem; }
.st-kop__logo { margin: 0; color: var(--bs-emphasis-color) !important; text-decoration: none; }
.st-kop__logo img { height: 44px; }
/* Woordmerk Flach (assets/logo-flach.png, #111 op transparant): in de donkere modus licht. Alleen dit logo (de
   webversies heten ook ...logo-flach...), niet een geüpload logo met eigen kleuren. */
[data-bs-theme="dark"] .st-kop__logo img[src*="logo-flach"] { filter: invert(1) brightness(.95); }
/* Geen logo (niets geüpload, dit thema heeft er geen): de sitenaam als tekst (Theme::logoHtml()) */
.st-kop__logo .logo-sitenaam { font-family: var(--heading-font, inherit); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.st-kop__nav { flex: 1 1 auto; justify-content: flex-end; padding: 0; }
.st-kop__nav .offcanvas-body { align-items: center; gap: 1rem; }
.st-menu { gap: 0.25rem 1.5rem; flex-wrap: wrap; justify-content: flex-end; }
.st-menu .nav-link, .st-account .nav-link {
    color: var(--bs-emphasis-color) !important;
    padding: 0.25rem 0 !important;
    font-size: 0.95rem;
    text-decoration: none;
    background: none !important;
}
.st-menu .nav-link:hover, .st-account .nav-link:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.st-menu .nav-link.active, .st-menu .active > .nav-link, .st-menu [aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: var(--primary-color);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.35em;
}
.st-account { margin-left: 0.5rem; }
.st-avatar { width: 28px; height: 28px; object-fit: cover; }
.st-kop__rechts { display: flex; align-items: center; gap: 0.5rem; }
/* Knop uit Weergave -> Aanpassen: compact en vlak (Theme::headerCta() geeft een grote knop met verloop) */
.st-kop__cta .btn {
    white-space: nowrap;
    background: var(--primary-color) !important;
    color: var(--primary-contrast, #fff) !important;
    box-shadow: none !important;
    border: 0;
    border-radius: 0.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    animation: none;
}
.st-kop__cta img { max-height: 44px; width: auto; }
.st-icoonknop {
    border: 0; background: transparent; color: var(--bs-emphasis-color);
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}
.st-icoonknop:hover, .st-icoonknop:focus-visible { background: var(--bs-tertiary-bg); }
.st-zoeken { border-top: 1px solid var(--st-lijn); }
.st-zoeken__form { display: flex; gap: 0.5rem; padding: 1rem 0; max-width: var(--st-tekstbreedte); margin-left: auto; }

/* Uitklapmenu's (core/views/templates/partials/hoofdmenu-items.php via TemplateTags::mainMenu()) */
.st .dropdown-menu { border-radius: 0.25rem; border-color: var(--st-lijn); box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08); font-size: 0.95rem; }
.st .dropdown-item:active { background: var(--bs-emphasis-color); color: var(--bs-body-bg); }

/* Telefoon/tablet: menu als paneel van rechts */
@media (max-width: 991.98px) {
    .st-kop__binnen { min-height: 4rem; gap: 0.75rem; }
    .st-kop__nav { flex: 0 0 auto; }
    .st-kop__rechts { margin-left: auto; }
    .st-kop__nav .offcanvas-body { flex-direction: column; align-items: stretch; gap: 1.5rem; }
    .st-menu, .st-account { flex-direction: column; gap: 0.25rem; margin: 0; }
    .st-menu .nav-link, .st-account .nav-link { font-size: 1.25rem; padding: 0.4rem 0 !important; }
    .st-kop__logo img { height: 38px; }
}

/* --------------------------------------------------------------------- Zijbalk (widgets) */
.st-zijbalk { font-size: 0.95rem; }
.st-widget { margin-bottom: 2.5rem; }
.st-widget__titel {
    font-size: 0.8rem !important;
    text-transform: uppercase;
    letter-spacing: 0.08em !important;
    font-weight: 600 !important;
    color: var(--st-zacht) !important;
    margin-bottom: 1rem;
}
.st-widget__lijst { list-style: none; margin: 0; padding: 0; }
.st-widget__lijst li { padding: 0.45rem 0; border-top: 1px solid var(--st-lijn); }
.st-widget__lijst li:last-child { border-bottom: 1px solid var(--st-lijn); }
.st-widget__lijst a { text-decoration: none !important; }
.st-widget__lijst a:hover { text-decoration: underline !important; }
.st-widget__lijst--berichten a { display: block; color: var(--bs-emphasis-color) !important; font-weight: 500; }
.st-widget__aantal, .st-widget__datum, .st-widget__leeg { color: var(--st-zacht); font-size: 0.85em; }
.st-widget__datum { display: block; }
.st-widget__feed { margin-left: 0.25rem; color: var(--st-zacht) !important; font-size: 0.8em; }
.st-tagwolk { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.st-tagwolk a {
    border: 1px solid var(--st-lijn); border-radius: 2rem; padding: 0.15rem 0.75rem;
    font-size: 0.85rem; text-decoration: none !important; color: var(--bs-emphasis-color) !important;
}
.st-tagwolk a:hover { border-color: var(--bs-emphasis-color); }
.st-inhoud .list-group-item { background: transparent; border-color: var(--st-lijn); padding-left: 0; }
@media (min-width: 992px) {
    .st-zijbalk { padding-left: 2.5rem; }
}

/* --------------------------------------------------------------------- Inloggen en registreren (views/auth/) */
/* Smalle kolom in het midden, geen kaart of schaduw: zoals de rest van Standaard. Velden en knop van het thema. */
.st-auth { max-width: 25rem; margin: clamp(1rem, 4vw, 3rem) auto clamp(2rem, 6vw, 5rem); }
.st-auth--breed { max-width: 34rem; }
.st-auth__kop { text-align: center; margin-bottom: 2rem; }
.st-auth__logo { display: inline-block; margin-bottom: 1.5rem; color: var(--bs-emphasis-color) !important; text-decoration: none !important; }
.st-auth__logo img { height: 52px; width: auto; }
.st-auth__logo .logo-sitenaam { font-family: var(--heading-font, inherit); font-size: 1.4rem; font-weight: 700; }
[data-bs-theme="dark"] .st-auth__logo img[src*="logo-flach"] { filter: invert(1) brightness(.95); }
.st .site-content .st-auth__titel { font-size: clamp(1.9rem, 4vw, 2.4rem); margin: 0 0 .4rem; }
.st-auth__intro { color: var(--st-zacht); margin: 0; }
.st-auth__form { display: flex; flex-direction: column; gap: 1.1rem; }
.st-auth__veld { margin: 0; }
.st-auth__veld .form-label { font-weight: 500; font-size: .95rem; margin-bottom: .35rem; }
.st-auth__labelregel { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.st .site-content .st-auth__klein { font-size: .85rem; color: var(--st-zacht); }
.st-auth__twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.st-auth__uitleg { margin: -.5rem 0 0; font-size: .85rem; color: var(--st-zacht); }
.st-auth__controle { padding: 1rem; border: 1px solid var(--st-lijn); border-radius: .25rem; }
.st-auth__vraag { font-weight: 600; color: var(--bs-emphasis-color); }
.st .st-auth__knop { width: 100%; padding: .75rem 1.25rem; margin-top: .25rem; font-size: 1rem; }
.st-auth__wissel { text-align: center; margin: 2rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--st-lijn); color: var(--st-zacht); }
.st .site-content .st-auth__wissel a { color: var(--bs-emphasis-color); font-weight: 500; }
.st-auth .form-check-label { font-size: .95rem; }
@media (max-width: 575.98px) {
    .st-auth__twee { grid-template-columns: 1fr; }
}