/*
Theme Name: Peritus Network
Theme URI: https://peritusnetwork.nl
Description: Thema voor Stichting Peritus Network: homepage, nieuws, projecten, partners en ANBI. Alle teksten en afbeeldingen zijn aan te passen in WordPress (Weergave > Aanpassen).
Version: 1.0.1
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: peritus
*/

/* ==========================================================================
   Lettertypes (lokaal opgeslagen, geen verbinding met Google)
   ========================================================================== */
@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/manrope-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/playfair-display-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   KLEUREN: pas alleen deze regels aan om de hele site om te kleuren
   ========================================================================== */
:root {
  --brand: #85d0e3;          /* lichtblauw: menubalk, knoppen, accenten */
  --brand-dark: #499fb6;     /* donkerder blauw voor vlakken */
  --brand-soft: #e6f7fc;     /* zeer licht blauw: achtergrondvlakken */
  --link: #24697d;           /* linkkleur (donker genoeg voor leesbaarheid) */
  --coral: #ee7c5e;          /* accentknop (Doneer nu) */
  --coral-dark: #dc674d;
  --ink: #13191f;            /* koppen, footer */
  --tekst-zacht: #566a82;    /* gewone lopende tekst */
  --lijn: #e2e8f0;
  --vlak: #f1f5f9;
  --wit: #ffffff;

  --font-kop: "Playfair Display", Georgia, serif;
  --font-tekst: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --schaduw: 0 10px 30px -18px rgba(19, 25, 31, 0.28);
  --breed: 72rem;
}

/* ==========================================================================
   Basis
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--wit);
  color: var(--ink);
  font-family: var(--font-tekst);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); }
a:hover { color: var(--ink); }
h1, h2, h3, h4 {
  font-family: var(--font-kop);
  letter-spacing: -0.01em;
  color: var(--ink);
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}
p { margin: 0; }
ul { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 4px; }
.icoon { width: 1rem; height: 1rem; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px;
  overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}
.skip-link:focus {
  clip: auto; clip-path: none; height: auto; width: auto; margin: 0; z-index: 100000;
  top: .5rem; left: .5rem; background: var(--ink); color: #fff; padding: .75rem 1rem; border-radius: .75rem;
}
.wrap { max-width: var(--breed); margin: 0 auto; padding: 0 1rem; }
.wrap--smal { max-width: 48rem; margin: 0 auto; padding: 0 1rem; }
.wrap--midden { max-width: 42rem; margin: 0 auto; padding: 0 1rem; }
.sectie { padding: 5rem 0; }
.sectie--zacht { background: var(--brand-soft); }
.sectie--vlak { background: var(--vlak); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.sectie--merk { background: var(--brand); padding: 4rem 0; }

/* ==========================================================================
   Knoppen
   ========================================================================== */
.knop {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 9999px; padding: .875rem 1.75rem;
  font-size: .875rem; font-weight: 600; line-height: 1.25; text-decoration: none;
  transition: background-color .2s, color .2s, gap .2s;
  border: 0; cursor: pointer;
}
.knop--merk { background: var(--brand); color: var(--ink); }
.knop--merk:hover { background: #fff; color: var(--ink); }
.knop--donker { background: var(--ink); color: #fff; }
.knop--donker:hover { background: var(--link); color: #fff; }
.knop--cta:hover { background: var(--coral); color: var(--ink); }
.knop--coral { background: var(--coral); color: var(--ink); padding: .75rem 1.5rem; }
.knop--coral:hover { background: var(--coral-dark); color: var(--ink); }
.tekstlink {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .875rem; font-weight: 600; color: var(--link); text-decoration: none;
  transition: gap .2s;
}
.tekstlink:hover { gap: .75rem; color: var(--ink); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header { background: var(--wit); }
.header-top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-top: 1.25rem; padding-bottom: 1.25rem;
}
.site-logo { display: block; flex-shrink: 0; line-height: 0; }
.site-logo img, .custom-logo { height: 2.5rem; width: auto; }
.site-titel-tekst { font-family: var(--font-kop); font-size: 1.5rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.social { display: none; gap: .75rem; }
.social a, .footer-social a {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  border: 1px solid var(--lijn); color: var(--ink); transition: background-color .2s;
}
.social a:hover { background: var(--brand-soft); color: var(--ink); }
.menu-knop {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex-shrink: 0;
  border-radius: 9999px; border: 0; background: var(--brand); color: var(--ink); cursor: pointer;
}
.menu-knop .icoon { width: 1.25rem; height: 1.25rem; }
.menu-knop .icoon--sluit { display: none; }
.menu-knop[aria-expanded="true"] .icoon--menu { display: none; }
.menu-knop[aria-expanded="true"] .icoon--sluit { display: inline-block; }

/* Mobiel: uitklapbaar paneel */
.header-nav { display: none; border-top: 1px solid var(--lijn); padding: 1rem; }
.header-nav.is-open { display: block; }
.pill-nav { display: block; }
.pill-nav ul { list-style: none; }
.pill-nav a {
  display: block; padding: .625rem .75rem; border-radius: .75rem;
  font-size: .875rem; font-weight: 600; color: var(--ink); text-decoration: none;
}
.pill-nav a:hover { background: var(--brand-soft); }
.pill-nav .sub-menu { list-style: none; padding-left: 1rem; }
.pill-nav .sub-menu a { font-weight: 500; }
.pill-nav .icoon--pijl { display: none; }
.header-nav .knop--coral { display: flex; justify-content: center; margin-top: .75rem; width: 100%; }

@media (min-width: 768px) {
  .social { display: flex; }
  .menu-knop { display: none; }
  .site-logo img, .custom-logo { height: 3rem; }
  .header-nav, .header-nav.is-open {
    display: flex; align-items: center; gap: .75rem; border: 0;
    max-width: var(--breed); margin: 0 auto; padding: 0 1rem 1.5rem;
  }
  .pill-nav {
    flex: 1; background: var(--brand); border-radius: 9999px; padding: .5rem .75rem;
  }
  .pill-nav > ul { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
  .pill-nav a { padding: .5rem 1rem; border-radius: 9999px; }
  .pill-nav a:hover { background: rgba(255, 255, 255, .7); }
  .pill-nav .current-menu-item > a,
  .pill-nav .current-menu-ancestor > a,
  .pill-nav .current_page_item > a { background: rgba(255, 255, 255, .8); }
  .pill-nav li { position: relative; }
  .pill-nav .menu-item-has-children > a { display: flex; align-items: center; gap: .25rem; }
  .pill-nav .icoon--pijl { display: inline-block; }
  .pill-nav .sub-menu {
    position: absolute; left: 0; top: 100%; z-index: 20; width: 16rem; margin-top: .5rem;
    padding: .5rem; background: var(--wit); border: 1px solid var(--lijn); border-radius: 1rem;
    box-shadow: var(--schaduw);
    visibility: hidden; opacity: 0; transition: opacity .15s;
  }
  /* onzichtbare brug zodat het menu niet dichtklapt tussen link en lijst */
  .pill-nav .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -.75rem; height: .75rem; }
  .pill-nav li:hover > .sub-menu,
  .pill-nav li:focus-within > .sub-menu { visibility: visible; opacity: 1; }
  .pill-nav .sub-menu a { padding: .5rem .75rem; border-radius: .75rem; font-weight: 500; }
  .pill-nav .sub-menu a:hover { background: var(--brand-soft); }
  .header-nav .knop--coral { display: inline-flex; margin-top: 0; width: auto; flex-shrink: 0; padding: .75rem 1.5rem; }
}

/* ==========================================================================
   Kopjes van secties en pagina's
   ========================================================================== */
.sectie-kop { max-width: 42rem; margin: 0 auto; text-align: center; }
.sectie-kop--links { margin: 0; text-align: left; }
.eyebrow {
  font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; color: var(--link);
}
.sectie-kop h2 { margin-top: .75rem; font-size: 1.875rem; }
.sectie-kop p.intro { margin-top: 1rem; font-size: 1rem; line-height: 1.625; color: var(--tekst-zacht); }
.pagina-hero { background: var(--brand-soft); }
.pagina-hero .wrap { padding-top: 4rem; padding-bottom: 4rem; }
.pagina-hero h1 { font-size: 2.25rem; }
.pagina-hero p { margin-top: 1rem; max-width: 42rem; line-height: 1.625; color: var(--tekst-zacht); }
@media (min-width: 640px) {
  .sectie-kop h2 { font-size: 2.25rem; }
  .pagina-hero .wrap { padding-top: 5rem; padding-bottom: 5rem; }
  .pagina-hero h1 { font-size: 3rem; }
}

/* ==========================================================================
   Homepage
   ========================================================================== */
.hero { position: relative; }
.hero__foto { width: 100%; height: 520px; object-fit: cover; }
.hero__laag { position: absolute; inset: 0; background: rgba(19, 25, 31, .6); }
.hero__inhoud { position: absolute; inset: 0; display: flex; align-items: center; }
.hero__inhoud .wrap { width: 100%; }
.hero__tekst { max-width: 42rem; color: #fff; }
.hero__tekst h1 { color: #fff; font-size: 2.25rem; line-height: 1.25; }
.hero__tekst p { margin-top: 1.25rem; font-size: 1rem; line-height: 1.625; color: rgba(255, 255, 255, .88); }
.hero__tekst .knop { margin-top: 2rem; padding: .875rem 1.75rem; }
@media (min-width: 640px) {
  .hero__foto { height: 600px; }
  .hero__tekst h1 { font-size: 3rem; }
  .hero__tekst p { font-size: 1.125rem; }
}
@media (min-width: 1024px) { .hero__tekst h1 { font-size: 3.75rem; } }

.raster { display: grid; gap: 1.5rem; }
.raster--kaarten { gap: 2rem; }
@media (min-width: 768px) {
  .raster--3 { grid-template-columns: repeat(3, 1fr); }
  .raster--kaarten { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) { .raster--kaarten { grid-template-columns: repeat(3, 1fr); } }

.kracht {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 1.5rem;
  padding: 2rem; box-shadow: var(--schaduw); transition: box-shadow .2s;
}
.kracht:hover { box-shadow: 0 20px 40px -18px rgba(19, 25, 31, .3); }
.icoon-vlak {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 1rem;
  background: var(--brand-soft); color: var(--link);
}
.icoon-vlak .icoon { width: 1.5rem; height: 1.5rem; }
.kracht h3 { margin-top: 1.25rem; font-size: 1.25rem; }
.kracht p { margin-top: .75rem; font-size: .875rem; line-height: 1.625; color: var(--tekst-zacht); }
.kracht .tekstlink { margin-top: 1.25rem; }

.tweekolom { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .tweekolom { grid-template-columns: 1fr 1fr; } }
.foto-rond { width: 100%; border-radius: 1.5rem; object-fit: cover; box-shadow: var(--schaduw); }
.tweekolom .tekst > p { margin-top: 1.25rem; line-height: 1.625; color: var(--tekst-zacht); }
.tweekolom .tekst > p + p { margin-top: 1rem; }
.vinkjes { list-style: none; margin-top: 1.5rem; display: grid; gap: .75rem; }
.vinkjes li { display: flex; align-items: center; gap: .75rem; font-size: .875rem; font-weight: 500; }
.vinkje {
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; flex-shrink: 0;
  border-radius: 9999px; background: var(--brand); color: var(--ink);
}
.vinkje .icoon { width: .875rem; height: .875rem; }
.tweekolom .knop { margin-top: 2rem; }

.cta { display: grid; gap: 1.5rem; align-items: center; }
.cta h2 { font-size: 1.875rem; }
@media (min-width: 640px) { .cta h2 { font-size: 2.25rem; } }
@media (min-width: 768px) { .cta { grid-template-columns: minmax(0, 1fr) auto; } }

.cijfers {
  margin-top: 3.5rem; display: grid; gap: 1.5rem; padding: 2.5rem;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 1.5rem; box-shadow: var(--schaduw);
}
@media (min-width: 640px) { .cijfers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cijfers { grid-template-columns: repeat(4, 1fr); } }
.cijfer { text-align: center; }
.cijfer strong { display: block; font-family: var(--font-kop); font-size: 2.25rem; font-weight: 600; color: var(--link); }
.cijfer span { display: block; margin-top: .5rem; font-size: .875rem; color: var(--tekst-zacht); }
@media (min-width: 640px) { .cijfer strong { font-size: 3rem; } }

.partners { margin-top: 2.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.partner {
  display: grid; place-items: center; height: 6rem; width: calc(50% - .5rem); padding: 1rem;
  background: var(--wit); border-radius: 1rem; border: 1px solid var(--lijn);
}
.partner img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; }
@media (min-width: 640px) { .partner { width: 12rem; } }
a.partner { transition: box-shadow .2s; }
a.partner:hover { box-shadow: var(--schaduw); }
.partner span { font-size: .875rem; font-weight: 600; color: var(--tekst-zacht); text-align: center; }

.faq { margin-top: 2.5rem; }
.faq details {
  margin-bottom: .75rem; background: var(--wit); border: 1px solid var(--lijn);
  border-radius: 1rem; box-shadow: var(--schaduw); padding: 0 1.5rem;
}
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer;
  padding: 1.25rem 0; font-family: var(--font-tekst); font-size: 1rem; font-weight: 600; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icoon { transition: transform .2s; color: var(--tekst-zacht); }
.faq details[open] summary .icoon { transform: rotate(180deg); }
.faq .antwoord { padding-bottom: 1.25rem; font-size: .875rem; line-height: 1.625; color: var(--tekst-zacht); }

/* ==========================================================================
   Kaarten (nieuws en projecten)
   ========================================================================== */
.kaart {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 1.5rem;
  box-shadow: var(--schaduw); transition: box-shadow .2s;
}
.kaart:hover { box-shadow: 0 20px 40px -18px rgba(19, 25, 31, .3); }
.kaart__foto { display: block; height: 13rem; width: 100%; object-fit: cover; }
.kaart__geenfoto { display: grid; place-items: center; height: 13rem; background: var(--brand-soft); }
.kaart__geenfoto img { height: 2.5rem; width: auto; opacity: .55; }
.kaart__body { display: flex; flex: 1; flex-direction: column; padding: 1.5rem; }
.kaart__meta { display: flex; align-items: center; gap: .75rem; font-size: .75rem; }
.label {
  border-radius: 9999px; background: var(--brand-soft); padding: .25rem .75rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--link);
}
.kaart__datum { color: var(--tekst-zacht); }
.kaart h3 { margin-top: 1rem; font-size: 1.25rem; }
.kaart h3 a { color: var(--ink); text-decoration: none; }
.kaart h3 a:hover { color: var(--link); }
.kaart__tekst { margin-top: .75rem; flex: 1; font-size: .875rem; line-height: 1.625; color: var(--tekst-zacht); }
.kaart .tekstlink { margin-top: 1.25rem; }

.paginering { margin-top: 3rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.paginering a, .paginering span {
  padding: .5rem 1rem; border: 1px solid var(--lijn); border-radius: 9999px;
  font-size: .875rem; font-weight: 600; text-decoration: none; color: var(--ink);
}
.paginering .current { background: var(--ink); border-color: var(--ink); color: #fff; }
.leeg { text-align: center; color: var(--tekst-zacht); }

/* ==========================================================================
   Detailpagina's en gewone pagina's
   ========================================================================== */
.detail { padding-bottom: 5rem; }
.detail__foto { width: 100%; height: 320px; object-fit: cover; }
@media (min-width: 640px) { .detail__foto { height: 420px; } }
.detail__kaart {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 1.5rem;
  padding: 2rem; box-shadow: var(--schaduw);
}
.detail__kaart--overlap { margin-top: -4rem; position: relative; }
.detail:not(.detail--foto) .detail__kaart { margin-top: 4rem; }
@media (min-width: 640px) { .detail__kaart { padding: 3rem; } }
.detail__kaart h1 { margin-top: 1rem; font-size: 1.875rem; }
@media (min-width: 640px) { .detail__kaart h1 { font-size: 2.25rem; } }
.detail__kaart .knop { margin-top: 2.5rem; }

.inhoud { color: var(--tekst-zacht); font-size: 1rem; line-height: 1.625; }
.inhoud > * + * { margin-top: 1.25rem; }
.inhoud h2 { margin-top: 2.5rem; font-size: 1.5rem; }
.inhoud h3 { margin-top: 2rem; font-size: 1.25rem; }
.inhoud h2 + *, .inhoud h3 + * { margin-top: .75rem; }
.inhoud ul, .inhoud ol { padding-left: 1.5rem; }
.inhoud li + li { margin-top: .5rem; }
.inhoud a { color: var(--link); }
.inhoud img { border-radius: 1.5rem; }
.inhoud .wp-block-image { margin-top: 2rem; }
.inhoud figcaption { font-size: .875rem; margin-top: .5rem; }
.pagina { padding: 4rem 0; }

/* Tabellen (ANBI) */
.tabel-kaart {
  overflow: hidden; margin-bottom: 3.5rem;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 1.5rem; box-shadow: var(--schaduw);
}
.tabel-kaart table { width: 100%; border-collapse: collapse; text-align: left; font-size: .875rem; }
.tabel-kaart th { width: 12rem; padding: 1rem 1.5rem; font-weight: 600; color: var(--ink); vertical-align: top; }
.tabel-kaart td { padding: 1rem 1.5rem; color: var(--tekst-zacht); overflow-wrap: anywhere; }
.tabel-kaart tr:nth-child(even) { background: var(--vlak); }
@media (max-width: 520px) {
  .tabel-kaart th, .tabel-kaart td { display: block; width: auto; padding: .25rem 1.25rem; }
  .tabel-kaart th { padding-top: 1rem; }
  .tabel-kaart td { padding-bottom: 1rem; }
}

/* Contactkaarten */
.contact-kaarten { margin: 2.5rem 0 0; display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .contact-kaarten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .contact-kaarten--3 { grid-template-columns: repeat(3, 1fr); } }
.contact-kaart {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 1.5rem; padding: 1.5rem; box-shadow: var(--schaduw);
}
.contact-kaart .icoon-vlak { width: 2.75rem; height: 2.75rem; border-radius: 1rem; }
.contact-kaart .icoon-vlak .icoon { width: 1.25rem; height: 1.25rem; }
.contact-kaart h2 { margin-top: 1rem; font-family: var(--font-tekst); font-size: .875rem; font-weight: 600; }
.contact-kaart p, .contact-kaart a { margin-top: .25rem; display: block; font-size: .875rem; color: var(--tekst-zacht); overflow-wrap: anywhere; }
.contact-kaart a { text-decoration: none; }
.contact-kaart a:hover { color: var(--ink); text-decoration: underline; }
.contact-tekst { margin-top: 2.5rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--ink); color: #fff; }
.footer-raster { display: grid; gap: 2.5rem; padding-top: 3.5rem; padding-bottom: 3.5rem; }
@media (min-width: 640px) { .footer-raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-raster { grid-template-columns: repeat(4, 1fr); } }
.footer-logo { display: inline-flex; border-radius: .75rem; background: var(--wit); padding: .75rem; }
.footer-logo img { height: 2rem; width: auto; }
.site-footer p, .site-footer li { font-size: .875rem; line-height: 1.625; color: rgba(255, 255, 255, .78); }
.site-footer p { margin-top: 1rem; }
.site-footer h2 { font-size: 1.125rem; color: #fff; }
.site-footer ul { list-style: none; margin-top: 1rem; display: grid; gap: .5rem; }
.site-footer a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.site-footer a:hover { color: var(--brand); }
.footer-contact li { display: flex; align-items: flex-start; gap: .5rem; }
.footer-contact .icoon { color: var(--brand); margin-top: .2rem; }
.footer-social { margin-top: 1.25rem; display: flex; gap: .75rem; }
.footer-social a { width: 2.25rem; height: 2.25rem; border: 0; background: rgba(255, 255, 255, .1); color: #fff; }
.footer-social a:hover { background: var(--brand); color: var(--ink); }
.site-footer .knop--coral { margin-top: 1.25rem; padding: .625rem 1.25rem; color: var(--ink); }
.site-footer .knop--coral:hover { color: var(--ink); background: var(--coral-dark); }
.footer-onder { border-top: 1px solid rgba(255, 255, 255, .12); }
.footer-onder p { margin: 0; padding: 1.25rem 0; font-size: .75rem; color: rgba(255, 255, 255, .7); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}