/* ============================================================
   KLANTSPECIFIEKE CSS — De Loos Totaalrenovatie

   Alleen voor patronen die in dit ontwerp terugkomen en die Impreza
   niet als instelling aanbiedt. Wordt automatisch geladen wanneer
   'custom_css' in klant/config.php op true staat.
   ============================================================ */

/* Eyebrow met streepje ervoor. De kleur volgt de tekstkleur van het element,
   zodat hij op lichte én donkere secties klopt. */
.wf-eyebrow{
  display:flex;
  align-items:center;
  gap:.7em;
}
.wf-eyebrow::before{
  content:"";
  width:26px;
  height:1px;
  background:currentColor;
  flex:none;
}

/* Nadruk in koppen — letterlijk overgenomen uit het ontwerp (.em).
   Een band van 0.32em hoog op 86% van de regelhoogte, niet een vol vlak. */
h1 i, h2 i, h3 i, h4 i,
.l-section h1 i, .l-section h2 i, .l-section h3 i,
.w-text h1 i, .w-text h2 i, .w-text h3 i{
  font-style:italic !important;
  /* Libre Baskerville heeft alleen een cursieve snede in gewicht 400.
     Vraag je 700, dan verzint de browser een vette cursief — dat is
     precies het verschil met het ontwerp. Dus hard op 400 houden. */
  font-weight:400 !important;
  color:inherit;
  background-image:linear-gradient(
    var(--color-content-secondary,#DECFBA),
    var(--color-content-secondary,#DECFBA)
  );
  background-size:100% .32em;
  background-position:0 94%;
  background-repeat:no-repeat;
  padding-inline:.06em;
}

/* Op donkere secties werkt de band niet; daar alleen de accentkleur,
   net als .on-dark .em in het ontwerp. */
.color_footer h1 i, .color_footer h2 i, .color_footer h3 i,
.l-section.color_footer h1 i, .l-section.color_footer h2 i,
.color_footer-bottom h1 i, .color_footer-bottom h2 i, .color_footer-bottom h3 i,
[class*="color_footer"] h1 i, [class*="color_footer"] h2 i, [class*="color_footer"] h3 i,
.us_custom_dark h1 i, .us_custom_dark h2 i{
  background-image:none !important;
  padding-inline:0;
  color:var(--color-content-secondary,#DECFBA);
}

/* Contactlijst — vertaling van .ways uit het ontwerp. */
.wf-ways{
  list-style:none;
  margin:2.4rem 0 0;
  padding:0;
  border-top:1px solid rgba(255,255,255,.14);
}
.wf-ways li{border-bottom:1px solid rgba(255,255,255,.14)}
.wf-ways a,
.wf-ways .static{
  display:flex;
  align-items:baseline;
  gap:18px;
  padding:18px 0;
  text-decoration:none;
  transition:padding-left .3s cubic-bezier(.22,.61,.36,1);
}
.wf-ways a:hover{padding-left:8px}
.wf-ways .k{
  width:118px;
  flex:none;
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#B6A991;
}
.wf-ways .v{
  font-family:var(--h1-font-family,Georgia,serif);
  font-weight:600;
  font-size:1.02rem;
  letter-spacing:-.01em;
  color:#FBF7F0;
}
.wf-ways a:hover .v{color:var(--color-content-secondary,#DECFBA)}

@media (max-width:760px){
  .wf-ways a,.wf-ways .static{flex-direction:column;gap:4px;padding:14px 0}
  .wf-ways .k{width:auto}
}

/* Formulier binnen de donkere kaart. */
.wf-formkaart .w-form-row-label{
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#B6A991;
  margin-bottom:7px;
}
.wf-formkaart input,
.wf-formkaart select,
.wf-formkaart textarea{
  background:#1E1913;
  border:1px solid var(--color-footer-border,#3E362C);
  border-radius:12px;
  color:#FBF7F0;
  font-size:.95rem;
  padding:12px 14px;
  transition:border-color .25s cubic-bezier(.22,.61,.36,1);
}
.wf-formkaart input:focus,
.wf-formkaart select:focus,
.wf-formkaart textarea:focus{
  border-color:var(--color-content-secondary,#DECFBA);
  outline:none;
}
.wf-formkaart textarea{min-height:118px;border-radius:16px;resize:vertical}

/* ── Contact Form 7 ────────────────────────────────────────
   Opgehangen aan .wf-cf7, de wrapper in de formuliercode zelf —
   niet aan een class op de kolom, want die haalt de HTML niet.
   Vertaling van .form / .field / .row uit het ontwerp. */

.wf-cf7{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.wf-cf7 > p{margin:0 0 14px}
.wf-cf7 > p:nth-of-type(n+5){grid-column:1 / -1}

.wf-cf7 label{
  display:block;
  font-family:var(--body-font-family,inherit);
  font-size:.75rem !important;
  line-height:1.2;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#B6A991;
  margin-bottom:7px;
}
.wf-cf7 label br{display:none}

.wf-cf7 input[type=text],
.wf-cf7 input[type=email],
.wf-cf7 input[type=tel],
.wf-cf7 select,
.wf-cf7 textarea{
  width:100%;
  height:auto !important;
  min-height:0 !important;
  background:#1E1913 !important;
  border:1px solid var(--color-footer-border,#3E362C) !important;
  border-radius:12px !important;
  box-shadow:none !important;
  color:#FBF7F0 !important;
  font-size:.95rem !important;
  line-height:1.4 !important;
  padding:12px 14px !important;
  transition:border-color .25s cubic-bezier(.22,.61,.36,1);
}
.wf-cf7 input:focus,
.wf-cf7 select:focus,
.wf-cf7 textarea:focus{
  border-color:var(--color-content-secondary,#DECFBA) !important;
  outline:none;
}
.wf-cf7 textarea{min-height:118px !important;border-radius:16px !important;resize:vertical}

.wf-cf7 input[type=submit]{
  width:100%;
  margin-top:6px;
  background:var(--color-content-secondary,#DECFBA) !important;
  border:1px solid var(--color-content-secondary,#DECFBA) !important;
  border-radius:4px !important;
  color:var(--color-content-heading,#241F19) !important;
  font-weight:600;
  font-size:.92rem !important;
  letter-spacing:.02em;
  padding:15px 26px !important;
  height:auto !important;
  cursor:pointer;
  transition:background .25s cubic-bezier(.22,.61,.36,1);
}
.wf-cf7 input[type=submit]:hover{background:#D3C0A6 !important;border-color:#D3C0A6 !important}

.wf-cf7 .wpcf7-not-valid-tip{color:#E6B8A2;font-size:.78rem;margin-top:5px}
.wf-cf7 .wpcf7-spinner{filter:invert(1) opacity(.6)}

.wpcf7 form .wpcf7-response-output{
  border-color:var(--color-footer-border,#3E362C) !important;
  color:#FBF7F0;
  font-size:.85rem;
  border-radius:12px;
  padding:12px 14px !important;
  margin:14px 0 0 !important;
}

@media (max-width:760px){
  .wf-cf7{grid-template-columns:1fr}
}