/* Achtergrond voor de hele site: Afrika vs. Europa (images/banners/africa_vs_europe.svg).
   Pad is relatief aan dit bestand: media/templates/site/cassiopeia_extended/css/ -> site-root. */
body.site {
    background-color: #0f1626; /* donkerste kleur uit de SVG, voor tijdens het laden */
    background-image: url("../../../../../images/banners/africa_vs_europe.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Topbalk: doorschijnend donkerblauw (kleur uit de SVG) met witte tekst; blur maakt de kaart erachter rustig. */
.container-header {
    --headercolor: #ffffff;
    background-color: rgba(15, 22, 38, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.container-header .mod-menu a,
.container-header .mod-menu button,
.container-header .navbar-toggler {
    color: var(--headercolor);
}

.container-header .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.6);
}

/* Bovenste balk (positie "topbar", nu de taalvlaggetjes) rechts uitlijnen. */
.container-header .container-topbar {
    display: flex;
    justify-content: flex-end;
}

/* Artikelen: transparant, met lichte tekst op de donkere achtergrond.
   De schaduw houdt de tekst leesbaar waar hij over het lichtere blauw van Afrika valt. */
.site-grid > .container-component {
    background-color: transparent;
    color: #f2f5fb;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

.site-grid > .container-component h1,
.site-grid > .container-component h2,
.site-grid > .container-component h3,
.site-grid > .container-component h4,
.site-grid > .container-component .page-header {
    color: #ffffff;
}

.site-grid > .container-component a:not(.btn) {
    color: #9fd8e3;
}

.site-grid > .container-component a:not(.btn):hover,
.site-grid > .container-component a:not(.btn):focus {
    color: #ffffff;
}

/* Kruimelpad: ook licht (de actieve stap is standaard grijs en verdwijnt anders tegen het donkerblauw). */
.site-grid > .container-component .mod-breadcrumbs .breadcrumb-item,
.site-grid > .container-component .mod-breadcrumbs .breadcrumb-item.active,
.site-grid > .container-component .mod-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
    color: #d6deec;
}

/* Zijbalk en modules op lichte, licht doorschijnende panelen zodat tekst leesbaar blijft. */
.site-grid > .container-sidebar-left > *,
.site-grid > .container-sidebar-right > *,
.site-grid > .container-top-a > *,
.site-grid > .container-top-b > *,
.site-grid > .container-bottom-a > *,
.site-grid > .container-bottom-b > * {
    background-color: rgba(254, 254, 254, 0.92);
    border-radius: 0.5rem;
    padding: 1rem;
}


/* Telefoons: background-attachment: fixed werkt op iOS slecht (springt/zoomt), daar gewoon meescrollen. */
@media (max-width: 991.98px) {
    body.site {
        background-attachment: scroll;
    }
}