/* ========================================
   CSS VARIABELEN
   ======================================== */
   /* Standaardwaarden; de ingestelde huisstijlkleur (Systeeminstellingen >
      Uiterlijk) overschrijft deze via Theme::cssVariables() in de header. */
   :root {
    --primary-color: #008f39;
    --primary-rgb: 0, 143, 57;
    --primary-gradient-end: #40ab6b;
    --secondary-color: #f8f9fa;
    --text-color: #212529;
    --hover-color: #007a31;
    --primary-hover-color: #007a31;
    --primary-light: rgba(0, 143, 57, 0.1);
    --link-color: #333333;
    --link-hover-color: var(--primary-color);
}

/* ========================================
   ALGEMENE BODY STYLING
   ======================================== */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    padding-top: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--text-color);
}

body.has-admin-bar {
    margin-top: 32px;
}

body.has-admin-bar .top-links {
    margin-top: 32px;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */
h1, h2, h3, h4, h5 {
    color: #2c2c2c;
}

.display-6 {
    font-weight: 700;
}

.lead {
    font-size: 1.15rem;
    font-weight: 300;
}

.text-muted {
    color: #6c757d !important;
}

/* ========================================
   ADMIN BAR
   ======================================== */
#admin-bar {
    background-color: #23282d;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    height: 32px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    box-shadow: 0 1px 0 rgba(0,0,0,0.15);
}

.admin-bar-container {
    display: flex;
    justify-content: space-between;
    height: 100%;
    padding: 0 10px;
}

.admin-bar-left, 
.admin-bar-right {
    display: flex;
    align-items: center;
    height: 100%;
}

#admin-bar a, 
#admin-bar button {
    color: #ccc;
    text-decoration: none;
    font-size: 13px;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 8px;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

#admin-bar a:hover, 
#admin-bar button:hover {
    color: #fff;
    background-color: #32373c;
}

.site-home {
    font-weight: 600;
}

.site-home i {
    margin-right: 5px;
}

/* Admin Dropdown */
.admin-dropdown {
    position: relative;
    height: 100%;
}

.admin-dropdown-toggle {
    background: none;
    border: none;
    cursor: pointer;
    height: 100%;
    padding: 0 10px;
    white-space: nowrap;
}

.admin-dropdown-toggle i:last-child {
    margin-left: 4px;
    font-size: 10px;
}

.admin-dropdown-content {
    display: none;
    position: absolute;
    background-color: #32373c;
    min-width: 160px;
    box-shadow: 0 3px 5px rgba(0,0,0,.2);
    z-index: 1;
    left: 0;
    top: 32px;
}

.admin-dropdown-content a {
    color: #b4b9be;
    padding: 10px 12px;
    text-decoration: none;
    display: flex;
    align-items: center;
    height: auto;
}

.admin-dropdown-content a i {
    margin-right: 8px;
    width: 20px;
    text-align: center;
}

.admin-dropdown-content a:hover {
    color: #00b9eb;
    background-color: #191f25;
}

.admin-dropdown-content.show {
    display: block;
}

/* Notification en comment counters */
.notification-icon, 
.comments-icon {
    position: relative;
}

.notification-count, 
.comments-count {
    position: absolute;
    top: 4px;
    right: 2px;
    background-color: #ca4a1f;
    color: #fff;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* User dropdown */
.user-dropdown {
    margin-left: 8px;
}

.user-toggle i:first-child {
    font-size: 18px;
    margin-right: 4px;
}

.dropdown-divider {
    border-top: 1px solid #3c4349;
    margin: 5px 0;
}

/* Action buttons */
.admin-action-button {
    padding: 0 10px;
}

.admin-action-button i {
    margin-right: 5px;
}

/* ========================================
   TOP LINKS BAR
   ======================================== */
.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;
}

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

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

.main-navbar {
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    background-color: white;
    padding: 0;
}

/* Main navigation menu */
.main-nav {
    background-color: var(--primary-color);
    padding: 0;
}

.main-nav .nav-link {
    color: var(--menu-text, white) !important;
    padding: 15px 20px;
    font-weight: 500;
    transition: background-color 0.2s;
}

.main-nav .nav-link:hover,
.main-nav .nav-link:focus {
    background-color: var(--hover-color);
}

.main-nav .nav-item.dropdown .dropdown-menu {
    margin-top: 0;
    border-radius: 0 0 5px 5px;
    border-top: none;
}

/* ========================================
   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: var(--primary-light);
}

/* Bootstrap kleurt een aangeklikt/ingedrukt item (:active, .active) met
   zijn eigen blauw (#0d6efd); aan de themakleur koppelen. De variabelen
   staan op .dropdown-menu (component-niveau), dus niet via :root. */
.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--primary-color);
    --bs-dropdown-link-active-color: #fff;
}

.dropdown-item:active i,
.dropdown-item.active i {
    color: inherit;
}

/* Paginering: Bootstrap-blauw (#0d6efd) vervangen door de themakleur, op
   alle pagina's (was alleen in views/posts/blog/index.php geregeld). */
.pagination {
    --bs-pagination-color: var(--primary-color);
    --bs-pagination-hover-color: var(--primary-hover-color);
    --bs-pagination-focus-color: var(--primary-hover-color);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.25);
    --bs-pagination-active-bg: var(--primary-color);
    --bs-pagination-active-border-color: var(--primary-color);
}

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

/* ========================================
   SEARCH FORM
   ======================================== */
.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;
}

/* ========================================
   BUTTONS
   ======================================== */
.text-primary {
    color: var(--primary-color) !important;
}

.text-success {
    color: var(--primary-color) !important;
}

.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-primary:hover {
    background-color: var(--primary-hover-color) !important;
    border-color: var(--primary-hover-color) !important;
}

.btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-outline-primary:hover {
    background-color: var(--primary-color) !important;
    color: white !important;
}

.volunteer-btn {
    position: relative;
    animation: pulse 2s infinite;
    background-color: #ff6b00 !important;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

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

.alert-success {
    border-left-color: var(--primary-color);
}

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

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

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

/* ========================================
   CARDS
   ======================================== */
.card {
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Fix voor card-header text kleur */
.card-header.text-white h1,
.card-header.text-white h2,
.card-header.text-white h3,
.card-header.text-white h4,
.card-header.text-white h5,
.card-header.text-white h6,
.card-header.bg-success h1,
.card-header.bg-success h2,
.card-header.bg-success h3,
.card-header.bg-success h4,
.card-header.bg-success h5,
.card-header.bg-success h6 {
    color: white !important;
}

.card:hover {
    box-shadow: 0 10px 15px rgba(0,0,0,0.1) !important;
}

.support-card {
    transition: transform 0.3s ease, box-shadow 0.2s ease;
}

.support-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

.impact-section .card {
    border-left: 4px solid var(--primary-color);
    border-radius: 8px;
}

.contact-info .card {
    border-radius: 8px;
}

.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

/* ========================================
   ICONS
   ======================================== */
.icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--primary-light);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
}

.icon-circle i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.check-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
}

.contact-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--primary-light);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ========================================
   LISTS
   ======================================== */
.benefits-list li {
    font-size: 1rem;
}

.benefits-list span {
    font-weight: 500;
}

/* ========================================
   RESPONSIVE - MOBILE
   ======================================== */
@media screen and (max-width: 768px) {
    .admin-bar .site-home span {
        display: none;
    }
    
    .admin-action-button span {
        display: none;
    }
    
    .icon-circle {
        width: 70px;
        height: 70px;
    }
    
    .display-6 {
        font-size: 2rem;
    }
}

@media (max-width: 992px) {
    .navbar-brand img {
        height: 45px;
    }
    
    .main-nav .navbar-toggler {
        color: var(--menu-text, white);
        border-color: rgba(255,255,255,0.5);
    }
    
    .main-nav .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    
    .main-nav .navbar-collapse {
        background-color: var(--primary-color);
    }
    
    .dropdown-menu {
        background-color: rgba(255,255,255,0.1);
        border: none;
        box-shadow: none;
    }
    
    .dropdown-item {
        color: var(--menu-text, white);
    }
    
    .dropdown-item i {
        color: var(--menu-text, white);
    }
    
    .top-links ul {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }
}

@media (max-width: 767.98px) {
    .d-flex.justify-content-center.gap-3 {
        flex-direction: column;
    }
    
    .d-flex.justify-content-center.gap-3 .btn {
        margin-bottom: 10px;
    }
}
/* Tekstlinks in content (blog, FAQ, pagina's): herkenbaar als link in de
   huisstijl. Knoppen, badges en links rond een afbeelding houden hun eigen
   stijl. */
.blog-content a:not(.btn):not(.badge):not(:has(img)),
.faq-content a:not(.btn):not(.badge):not(:has(img)),
#page-content a:not(.btn):not(.badge):not(:has(img)) {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.blog-content a:not(.btn):not(.badge):not(:has(img)):hover,
.faq-content a:not(.btn):not(.badge):not(:has(img)):hover,
#page-content a:not(.btn):not(.badge):not(:has(img)):hover {
    color: var(--primary-hover-color);
    text-decoration-thickness: 2px;
}

/* Mobiel: zijmarges overal gelijk aan /blog en /faq (12px van de schermrand,
   de .container.content uit header.php). Veel views en pagina-content beginnen
   zelf nog met een eigen .container, wat op mobiel 12px extra gaf (24px).
   Geneste containers geven op mobiel dus geen eigen zijmarge; .row/.col heffen
   elkaar zoals altijd op. Uitgezonderd: views die zelf met negatieve marges op
   die 12px rekenen (blog/faq-overzicht, tag/categorie). Alleen publieke site:
   header.php zet .site-content niet in /admin. */
@media (max-width: 767.98px) {
    .site-content .container:not(.blog-index-wrapper):not(.listing-page-wrapper),
    .site-content .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ========================================
   MELDINGEN OP DE SITE (.site-notice)
   Bv. "U bent ingelogd als ..." bij het contactformulier. Kleuren
   instelbaar op /admin/theme (Theme: notice_color, notice_text_color);
   accentkleur volgt standaard de (seizoens-)primaire kleur.
   ======================================== */
.site-notice {
    background: var(--notice-bg, #e6f4eb);
    color: var(--notice-text, #212529);
    border: 0;
    border-left: 4px solid var(--notice-color, var(--primary-color));
    border-radius: 0.5rem;
}
.site-notice > i,
.site-notice a {
    color: var(--notice-color, var(--primary-color));
}
.site-notice a {
    font-weight: 600;
}
.site-notice a:hover {
    filter: brightness(0.85);
}

/* ========================================
   VOORPAGINAFOTO: KLIKBAAR + LABEL
   ([hero_foto], planning in /admin/albums, zie ShortcodeHandlers::heroFoto()).
   Maten in cqi (1% van de fotobreedte), zodat het label op elk scherm en in
   het voorbeeld in het beheer even groot oogt t.o.v. de foto.
   ======================================== */
.hero-link {
    display: block;
    text-decoration: none;
}
.hero-link:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 3px;
    border-radius: 0.5rem;
}
.hero-frame {
    display: block;
    position: relative;
    overflow: hidden; /* knipt het schuine lint af */
    container-type: inline-size;
}
.hero-frame > img {
    display: block;
    width: 100%;
}
.hero-cta {
    --cta-bg: var(--primary-color);
    --cta-fg: var(--primary-contrast, #ffffff);
    --cta-inset: 16px;
    position: absolute;
    z-index: 2;
    background: var(--cta-bg);
    color: var(--cta-fg);
    font-family: var(--heading-font, inherit);
    font-weight: 800;
    font-size: calc(1rem * var(--cta-schaal, 1));
    line-height: 1.15;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    transition: filter 0.2s ease, transform 0.2s ease;
}
@supports (font-size: 1cqi) {
    .hero-cta {
        font-size: calc(clamp(0.75rem, 3.4cqi, 1.6rem) * var(--cta-schaal, 1));
        --cta-inset: 4cqi;
    }
}
/* Verborgen voorbeeld (beheer) blijft verborgen, ook bij vormen met display: flex */
.hero-cta[hidden] { display: none !important; }
.hero-link:hover .hero-cta,
.hero-link:focus-visible .hero-cta {
    filter: brightness(1.1);
}

/* Kleuren */
.hero-cta--rood   { --cta-bg: #d32f2f; --cta-fg: #ffffff; }
.hero-cta--oranje { --cta-bg: #ef6c00; --cta-fg: #ffffff; }
.hero-cta--geel   { --cta-bg: #ffd600; --cta-fg: #212529; }
.hero-cta--wit    { --cta-bg: #ffffff; --cta-fg: #212529; }
.hero-cta--zwart  { --cta-bg: #111111; --cta-fg: #ffffff; }
.hero-cta--goud       { --cta-bg: #c9a227; --cta-fg: #212529; }
.hero-cta--groen      { --cta-bg: #2e7d32; --cta-fg: #ffffff; }
.hero-cta--lichtgroen { --cta-bg: #9ccc65; --cta-fg: #212529; }
.hero-cta--blauw      { --cta-bg: #1565c0; --cta-fg: #ffffff; }
.hero-cta--lichtblauw { --cta-bg: #81d4fa; --cta-fg: #212529; }
.hero-cta--paars      { --cta-bg: #6a1b9a; --cta-fg: #ffffff; }
.hero-cta--roze       { --cta-bg: #ec407a; --cta-fg: #ffffff; }
.hero-cta--bruin      { --cta-bg: #6d4c41; --cta-fg: #ffffff; }
/* .hero-cta--eigen: --cta-bg/--cta-fg komen als style-attribuut mee */

/* Grootte: --cta-schaal komt als style-attribuut mee (schuifregelaar
   50-200%, HeroPlanning::grootteValue()); standaard 1 */

/* Inhoud: icoon + tekst naast elkaar */
.hero-cta__inhoud {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
}
.hero-cta__inhoud > i { font-size: 1.1em; }

/* Posities (knop, cirkel, ballon) */
.hero-cta--linksboven  { top: var(--cta-inset); left: var(--cta-inset); }
.hero-cta--rechtsboven { top: var(--cta-inset); right: var(--cta-inset); }
.hero-cta--linksonder  { bottom: var(--cta-inset); left: var(--cta-inset); }
.hero-cta--rechtsonder { bottom: var(--cta-inset); right: var(--cta-inset); }
.hero-cta--midden      { top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* Knop */
.hero-cta--knop {
    padding: 0.6em 1.2em;
    border-radius: 999px;
    white-space: nowrap;
}
.hero-cta--knop::after {
    content: " \203A"; /* › */
}

/* Tekstballon: staartje wijst naar het midden van de foto */
.hero-cta--ballon {
    padding: 0.7em 1em;
    border-radius: 1em;
    max-width: 45%;
    text-align: center;
}
.hero-cta--ballon::after {
    content: "";
    position: absolute;
    top: 100%;
    border: 0.6em solid transparent;
    border-top-color: var(--cta-bg);
    border-bottom: 0;
}
.hero-cta--ballon.hero-cta--linksboven::after,
.hero-cta--ballon.hero-cta--midden::after { left: 1.4em; }
.hero-cta--ballon.hero-cta--rechtsboven::after { right: 1.4em; }
.hero-cta--ballon.hero-cta--linksonder::after,
.hero-cta--ballon.hero-cta--rechtsonder::after {
    top: auto;
    bottom: 100%;
    border-top: 0;
    border-bottom: 0.6em solid var(--cta-bg);
}
.hero-cta--ballon.hero-cta--linksonder::after { left: 1.4em; }
.hero-cta--ballon.hero-cta--rechtsonder::after { right: 1.4em; }

/* Cirkel (sticker), iets scheef */
.hero-cta--cirkel {
    --cta-rot: -12deg;
    width: calc(110px * var(--cta-schaal, 1));
    height: calc(110px * var(--cta-schaal, 1));
    padding: 0.6em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: calc(0.85rem * var(--cta-schaal, 1));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), inset 0 0 0 4px rgba(255, 255, 255, 0.35);
    transform: rotate(var(--cta-rot));
}
@supports (font-size: 1cqi) {
    .hero-cta--cirkel {
        width: calc(24cqi * var(--cta-schaal, 1));
        height: calc(24cqi * var(--cta-schaal, 1));
        font-size: calc(clamp(0.65rem, 2.8cqi, 1.3rem) * var(--cta-schaal, 1));
    }
}
.hero-cta--cirkel.hero-cta--midden { transform: translate(-50%, -50%) rotate(var(--cta-rot)); }

/* Strook over de volle breedte: boven, midden of onder */
.hero-cta--strook {
    left: 0;
    right: 0;
    padding: 0.6em 1em;
    text-align: center;
    box-shadow: none;
    opacity: 0.94;
}
.hero-cta--strook.hero-cta--linksboven,
.hero-cta--strook.hero-cta--rechtsboven { top: 0; }
.hero-cta--strook.hero-cta--linksonder,
.hero-cta--strook.hero-cta--rechtsonder { top: auto; bottom: 0; }
.hero-cta--strook.hero-cta--midden { left: 0; transform: translateY(-50%); }

/* Lint schuin over een hoek (midden = rechtsboven) */
.hero-cta--lint {
    width: 48%;
    padding: 0.45em 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: calc(0.85rem * var(--cta-schaal, 1));
}
@supports (font-size: 1cqi) {
    .hero-cta--lint { font-size: calc(clamp(0.6rem, 2.6cqi, 1.2rem) * var(--cta-schaal, 1)); }
}
.hero-cta--lint.hero-cta--rechtsboven,
.hero-cta--lint.hero-cta--midden   { top: 9%; right: -12%; left: auto; bottom: auto; transform: rotate(45deg); }
.hero-cta--lint.hero-cta--linksboven  { top: 9%; left: -12%; right: auto; transform: rotate(-45deg); }
.hero-cta--lint.hero-cta--rechtsonder { bottom: 9%; right: -12%; top: auto; left: auto; transform: rotate(-45deg); }
.hero-cta--lint.hero-cta--linksonder  { bottom: 9%; left: -12%; top: auto; right: auto; transform: rotate(45deg); }

/* Pijl: tekst in de schacht, punt wijst naar het midden van de foto.
   Geen schaduw: clip-path knipt die (en elke drop-shadow) af. Hetzelfde
   geldt voor ster, zon en maan. */
.hero-cta--pijl {
    padding: 0.6em 1.9em 0.6em 1em;
    white-space: nowrap;
    box-shadow: none;
    clip-path: polygon(0 0, calc(100% - 1.1em) 0, 100% 50%, calc(100% - 1.1em) 100%, 0 100%);
}
.hero-cta--pijl.hero-cta--rechtsboven,
.hero-cta--pijl.hero-cta--rechtsonder {
    padding: 0.6em 1em 0.6em 1.9em;
    clip-path: polygon(1.1em 0, 100% 0, 100% 100%, 1.1em 100%, 0 50%);
}

/* Ster, zon en maan: getekende SVG-vorm (HeroPlanning::VORM_SVG) achter de
   tekst, in de labelkleur, met schaduw. Vierkant kader; korte tekst in het
   midden. Binnenruimte NIET in %: padding-% rekent met de breedte van de
   foto (het omringende element), niet met die van de vorm. */
.hero-cta--ster,
.hero-cta--zon,
.hero-cta--maan {
    width: calc(120px * var(--cta-schaal, 1));
    height: calc(120px * var(--cta-schaal, 1));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: calc(0.8rem * var(--cta-schaal, 1));
    background: transparent;
    box-shadow: none;
}
.hero-cta__vorm {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: var(--cta-bg);
    stroke: var(--cta-bg);
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
    overflow: visible;
}
.hero-cta__vorm .hero-cta__schaduw {
    fill: #000000;
    stroke: none;
}
.hero-cta--ster .hero-cta__inhoud,
.hero-cta--zon .hero-cta__inhoud,
.hero-cta--maan .hero-cta__inhoud {
    position: relative; /* boven de SVG */
    flex-direction: column;
    gap: 0.15em;
}
.hero-cta--ster { padding: calc(8px * var(--cta-schaal, 1)) calc(30px * var(--cta-schaal, 1)) 0; }
.hero-cta--zon  { padding: calc(30px * var(--cta-schaal, 1)); }
.hero-cta--maan { padding: calc(18px * var(--cta-schaal, 1)) calc(24px * var(--cta-schaal, 1)) calc(18px * var(--cta-schaal, 1)) calc(14px * var(--cta-schaal, 1)); }
@supports (font-size: 1cqi) {
    .hero-cta--ster,
    .hero-cta--zon,
    .hero-cta--maan {
        width: calc(28cqi * var(--cta-schaal, 1));
        height: calc(28cqi * var(--cta-schaal, 1));
        font-size: calc(clamp(0.6rem, 2.6cqi, 1.2rem) * var(--cta-schaal, 1));
    }
    .hero-cta--ster { padding: calc(1.9cqi * var(--cta-schaal, 1)) calc(7cqi * var(--cta-schaal, 1)) 0; }
    .hero-cta--zon  { padding: calc(7cqi * var(--cta-schaal, 1)); }
    .hero-cta--maan { padding: calc(4.2cqi * var(--cta-schaal, 1)) calc(5.6cqi * var(--cta-schaal, 1)) calc(4.2cqi * var(--cta-schaal, 1)) calc(3.3cqi * var(--cta-schaal, 1)); }
}
.hero-cta--ster.hero-cta--midden,
.hero-cta--zon.hero-cta--midden,
.hero-cta--maan.hero-cta--midden { transform: translate(-50%, -50%); }

/* ========================================
   FOOTER - toegankelijkheid
   ======================================== */
/* Kolomkoppen zijn h2 (kopvolgorde op de pagina), maar zien eruit als h6 */
.footer .footer-kop {
    font-size: 1rem;
    /* footertekstkleur, niet de #2c2c2c die h1-h5 hierboven krijgen (h6
       had die niet en erfde het wit van de footer) */
    color: inherit;
}

/* Copyright: text-secondary (#6c757d) had te weinig contrast op de
   footerkleur; nu de footertekstkleur, iets gedempt */
.footer .footer-copyright {
    color: var(--footer-text, #fff);
    opacity: 0.8;
}

/* ============================================
   WELKOMSTKOP VOORPAGINA OP MOBIEL
   De pagina-CSS van de voorpagina (in de database) zet de kop op minimaal
   2rem met !important, waardoor "Welkom in de Kruidenbuurt" op telefoons
   net over twee regels brak. Hier op telefoons meeschalen met de
   schermbreedte (± 27px op 375px breed); specifieker dan die paginaregel
   (#page-content .hero-section h1), dus deze wint. Tablet/desktop ongewijzigd.
   ============================================ */
@media (max-width: 575.98px) {
    #page-content .hero-section h1.display-4 { font-size: 7.2vw !important; }
}

/* ============================================
   BUURTPARTNERS ([buurtpartners], ShortcodeHandlers::buurtpartners)
   Lichte tint van de themakleur met een accentrand, zodat de kaarten
   afsteken tegen de witte pagina. Volgt thema en seizoen; donker in
   donker.css.
   ============================================ */
.buurtpartners-widget { margin: 30px 0; }
.buurtpartners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}
.buurtpartner {
    background: color-mix(in srgb, var(--primary-color, #4a78b0) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--primary-color, #4a78b0) 22%, #fff);
    border-top: 4px solid var(--primary-color, #4a78b0);
    border-radius: 8px;
    padding: 18px 20px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.buurtpartner:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(var(--primary-rgb, 74, 120, 176), 0.15);
}
.buurtpartner__naam { margin: 0 0 10px; font-size: 18px; }
/* :is(#page-content, ...) zodat dit wint van de algemene linkregel voor
   content (#page-content a:not(.btn)... hierboven) */
.buurtpartner__naam a,
:is(#page-content, .blog-content, .faq-content) .buurtpartner__naam a:not(.btn):not(.badge) {
    color: var(--primary-color, #4a78b0);
    text-decoration: none;
}
.buurtpartner__naam a:hover,
:is(#page-content, .blog-content, .faq-content) .buurtpartner__naam a:not(.btn):not(.badge):hover {
    color: var(--primary-hover-color, #3f6696);
    text-decoration: underline;
}
.buurtpartner__extern { font-size: 12px; margin-left: 4px; }
.buurtpartner__gegevens { font-size: 14px; line-height: 1.7; color: #444; }
.buurtpartner__gegevens i { width: 16px; color: var(--primary-color, #4a78b0); opacity: 0.8; }
.buurtpartner__gegevens a,
:is(#page-content, .blog-content, .faq-content) .buurtpartner__gegevens a:not(.btn):not(.badge) {
    color: inherit;
    text-decoration: none;
}
.buurtpartner__gegevens a:hover,
:is(#page-content, .blog-content, .faq-content) .buurtpartner__gegevens a:not(.btn):not(.badge):hover {
    color: var(--primary-color, #4a78b0);
    text-decoration: underline;
}

/* Broodkruimel op subpagina's (views/templates/pages/default.php) */
.pagina-kruimel .breadcrumb-item a { color: var(--primary-color); }
.pagina-kruimel .breadcrumb-item a:hover { color: var(--primary-hover-color); }

/* Plaatjes in pagina's, nieuws en FAQ nooit breder dan hun kolom. De editor
   zet width/height van het origineel in de <img> (bv. 1376x768); zonder
   dit liep zo'n plaatje in een smalle kolom rechts van de pagina af.
   height: auto houdt de verhouding. */
#page-content img,
.blog-content img,
.faq-content img {
    max-width: 100%;
    height: auto;
}

/* Uitgelichte afbeelding bovenaan een pagina (views/templates/pages/default.php,
   "Featured afbeelding tonen?"). Hoge/staande foto's niet schermvullend. */
.pagina-uitgelicht img { max-height: 60vh; object-fit: cover; }

/* Plaatjes in de inhoud van pagina's, nieuws en FAQ: licht afgeronde
   hoeken, zodat ze rustiger in de tekst staan. Ronde of bewust hoekige
   plaatjes (.rounded-circle, .rounded-0, .no-round) blijven zoals ze zijn. */
#page-content img:not(.rounded-circle):not(.rounded-0):not(.no-round),
.blog-content img:not(.rounded-circle):not(.rounded-0):not(.no-round),
.faq-content img:not(.rounded-circle):not(.rounded-0):not(.no-round) {
    border-radius: 0.5rem;
}

/* ============================================
   FOUTPAGINA'S (404/403/500, views/templates/errors/_fout.php)
   ============================================ */
.foutpagina { max-width: 680px; margin: 0 auto; padding: 3rem 0 2rem; }
.foutpagina__icoon { width: 96px; height: 96px; }
.foutpagina__code {
    font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--primary-color);
}
.foutpagina__titel { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }
.foutpagina__tekst { max-width: 560px; }
.foutpagina__zoeken { max-width: 480px; }
.foutpagina__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1rem; font-size: 0.95rem; }
.foutpagina__links a { color: var(--primary-color); text-decoration: underline; text-underline-offset: 2px; }

/* Live zoeken (assets/js/live-zoek.js): treffer-lijst onder het zoekveld,
   bv. persoon koppelen op een bedrijf of bedrijf koppelen op een persoon */
.live-zoek-lijst { z-index: 20; max-height: 280px; overflow-y: auto; top: 100%; left: 0; }
.live-zoek-lijst .list-group-item { cursor: pointer; font-size: 0.85rem; padding: 0.35rem 0.6rem; }
.live-zoek-lijst .list-group-item.active small { color: rgba(255, 255, 255, 0.85) !important; }