/* wishbird (site "wish": wishbird.be, mywishbird.com): bovenop general.css en themas.css.
   Huisstijl (logobriefing): vooral nachtblauw en wit, koraal en zonnegeel als spaarzame accenten.
   Titels in Fredoka, lopende tekst in DM Sans (Google Fonts, geladen via siteDefinities()["fonts"]).
   Koraal als tekst of als achtergrond onder witte tekst altijd in de donkere tint #C9472B (contrast 4,75:1). */

:root {
    --wb-nachtblauw: #1D2B4F;
    --wb-koraal: #F2613F;
    --wb-koraal-donker: #E0502F;
    --wb-koraal-tekst: #C9472B;
    --wb-zonnegeel: #FFC845;
    --wb-wolkgrijs: #F4F6FB;
    --wb-lijngrijs: #C9D1E3;
}

body.site-wish {
    font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    color: #2b3550;
}
body.site-wish h1, body.site-wish h2, body.site-wish h3, body.site-wish h4, body.site-wish h5,
body.site-wish .h1, body.site-wish .h2, body.site-wish .h3, body.site-wish .h4, body.site-wish .h5 {
    font-family: "Fredoka", "DM Sans", system-ui, sans-serif;
    font-weight: 600;
    color: var(--wb-nachtblauw);
}
body.site-wish h1, body.site-wish .h1 { font-size: 2rem; }
body.site-wish a:not(.btn):not(.nav-link):not(.dropdown-item) { color: var(--wb-koraal-tekst); }
body.site-wish a:not(.btn):not(.nav-link):not(.dropdown-item):hover { color: #a93a22; }

/* Thema "wish" (gewone pagina's): koraal als knopkleur. Lijstpagina's houden het thema van hun gelegenheid. */
body.thema-wish {
    --thema-kleur: #C9472B; --thema-donker: #a93a22; --thema-accent: #FFC845;
    --bs-danger: #C9472B; --bs-danger-rgb: 201, 71, 43;
    --bs-link-color: #C9472B; --bs-link-color-rgb: 201, 71, 43;
}
body.thema-wish .btn-danger {
    --bs-btn-bg: var(--thema-kleur); --bs-btn-border-color: var(--thema-kleur);
    --bs-btn-hover-bg: var(--thema-donker); --bs-btn-hover-border-color: var(--thema-donker);
    --bs-btn-active-bg: var(--thema-donker); --bs-btn-active-border-color: var(--thema-donker);
    --bs-btn-disabled-bg: var(--thema-kleur); --bs-btn-disabled-border-color: var(--thema-kleur);
}
body.thema-wish .btn-outline-danger {
    --bs-btn-color: var(--thema-kleur); --bs-btn-border-color: var(--thema-kleur);
    --bs-btn-hover-bg: var(--thema-kleur); --bs-btn-hover-border-color: var(--thema-kleur);
    --bs-btn-active-bg: var(--thema-donker); --bs-btn-active-border-color: var(--thema-donker);
}
body.site-wish .btn { border-radius: 999px; }

/* Kop: sfeerillustratie zonder tekst (images/topbackground-wishbirdbe.png, ook voor mywishbird.com) met het kleurlogo
   als HTML erboven, op elke pagina, ook bij het thema van een gelegenheid. Het midden van de illustratie is rustig
   gehouden voor het logo; onderaan sluit een nachtblauwe heuvel aan op de menubalk. Bron: wishbird-logo/sfeerbeeld/. */
body.site-wish #header {
    min-height: 0 !important;
    background-color: #E9F0FA !important;
    background-image: url('/images/topbackground-wishbirdbe.png') !important;
    background-position: center bottom !important;
    background-size: cover !important;
}
body.site-wish .site-kop-titel { display: none !important; }
.site-kop-logo { display: block; width: max-content; max-width: 100%; margin: 6px auto 0; padding: 22px 0 64px; }
.site-kop-logo img { display: block; height: 84px; width: auto; max-width: 100%; }
@media (max-width: 575.98px) { .site-kop-logo { padding: 14px 0 44px; } .site-kop-logo img { height: 58px; } }

/* Menubalk en footer altijd nachtblauw */
body.site-wish .navbar.bg-danger, body.site-wish footer.bg-danger {
    background: var(--wb-nachtblauw) !important;
    border-top: 0;
}
body.site-wish .navbar.bg-danger { border-bottom: 3px solid var(--wb-zonnegeel); }
body.site-wish .navbar-nav .nav-link { font-weight: 500; }
body.site-wish footer.bg-danger .btn-light.text-danger { color: var(--wb-nachtblauw) !important; }

/* Homepage */
.wish-held { background: var(--wb-wolkgrijs); border-radius: 24px; padding: 2.5rem 2rem; }
.wish-held .lead { color: #3b4663; }
.wish-stap { border: 0; border-radius: 18px; background: #fff; box-shadow: 0 2px 10px rgba(29, 43, 79, .08); }
.wish-stap-nummer {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
    background: var(--wb-zonnegeel); color: var(--wb-nachtblauw); font-family: "Fredoka", sans-serif; font-weight: 600;
    font-size: 1.25rem; margin-bottom: .5rem;
}
.wish-gelegenheid {
    display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; border-radius: 14px; background: #fff;
    border: 1px solid var(--wb-lijngrijs); color: var(--wb-nachtblauw) !important; font-weight: 500; height: 100%;
}
.wish-gelegenheid:hover { border-color: var(--wb-koraal); text-decoration: none !important; box-shadow: 0 2px 8px rgba(29, 43, 79, .1); }
.wish-gelegenheid i { font-size: 1.4rem; color: var(--wb-koraal-tekst); }
.wish-gelegenheid small { display: block; font-weight: 400; color: #5b6580; }

/* Accordeons (FAQ, handleiding) in huisstijlkleuren in plaats van Bootstrap-blauw */
body.site-wish .accordion { --bs-accordion-active-bg: var(--wb-wolkgrijs); --bs-accordion-active-color: var(--wb-nachtblauw); --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(255, 200, 69, .5); }

/* Landingspagina's per gelegenheid (gelegenheid.php) */
.wish-gelegenheid-label { color: var(--wb-koraal-tekst); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: .85rem; }
.wish-sfeerfoto { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; box-shadow: 0 6px 24px rgba(29, 43, 79, .15); }
.wish-vinkjes { list-style: none; padding-left: 0; }
.wish-vinkjes li { position: relative; padding-left: 1.6rem; margin-bottom: .4rem; }
.wish-vinkjes li::before { content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; left: 0; color: var(--wb-koraal-tekst); font-weight: 700; }
.wish-gelegenheid-klein { display: inline-flex; height: auto; padding: .5rem .9rem; }
.wish-gelegenheid-klein i { font-size: 1.1rem; }