/* ==================================================================
   contact.css  -  losse CSS bij page-contact.php.
   Bron: ruw/uve contact pagina Uitvaartverzorging sectie herontwerp/_plat/
         pagina-contact.html (de <style>- en <style data-plat="hover">-blokken).
   De hele indeling/opmaak zit in de inline-styles in page-contact.php; de
   tokens (kleur, vorm, schaduw, motion-keyframes erika-drift/-drift2/-morph)
   komen uit tokens-erika.css.

   Wat hier staat en waarom:
     - de hover-toestanden uit het ontwerp, gescoped onder .ct zodat ze niet
       botsen met de dc-hover-regels in werkgebied.css en over-erika.css;
     - de veld-regels uit het globale <style>-blok van het ontwerp (font in
       inputs, placeholderkleur, focusring). Zonder die regels vallen de velden
       terug op de systeemfont van de browser;
     - de linkconventie van de site: links in lopende tekst uitsluitend cursief,
       geen onderstreping en geen eigen kleur. home.css zet a{color:inherit}
       sitebreed, dus de a-regel uit het ontwerp is hier niet overgenomen; die
       zou bovendien de kop en de voet herkleuren;
     - de mobiele afstelling. Het ontwerp is één breedte en heeft geen
       breekpunten; de inline-maten (44px zijmarge, 118-134px sectiehoogte)
       zijn op een telefoon te royaal. Alleen die maten worden overschreven,
       en met !important omdat het inline-styles zijn. Vorm, kleur en beweging
       blijven onaangeroerd.

   Deze stylesheet laadt alleen op /contact/, dus de footer-regel onderaan
   raakt geen andere pagina. Zelfde aanpak als eenoverlijden.css.
   ================================================================== */

html { scroll-behavior: smooth; }

/* ---------- hover-toestanden, letterlijk uit data-plat="hover" ---------- */
.ct .dc-hover-1:hover { border-color: var(--aubergine); color: var(--aubergine-deep); }
.ct .dc-hover-2:hover { background: var(--aubergine-deep); transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
/* dc-hover-3 en dc-hover-7 stonden hier tot 2026-09-09. Dat waren de twee groene
   WhatsApp-toestanden; met de knoppen zijn ook deze regels vervallen. Ze zijn op
   die datum nagemeten: geen enkel sjabloon gebruikt die klassen nog. De nummers
   blijven wel over, want ze komen letterlijk uit de ontwerpexport; hernummeren
   zou de rest laten verspringen. */
.ct .dc-hover-4:hover { background: var(--action-ghost-wash); border-color: var(--aubergine); transform: translateY(-2px); }
.ct .dc-hover-5:hover { background: var(--aubergine-deep); transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.ct .dc-hover-6:hover { border-color: #fff; color: #eaf3ef; }
.ct .dc-hover-8:hover { background: rgba(255,255,255,.1); border-color: #fff; transform: translateY(-2px); }

/* ---------- formuliervelden ---------- */
.ct input, .ct select, .ct textarea {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--ink);
}
.ct input::placeholder, .ct textarea::placeholder { color: var(--ink-mist); font-weight: 300; opacity: 1; }
.ct input:focus, .ct select:focus, .ct textarea:focus {
  outline: none;
  border-color: var(--field-border-focus);
  box-shadow: 0 0 0 3px var(--aubergine-mist);
}
.ct :focus-visible { outline: 2px solid var(--aubergine); outline-offset: 3px; border-radius: 6px; }
/* De verzendknop is een <button>: die erft de font niet vanzelf op Safari. */
.ct button { font-family: var(--font-body); }

/* ---------- kader om het grote telefoonnummer weghalen ---------- */
/* WordPress laadt sitebreed wp-block-library met daarin:
     html :where([style*=border-color]){border-style:solid}
   Die selector kijkt naar de tékst van het style-attribuut, niet naar wat er
   staat. De twee telefoonnummers uit het ontwerp hebben "border-color" alleen
   in hun transition staan, en krijgen daardoor aan alle vier de kanten
   border-style:solid. Zonder opgegeven breedte wordt dat 'medium' (3px) in
   currentColor: een kader in plaats van de onderstreep uit het ontwerp.
   Alleen de onderrand hoort te blijven staan. */
.ct .ct-tel-xl {
  border-top-style: none;
  border-right-style: none;
  border-left-style: none;
}

/* ---------- links ---------- */
/* Lopende tekst: cursief, verder onopvallend. Telefoonnummers blijven rechtop
   en krijgen wel de merkkleur; cursieve cijfers lezen slecht. */
.ct p a { color: inherit; font-style: italic; text-decoration: none; }
.ct p a:hover { color: var(--aubergine); }
.ct p a[href^="tel:"] { font-style: normal; color: inherit; }
.ct .ct-inl { color: inherit; font-style: italic; text-decoration: none; }
.ct .ct-inl:hover { color: var(--aubergine); }
/* Gegevensblok: telefoon en e-mail zijn hier zelfstandige waarden, geen
   lopende tekst. Die krijgen de merkkleur, zoals in het ontwerp. */
.ct dl a { color: var(--aubergine); }
.ct dl a:hover { color: var(--aubergine-deep); }
.ct dl .ct-inl:hover { color: var(--aubergine-deep); }

/* ---------- melding na verzenden ---------- */
/* .ef-notice zelf staat in home.css; hier alleen de plaatsing in het paneel. */
.ct .ef-notice { margin: 0 0 26px; }
.ct .ef-notice a { color: inherit; font-weight: 500; white-space: nowrap; }

/* ---------- naden tussen de secties ---------- */
/* Elke golf tussen twee secties is één vlakke kleur. De secties zelf zijn dat
   niet: het ontwerp legt er radiale waas overheen, en de slotsectie heeft een
   verloop van 155 graden. Waar een vlakke golf tegen een gewaasde sectierand
   komt, staat een streep. Bij de slotsectie is die het duidelijkst, want daar
   verschilt de kleur van de onderrand ook nog van links naar rechts.
   Oplossing: de rand waar de naad valt over de laatste 120px laten uitdoven
   naar de kale grondkleur, precies de kleur die de golf ernaast heeft. Het
   verloop blijft, alleen de laatste centimeter is weer vlak.
   z-index 1: boven de waas en de blobs, onder de inhoud (die staat op 3). */
.ct .ct-sec::before,
.ct .ct-sec::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 120px;
  pointer-events: none;
  z-index: 1;
}
.ct .ct-sec::before { top: 0; }
.ct .ct-sec::after  { bottom: 0; }
/* De inhoud staat in het ontwerp al op position:relative; alleen optillen. */
.ct .ct-sec > div[style*="max-width"] { z-index: 3; }

/* hero -> adres: de golf onderin de hero is crème, de bovenrand van adres niet */
.ct .ct-adres::before { background: linear-gradient(to bottom, var(--cream), rgba(241,232,216,0)); }
/* adres -> formulier: de golf bovenin het formulier is crème */
.ct .ct-adres::after  { background: linear-gradient(to bottom, rgba(241,232,216,0), var(--cream)); }
/* formulier -> slot: de golf bovenin het slot is papier */
.ct .ct-form::after   { background: linear-gradient(to bottom, rgba(250,245,236,0), var(--paper)); }
/* slot -> voet: de golf boven de voet is #24463f (zie hieronder) */
.ct .ct-slot::after   { background: linear-gradient(to bottom, rgba(36,70,63,0), #24463f); }

/* ---------- aansluiting op de voet ---------- */
/* De slotsectie eindigt in #24463f; de golf boven de voet is standaard
   var(--paper) en zou daar als een crèmeband tussen komen te staan. */
footer::before { background: #24463f; }

/* ---------- mobiel ---------- */
@media (max-width: 900px) {
  .ct .ct-sec { padding-left: 30px !important; padding-right: 30px !important; }
}

@media (max-width: 720px) {
  .ct .ct-sec { padding-left: 24px !important; padding-right: 24px !important; }
  .ct .ct-hero  { padding-top: 76px !important;  padding-bottom: 92px !important; }
  .ct .ct-adres { padding-top: 88px !important;  padding-bottom: 92px !important; }
  .ct .ct-form  { padding-top: 88px !important;  padding-bottom: 96px !important; }
  .ct .ct-slot  { padding-top: 88px !important;  padding-bottom: 96px !important; }
  /* De kaarten in het gegevensblok en het formulierpaneel wat minder ruim. */
  .ct .ct-card  { padding: 28px 24px 26px !important; }
  .ct .ct-panel { padding: 26px 20px 30px !important; }
  /* Het grote telefoonnummer past bij clamp-ondergrens 34px net niet op een
     smal scherm; hier gaat het omlaag zonder de desktopmaat te raken. */
  .ct .ct-tel-xl { font-size: 32px !important; }
}

@media (max-width: 560px) {
  /* Knoppen onder elkaar en over de volle breedte: het publiek is vaak ouder,
     een raakvlak van 48px hoog en de hele kolom breed is comfortabeler dan
     drie pillen die over drie regels breken. */
  /* width:100% op de knoppen alleen is niet genoeg: de rij staat in een
     kolom met align-items:center en krimpt dan mee met haar inhoud. */
  .ct .ct-btns { flex-direction: column; align-items: stretch; gap: 12px !important; width: 100%; }
  .ct .ct-btns > a { width: 100%; }
  .ct .ct-submit > button { width: 100%; }
  .ct .ct-tel-xl { font-size: 30px !important; }
}

@media (max-width: 380px) {
  .ct .ct-tel-xl { font-size: 27px !important; }
}

/* ---------- minder beweging ---------- */
/* tokens-erika.css zet transitions en animaties al bijna uit; de vloeiende
   sprong naar #contactformulier hoort daar ook bij. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}