/*
Theme Name: Hart voor de Ziel
Theme URI: https://hartvoordeziel.nl
Author: Kim Elisabeth
Author URI: https://kimelisabeth.nl
Description: Maatwerk blokthema voor Hart voor de Ziel — praktijk voor bewustwording en healing. Rustig, warm en aards, opgebouwd uit vergrendelde blokken zodat teksten en afbeeldingen eenvoudig aanpasbaar zijn zonder dat het ontwerp verschuift.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hartvoordeziel
Tags: block-patterns, full-site-editing, one-column, custom-colors, custom-menu
*/

/* --- Basis --- */
body { -webkit-font-smoothing: antialiased; }

/* Rustiger leesritme in lange tekstblokken */
.hvz-prose p { max-width: 62ch; }

/* Zachte afbeeldingshoeken door de hele site */
.wp-block-image img,
.wp-block-cover { border-radius: 14px; }
.wp-block-cover.hvz-hero { border-radius: 0; }

/* Knoppen */
.wp-block-button__link {
  letter-spacing: .02em;
  transition: opacity .18s ease, transform .18s ease;
}
.wp-block-button__link:hover { opacity: .88; }

/* Kaarten */
.hvz-card {
  background: #fff;
  border: 1px solid #E2D8C9;
  border-radius: 14px;
  overflow: hidden;
  height: 100%;
}

/* Accordeon (details/summary) in huisstijl */
.hvz-faq details {
  border-bottom: 1px solid #E2D8C9;
  padding: 0;
}
.hvz-faq details summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.1rem;
  color: #46392F;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.hvz-faq details summary::-webkit-details-marker { display: none; }
.hvz-faq details summary::after {
  content: "+";
  font-family: "Lora", Georgia, serif;
  color: #B36A4A;
  font-size: 1.4rem;
  line-height: 1;
  flex: none;
}
.hvz-faq details[open] summary::after { content: "–"; }
.hvz-faq details > div { padding: 0 0 20px; color: #6E6357; }

/* Handgeschreven accent */
.hvz-hand {
  font-family: "Caveat", cursive;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.25;
}

/* Vaste mobiele contactbalk */
.hvz-mobilebar { display: none; }
@media (max-width: 781px) {
  .hvz-mobilebar {
    display: flex;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 90;
    background: #F2ECE3;
    border-top: 1px solid #E2D8C9;
    padding: 8px;
    gap: 8px;
  }
  .hvz-mobilebar a {
    flex: 1;
    text-align: center;
    padding: 11px 6px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    background: #fff;
    color: #46392F;
    border: 1px solid #E2D8C9;
  }
  .hvz-mobilebar a.is-primary {
    background: #5F6B52;
    color: #fff;
    border-color: #5F6B52;
  }
  body { padding-bottom: 68px; }
}

/* --- Hero: beeld en waas expliciet stapelen ---
   Sommige serverconfiguraties laden de cover-stijlen onvolledig, waardoor de
   kleurwaas het beeld volledig afdekt. Deze regels zetten de volgorde vast. */
.hvz-hero { position: relative; overflow: hidden; }
.hvz-hero .wp-block-cover__image-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hvz-hero .wp-block-cover__background {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .35;
}
.hvz-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
}

/* --- Kaarten strak uitlijnen ---
   Kolommen krijgen gelijke hoogte, beelden hetzelfde formaat en de
   "Lees meer"-link wordt naar de onderkant geduwd. Zo staan de randen
   en de links van alle kaarten op één lijn, ongeacht de tekstlengte. */
.wp-block-columns:not(.is-not-stacked-on-mobile) > .hvz-card { align-self: stretch; }

.hvz-card {
  display: flex;
  flex-direction: column;
}
.hvz-card > .wp-block-image { margin: 0; }
.hvz-card > .wp-block-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.hvz-card > .wp-block-group {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.hvz-card > .wp-block-group > :last-child {
  margin-top: auto;
  padding-top: 0.8rem;
  margin-bottom: 0;
}

/* Gelijke aanloop voor koppen in rasters van gelijke kolommen */
.wp-block-columns > .wp-block-column > .wp-block-heading:first-child { margin-top: 0; }

/* Consistente onderlijn: laatste alinea in een kolom niet laten nazakken */
.wp-block-column > :last-child { margin-bottom: 0; }

/* --- Links op donkere vlakken licht houden ---
   Terracotta leest slecht op olijfgroen. In de footer en op andere
   olijfgroene secties worden links linnenkleurig. */
footer a:not(.wp-element-button),
.has-olijfgroen-background-color a:not(.wp-element-button) {
  color: #F2ECE3 !important;
  text-decoration-color: rgba(242, 236, 227, .45);
  text-underline-offset: 3px;
}
footer a:not(.wp-element-button):hover,
.has-olijfgroen-background-color a:not(.wp-element-button):hover {
  color: #FFFFFF !important;
  text-decoration-color: rgba(255, 255, 255, .8);
}

/* Kolommen altijd even hoog, zodat kaartranden op één lijn eindigen */
.wp-block-columns.is-layout-flex { align-items: stretch; }
.wp-block-columns > .wp-block-column.hvz-card { align-self: stretch; height: auto; }

/* =========================================================================
   TERRACOTTA ALS ZICHTBAAR ACCENT
   In het moodboard staat terracotta (#B36A4A) als accentkleur: het dunne
   streepje onder de kop, de kleine hartjes, de aanhalingstekens. Die rol
   krijgt hij hier terug, zodat de kleur ook echt in het ontwerp meedoet.
   ========================================================================= */

/* Fijn streepje onder elke gecentreerde sectiekop */
h2.wp-block-heading.has-text-align-center::after,
h1.wp-block-heading.has-text-align-center::after {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  margin: 1.15rem auto 0;
  background: var(--wp--preset--color--terracotta);
  opacity: .9;
}

/* Op olijfgroene vlakken wordt het streepje zandtaupe, anders vloekt het */
.has-olijfgroen-background-color h2.wp-block-heading.has-text-align-center::after {
  background: var(--wp--preset--color--zandtaupe);
}

/* Stapnummers 01 · 02 · 03 in terracotta in plaats van zandtaupe */
.wp-block-column > p.hvz-hand.has-zandtaupe-color {
  color: var(--wp--preset--color--terracotta) !important;
}

/* Tweede knop (omlijnd) in terracotta */
.wp-block-button.is-style-outline > .wp-block-button__link {
  color: var(--wp--preset--color--terracotta) !important;
  border-color: var(--wp--preset--color--terracotta);
  background: transparent;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: var(--wp--preset--color--terracotta);
  color: var(--wp--preset--color--linnen-licht) !important;
}

/* Kaarten krijgen een terracotta streepje bovenaan de tekst */
.hvz-card > .wp-block-group > .wp-block-heading:first-child::before {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin-bottom: .9rem;
  background: var(--wp--preset--color--terracotta);
  opacity: .9;
}

/* Aanhalingsteken bij de ervaringen */
.has-olijfgroen-background-color p.hvz-hand::before {
  content: "❤";
  display: block;
  color: var(--wp--preset--color--terracotta);
  font-family: "Lora", Georgia, serif;
  font-size: 1rem;
  margin-bottom: .5rem;
}

/* Uitklapvragen: terracotta plus- en minteken al aanwezig, lijn erbij */
.hvz-faq details[open] summary { color: var(--wp--preset--color--terracotta); }

/* Opsommingstekens in terracotta */
.wp-block-list li::marker { color: var(--wp--preset--color--terracotta); }

/* =========================================================================
   LEVEN, MAAR RUSTIG
   Geen schokkerige effecten of felle bewegingen. Alles is traag, klein en
   eenmalig — het soort beweging dat je meer voelt dan ziet. Wie in zijn
   systeem "verminderde beweging" heeft aanstaan, krijgt niets hiervan.
   ========================================================================= */

/* 1. Secties komen zacht in beeld tijdens het scrollen */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    main > .wp-block-group:not(.hvz-hero),
    main > .wp-block-cover:not(.hvz-hero) {
      animation: hvz-rijzen linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
    @keyframes hvz-rijzen {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: translateY(0); }
    }
  }
}

/* 2. De hero ademt: heel langzame inzoom op het beeld */
@media (prefers-reduced-motion: no-preference) {
  .hvz-hero .wp-block-cover__image-background {
    animation: hvz-ademen 34s ease-in-out infinite alternate;
    transform-origin: 52% 55%;
  }
  @keyframes hvz-ademen {
    from { transform: scale(1); }
    to   { transform: scale(1.07); }
  }
}

/* 3. Kaarten reageren zacht op aanraking */
.hvz-card {
  transition: transform .5s cubic-bezier(.22,.61,.36,1),
              box-shadow .5s cubic-bezier(.22,.61,.36,1),
              border-color .5s ease;
}
.hvz-card > .wp-block-image { overflow: hidden; }
.hvz-card > .wp-block-image img {
  transition: transform 1.1s cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) {
  .hvz-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 34px rgba(70, 57, 47, .10);
    border-color: var(--wp--preset--color--zandtaupe);
  }
  .hvz-card:hover > .wp-block-image img { transform: scale(1.05); }
}

/* 4. Knoppen krijgen lichte diepte */
.wp-block-button__link {
  transition: transform .35s cubic-bezier(.22,.61,.36,1),
              box-shadow .35s ease, background-color .35s ease, color .35s ease;
}
@media (hover: hover) {
  .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(95, 107, 82, .22);
    opacity: 1;
  }
}

/* 5. Meer sprong tussen kop en tekst geeft rust én ritme */
h2.wp-block-heading { letter-spacing: -.012em; }
.hvz-prose p, .wp-block-column > p { line-height: 1.8; }

/* 6. Het handgeschreven accent iets levendiger laten staan */
.hvz-hand { transform: rotate(-1.2deg); display: inline-block; }
p.hvz-hand.has-text-align-center { display: block; }

/* 7. Zachte scheidingslijn tussen lichte secties, zodat vlakken ademen */
.has-linnen-background-color + .has-linnen-licht-background-color,
.has-linnen-licht-background-color + .has-linnen-background-color {
  box-shadow: inset 0 1px 0 rgba(203, 185, 163, .35);
}

/* 8. Uitklapvragen openen vloeiend */
.hvz-faq details > div { animation: hvz-vouwen .4s ease both; }
@keyframes hvz-vouwen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}