/* ’t Gat van Nederland — wat WordPress nodig heeft bovenop het ontwerp (basis.css, ongewijzigd),
   plus de afwerking die het ontwerp mist (overgangen, tussenmaten).
   Regels buiten een @layer winnen van alle lagen in basis.css. */

/* ---------------------------------------------------------------------------
   WordPress
--------------------------------------------------------------------------- */

/* Geen witte rand bij doorscrollen voorbij de pagina (ontwerp: zwart vlak). */
html { background: #000; }

/* Sticky kop onder de beheerbalk (site.js zet --gat-beheerbalk: 32/46/0px). */
.gvn-kop { top: var(--gat-beheerbalk, 0px); }

/* Ankers onder de sticky kop; de menukaart-rubrieken hebben in het ontwerp 96px. */
@layer components {
  [data-gvn] [id] { scroll-margin-top: calc(96px + var(--gat-beheerbalk, 0px)); }
}
.gvn-menu section { scroll-margin-top: calc(96px + var(--gat-beheerbalk, 0px)); }
#inhoud { scroll-margin-top: 0; }

/* Intro staat verborgen tot GSAP hem laat inlopen (zonder dit is hij eerst even zichtbaar). */
html.gat-inloop .gvn-intro .gvn-wrap > * { opacity: 0; }

/* Spamval in de formulieren. */
.gat-honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Verborgen samenvatting en meldingen. */
[data-gvn] [hidden] { display: none !important; }

/* Gewone tekstpagina's (privacyverklaring, cookiebeleid, bedankpagina's): tekst uit de editor. */
.gat-tekst-sectie { border-top: 1px solid var(--gvn-lijn); }
.gat-tekst { max-width: 72ch; margin-inline: auto; }
.gat-tekst > * + * { margin-top: 1em; }
.gat-tekst h2, .gat-tekst h3, .gat-tekst h4 { font: 600 1.5625rem/1.25 var(--gvn-f-serif); color: var(--gvn-zand); margin-top: 1.6em; }
.gat-tekst h3, .gat-tekst h4 { font-size: 1.25rem; }
.gat-tekst ul, .gat-tekst ol { padding-left: 1.3em; }
.gat-tekst ul { list-style: disc; }
.gat-tekst ol { list-style: decimal; }
.gat-tekst li + li { margin-top: .35em; }
.gat-tekst a { color: var(--gvn-accent); text-underline-offset: 4px; }
.gat-tekst a:hover { color: var(--gvn-wit); }
.gat-tekst i { font-style: italic; color: var(--gvn-tekst-stil); }
.gat-tekst .cmplz-subtitle { font-weight: 700; color: var(--gvn-zand); margin-top: 1em; }
.gat-tekst :where(p, ul, ol, div) + :where(p, ul, ol) { margin-top: .75em; }
.gat-tekst details { border-top: 1px solid var(--gvn-lijn); padding-block: 4px; }
.gat-tekst details:last-of-type { border-bottom: 1px solid var(--gvn-lijn); }
.gat-tekst summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; padding-block: 10px; }
.gat-tekst summary::-webkit-details-marker { display: none; }
.gat-tekst summary::before { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--gvn-goud); border-bottom: 2px solid var(--gvn-goud); transform: rotate(-45deg); transition: transform var(--gvn-snel) var(--gvn-ease); }
.gat-tekst details[open] > summary::before { transform: rotate(45deg); }
.gat-tekst summary h3 { margin: 0; font-size: 1.15rem; }
.gat-tekst summary > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.gat-tekst summary p { margin: 0; color: var(--gvn-tekst-stil); font-size: .9rem; }
.gat-tekst details > :not(summary) { margin-bottom: 12px; }
.gat-tekst h4, .gat-tekst h5 { font: 700 .8rem/1.3 var(--gvn-f-tekst); letter-spacing: .14em; text-transform: uppercase; color: var(--gvn-goud); margin-top: 12px; }
.gat-tekst .cookies-per-purpose { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 4px 16px; font-size: .9rem; }
.gat-tekst .cookies-per-purpose .purpose { grid-column: 1 / -1; }
.gat-tekst .cookies-per-purpose .name-header ~ .name-header,
.gat-tekst .cookies-per-purpose .retention-header ~ .retention-header,
.gat-tekst .cookies-per-purpose .function-header ~ .function-header { display: none; }
.gat-tekst .cookies-per-purpose > div { overflow-wrap: anywhere; }
.gat-tekst table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.gat-tekst th, .gat-tekst td { border-bottom: 1px solid var(--gvn-lijn); padding: 8px 10px 8px 0; text-align: left; vertical-align: top; }

/* Zoekresultaten. */
.gat-zoeklijst { margin-top: 0; }
.gat-zoeklijst a { text-decoration: none; }
.gat-zoeklijst a:hover { color: var(--gvn-accent); }

/* ---------------------------------------------------------------------------
   Afwerking: overgangen waar het ontwerp hard omspringt
--------------------------------------------------------------------------- */

.gvn-bereik a,
.gvn-gegevens a,
.gvn-voet a,
.gvn-rood a:not(.gvn-knop),
.gvn-intro p a,
.gvn-akkoord a { transition: color var(--gvn-snel) var(--gvn-ease), text-decoration-color var(--gvn-snel) var(--gvn-ease); }

/* Footer: onderstreping loopt in (ontwerp: verschijnt in één keer). */
.gvn-voet a:not(.gvn-logo) {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.gvn-voet a:not(.gvn-logo):hover { text-decoration-color: currentColor; }
.gvn-voet .gvn-soc a { text-decoration: none; }

/* Contactgegevens: onderstreping zacht van kleur bij hover. */
.gvn-gegevens a { text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.gvn-gegevens a:hover { text-decoration-color: currentColor; }

/* Logo: zachte hover. */
.gvn-logo { transition: opacity var(--gvn-snel) var(--gvn-ease); }
.gvn-logo:hover { opacity: .8; }

/* Menuknop: rand goud bij hover. */
.gvn-burger { transition: border-color var(--gvn-snel) var(--gvn-ease); }
.gvn-burger:hover, .gvn-burger[aria-expanded="true"] { border-color: var(--gvn-goud); }

/* Balk onderin (telefoon): zachte druk-staat. */
.gvn-mbalk a { transition: background-color var(--gvn-snel) var(--gvn-ease), color var(--gvn-snel) var(--gvn-ease); }
.gvn-mbalk a:active { background: var(--gvn-goud); color: var(--gvn-op-accent); }

/* Menu op kleine schermen: nooit hoger dan het scherm. */
@media (width <= 1060px) {
  .gvn-nav { max-height: calc(100svh - 73px - var(--gat-beheerbalk, 0px)); overflow-y: auto; overscroll-behavior: contain; }
  .gvn-nav a { transition: color var(--gvn-snel) var(--gvn-ease), padding-left var(--gvn-snel) var(--gvn-ease); }
  .gvn-nav a:hover { padding-left: 6px; }
}

/* Knoppen breken niet over twee regels. */
.gvn-knop { white-space: nowrap; }
/* Behalve waar hij op een telefoon niet past (lege agenda: lange knoptekst in een vak met rand). */
@media (width <= 480px) {
  .gvn-leeg .gvn-knop { white-space: normal; text-align: center; }
}
@media (width < 360px) {
  .gvn-knop { white-space: normal; text-align: center; max-width: 100%; }
}

/* Eén lang woord als kop (PRIVACYVERKLARING) past op 320 niet: dan afbreken. */
@media (width <= 360px) {
  .gvn-display { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
}

/* ---------------------------------------------------------------------------
   Tussenmaten
--------------------------------------------------------------------------- */

/* Menutegels 561–900: ontwerp = één smalle kolom van 520px links (lege rechterhelft, hoge toren).
   Nu twee kolommen, zoals de feestenlijst van het ontwerp op dezelfde breedtes. */
@media (560px < width <= 900px) {
  .gvn-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
}

/* Agenda-avonden op zwart: de dag en tijd in goud (zoals de regel boven de kop, gvn-info). */
.gat-avonden .gvn-tegel__wanneer { color: var(--gvn-accent); }

/* Avondpagina: lange tekst op zand (kleuren van het ontwerp voor zand: rood). */
.gat-tekst--zand { max-width: 68ch; margin-inline: 0; }
.gat-tekst--zand h2, .gat-tekst--zand h3, .gat-tekst--zand h4 { color: var(--gvn-licht-tekst); }
.gat-tekst--zand a:not(.gvn-knop) { color: var(--gvn-licht-tekst); }
.gat-tekst--zand a:not(.gvn-knop):hover { color: var(--gvn-zwart); }
.gat-tekst--zand strong { font-weight: 700; }
.gat-tekst--zand .gvn-knop { margin-top: 1.5em; }

/* Titel van een avondkaart als link: onderstreping loopt in, zoals de feestenlijst van het ontwerp. */
.gat-avond-link { text-decoration: underline transparent; text-decoration-thickness: 2px; text-underline-offset: 6px; transition: text-decoration-color var(--gvn-snel) var(--gvn-ease); }
.gat-avond-link:hover { text-decoration-color: currentColor; }
.gat-avond-zonder { display: grid; place-items: center; padding: 16px; background-image: repeating-linear-gradient(45deg, #ffffff10 0 1px, transparent 1px 21px), repeating-linear-gradient(-45deg, #ffffff10 0 1px, transparent 1px 21px); }
.gat-avond-zonder span { font: 400 clamp(1.8rem, 3.4vw, 2.6rem)/1 var(--gvn-f-display); text-transform: uppercase; letter-spacing: .035em; color: var(--gvn-goud); text-align: center; text-wrap: balance; }
.gat-tekst > :first-child, .gat-tekst #cmplz-document > :first-child { margin-top: 0; }
.gat-tekst a:not(.gvn-knop) { text-decoration: underline; text-decoration-thickness: 1px; }

/* Hovers die het ontwerp mist (tests/hover.js). */
.gvn-knop--lijn-rood:hover { border-color: var(--gvn-rood); } /* ontwerp: rand werd wit (van .gvn-knop:hover) op het rode vlak */
.gvn-intro p a, .gvn-akkoord a { text-underline-offset: 4px; text-decoration-thickness: 1px; }
.gvn-intro p a:hover, .gvn-akkoord a:hover { color: var(--gvn-accent); }
.gat-tekst summary { transition: color var(--gvn-snel) var(--gvn-ease); }
.gat-tekst summary:hover, .gat-tekst summary:hover h3 { color: var(--gvn-accent); }