/* custom css file for the website, you can add your own styles here
   (let op: // is geen CSS-commentaar en slokt de eerstvolgende regel op) */

/* Beelden uit de responsiveImg-viewhelper dragen width/height voor een
   stabiele layout (geen CLS); zonder height:auto zou een smaller vak ze
   vervormen. Geldt voor alle beelden: schaal mee, behoud de verhouding. */
img {
    max-width: 100%;
    height: auto;
}

/* ContentBuilder-inhoud staat rechtstreeks in <main>: elke sectie is een .row met
   één kolom. Zonder gutters, anders krijgt een sectie op volle breedte een
   horizontale scrollbalk (negatieve marges van .row) en witruimte ertussen.
   Dezelfde regel staat in de editor-preview (vco/preview.php). */
#main-content > .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}

/* Eén blok van een redactionele pagina (feature, quote, CTA, kolommentekst) als
   zelfstandige ContentBuilder-widget. In het ontwerp stonden die blokken samen in
   één .editorial-layout met een grid-gap; als losse widgets krijgt elk blok die
   tussenruimte zelf (zelfde waarden en breekpunt als .editorial-layout). */
.kgbn-blok {
    padding-bottom: 105px;
}

@media (max-width: 767px) {
    .kgbn-blok {
        padding-bottom: 70px;
    }
}

/* Honeypot van het contactformulier: onzichtbaar voor mensen, invulbaar voor bots.
   Niet display:none — sommige bots slaan verborgen velden over. */
.contact-hp {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Inlog- en wachtwoordpagina's: hetzelfde formulier als de popup, in een paneel met de
   breedte van die popup (het ontwerp kent alleen de popup). */
.login-pagina {
    max-width: 560px;
}

/* Uitloggen in het portaalmenu is een formulierknop (POST met CSRF-token) en geen link
   zoals in het ontwerp; zelfde opmaak als .portal-nav a. */
.portal-nav__uitloggen {
    margin: 0;
}

.portal-nav__uitloggen button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 45px;
    padding: 10px 14px;
    border: 0;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.78);
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-align: left;
}

.portal-nav__uitloggen button:hover,
.portal-nav__uitloggen button:focus {
    color: var(--kgbn-white);
    background: rgba(255, 255, 255, 0.14);
}

/* Uitloggen in de header is een formulierknop (POST met CSRF-token); .header-link geeft de
   opmaak, hier alleen de knopstandaarden van de browser weg. */
.header-uitloggen {
    display: contents;
}

.header-uitloggen button.header-link {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

/* Beeld in een media-shape als echte <img> (klasse media-shape-foto) onder het masker, in plaats van
   een background-image: zo kan een beheerder het beeld in de ContentBuilder aanklikken en vervangen.
   kgbn-min.css zet pointer-events:none op elke img in de wrapper (voor het masker); de foto moet wél
   klikbaar zijn. */
.media-shape-wrapper { position: relative; overflow: hidden; }
.media-shape-wrapper > img.media-shape-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: auto; }
.media-shape-wrapper > img.media-shape-mask { position: relative; z-index: 1; }

/* Ledenbibliotheek: mappen, kruimelpad en zoekveld (zelfde stijl als de documentkaarten) */
.portal-zoek { min-width: min(100%, 360px); }
.portal-kruimels { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin: 0 0 1rem; font-weight: 600; }
.portal-kruimels a { text-decoration: none; }
.portal-kruimels__scheiding { opacity: .5; }
.portal-sectie-titel { font-size: 1.15rem; margin: 0 0 1rem; }
.portal-mappen { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.portal-map { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; background: #fff; border-radius: .75rem; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.portal-map:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.portal-map__naam { flex: 1; font-weight: 700; }
.portal-map__pijl { opacity: .5; }