/* ============================================================================
   paginas.css — eigen stijl van de pagina-agent
   (over-ons, faq, contact, verzenden, retourneren, voorwaarden, privacy)
   Bouwt voort op de tokens/componenten uit stijl.css — niets daarvan overschrijven.
   ========================================================================== */

/* ----- Paginakop (aqua banier bovenaan elke inhoudspagina) ----------------- */
.pagina-banier {
  background: var(--kleur-zwembad);
  padding-block: 2.25rem 2rem;
  margin-bottom: 2rem;
}
.pagina-banier__intro {
  max-width: 640px;
  margin-bottom: 0;
  font-size: 1.05rem;
}

/* ----- FAQ: native details-accordeon --------------------------------------- */
.faq-groep { margin-bottom: 2.25rem; }
.faq-groep__kop { margin-bottom: 1rem; }

.faq-item {
  background: var(--kleur-zwembad);
  border-radius: var(--radius-kaart);
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 1.25rem;
  font-family: var(--font-kop);
  font-weight: 600;
  line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  flex: 0 0 auto;
  font-family: var(--font-tekst);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--kleur-aqua);
  transition: transform 140ms ease;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item summary:hover { text-decoration: underline; text-decoration-color: var(--kleur-geel); text-decoration-thickness: 2px; }
.faq-item summary:focus-visible { outline: 3px solid var(--kleur-aqua); outline-offset: -3px; border-radius: var(--radius-kaart); }
.faq-item__antwoord { padding: 0 1.25rem 1.1rem; }
.faq-item__antwoord p:last-child, .faq-item__antwoord ul:last-child { margin-bottom: 0; }

/* ----- Contact -------------------------------------------------------------- */
.contact-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 820px) {
  .contact-raster { grid-template-columns: 1.4fr 1fr; }
}
.contact-zijkolom {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}
.contact-kaart {
  background: var(--kleur-zwembad);
  border-radius: var(--radius-kaart);
  padding: 1.5rem;
}
/* Zakelijke gegevens: iets kleiner en met wat lucht tussen de regels. */
.zakelijke-gegevens { font-size: 0.95rem; gap: 0.5rem; }
.contact-kaart p:last-child { margin-bottom: 0; }
.contact-kaart ul {
  list-style: none;
  padding: 0;
  margin-bottom: 1rem;
  display: grid;
  gap: 0.35rem;
}

/* Honeypot-veld: onzichtbaar voor bezoekers, niet voor bots. */
.veld--honing {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.melding {
  border-radius: var(--radius-kaart);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
}
.melding p { margin: 0; }
.melding--ok { background: var(--kleur-zwembad); color: var(--kleur-groen); }
.melding--fout { background: #FBEAE9; color: #B3261E; }

/* ----- Juridische pagina's & lopende tekst ---------------------------------- */
.inhoud-pagina { padding-bottom: var(--sectie-ruimte); }
.inhoud-pagina h2 { margin-top: 2.25rem; }
.inhoud-pagina h3 { margin-top: 1.5rem; }
.inhoud-pagina ul, .inhoud-pagina ol { margin-bottom: 1rem; padding-left: 1.4rem; }
.inhoud-pagina li { margin-bottom: 0.35rem; }

/* [INVULLEN: ...]-plekken opvallend markeren zodat ze niet per ongeluk live gaan. */
.invullen {
  background: rgba(255, 210, 63, 0.5);
  border-radius: 4px;
  padding: 0 0.3rem;
  font-style: italic;
}

.modelformulier {
  background: var(--kleur-zwembad);
  border-radius: var(--radius-kaart);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.modelformulier p:last-child { margin-bottom: 0; }

/* Stappenlijst (retour aanmelden) */
.stappen {
  list-style: none;
  counter-reset: stap;
  padding: 0;
  margin-bottom: 1.5rem;
  display: grid;
  gap: 0.9rem;
}
.stappen li {
  counter-increment: stap;
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
}
.stappen li::before {
  content: counter(stap);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem; height: 1.9rem;
  border-radius: 50%;
  background: var(--kleur-navy);
  color: var(--kleur-wit);
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 0.95rem;
}

/* Tarieventabel (verzenden) — drie kolommen: situatie, standaard, Late Night.
   De tabel staat in .tabel-scroll, zodat hij op mobiel binnen zijn eigen
   container schuift en de pagina zelf nooit horizontaal meebeweegt. */
.tabel-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin-bottom: 1.5rem;
  /* Schaduwrandje rechts zolang er nog een kolom buiten beeld staat, en links
     zodra je geschoven hebt. Zo zie je op een telefoon dat de kolom "Met Late
     Night" er ook nog is. De twee witte verlopen schuiven mee met de inhoud en
     dekken de schaduw af zodra je aan het eind bent. */
  background:
    linear-gradient(to right, var(--kleur-wit) 60%, rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left, var(--kleur-wit) 60%, rgba(255, 255, 255, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(16, 36, 62, 0.16), rgba(16, 36, 62, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(16, 36, 62, 0.16), rgba(16, 36, 62, 0)) right center;
  background-repeat: no-repeat;
  background-size: 2.5rem 100%, 2.5rem 100%, 0.9rem 100%, 0.9rem 100%;
  background-attachment: local, local, scroll, scroll;
}
/* Toetsenbordgebruikers moeten de tabel kunnen scrollen: vandaar tabindex="0"
   in de view, en hier een zichtbare focusrand. */
.tabel-scroll:focus-visible {
  outline: 3px solid var(--kleur-aqua);
  outline-offset: 3px;
  border-radius: var(--radius-kaart);
}
.tarief-tabel {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}
/* Binnen de scroll-container bepaalt de minimumbreedte wanneer er geschoven
   wordt; de marge zit dan op de container. */
.tabel-scroll .tarief-tabel { min-width: 28rem; margin-bottom: 0; }
.tarief-tabel th, .tarief-tabel td {
  text-align: left;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid rgba(16, 36, 62, 0.12);
}
.tarief-tabel th { font-family: var(--font-kop); font-weight: 600; }
.tarief-tabel tbody th { font-weight: 400; }
.tarief-tabel .tarief-gratis { color: var(--kleur-groen); font-weight: 700; }

/* Levende bezorgstatus (verzenden): de belofte van dit moment uit
   lib/levertijd.js, met de voorwaarde er direct leesbaar bij. */
.bezorg-status {
  background: var(--kleur-zwembad);
  border-radius: var(--radius-kaart);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  display: grid;
  gap: 0.5rem;
}
.bezorg-status p { margin-bottom: 0; }

/* ----- Over ons ------------------------------------------------------------- */
.overons-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  margin-block: 1rem 2.5rem;
}
@media (min-width: 820px) {
  .overons-raster { grid-template-columns: 1.1fr 1fr; }
}
/* Beeldkader (stijl.css) met een schaduwtje: de foto staat er volledig in,
   niets wordt bijgesneden, en het vak houdt zijn plek in het raster vast. */
.overons-foto {
  box-shadow: var(--schaduw-kaart);
  max-width: 30rem;
  margin-inline: auto;
  padding: clamp(0.6rem, 2vw, 1rem);
}
.overons-beloftes {
  list-style: none;
  padding: 0;
  margin-bottom: 1.5rem;
  display: grid;
  gap: 0.5rem;
}