/* ==================================================================
   watwijdoen.css  -  losse CSS bij page-onze-zorg.php (/onze-zorg/).
   Bron: ruw/uve - wat wij doen ontwerp mobiel en desktop/export-wat-wij-doen/
         _plat/pagina-wat-wij-doen.html (het <style>-blok uit <helmet> en het
         blok <style data-plat="hover">).
   De hele indeling/opmaak zit in de inline-styles in page-onze-zorg.php; de
   tokens (kleur, vorm, schaduw, motion-keyframes erika-drift/-drift2/-morph)
   komen uit tokens-erika.css.

   DIT BESTAND IS DE BASIS EN DE DESKTOPWEERGAVE. Alle breekpunten staan
   apart in watwijdoen-mobiel.css, dat hierna laadt. Zo is aan de ene weergave
   te sleutelen zonder de andere te raken.

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

/* Achtergrondkleur van sectie 2. In het ontwerp zet support.js deze variabele
   op <html>; hier staat hij vast op het sjabloon. De golf boven de sectie en de
   ringetjes om de stippen lezen dezelfde variabele. */
.wwd { --wwd-s2: #f4ece6; }

html { scroll-behavior: smooth; }

/* ---------- uitklapbare vragen ---------- */
/* Het ontwerp tekent een eigen +/x-glyph en verbergt de browserdriehoek. */
.wwd details > summary { list-style: none; }
.wwd details > summary::-webkit-details-marker { display: none; }
.wwd details[open] .erika-plus { transform: rotate(45deg); }

/* ---------- hover-toestanden, uit data-plat="hover" ---------- */
/* In de export heten deze klassen dc-hover-13 t/m dc-hover-39. Ze zijn hier
   hernoemd naar sprekende namen en gescoped onder .wwd, want dc-hover-<n>
   betekent in elk ontwerp iets anders en botst anders met werkgebied.css en
   over-erika.css. */
/* De klikbare rijen onder Voorbereiden, Begeleiden en Inspireren komen bij
   hover licht omhoog. Dit vervangt de padding-left-verschuiving uit het
   ontwerp, op verzoek: een rij die tegelijk naar rechts en omhoog gaat, drijft
   schuin weg en leest als een fout. -2px is de sitebrede hoogte voor dit
   gebaar (--lift-hover in tokens-erika.css). De lichte wassing eronder maakt
   duidelijk dat de hele rij het raakvlak is, niet alleen de tekst; de rij
   houdt zijn scheidingslijn, die komt mee omhoog.
   De transition staat inline in het sjabloon, want inline styles winnen. */
.wwd .wwd-rij:hover {
  transform: translateY(-2px);
  background: rgba(74,52,97,.035);
  /* Asymmetrische hoeken, zoals alle vlakken op deze site. Staat alleen in de
     hover-regel: zonder wassing valt er niets af te ronden. De radius zit niet
     in de transition, want een meebewegende hoek leidt af van het optillen. */
  border-radius: 12px 9px 12px 9px;
}
.wwd .wwd-tel-xl:hover { border-color: #fff; color: #eaf3ef; }
.wwd .wwd-knop-bel:hover { transform: translateY(-2px); background: #eaf3ef; }

/* ---------- 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. Het telefoonnummer uit het ontwerp heeft "border-color" alleen in zijn
   transition staan en krijgt 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. */
.wwd .wwd-tel-xl {
  border-top-style: none;
  border-right-style: none;
  border-left-style: none;
}

/* ---------- links ---------- */
/* Lopende tekst: cursief, verder onopvallend. Geldt hier voor de antwoorden bij
   de vragen en voor de bundelrij "Begraven of cremeren". De linkrijen in de
   pijlers zijn navigatie, geen lopende tekst; die houden hun ontwerpkleur. */
.wwd p a,
.wwd .wwd-rij-bundel a { color: inherit; font-style: italic; text-decoration: none; }
.wwd p a:hover,
.wwd .wwd-rij-bundel a:hover { color: var(--aubergine); }
.wwd p a[href^="tel:"] { font-style: normal; color: inherit; }
.wwd :focus-visible { outline: 2px solid var(--aubergine); outline-offset: 3px; border-radius: 6px; }

/* ---------- reveal bij het in beeld komen ---------- */
/* De vlag data-reveal-ready wordt door het sjabloon gezet. Staat JavaScript uit,
   dan wordt niets gedimd en is de pagina meteen leesbaar.
   Elk onderdeel komt apart op, niet het blok als geheel: kop, tekst, foto,
   bolletje en elke linkrij hebben hun eigen data-reveal. De volgorde komt uit
   --reveal-d, dat het sjabloon per element inline zet.
   14px verschuiving en geen enkele schaal of draai: het publiek is hier omdat
   er iemand is overleden. De beweging mag opvallen noch haasten. */
/* De verschuiving gaat via de losse eigenschap `translate` en NIET via
   `transform`. Twee redenen, allebei stuk gegaan voordat dit zo stond:
     - de linkrijen gebruiken `transform` al voor hun hover-lift. Eén van de twee
       zou de ander overschrijven;
     - het bolletje op de middenlijn staat op transform:translate(-50%,-50%) om
       gecentreerd te blijven. Een reveal op transform zet het naast de lijn.
   `translate` en `transform` stapelen op elkaar, dus geen van beide hindert. */
html[data-reveal-ready] .wwd [data-reveal] {
  opacity: 0;
  translate: 0 var(--reveal-y, 14px);
  transition:
    opacity   var(--reveal-dur, 1.05s) var(--ease-reveal) var(--reveal-d, 0s),
    translate var(--reveal-dur, 1.05s) var(--ease-reveal) var(--reveal-d, 0s);
}
html[data-reveal-ready] .wwd [data-reveal][data-in] { opacity: 1; translate: 0 0; }

/* De foto's mogen iets verder van beneden komen dan de tekst; een groot vlak
   dat maar 14px beweegt leest als een sprong. */
html[data-reveal-ready] .wwd [data-reveal][style*="aspect-ratio"] { --reveal-y: 30px; }

/* Het bolletje verschuift niet, het komt alleen op. Het markeert een plek op de
   lijn; die plek hoort niet te bewegen. */
html[data-reveal-ready] .wwd [data-pad-stip][data-reveal] { --reveal-y: 0px; }

/* De linkrijen: hover en reveal in één transition. Dit MOET hier staan en niet
   inline in het sjabloon. Een inline transition wint van de stylesheet, en toen
   die alleen transform en background noemde, sprongen de rijen van onzichtbaar
   naar zichtbaar in plaats van op te komen. Zo gemeten: opacity 0.00 -> 1.00
   binnen 100ms, terwijl foto en tekst er ruim een seconde over deden. */
.wwd .wwd-rij {
  transition:
    transform  var(--dur-ui) var(--ease-soft),
    background var(--dur-ui) var(--ease-soft);
}
html[data-reveal-ready] .wwd .wwd-rij[data-reveal] {
  transition:
    transform  var(--dur-ui) var(--ease-soft),
    background var(--dur-ui) var(--ease-soft),
    opacity    var(--reveal-dur, 1.05s) var(--ease-reveal) var(--reveal-d, 0s),
    translate  var(--reveal-dur, 1.05s) var(--ease-reveal) var(--reveal-d, 0s);
}

/* ---------- 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 dat ook van links naar rechts verkleurt. Waar een
   vlakke golf tegen een gewaasde sectierand komt, staat een streep.
   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 en de waas blijven, alleen de laatste centimeter is weer vlak.
   z-index 1: boven de waas en de blobs, onder de inhoud (die staat op 3).
   Nulkleuren staan als rgba(...,0) van dezelfde kleur, niet als transparent:
   transparent is doorzichtig zwart en verloopt in sommige browsers grijzig. */
.wwd .wwd-sec::before,
.wwd .wwd-sec::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 120px;
  pointer-events: none;
  z-index: 1;
}
.wwd .wwd-sec::before { top: 0; }
.wwd .wwd-sec::after  { bottom: 0; }
/* De inhoud staat in het ontwerp al op position:relative; alleen optillen. */
.wwd .wwd-sec > div[style*="max-width"] { z-index: 3; }

/* De laatste 22% van elke uitdoving is vlak, niet nog steeds verlopend. Loopt
   het verloop door tot precies op de rand, dan verschilt de laatste beeldrij
   nog één eenheid van de eerste rij eronder; dat haalt de naadmeting eruit
   (2,5 op slot -> voet) terwijl het oog het niet ziet. Met een vlakke staart
   is de rand over de volle breedte exact de kleur van de golf ernaast. */

/* intro -> pijlers: de golf onderin de intro heeft de kleur van sectie 2 */
.wwd .wwd-pijlers::before { background: linear-gradient(to bottom, #f4ece6 0%, #f4ece6 22%, rgba(244,236,230,0) 100%); }
/* pijlers -> vragen: de golf onderin de pijlers is papier */
.wwd .wwd-faq::before     { background: linear-gradient(to bottom, var(--paper) 0%, var(--paper) 22%, rgba(250,245,236,0) 100%); }
/* vragen -> slot: de golf bovenin het slot is papier */
.wwd .wwd-faq::after      { background: linear-gradient(to bottom, rgba(250,245,236,0) 0%, var(--paper) 78%, var(--paper) 100%); }
/* slot -> voet: de golf boven de voet is #24463f (zie hieronder) */
.wwd .wwd-slot::after     { background: linear-gradient(to bottom, rgba(36,70,63,0) 0%, #24463f 78%, #24463f 100%); }

/* ---------- 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; }

/* ---------- minder beweging ---------- */
/* tokens-erika.css zet transitions en animaties al bijna uit. Hier blijft over:
   de vloeiende sprong, en het meteen tonen van alles wat op reveal wacht. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html[data-reveal-ready] .wwd [data-reveal] { opacity: 1; translate: none; transition: none; }
}