/*
Theme Name: Karuma
Theme URI: https://karuma.nl
Author: Karuma
Description: Eigen blokthema voor karuma.nl. Trauma-informed design op de goedgekeurde v5.1-bouwstandaard (Duinlicht, ademlijn, ochtendzon, ronde vormen) met Nachtduin-paginatemplate voor /zakelijk/. Lexend variabel font, core-blokken + eigen componentklassen.
Version: 0.9.4
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: karuma
*/


/* ═══════════════════════════════════════════════════════════════
   KARUMA COMPONENTBIBLIOTHEEK v5.1 — signatuurklassen voor patterns
   (rond & ochtend voor mensen; de Nachtduin-variant kleurt via styles/zakelijk.json)
   ═══════════════════════════════════════════════════════════════ */
:root{
  --karuma-lijn: rgba(38,48,44,.14);
  --karuma-radius: 18px;
  --karuma-schaduw: 0 1px 2px rgba(38,48,44,.05), 0 6px 24px -12px rgba(38,48,44,.10);
  --karuma-radius-s: 12px;
}
.is-style-zakelijk, .zakelijk :root { --karuma-lijn: rgba(242,239,230,.16); }

/* — Hero met ochtendzon en ademlijn — */
.karuma-hero{position:relative;overflow:hidden}
.karuma-hero > *{position:relative;z-index:2}
.karuma-hero-zon{position:absolute;right:-8%;top:-14%;width:min(46vw,520px);aspect-ratio:1;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 42% 42%, rgba(192,95,65,.15), rgba(192,95,65,.04) 55%, transparent 72%)}
.karuma-ademlijn{position:absolute;left:0;right:0;bottom:-2px;z-index:1;pointer-events:none}
.karuma-ademlijn svg{display:block;width:100%;height:clamp(110px,17vw,210px)}
.karuma-adem-a{animation:karuma-adem 7s ease-in-out infinite}
.karuma-adem-b{animation:karuma-adem 7s ease-in-out -3.5s infinite;opacity:.6}
@keyframes karuma-adem{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@media (prefers-reduced-motion:reduce){.karuma-adem-a,.karuma-adem-b{animation:none}}

/* — Hairline-grid met ronde buitenrand — */
.karuma-grid-lijnen{gap:1px !important;background:var(--karuma-lijn);border:1px solid var(--karuma-lijn);
  border-radius:var(--karuma-radius);overflow:hidden}
.karuma-grid-lijnen > *{background:var(--wp--preset--color--duinlicht);margin:0 !important}
.karuma-grid-lijnen > .karuma-cel-accent{background:var(--wp--preset--color--schuim)}

/* — Kaartengrid: ervaringen & protocollen (v0.9.2, conform homepage-mockup) — */
.karuma-kaarten{gap:1.4rem !important}
.karuma-kaarten > .wp-block-column{
  background:var(--wp--preset--color--schuim);border:1px solid var(--wp--preset--color--helmgras);
  border-radius:var(--karuma-radius);box-shadow:var(--karuma-schaduw);
  display:flex;flex-direction:column;gap:.8rem}
.karuma-kaarten > .wp-block-column > *{margin-block:0}
.karuma-kaarten .wp-block-quote{border:0;padding:0;margin:0;font-style:normal;font-weight:360}
.karuma-kaarten .wp-block-quote p{margin:0}
.karuma-kaarten .wp-block-quote cite{display:block;margin-top:1rem;font-style:normal;
  font-size:.9rem;color:var(--wp--preset--color--drifthout)}
.karuma-kaarten .wp-block-buttons{margin-top:auto !important;padding-top:1rem}

/* — Fotoband-slot (v0.9.3, conform v5-bouwstandaard): zichtbaar zee-verloop
   tot de strandshoot landt; daarna vervangt de echte foto de binnenkant.
   v0.9.4: alleen desktop (≥1024px) — mobiel/tablet blijven snel en clean;
   met loading="lazy" op de latere foto downloadt mobiel het beeld ook echt niet. — */
.karuma-fotoband{display:none}
@media (min-width:1024px){.karuma-fotoband{display:block}}
.karuma-fotoband-beeld{height:clamp(260px,40vw,440px);position:relative;
  border-radius:var(--karuma-radius);overflow:hidden;
  background:linear-gradient(180deg,#DCE6E0 0%,#BFD4CB 45%,#8FB5AA 68%,#D9D4C0 88%,#EFEAD8 100%);
  box-shadow:0 2px 4px rgba(38,48,44,.04),0 20px 50px -28px rgba(38,48,44,.22)}
.karuma-fotoband-beeld::after{content:"";position:absolute;left:0;right:0;top:64%;height:1px;
  background:rgba(255,255,255,.55)}
.karuma-fotoband-beeld .karuma-fotoband-notitie{position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;color:rgba(38,48,44,.5);font-size:.85rem;
  text-align:center;padding:1rem;margin:0;max-width:none}
.karuma-fotoband-beeld .karuma-fotoband-bijschrift{position:absolute;left:0;right:0;bottom:1.3rem;
  text-align:center;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--wp--preset--color--drifthout);margin:0;max-width:none}
.karuma-fotoband-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.karuma-kaarten > .karuma-kaart-accent{
  background:var(--wp--preset--color--helmgras);border:none;box-shadow:none;
  justify-content:center;text-align:center}


/* — Cijferband — */
.karuma-cijferband{border-top:1px solid var(--karuma-lijn);border-bottom:1px solid var(--karuma-lijn)}
.karuma-cijfer strong{display:block;font-size:1.7rem;font-weight:600;color:var(--wp--preset--color--zeeglas-diep);letter-spacing:-.01em}

/* — Drie staten — */
.karuma-staten{display:flex;flex-direction:column;gap:.7rem}
.karuma-staat{border-radius:var(--karuma-radius-s);padding:1rem 1.3rem;color:#fff;display:flex;justify-content:space-between;gap:1.2rem;align-items:baseline}
.karuma-staat--v{background:var(--wp--preset--color--zeeglas)}
.karuma-staat--s{background:var(--wp--preset--color--koraal-diep)}
.karuma-staat--d{background:#5B6E68}

/* — Fotoband — */
.karuma-fotoband{border-radius:var(--karuma-radius);overflow:hidden;position:relative;
  box-shadow:0 2px 4px rgba(38,48,44,.04),0 20px 50px -28px rgba(38,48,44,.22)}
.karuma-fotoband img{display:block;width:100%;height:clamp(260px,40vw,440px);object-fit:cover}
.karuma-fotoband figcaption{position:absolute;left:0;right:0;bottom:1.3rem;text-align:center;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(38,48,44,.66)}

/* — Prijsblok, keuzehulp, zekerheden — */
.karuma-prijsblok{border:1px solid var(--karuma-lijn);border-radius:var(--karuma-radius)}
.karuma-zekerheden li{list-style:none}
.karuma-zekerheden li::before{content:"✓";color:var(--wp--preset--color--zeeglas-diep);font-weight:600;margin-right:.5rem}
.karuma-keuzehulp-regel{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:baseline;padding:1.3rem 0;border-bottom:1px solid var(--karuma-lijn)}

/* — FAQ (ronde kaarten, core details-blok) — */
.karuma-faq details{background:var(--wp--preset--color--schuim);border:1px solid var(--karuma-lijn);
  border-radius:var(--karuma-radius-s);padding:1.1rem 1.3rem;margin-bottom:.8rem}
.karuma-faq summary{font-weight:480;cursor:pointer}

/* — Formulieren (mu-plugin + WooCommerce) — */
.karuma-formulier input:not([type=checkbox]):not([type=radio]), .karuma-formulier select, .karuma-formulier textarea{
  width:100%;background:var(--wp--preset--color--schuim);border:1px solid var(--karuma-lijn);
  border-radius:var(--karuma-radius-s);padding:.8rem 1rem;font:inherit;color:var(--wp--preset--color--nachtduin)}
.karuma-formulier input:focus, .karuma-formulier textarea:focus, .karuma-formulier select:focus{
  outline:2px solid var(--wp--preset--color--zeeglas-diep);outline-offset:2px}
.karuma-optie{display:flex;gap:.6rem;align-items:flex-start;cursor:pointer}
.karuma-optie input{width:auto;flex:none;margin-top:.25rem;accent-color:var(--wp--preset--color--zeeglas-diep)}

/* — WooCommerce-checkout op de standaard (bump-stijl komt uit de funnel-plugin) — */
.woocommerce-checkout .karuma-bump, .karuma-bump{border:2px solid var(--wp--preset--color--zeeglas);
  border-radius:var(--karuma-radius-s);background:var(--wp--preset--color--duinlicht)}

/* — Crisis-kaart — */
.karuma-crisis-kaart{border:2px solid var(--wp--preset--color--koraal-diep);border-radius:var(--karuma-radius);
  background:var(--wp--preset--color--schuim)}

/* — Kennisbank-artikel — */
.karuma-inhoudsopgave{background:var(--wp--preset--color--schuim);border:1px solid var(--karuma-lijn);
  border-radius:var(--karuma-radius-s)}
.karuma-eerlijkkader{border-left:3px solid var(--wp--preset--color--koraal-diep);
  background:var(--wp--preset--color--schuim);border-radius:0 var(--karuma-radius-s) var(--karuma-radius-s) 0}

/* — Sticky header met blur — */
.karuma-header{position:sticky;top:0;z-index:40;backdrop-filter:blur(10px);
  background:color-mix(in srgb, var(--wp--preset--color--duinlicht) 92%, transparent);
  border-bottom:1px solid var(--karuma-lijn)}


/* ═══════════════════════════════════════════════════════════════
   WOOCOMMERCE OP DE KARUMA-STANDAARD (v5.1)
   De funnel-mu-plugin regelt de logica (slanke velden, bump, aanvulling);
   dit blok regelt dat de kassa er automatisch uitziet als de rest van de site.
   ═══════════════════════════════════════════════════════════════ */

/* — Velden: dezelfde taal als karuma-formulier — */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce form .form-row .select2-selection{
  background:var(--wp--preset--color--schuim);border:1px solid var(--karuma-lijn);
  border-radius:var(--karuma-radius-s);padding:.8rem 1rem;font:inherit;height:auto;
  color:var(--wp--preset--color--nachtduin)}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus{
  outline:2px solid var(--wp--preset--color--zeeglas-diep);outline-offset:2px;box-shadow:none}
.woocommerce form .form-row label{font-size:.85rem;font-weight:480}
.woocommerce form .form-row.woocommerce-invalid label{color:var(--wp--preset--color--koraal-diep)}
.woocommerce form .form-row input[type=checkbox]{width:auto;accent-color:var(--wp--preset--color--zeeglas-diep)}

/* — Doorzoekbaar landveld (SelectWoo) — */
.woocommerce .select2-container--default .select2-selection--single{
  background:var(--wp--preset--color--schuim);border:1px solid var(--karuma-lijn);
  border-radius:var(--karuma-radius-s);height:auto;padding:.55rem .6rem}
.select2-dropdown{border:1px solid var(--karuma-lijn);border-radius:var(--karuma-radius-s)}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:var(--wp--preset--color--zeeglas);color:#fff}

/* — Besteloverzicht & betaalblok als kaart — */
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading{
  background:var(--wp--preset--color--schuim)}
.woocommerce-checkout #order_review{
  border:1px solid var(--karuma-lijn);border-radius:var(--karuma-radius);padding:1.8rem}
.woocommerce table.shop_table{border:0}
.woocommerce table.shop_table td,.woocommerce table.shop_table th{
  border-top:0;border-bottom:1px solid var(--karuma-lijn)}
.woocommerce table.shop_table .order-total td,.woocommerce table.shop_table .order-total th{
  border-bottom:0;color:var(--wp--preset--color--zeeglas-diep);font-size:1.1rem}
.woocommerce-checkout #payment{background:transparent;border-radius:0}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:0;padding:0}
.woocommerce-checkout #payment ul.payment_methods li{
  border:1px solid var(--karuma-lijn);border-radius:var(--karuma-radius-s);
  padding:.75rem 1rem;margin-bottom:.6rem;list-style:none}
.woocommerce-checkout #payment ul.payment_methods li:hover{border-color:var(--wp--preset--color--zeeglas)}
.woocommerce-checkout #payment div.payment_box{background:var(--wp--preset--color--helmgras);border-radius:var(--karuma-radius-s)}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:var(--wp--preset--color--helmgras)}
.woocommerce-checkout #payment input[type=radio]{accent-color:var(--wp--preset--color--zeeglas-diep)}

/* — Knoppen: AA-standaard, pill, kalme hover — */
.woocommerce #respond input#submit,.woocommerce a.button,.woocommerce button.button,
.woocommerce input.button,.woocommerce #payment #place_order{
  background:var(--wp--preset--color--koraal-diep);color:#fff;border-radius:999px;
  font-weight:480;padding:.85rem 1.8rem;transition:background .25s}
.woocommerce #respond input#submit:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce input.button:hover,.woocommerce #payment #place_order:hover{
  background:var(--wp--preset--color--nachtduin);color:var(--wp--preset--color--duinlicht)}

/* — Meldingen in de vaste stem (kalm, geen alarmrood) — */
.woocommerce-message,.woocommerce-info{
  border-top-color:var(--wp--preset--color--zeeglas);background:var(--wp--preset--color--helmgras);
  border-radius:var(--karuma-radius-s)}
.woocommerce-message::before,.woocommerce-info::before{color:var(--wp--preset--color--zeeglas-diep)}
.woocommerce-error{
  border-top-color:var(--wp--preset--color--koraal-diep);background:var(--wp--preset--color--schuim);
  border-radius:var(--karuma-radius-s)}
.woocommerce-error::before{color:var(--wp--preset--color--koraal-diep)}

/* — Bedankpagina — */
.woocommerce-order .woocommerce-thankyou-order-received{
  font-size:1.35rem;font-weight:540;letter-spacing:-.015em;color:var(--wp--preset--color--nachtduin)}
.woocommerce ul.order_details{border:1px solid var(--karuma-lijn);border-radius:var(--karuma-radius);
  padding:1.4rem 1.6rem;margin:1.6rem 0}
.woocommerce ul.order_details li{border-right-color:var(--karuma-lijn)}


/* ═══════════════════════════════════════════════════════════════
   NACHTDUIN — paginatemplate voor /zakelijk/ (v0.9)
   Per pagina te kiezen via Pagina → Template → "Nachtduin (zakelijk)".
   Werkt door de preset-variabelen te herkleuren binnen de body-scope,
   zodat alle bestaande patterns en klassen ongewijzigd meekleuren.
   Waarden identiek aan het voormalige styles/zakelijk.json (verwijderd
   in v0.9 omdat globale stijlvarianten site-breed werken, niet per pagina).
   ═══════════════════════════════════════════════════════════════ */
body.page-template-nachtduin{
  /* avondpalet over de dagpresets heen */
  --wp--preset--color--duinlicht:#122B28;      /* basis */
  --wp--preset--color--schuim:#183732;         /* paneel */
  --wp--preset--color--helmgras:#0C201E;       /* diep */
  --wp--preset--color--nachtduin:#F2EFE6;      /* ivoor (tekst) */
  --wp--preset--color--drifthout:#BFC7BF;      /* ivoor zacht */
  --wp--preset--color--zeeglas:#7FB0A7;        /* zeeglas licht */
  --wp--preset--color--zeeglas-diep:#7FB0A7;   /* zeeglas licht (links) */
  --wp--preset--color--koraal:#D98A6E;         /* koraal avond */
  --wp--preset--color--koraal-diep:#C06A4A;    /* koraal avond diep */
  --karuma-lijn:rgba(242,239,230,.16);
  background:var(--wp--preset--color--duinlicht);
  color:var(--wp--preset--color--nachtduin);
}
/* stille avondzon: geen ochtendgloed op zakelijke hero's */
body.page-template-nachtduin .karuma-hero-zon{
  background:radial-gradient(circle at 42% 42%, rgba(217,138,110,.10), rgba(217,138,110,.03) 55%, transparent 72%)}
/* serif-koppen, conform de Nachtduin-standaard */
body.page-template-nachtduin :is(h1,h2,h3,h4,h5,h6){
  font-family:var(--wp--preset--font-family--cormorant);
  font-weight:500;letter-spacing:.005em;line-height:1.15}
/* strakke knoppen (4px) in plaats van pill */
body.page-template-nachtduin .wp-block-button__link{border-radius:4px}
/* linkkleur zeeglas-licht; knoppen behouden hun eigen kleur */
body.page-template-nachtduin :where(a:not(.wp-block-button__link)){
  color:var(--wp--preset--color--zeeglas)}
/* hairline-grids: cellen kleuren mee naar avondbasis */
body.page-template-nachtduin .karuma-grid-lijnen > *{
  background:var(--wp--preset--color--schuim)}
body.page-template-nachtduin .karuma-kaarten > .wp-block-column{
  box-shadow:0 1px 2px rgba(0,0,0,.2), 0 6px 24px -12px rgba(0,0,0,.35)}
body.page-template-nachtduin .karuma-grid-lijnen > .karuma-cel-accent{
  background:var(--wp--preset--color--helmgras)}