/* Aanvullingen op site.css voor de blokken van de homepage. */

/* Ervaringen: in de oude site inline. */
.author-avatar--op-donker { background: rgba(255,255,255,0.3); color: white; }
.author-avatar--donker { background: #1B3C36; color: white; }

/* FAQ: details-blok in plaats van knop met script */
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  text-align: left;
  line-height: normal;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--charcoal);
  transition: var(--transition);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--green-dark); }
.faq-item summary::after {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A67C52' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.3s ease;
}
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item > p {
  font-size: 15px;
  color: var(--gray-mid);
  line-height: 1.75;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .faq-item summary { font-size: 15px; padding: 16px 0; }
  .faq-item > p { font-size: 14px; }
}

/* Gewone pagina's (privacy, voorwaarden, subpagina's) */
.pagina { padding: 140px 0 80px; }
.pagina .container { max-width: 800px; }

/* Werkwijze met meer dan vier stappen: raster zonder pijlen. */
.stappen-grid--raster { display: grid; grid-template-columns: repeat(var(--kolommen), 1fr); gap: 24px; }
@media (max-width: 1024px) { .stappen-grid--raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .stappen-grid--raster { grid-template-columns: 1fr; } }

/* Contactformulier in de container, los van de sociale knoppen erboven. */
.contact > .container + .container { margin-top: 48px; }

/* Contact: site.css verwacht een kolom om label, kop en tekst, die ontbreekt ook in het origineel. Zonder die kolom
   viel de kop rechts naast het label. Label en kop nu boven de twee kolommen, en geen rijruimte tussen label en kop. */
.contact-inner { row-gap: 0; }
.contact-inner > .section-title { margin-bottom: 28px; }
.contact-inner > p { margin-bottom: 28px; }
@media (min-width: 769px) {
  .contact-inner { grid-template-rows: auto auto auto 1fr; }
  .contact-inner > :is(.section-tag, .section-title) { grid-column: 1 / -1; }
  .contact-inner > p { grid-column: 1; grid-row: 3; }
  .contact-inner > .contact-details { grid-column: 2; grid-row: 3 / span 2; }
  .contact-inner > .social-links { grid-column: 1; grid-row: 4; }
}

/* Ingelogd: de kop onder de beheerbalk. Op telefoonbreedte scrolt die balk mee weg, dan mag de kop weer naar boven. */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header.scrolled { top: 0; } }

/* Tekst op gewone pagina's */
.pagina h2 { font-size: 22px; margin: 36px 0 12px; }
.pagina p { margin-bottom: 14px; }
.pagina ul { list-style: disc; padding-left: 24px; margin-bottom: 14px; }
.pagina li { margin-bottom: 6px; }

/* Lege velden: blijft er één kolom over, dan vult die de breedte. */
.hero-inner:not(:has(.hero-visual)),
.over-inner:not(:has(.over-image-col)),
.herkenning-inner:not(:has(.herkenning-intro)),
.herkenning-inner:not(:has(.herkenning-tekst)) { grid-template-columns: 1fr; }
.hero-inner:not(:has(.hero-visual)) .hero-desc { max-width: none; }
.over-quote-bubble:only-child { position: static; max-width: none; }

/* Meer alinea's in hero en regio-tekst. */
.hero-desc:has(+ .hero-desc) { margin-bottom: 14px; }
.local-seo .section-desc + .section-desc { margin-top: 14px !important; }

/* Op telefoon en tablet heeft de hero geen vaste hoogte: de scroll-pijl liep door de knoppen. */
@media (max-width: 768px) {
  .hero-scroll-indicator { display: none; }
  /* De vaste kop is hier 104px hoog; de hero-inhoud begon eronder. */
  .hero { padding-top: 112px; }
  /* Stappen staan hier onder elkaar: een pijl naar rechts wijst nergens heen. */
  .stap-pijl { display: none; }
}

/* De regio-tekst stond tegen de vorige sectie aan. */
.local-seo { padding-top: 64px; }

/* Geen hero: dan begint de eerste sectie onder de vaste kop. */
body.blokpagina:not(:has(section.hero)) section:first-of-type { padding-top: 140px; }

/* Gewone tekst tussen de blokken: niet tegen de rand van het scherm. */
body.blokpagina > :is(p, h1, h2, h3, h4, ul, ol, blockquote, figure, .wp-block-group, .wp-block-columns) {
  width: min(800px, calc(100% - 48px));
  margin: 24px auto;
}

/* Bouwstenen voor eigen pagina's. */
.std { padding: 100px 0; }
.std--zand { background: var(--taupe-light); }
.std--lichtgroen { background: var(--green-pale); }
.std--donkergroen { background: var(--green-dark); color: rgba(255,255,255,0.9); }
.std--donkergroen :is(h2, h3, .section-title) { color: var(--white); }
.std--donkergroen .std-tekstvak a { color: var(--white); }
.std :is(h2, h3, p, li) { overflow-wrap: break-word; }
.std .section-title { margin-bottom: 20px; }
.std-tekstvak p, .std-tekstvak ul, .std-tekstvak ol { margin-bottom: 14px; }
.std-tekstvak ul { list-style: disc; padding-left: 24px; }
.std-tekstvak ol { list-style: decimal; padding-left: 24px; }
.std-tekstvak a { text-decoration: underline; }
.std-knoppen { margin-top: 24px; }

.std-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.std-rij:not(:has(.std-beeld)), .std-rij:not(:has(.std-inhoud)) { grid-template-columns: 1fr; }
.std-rij:not(:has(.std-beeld)) .std-inhoud { max-width: 800px; }
.std--beeld-links .std-beeld { order: -1; }
.std-inhoud, .std-beeld { min-width: 0; }
.std-beeld img { display: block; width: 100%; height: auto; max-height: 640px; object-fit: cover; border-radius: var(--radius-lg); }

.container.std-smal { max-width: 848px; }
.std .section-header:last-child { margin-bottom: 0; }
.std--donkergroen .section-desc { color: rgba(255,255,255,0.85); }
.std-kaarten { display: grid; grid-template-columns: repeat(var(--kolommen, 3), minmax(0, 1fr)); gap: 24px; }
.std-kaart { background: var(--white); border: 1px solid var(--gray-light); border-radius: var(--radius-md); padding: 32px; }
.std-kaart h3 { font-size: 20px; margin-bottom: 12px; }
.std-kaart p + p { margin-top: 12px; }
.std--donkergroen .std-kaart { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); }

@media (max-width: 1024px) { .std-rij { gap: 40px; } }
@media (max-width: 768px) {
  .std { padding: 64px 0; }
  .std-rij { grid-template-columns: 1fr; gap: 32px; }
  .std-kaarten { grid-template-columns: minmax(0, 1fr); }
  /* Onder elkaar: altijd eerst de tekst, ook als de afbeelding op de computer links staat. */
  .std--beeld-links .std-beeld { order: 0; }
}

/* Kleurkeuze op hero, vragen, oproep en contact. Standaard geeft geen klasse, dan blijft het eigen uiterlijk staan. */
.std--donkergroen :is(.hero-title, .hero-title em, .faq-item summary, .faq-item summary:hover, .contact-detail strong, .contact-detail a) { color: var(--white); }
.std--donkergroen :is(.hero-desc, .faq-item > p, .contact-detail p, .contact-info > p, .contact-inner > p) { color: rgba(255,255,255,0.85); }
.std--donkergroen :is(.faq-item, .faq-item:first-child) { border-color: rgba(255,255,255,0.18); }
.std--donkergroen .btn-ghost { color: var(--white); border-color: rgba(255,255,255,0.6); }
.std--donkergroen .btn-ghost:hover { background: var(--white); color: var(--green-dark); }
.std--donkergroen .hero-scroll-indicator { color: rgba(255,255,255,0.75); }
.std--donkergroen .scroll-line { background: linear-gradient(to bottom, rgba(255,255,255,0.75), transparent); }
.std--donkergroen .contact-form-wrapper { color: var(--charcoal); }
.std--donkergroen .contact-form h3 { color: var(--charcoal); }
.cta-sectie:is(.std--zand, .std--lichtgroen) .cta-content h2 { color: var(--green-dark); }
.cta-sectie:is(.std--zand, .std--lichtgroen) .cta-content p { color: var(--gray-mid); }
.cta-sectie:is(.std--zand, .std--lichtgroen) .cta-content p a { color: var(--green-dark); text-decoration: underline; }
.cta-sectie:is(.std--zand, .std--lichtgroen) .btn-white { background: var(--green-dark); border-color: var(--green-dark); color: var(--white); }
.cta-sectie:is(.std--zand, .std--lichtgroen) .btn-white:hover { background: var(--green-mid); border-color: var(--green-mid); }
.cta-sectie:is(.std--zand, .std--lichtgroen) .btn-outline-white { color: var(--green-dark); border-color: var(--green-dark); }
.cta-sectie:is(.std--zand, .std--lichtgroen) .btn-outline-white:hover { background: var(--green-dark); color: var(--white); }

/* Footer: kaart, merk, navigatie, diensten en contact zijn vijf onderdelen, het raster van site.css heeft er vier.
   Kolommen zo breed als hun inhoud, zodat de logotekst niet in de volgende kolom kan lopen. */
.footer-map iframe { display: block; max-width: 100%; }
@media (min-width: 1200px) {
  .footer-inner { grid-template-columns: 240px repeat(4, max-content); justify-content: space-between; gap: 32px; }
}
@media (min-width: 769px) and (max-width: 1199px) {
  .footer-inner {
    grid-template-columns: minmax(max-content, 1.3fr) 1fr 1fr;
    grid-template-areas: "merk navigatie diensten" "kaart contact contact";
    gap: 40px 32px;
  }
  .footer-brand { grid-area: merk; }
  .footer-links:nth-of-type(3) { grid-area: navigatie; }
  .footer-links:nth-of-type(4) { grid-area: diensten; }
  .footer-map { grid-area: kaart; }
  .footer-contact { grid-area: contact; }
}

/* De merkkolom staat met -10px in de html, voor de witruimte in het logo. De tekst eronder hoort wel op de lijn van de rest. */
.footer-tagline { margin-left: 10px; }

/* De kop van de site is doorzichtig tot je scrolt. Op een donker eerste blok krijgt hij dezelfde balk als na het scrollen,
   anders staan logo en menu donker op donker. */
.site-header:not(.scrolled):has(+ :is(.std--donkergroen, .cta-sectie:not(.std--zand, .std--lichtgroen))) {
  background: rgba(245, 240, 235, 0.97);
}

/* Horizontale scroll op tussenbreedtes, gevonden met de breedtesweep in voet_proef.js. */
@media (min-width: 769px) and (max-width: 860px) { .stappen-grid:not(.stappen-grid--raster) .stap-kaart { padding: 24px 14px; } }
@media (max-width: 520px) { .tarieven-grid { grid-template-columns: 1fr; } }
@media (max-width: 370px) { .btn { white-space: normal; text-align: center; } }

/* Bedanktpagina: kaart met teller en knoppen uit het sjabloon, de tekst uit de pagina. */
.bedankt-main { display: flex; justify-content: center; padding: 140px 24px 80px; }
.bedankt-card { width: 100%; max-width: 620px; padding: 64px 56px; text-align: center; background: var(--white); border-radius: 20px; box-shadow: 0 8px 40px rgba(27, 60, 54, 0.08); }
.bedankt-icon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0 auto 32px; background: var(--green-light); border-radius: 50%; }
.bedankt-icon svg { width: 36px; height: 36px; }
.bedankt-tag { display: block; margin-bottom: 16px; font-family: 'Montserrat', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--terra); }
.bedankt-card h1 { margin-bottom: 20px; font-family: 'Montserrat', sans-serif; font-size: 2rem; font-weight: 700; line-height: 1.25; color: var(--green-dark); }
.bedankt-intro { margin-bottom: 36px; font-family: 'Open Sans', sans-serif; font-size: 1rem; line-height: 1.75; color: var(--charcoal); }
.bedankt-card blockquote { margin: 0 0 40px; padding: 20px 24px; text-align: left; border-left: 3px solid var(--terra); border-radius: 0 12px 12px 0; }
.bedankt-card blockquote p { margin: 0 0 8px; font-family: 'Raleway', sans-serif; font-size: 1.05rem; font-style: italic; line-height: 1.7; color: var(--green-dark); }
.bedankt-card blockquote cite { font-family: 'Montserrat', sans-serif; font-size: 0.75rem; font-weight: 600; font-style: normal; letter-spacing: 0.05em; color: var(--terra); }
.bedankt-timer { margin-bottom: 32px; font-family: 'Open Sans', sans-serif; font-size: 0.875rem; color: #888; }
.bedankt-timer span { font-weight: 600; color: var(--green-dark); }
.bedankt-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 600px) {
  .bedankt-card { padding: 40px 28px; }
  .bedankt-card h1 { font-size: 1.6rem; }
}