/* =============================================================================
   ov-pagina.css
   Opmaak voor de openbare tekstpagina's: over.php, contact.php, privacy.php.
   Bewust los van index_css.css, zodat deze pagina's niet meeliften op stijlen
   die voor het ingelogde dashboard bedoeld zijn.
   ============================================================================= */

:root {
    --ov-blauw: #2f71b8;
    --ov-groen: #28a745;
    --ov-navy:  #003a5d;
    --ov-tekst: #22303c;
    --ov-grijs: #5d7183;
    --ov-lijn:  #e1e9f2;
}

html, body {
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, rgba(47,113,184,.75) 0%, rgba(40,167,69,.75) 100%);
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--ov-tekst);
    line-height: 1.7;
}

body { display: flex; flex-direction: column; }
body > footer { margin-top: auto; }

.ov-pagina {
    max-width: 900px;
    width: 100%;
    box-sizing: border-box;
    margin: 40px auto;
    padding: 0 20px;
}

.ov-kop {
    background: #fff;
    border-radius: 20px;
    border-top: 4px solid var(--ov-blauw);
    box-shadow: 0 2px 12px rgba(0,58,93,.12);
    padding: 38px 34px 30px;
    margin-bottom: 22px;
}
.ov-kop__kicker {
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .75rem;
    font-weight: 600;
    color: var(--ov-groen);
}
.ov-kop h1 {
    margin: 0 0 14px;
    font-size: 2rem;
    line-height: 1.25;
    color: var(--ov-navy);
}
.ov-kop__lead {
    margin: 0;
    font-size: 1.08rem;
    color: #3c4f61;
}

.ov-blok {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 2px 10px rgba(0,58,93,.08);
    padding: 30px 34px;
    margin-bottom: 20px;
}
.ov-blok h2 {
    margin: 0 0 12px;
    font-size: 1.3rem;
    line-height: 1.35;
    color: var(--ov-navy);
}
.ov-blok h3 {
    margin: 26px 0 8px;
    font-size: 1.02rem;
    color: var(--ov-blauw);
}
.ov-blok p { margin: 0 0 14px; }
.ov-blok p:last-child { margin-bottom: 0; }
.ov-blok ul, .ov-blok ol { margin: 0 0 14px; padding-left: 22px; }
.ov-blok li { margin-bottom: 7px; }
.ov-blok a { color: var(--ov-blauw); }
.ov-blok a:hover { color: var(--ov-navy); }

.ov-kruimels {
    max-width: 900px;
    margin: 0 auto;
    padding: 18px 20px 0;
    font-size: .85rem;
    color: rgba(255,255,255,.92);
}
.ov-kruimels ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.ov-kruimels li::after { content: '›'; margin-left: 8px; opacity: .7; }
.ov-kruimels li:last-child::after { content: ''; }
.ov-kruimels a { color: #fff; text-decoration: none; }
.ov-kruimels a:hover { text-decoration: underline; }
.ov-kruimels [aria-current="page"] { font-weight: 600; }

/* Gegevenslijst voor contact- en bedrijfsgegevens */
.ov-gegevens {
    display: grid;
    gap: 2px 20px;
    margin: 0;
}
@media (min-width: 620px) {
    .ov-gegevens { grid-template-columns: max-content 1fr; }
}
.ov-gegevens dt {
    font-weight: 600;
    color: var(--ov-navy);
    padding: 7px 0 0;
}
.ov-gegevens dd {
    margin: 0;
    padding: 7px 0;
    border-bottom: 1px solid var(--ov-lijn);
}
@media (min-width: 620px) {
    .ov-gegevens dt { border-bottom: 1px solid var(--ov-lijn); padding: 7px 0; }
}

/* Kaartjes met de vier stappen of contactkanalen */
.ov-kaarten { display: grid; gap: 14px; margin-top: 6px; }
@media (min-width: 700px) { .ov-kaarten--2 { grid-template-columns: 1fr 1fr; } }
.ov-kaart {
    border: 1px solid var(--ov-lijn);
    border-radius: 12px;
    padding: 16px 18px;
    background: #fbfcfe;
}
.ov-kaart h3 { margin: 0 0 6px; font-size: 1rem; color: var(--ov-blauw); }
.ov-kaart p { margin: 0; font-size: .95rem; color: #3c4f61; }

.ov-knop {
    display: inline-block;
    background: var(--ov-blauw);
    color: #fff !important;
    text-decoration: none;
    padding: 12px 22px;
    border-radius: 30px;
    font-weight: 600;
    margin-top: 6px;
}
.ov-knop:hover { background: var(--ov-navy); }
.ov-knop--groen { background: var(--ov-groen); }
.ov-knop--groen:hover { background: #1f8a38; }

.ov-nota {
    font-size: .88rem;
    color: var(--ov-grijs);
    border-left: 3px solid var(--ov-lijn);
    padding-left: 14px;
    margin: 18px 0 0;
}

@media (max-width: 640px) {
    .ov-pagina { margin: 22px auto; padding: 0 12px; }
    .ov-kop { padding: 26px 20px 22px; border-radius: 16px; }
    .ov-kop h1 { font-size: 1.55rem; }
    .ov-blok { padding: 22px 20px; border-radius: 14px; }
}

/* Headerbeeld van de organisatie (white-label), zoals op het blogoverzicht */
.ov-headerbeeld {
    max-width: 1240px;
    margin: 80px auto 0;
    padding: 0 20px;
    box-sizing: border-box;
}
.ov-headerbeeld img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 2px 12px rgba(0, 58, 93, .15);
}
.ov-headerbeeld + .ov-kruimels { padding-top: 14px; }
@media (max-width: 640px) {
    .ov-headerbeeld { margin-top: 70px; padding: 0 12px; }
    .ov-headerbeeld img { border-radius: 12px; }
}