/* =============================================================================
   Wood, contactpagina  —  [wood_contact]

   Bouwt op wood-collectie.css: de hero, de knoppen, .wood-binnen en de aanhef
   komen daarvandaan. Hier staat alleen wat de contactpagina eigen heeft.

   Opbouw overgenomen van de contactpagina van Stichting Evi Verbindt: kopfoto,
   "Vraag het Evi", twee kaarten die over de rand van een donkere foto steken, en
   daaronder de veelgestelde vragen op diezelfde foto. Maten en kleuren van Wood:
   de kolommen 660 om 440 en de fotostapel uit het verhaalblok, de titels uit het
   terecht-blok, foto's en kaarten recht.
   ============================================================================= */

.wood-contactpagina {
  --wood-groen: #004339;
  --wood-bosgroen: #004339;
  --wood-goud: #D9B976;
  --wood-creme: #FAF7F1;
  --wood-zand: #EDE6DB;
  --wood-inkt: #35332E;
  --wood-taupe: #7A7468;
  --wood-goud-zacht: #C29E66;
  /* bruin voor tekst op de lichte vloer van de kopfoto; het goud valt daar weg */
  --wood-bruin: #8A6A3F;
  --wood-voet: #004339;         /* de footer, waar de onderste sectie in overloopt */
  --wood-serif: "Libre Baskerville", Georgia, serif;
  --wood-inhoud: 1140px;
  --wood-rond-foto: 0;

  /* hoever de kaarten omhoog steken, het crème vlak van Evi in */
  --wood-contact-omhoog: 150px;

  overflow-x: clip;
}

/* --- 1. Kopfoto ----------------------------------------------------------- */

/*
 * De hero van de collectiepagina, maar lager: op een contactpagina wil je de
 * gegevens zien zonder eerst een heel scherm foto voorbij te scrollen.
 */
.wood-contactpagina .wood-hero--laag,
.wood-contactpagina .wood-hero--laag .wood-hero__inhoud {
  min-height: 460px;
}

.wood-contactpagina .wood-hero--laag .wood-hero__inhoud {
  padding: 80px 0 64px;
}

/*
 * De foto van de homepagina, zonder waas (Tim, 23 sep 2026). Linksonder is de
 * vloer licht; daar staat de tekst, donker met een bruine aanhef. Onderaan
 * uitgelijnd, zoals de hero op de homepagina.
 */
.wood-contact-kop .wood-hero__beeld .wood-hero__foto {
  object-position: 50% 100%;
}

.wood-contactpagina .wood-contact-kop .wood-hero__inhoud {
  justify-content: flex-end;
  color: var(--wood-inkt);
}

.wood-contactpagina .wood-contact-kop .wood-hero__aanhef {
  color: var(--wood-bruin);
}

.wood-contactpagina .wood-contact-kop .wood-hero__titel {
  color: var(--wood-inkt);
}

.wood-contact-kop .wood-hero__tekst {
  max-width: 560px;
  color: var(--wood-inkt);
}

.wood-contact-kop .wood-hero__tekst p {
  margin: 0;
}

.wood-contactpagina .wood-contact-kop .wood-knop {
  color: var(--wood-inkt);
}

.wood-contactpagina .wood-contact-kop .wood-knop--zacht {
  color: var(--wood-inkt);
  box-shadow: inset 0 0 0 1px rgba(53, 51, 46, 0.45);
}

.wood-contactpagina .wood-contact-kop .wood-knop--zacht:hover,
.wood-contactpagina .wood-contact-kop .wood-knop--zacht:focus-visible {
  color: var(--wood-inkt);
  box-shadow: inset 0 0 0 2px rgba(53, 51, 46, 0.7);
}

/* --- 2. Vraag het Evi ----------------------------------------------------- */

.wood-contact-evi {
  position: relative;
  padding: 96px 32px calc(96px + var(--wood-contact-omhoog));
  background: var(--wood-creme);
}

.wood-contact-evi__binnen {
  display: grid;
  grid-template-columns: minmax(0, 660fr) minmax(0, 440fr);
  align-items: center;
  gap: 40px;
}

.wood-contact-evi .wood-kop__aanhef {
  color: var(--wood-bosgroen);   /* groen zoals de aanhef elders op de site, niet goud (Tim) */
}

/* Zelfde titel als "Je kunt bij ons terecht voor": 28px, hoofdletters. */
.wood-contactpagina .wood-contact-evi__titel,
.wood-contactpagina .wood-contact__vragentitel {
  margin: 8px 0 16px;
  font-family: var(--wood-serif);
  font-size: 28px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wood-inkt);
}

.wood-contact-evi__zin {
  max-width: 58ch;
  margin: 0 0 28px;
  color: var(--wood-inkt);
}

/*
 * De naam Evi opent de chat. Tot de chat er is, is het gewoon een woord in de
 * zin; daarna krijgt hij een gouden lijntje eronder.
 */
.wood-contactpagina .wood-contact-evinaam {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
  cursor: default;
}

.wood-contactpagina .wood-contact-evinaam.is-klaar {
  color: var(--wood-groen);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--wood-goud);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  cursor: pointer;
}

.wood-contactpagina .wood-contact-evinaam.is-klaar:hover,
.wood-contactpagina .wood-contact-evinaam.is-klaar:focus-visible {
  background: none;
  color: var(--wood-groen);
  text-decoration-color: var(--wood-groen);
}

/*
 * Vier vragen onder elkaar, elk een regel met een lijntje eronder en een pijl
 * aan het eind. Het is een lijstje vragen, geen rij knoppen: gewone letter.
 */
.wood-contact-evi__vragen {
  max-width: 500px;
}

.wood-contactpagina .wood-contact-vraag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 15px 2px;
  margin: 0;
  border: 0;
  border-bottom: 1px solid rgba(0, 67, 57, 0.1);
  border-radius: 0;
  background: transparent;
  color: var(--wood-inkt);
  font: inherit;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  cursor: pointer;
}

.wood-contactpagina .wood-contact-vraag[hidden] {
  display: none;
}

.wood-contactpagina .wood-contact-vraag:hover,
.wood-contactpagina .wood-contact-vraag:focus-visible {
  background: transparent;
  color: var(--wood-groen);
}

.wood-contact__pijl {
  flex: 0 0 auto;
  color: var(--wood-goud-zacht);
  transition: transform 0.2s ease;
}

.wood-contact-vraag:hover .wood-contact__pijl,
.wood-contact-vraag:focus-visible .wood-contact__pijl,
.wood-contact__link:hover .wood-contact__pijl,
.wood-contact__link:focus-visible .wood-contact__pijl {
  transform: translateX(4px);
}

.wood-contact-evi__zonder {
  margin: 22px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--wood-taupe);
}

/* Het contactformulier op de plek van de foto (Gravity Forms, opmaak in style.css). */
.wood-contact-evi__formulier .gform_wrapper.wood-gf_wrapper {
  max-width: none;
  margin: 0;
}

/*
 * Het formulier naast Evi (Tim, 3 okt 2026):
 * - twee gelijke kolommen met 30px ertussen, net als de kaarten eronder, en 40px
 *   binnenruimte zoals de kaarten: het formulier is zo breed als de tekst in
 *   "De werkplaats";
 * - beide kolommen bovenaan, en "Je naam" op de hoogte van "Evi is onze
 *   digitale hulp": die zin staat 71px onder de bovenkant, de tekst in een
 *   vakje van 48px 12px lager dan in een regel van 24px.
 */
.wood-contact-evi__binnen:has(.wood-contact-evi__formulier) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  align-items: start;
}

.wood-contact-evi__formulier {
  margin-top: 59px;
  padding-inline: 40px;
}

@media (max-width: 900px) {
  .wood-contact-evi__binnen:has(.wood-contact-evi__formulier) {
    grid-template-columns: minmax(0, 1fr);
  }

  .wood-contact-evi__formulier {
    margin-top: 0;
    padding-inline: 0;
  }
}

/* De fotostapel van het verhaalblok: 400 en 250, de tweede 101px omhoog. */
.wood-contact-evi__beeld {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.wood-contactpagina .wood-contact-evi__foto-1 {
  width: 100%;
  max-width: 400px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/*
 * Eén foto (Tim, 23 sep 2026): de hele foto, niet bijgesneden, hooguit 560px
 * hoog en in het midden van de beeldkolom. Hoogte en breedte staan hard, omdat
 * de width/height-attributen van WordPress en de img-regels van Elementor hem
 * anders uitrekken en dan snijdt object-fit hem smal.
 */
.wood-contact-evi__beeld--een {
  align-items: center;
}

.wood-contactpagina .wood-contact-evi__beeld--een .wood-contact-evi__foto-1 {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 560px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}

.wood-contactpagina .wood-contact-evi__foto-2 {
  width: 62.5%;
  max-width: 250px;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin: -101px 45px 0 auto !important;
  box-shadow: 0 0 0 8px var(--wood-creme);
}

/* --- 3. De kaarten op de foto van de werkplaats --------------------------- */

/*
 * flow-root houdt de negatieve marge van de kaarten binnen deze sectie. Zonder
 * zou de marge naar de sectie zelf doorschuiven en gaat de foto mee omhoog; dat
 * kostte bij de stichting een ronde.
 */
.wood-contact {
  position: relative;
  display: flow-root;
  padding: 0 32px 96px;
  background: var(--wood-voet);
  color: var(--wood-creme);
}

.wood-contact__achtergrond {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.wood-contactpagina .wood-contact__achtergrond .wood-contact__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--wood-contact-positie, 50% 45%);
}

/*
 * De waas is het groen van de footer, bijna dicht: je ziet net dat er een foto
 * achter zit. Waarden uit Tims inspector (23 sep 2026).
 */
.wood-contact__waas {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(0 67 57 / 95%) 0%, rgb(0 67 57) 105%, #004339 100%);
}

/*
 * Hetzelfde lijntje als tussen de vragen, over de volle breedte, als grens met
 * de footer (Tim, 23 sep 2026).
 */
.wood-contact::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  border-bottom: 1px solid rgba(250, 247, 241, 0.18);
}

.wood-contact__kaarten {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  margin-top: calc(-1 * var(--wood-contact-omhoog));
}

/* Zonder Evi-blok erboven is er geen vlak om in te steken. */
.wood-contact--los {
  padding-top: 96px;
}

.wood-contact--los .wood-contact__kaarten {
  margin-top: 0;
}

.wood-contact__kaart {
  display: flex;
  flex-direction: column;
  padding: 40px 40px 36px;
  background: #fff;
  color: var(--wood-inkt);
  border-radius: var(--wood-rond-foto);
  /*
   * De bovenkant van een witte kaart staat tegen crème; zonder schaduw naar
   * boven zie je niet dat hij erop ligt.
   */
  box-shadow: 0 -12px 28px -22px rgba(0, 67, 57, 0.16), 0 16px 36px -26px rgba(0, 0, 0, 0.2);
}

.wood-contactpagina .wood-contact__titel {
  margin: 0 0 20px;
  font-family: var(--wood-serif);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wood-inkt);
}

/* De opmaak van de regels zelf staat bij .wood-gegevens in wood-collectie.css. */
.wood-contact__lijst {
  margin: 0 0 20px;
}

.wood-contact__kaart p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.6;
}

.wood-contact__adres {
  color: var(--wood-inkt);
}

.wood-contact__adres strong {
  font-weight: 500;
}

.wood-contact__kaart .wood-contact__klein {
  margin: auto 0 0;
  font-size: 14px;
  color: var(--wood-taupe);
}

.wood-contactpagina .wood-contact__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--wood-groen);
  align-self: flex-start;
}

.wood-contactpagina .wood-contact__link:hover,
.wood-contactpagina .wood-contact__link:focus-visible {
  color: var(--wood-groen);
}

/* "Plan een afspraak" boven "Plan je route" (14 okt 2026): de eerste duwt beide naar onderen. */
.wood-contactpagina .wood-contact__link + .wood-contact__link {
  margin-top: 14px;
}

/* --- 4. Veelgestelde vragen op de donkere foto ---------------------------- */

.wood-contact__vragen {
  position: relative;
  z-index: 1;
  margin-top: 88px;
}

.wood-contact__vragen .wood-kop__aanhef {
  color: var(--wood-goud);
}

.wood-contactpagina .wood-contact__vragentitel {
  color: var(--wood-creme);
}

/* Even lang als de zin in de kopfoto, over de volle breedte wordt het een te lange regel. */
.wood-contact__vragenzin {
  max-width: 620px;
  margin: 0 0 40px;
  color: rgba(250, 247, 241, 0.86);
}

/*
 * De vragenlijst zelf komt uit de chatbot-plugin: [aichatbot_faq].
 * Opmaak van swipe-faq.css (Stichting Evi Verbindt, Tims standaard voor elke
 * FAQ), alleen de kleuren zijn van Wood. Twee dingen staan zoals Tim ze wil en
 * niet zoals bij Evi: de vraag op gewicht 300 en 27px onder het zoekveld.
 */
.wood-faq-donker {
  background: transparent;
}

.wood-faq-donker .elementor-accordion-item {
  border-bottom: 1px solid rgba(250, 247, 241, 0.18);
  background: transparent;
}

.wood-faq-donker .elementor-accordion-item:last-child {
  border-bottom: none;
}

.wood-faq-donker .elementor-tab-title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border: 0;
  cursor: pointer;
  font-weight: 300;
  color: var(--wood-creme);
  background: transparent;
}

.wood-faq-donker .elementor-accordion-title {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 300;
  color: var(--wood-creme);
  text-decoration: none;
}

.wood-faq-donker .elementor-accordion-icon {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--wood-goud);
}

.wood-faq-donker .elementor-tab-title[aria-expanded="true"] .elementor-accordion-icon-closed { display: none; }
.wood-faq-donker .elementor-tab-title[aria-expanded="false"] .elementor-accordion-icon-opened { display: none; }

.wood-faq-donker .elementor-tab-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 20px;
  border: 0;
  background: transparent;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(250, 247, 241, 0.86);
}

/* Ruimte boven en onder het antwoord via spacers: padding geeft in dichte stand een randje. */
.wood-faq-donker .elementor-tab-content::before,
.wood-faq-donker .elementor-tab-content::after {
  content: "";
  display: block;
  height: 14px;
}

.wood-faq-donker .elementor-tab-content > :first-child { margin-top: 0; }
.wood-faq-donker .elementor-tab-content > :last-child { margin-bottom: 0; }
.wood-faq-donker .elementor-tab-content a { color: var(--wood-goud); }

.wood-contact__vragen .aichatbot-faq-wrap {
  gap: 37px;
}

.wood-contact__vragen .aichatbot-faq-lijst {
  max-width: none;
}

.wood-contact__vragen .aichatbot-faq-facet label {
  align-items: center;
  font-size: 90%;
  color: var(--wood-creme);
}

.wood-contact__vragen .aichatbot-faq-aantal {
  color: rgba(250, 247, 241, 0.6);
}

.wood-contact__vragen .aichatbot-faq-facet input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 0;
  border: 1px solid rgba(250, 247, 241, 0.5);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
}

.wood-contact__vragen .aichatbot-faq-facet input[type="checkbox"]:checked {
  background: var(--wood-goud);
  border-color: var(--wood-goud);
}

.wood-contact__vragen .aichatbot-faq-facet input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 3px;
  height: 7px;
  border: solid var(--wood-groen);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.wood-contact__vragen .aichatbot-faq-zoek {
  width: 100%;
  max-width: none;
  margin: 0 0 27px;
  padding: 12px 14px;
  border: 1px solid rgba(250, 247, 241, 0.25);
  border-radius: 0;
  background: rgba(250, 247, 241, 0.08);
  color: var(--wood-creme);
}

.wood-contact__vragen .aichatbot-faq-zoek::placeholder {
  color: rgba(250, 247, 241, 0.6);
}

.wood-contact__vragen .aichatbot-faq-zoek::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  cursor: pointer;
  background: var(--wood-goud);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18 6 6 18M6 6l12 12' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18 6 6 18M6 6l12 12' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat;
}

.wood-contact__vragen .aichatbot-faq-geen {
  color: rgba(250, 247, 241, 0.86);
}

/*
 * Het zoekveld staat bovenin de onderwerpenkolom (het script verhuist hem
 * daarheen), en de eerste vraag begint 8px hoger zodat het lijntje eronder op
 * de onderrand van het zoekveld valt. Alleen naast elkaar; eronder valt er
 * niets uit te lijnen. De 240px ook alleen hier: onder elkaar is flex-basis
 * een hoogte en geen breedte meer.
 */
@media (min-width: 783px) {
  .wood-contact__vragen .aichatbot-faq-facet {
    flex: 0 0 240px;
    max-width: 240px;
  }

  .wood-faq-donker .elementor-accordion-item:first-child .elementor-tab-title {
    padding-top: 8px;
  }
}

/* --- Tablet en telefoon --------------------------------------------------- */

@media (max-width: 900px) {
  .wood-contactpagina {
    --wood-contact-omhoog: 60px;
  }

  .wood-contactpagina .wood-hero--laag,
  .wood-contactpagina .wood-hero--laag .wood-hero__inhoud {
    min-height: 420px;
  }

  .wood-contactpagina .wood-hero--laag .wood-hero__inhoud {
    padding: 64px 0 48px;
  }

  .wood-contactpagina .wood-hero .wood-hero__titel {
    font-size: 28px;
    line-height: 34px;
    letter-spacing: 2.4px;
  }

  .wood-contact-evi {
    padding: 64px 20px calc(56px + var(--wood-contact-omhoog));
  }

  .wood-contact-evi__binnen {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .wood-contactpagina .wood-contact-evi__titel,
  .wood-contactpagina .wood-contact__vragentitel {
    font-size: 22px;
  }

  .wood-contactpagina .wood-contact-evi__foto-2 {
    margin: -60px 24px 0 auto !important;
  }

  .wood-contact {
    padding: 0 20px 64px;
  }

  .wood-contact--los {
    padding-top: 64px;
  }

  .wood-contact__kaarten {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .wood-contact__kaart {
    padding: 28px 24px;
  }

  .wood-contact__vragen {
    margin-top: 64px;
  }
}

/*
 * Onder elkaar zet de plugin de kolommen op align-items: flex-start, en dan
 * krimpt de onderwerpenkolom (met het zoekveld erin) tot de breedte van de
 * langste regel. Hier vullen ze de hele breedte.
 */
@media (max-width: 782px) {
  .wood-contact__vragen .aichatbot-faq-facet,
  .wood-contact__vragen .aichatbot-faq-lijst {
    align-self: stretch;
    width: 100%;
  }
}

/*
 * Op een telefoon valt de lichte vloer weg en staat de tekst over de bank. Een
 * waas wil Tim niet, dus de foto wordt daar een strook boven de tekst en de
 * tekst staat op crème.
 */
@media (max-width: 700px) {
  .wood-contactpagina .wood-contact-kop {
    display: block;
    min-height: 0;
    padding: 0;
    background: var(--wood-creme);
  }

  .wood-contactpagina .wood-contact-kop .wood-hero__beeld {
    position: relative;
    height: 240px;
  }

  .wood-contactpagina .wood-contact-kop .wood-hero__beeld .wood-hero__foto {
    object-position: 60% 70%;
  }

  .wood-contactpagina .wood-contact-kop .wood-hero__inhoud {
    min-height: 0;
    padding: 40px 20px 8px;
  }

  .wood-contactpagina .wood-contact-kop .wood-hero__aanhef {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wood-contact__pijl,
  .wood-faq-donker .elementor-tab-content {
    transition: none;
  }
}