/* Publieke pagina's (Aanbod, Contact, FAQ, Privacyverklaring), zelfde stijl als de homepage (.mh in views/site/index.php).
   Geladen met ?v=<filemtime> vanuit de view, zodat een nieuwe versie na een upload meteen wordt opgehaald. */

.pub { --pub-paars: #311b92; --pub-paars-2: #6a1b9a; --pub-blauw: #0d47a1; --pub-tekst: #37474f; --pub-zacht: #f6f5fb;
       --pub-rand: #e6e3f0; --pub-groen: #2e7d32; --pub-geel: #ffd54f; --pub-grijs: #78909c;
       color: var(--pub-tekst); margin: -.5rem -15px 0; /* volle breedte: de container-fluid van de layout heeft 15px padding; -.5rem = de lege meldingenbalk erboven */ }
.pub h2 { color: var(--pub-blauw); font-weight: 700; }
.pub a:not(.btn) { color: var(--pub-blauw); }
.pub-kop a:not(.btn), .pub-slot a:not(.btn) { color: #fff; }

/* Kop van de pagina */
.pub-kop { background: linear-gradient(120deg, var(--pub-paars-2), var(--pub-paars)); color: #fff; padding: 48px 0 44px; }
.pub-kop h1 { color: #fff; font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 0 0 10px; }
.pub-kop p { font-size: 1.1rem; color: rgba(255,255,255,.9); max-width: 720px; margin: 0; }
.pub-kop .pub-label { color: var(--pub-geel); }
.pub-kop .pub-kop-knoppen { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.pub-kop .pub-kop-meta { margin-top: 14px; font-size: .9rem; color: rgba(255,255,255,.75); }

/* Secties */
.pub-sectie { padding: 56px 0; }
.pub-sectie--zacht { background: var(--pub-zacht); }
.pub-intro { max-width: 720px; margin: 0 auto 32px; text-align: center; }
.pub-intro p { font-size: 1.05rem; }
.pub-label { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
             color: var(--pub-paars-2); margin-bottom: 8px; }
.pub-smal { max-width: 900px; margin: 0 auto; }

/* Kaarten */
.pub-kaart { background: #fff; border: 1px solid var(--pub-rand); border-radius: 14px; padding: 24px; height: 100%;
             box-shadow: 0 6px 18px rgba(49,27,146,.06); }
.pub-kaart h3 { font-size: 1.15rem; font-weight: 700; color: #263238; margin: 12px 0 8px; }
.pub-kaart > :last-child { margin-bottom: 0; }
.pub-kaart--los { height: auto; } /* kaarten onder elkaar in één kolom: niet uitrekken tot de kolomhoogte */
.pub-ill { width: 64px; height: 64px; object-fit: contain; }
.pub-ill--klein { width: 44px; height: 44px; }
.pub-vinkjes { list-style: none; padding: 0; }
.pub-vinkjes li { padding-left: 26px; position: relative; margin-bottom: 8px; }
.pub-vinkjes .pub-v { position: absolute; left: 0; top: 1px; color: var(--pub-groen); } /* Font Awesome vervangt <i> door <svg>: daarom een span */
.pub-chip { display: inline-block; font-size: .78rem; font-weight: 600; background: #ede7f6; color: var(--pub-paars); border-radius: 999px; padding: 3px 10px; }

/* Aanbod: drie pijlers en stappen */
.pub-pijler { display: flex; flex-direction: column; }
.pub-pijler .pub-pijler-kop { display: flex; align-items: center; gap: 14px; }
.pub-pijler .pub-pijler-kop h3 { margin: 0; }
.pub-pijler .pub-pijler-voet { margin-top: auto; padding-top: 12px; }
.pub-functies { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.pub-functie { background: #fff; border: 1px solid var(--pub-rand); border-radius: 12px; padding: 18px; }
.pub-functie h4 { font-size: 1rem; font-weight: 700; color: #263238; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
.pub-functie p { margin: 0; font-size: .95rem; }
.pub-functie .pub-ic { flex: 0 0 34px; height: 34px; border-radius: 10px; background: #ede7f6; color: var(--pub-paars); display: grid; place-items: center; }
.pub-stappen { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; counter-reset: stap; list-style: none; padding: 0; margin: 0; }
.pub-stappen li { background: #fff; border: 1px solid var(--pub-rand); border-radius: 12px; padding: 18px 18px 18px 64px; position: relative; }
.pub-stappen li::before { counter-increment: stap; content: counter(stap); position: absolute; left: 18px; top: 18px; width: 32px; height: 32px;
                          border-radius: 50%; background: var(--pub-paars); color: #fff; font-weight: 700; display: grid; place-items: center; }
.pub-stappen strong { display: block; color: #263238; margin-bottom: 4px; }

/* Team */
.pub-persoon { text-align: center; }
.pub-persoon img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.pub-persoon h3 { margin-bottom: 2px; }
.pub-persoon .pub-rol { color: var(--pub-grijs); font-size: .9rem; margin-bottom: 8px; }
.pub-persoon .pub-motto { font-style: italic; color: var(--pub-paars); margin-bottom: 10px; }
.pub-persoon .pub-vinkjes { text-align: left; max-width: 270px; margin: 0 auto 12px; font-size: .92rem; }

/* Afsluitende band */
.pub-slot { background: #212529; color: #fff; padding: 56px 0; text-align: center; }
.pub-slot h2 { color: #fff; }
.pub-slot p { color: rgba(255,255,255,.8); }
.pub-slot-knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }

/* Contact */
.pub-onderwerpen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pub-onderwerp { border: 1px solid var(--pub-rand); background: #fff; border-radius: 999px; padding: 7px 14px; font-size: .92rem; cursor: pointer; color: var(--pub-tekst); }
.pub-onderwerp:hover { border-color: #b39ddb; }
.pub-onderwerp.is-actief { background: var(--pub-paars); border-color: var(--pub-paars); color: #fff; }
.pub-hint { background: #f3f0fb; border-left: 4px solid #7e57c2; border-radius: 8px; padding: 10px 14px; margin-bottom: 18px; font-size: .95rem; }
.pub-contactpersoon { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--pub-rand); }
.pub-contactpersoon:last-of-type { border-bottom: 0; }
.pub-contactpersoon img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 64px; }
.pub-contactpersoon strong { display: block; color: #263238; }
.pub-contactpersoon .pub-rol { color: var(--pub-grijs); font-size: .88rem; margin-bottom: 4px; }
.pub-contactpersoon a { display: inline-block; margin-right: 12px; font-size: .92rem; }
.pub-bedrijf { font-size: .88rem; color: var(--pub-grijs); display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; }
.pub-bedrijf dt { font-weight: 600; color: var(--pub-tekst); }
.pub-bedrijf dd { margin: 0; }
.pub-klein { font-size: .85rem; color: var(--pub-grijs); }
.pub-succes { text-align: center; padding: 32px 16px; }
.pub-succes .pub-succes-ic { font-size: 2.6rem; color: var(--pub-groen); margin-bottom: 10px; }

/* FAQ */
.pub-faq-nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 28px; }
.pub-faq-nav a { border: 1px solid var(--pub-rand); background: #fff; border-radius: 999px; padding: 7px 14px; font-size: .92rem; text-decoration: none; color: var(--pub-tekst); }
.pub-faq-nav a:hover { border-color: #b39ddb; }
.pub-faq-groep { margin-bottom: 36px; scroll-margin-top: 80px; }
.pub-faq-groep > h2 { font-size: 1.3rem; display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pub-vraag { background: #fff; border: 1px solid var(--pub-rand); border-radius: 12px; margin-bottom: 10px; }
.pub-vraag summary { list-style: none; cursor: pointer; padding: 16px 48px 16px 18px; font-weight: 600; color: #263238; position: relative; }
.pub-vraag summary::-webkit-details-marker { display: none; }
.pub-vraag summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 400; color: var(--pub-paars); }
.pub-vraag[open] summary::after { content: "\2212"; }
.pub-vraag[open] summary { color: var(--pub-paars); }
.pub-vraag .pub-antwoord { padding: 0 18px 16px; }
.pub-vraag .pub-antwoord > :last-child { margin-bottom: 0; }

/* Privacyverklaring */
.pub-privacy { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
.pub-toc { position: sticky; top: 80px; background: #fff; border: 1px solid var(--pub-rand); border-radius: 12px; padding: 16px; font-size: .92rem; }
.pub-toc strong { display: block; margin-bottom: 8px; color: #263238; }
.pub-toc ol { padding-left: 20px; margin: 0; }
.pub-toc li { margin-bottom: 4px; }
.pub-samenvatting { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 28px; }
.pub-samenvatting > div { background: #fff; border: 1px solid var(--pub-rand); border-radius: 12px; padding: 14px 16px; display: flex; gap: 12px; }
.pub-samenvatting .pub-ic { flex: 0 0 34px; height: 34px; border-radius: 10px; background: #e8f5e9; color: var(--pub-groen); display: grid; place-items: center; }
.pub-artikel section { background: #fff; border: 1px solid var(--pub-rand); border-radius: 12px; padding: 22px 24px; margin-bottom: 16px; scroll-margin-top: 80px; }
.pub-artikel h2 { font-size: 1.2rem; margin-bottom: 12px; }
.pub-artikel h3 { font-size: 1rem; font-weight: 700; color: #263238; margin: 16px 0 6px; }
.pub-artikel section > :last-child { margin-bottom: 0; }
.pub-tabel { width: 100%; font-size: .93rem; border-collapse: collapse; }
.pub-tabel th, .pub-tabel td { border-bottom: 1px solid var(--pub-rand); padding: 8px 10px 8px 0; vertical-align: top; text-align: left; }
.pub-tabel th { color: #263238; font-weight: 700; }
.pub-tabel tr:last-child td { border-bottom: 0; }
.pub-tabel-wrap { overflow-x: auto; }

@media (max-width: 991px) {
    .pub-privacy { grid-template-columns: minmax(0, 1fr); }
    .pub-toc { position: static; }
}
@media (max-width: 767px) {
    .pub-sectie { padding: 40px 0; }
    .pub-kop { padding: 36px 0 32px; }
    .pub-artikel section { padding: 18px; }
}