/* ==========================================================================
   SM Hero Daleman  |  hoort bij widgets/sm-hero-daleman.php

   Overgenomen uit de werkende opmaak die John heeft goedgekeurd. Klassen
   zijn hernoemd van sd- naar sm-hd- om de plugin-conventie te volgen; de
   opmaak zelf is ongewijzigd overgenomen, regel voor regel.

   Laadt alleen op pagina's waar de widget staat (get_style_depends).
   ========================================================================== */

/* ============================================================
   SD Hero — eigen code, geen widgets
   Namespace sm-hd- zodat niets van het thema geraakt wordt.

   Waarom eigen code: de bestaande hero is een stapel Elementor-
   widgets met Element Pack erbij. Dit is een <section> met een
   <img>, een overlay en tekst. Verder niets.

   Overlay: geen vlakke sluier maar een gericht verloop. Zwaar
   linksonder waar de tekst staat, weg naar rechtsboven waar het
   werk zelf te zien is. Kleuren uit het merk (#0D3B66 navy).

   Scroll: het beeld loopt iets achter op de scroll en de tekst
   zakt zachtjes weg. Volledig CSS scroll-driven, dus geen JS en
   geen naijlen. Kent de browser het niet, dan staat alles gewoon
   stil en blijft alles leesbaar.
   ============================================================ */

.sm-hd {
    --navy: 7, 31, 54;
    --accent: #2196F3;   /* stipje boven de titel, lichtblauw zoals de rest */
    --knop: #0D3B66;     /* knop, hetzelfde donkerblauw als de headerknop */
    --blauw: #2196F3;

    position: relative;
    isolation: isolate;
    min-height: 92svh;
    display: flex;
    align-items: flex-end;
    overflow: clip;
    background: rgb(var(--navy));
}

.sm-hd--kort { min-height: 62svh; }

/* --- beeld ------------------------------------------------- */
.sm-hd__beeld {
    position: absolute;
    inset: -8% 0 0;
    z-index: -2;
}

.sm-hd__beeld img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--focus, 50% 40%);
    display: block;
}

/* --- overlay ------------------------------------------------
   Drie lagen over elkaar: een warme gloed rechtsboven zodat het
   beeld niet dood gaat, dekking van links voor de tekst, en de
   hoofdlaag van onderaf die het leeswerk doet. */
.sm-hd__waas {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(120% 90% at 88% 6%,
            rgba(33, 150, 243, .18) 0%,
            rgba(33, 150, 243, 0) 55%),
        linear-gradient(to right,
            rgba(var(--navy), .72) 0%,
            rgba(var(--navy), .34) 42%,
            rgba(var(--navy), 0) 74%),
        linear-gradient(to top,
            rgba(var(--navy), .92) 0%,
            rgba(var(--navy), .68) 20%,
            rgba(var(--navy), .34) 44%,
            rgba(var(--navy), .08) 68%,
            rgba(var(--navy), 0) 88%);
}

/* --- inhoud ------------------------------------------------- */
.sm-hd__kader {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 26px 26px 40px;
    color: #fff;
}

.sm-hd__tekst { max-width: 40ch; }

.sm-hd__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 16px;
    padding: 6px 15px 6px 11px;
    border-radius: 100px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(6px);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    color: #fff;
}

.sm-hd__eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(33, 150, 243, .25);
}

.sm-hd h1 {
    margin: 0 0 14px;
    font-size: clamp(30px, 5.2vw, 58px);
    line-height: 1.06;
    letter-spacing: -.025em;
    font-weight: 600;
    text-wrap: balance;
    text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}

.sm-hd__lead {
    margin: 0 0 24px;
    font-size: clamp(15px, 1.7vw, 18px);
    line-height: 1.55;
    color: rgba(255, 255, 255, .9);
    text-wrap: pretty;
}

.sm-hd__acties {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
}

.sm-hd__knop {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 26px;
    border-radius: 100px;
    background: var(--knop);
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(13, 59, 102, .34);
    transition: transform .22s cubic-bezier(.165,.84,.44,1),
                box-shadow .22s cubic-bezier(.165,.84,.44,1),
                background-color .22s;
}

.sm-hd__knop:hover,
.sm-hd__knop:focus-visible {
    background: #124a80;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(13, 59, 102, .44);
}

.sm-hd__knop--stil {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .3);
    box-shadow: none;
}

.sm-hd__knop--stil:hover,
.sm-hd__knop--stil:focus-visible {
    background: rgba(255, 255, 255, .18);
    box-shadow: none;
}

.sm-hd__belofte {
    margin: 22px 0 0;
    font-size: 15px;
    font-style: italic;
    color: rgba(255, 255, 255, .78);
}

/* --- doelgroepenbalk ----------------------------------------
   Zelfde idee als eerst, maar het vinkje staat nu één keer in de
   HTML en wordt hergebruikt met <use>. Dat scheelt vijftien keer
   dezelfde SVG. Twee sets zijn genoeg voor een naadloze lus. */
.sm-hd__doelgroepen {
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.sm-hd__spoor {
    display: flex;
    width: max-content;
    gap: 38px;
    animation: sm-hd-schuif 34s linear infinite;
}

.sm-hd__doelgroepen:hover .sm-hd__spoor,
.sm-hd__spoor:focus-within { animation-play-state: paused; }

@keyframes sm-hd-schuif {
    to { transform: translateX(-50%); }
}

.sm-hd-doelgroep {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, .92);
    white-space: nowrap;
}

.sm-hd-doelgroep svg {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
}

/* --- contactregels (contact-hero) ---------------------------- */
.sm-hd__contact {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
}

.sm-hd__contact a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 17px;
    border-radius: 100px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .2s, transform .2s;
}

.sm-hd__contact a:hover,
.sm-hd__contact a:focus-visible {
    background: rgba(255, 255, 255, .2);
    transform: translateY(-1px);
}

.sm-hd__contact svg { width: 17px; height: 17px; }

/* --- scroll-effect ------------------------------------------
   Het beeld loopt achter op de scroll en zoomt heel licht uit,
   de tekst zakt weg terwijl je de hero verlaat. Alles hangt aan
   de scrollpositie van de sectie zelf, dus geen JS en geen
   vertraging. Kent de browser dit niet, dan gebeurt er niets en
   blijft alles gewoon staan: nooit onzichtbare content. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {

        .sm-hd { view-timeline-name: --sm-hd-hero; view-timeline-axis: block; }

        /* vervangen door het scroll-effect onderaan dit bestand */

        /* De tekst-fade is er bewust UIT gehaald. Op een hero die hoger is dan
           het scherm lopen de entry- en exit-fases door elkaar en stond de
           tekst al op 0,75 zodra de pagina laadde. Een scroll-effect mag nooit
           leesbare content dimmen. De parallax op het beeld blijft, die raakt
           geen tekst. */
    }
}

/* --- klein scherm -------------------------------------------- */
@media (max-width: 767px) {
    .sm-hd { min-height: 88svh; }
    .sm-hd--kort { min-height: 54svh; }

    .sm-hd__kader { padding: 22px 22px 32px; }
    .sm-hd__tekst { max-width: none; }

    /* Tekst loopt hier over de volle breedte, dus een verloop van
       links zit alleen maar in de weg. Alleen van onderaf, steviger. */
    .sm-hd__waas {
        background:
            radial-gradient(130% 60% at 78% 3%,
                rgba(33, 150, 243, .15) 0%,
                rgba(33, 150, 243, 0) 58%),
            linear-gradient(to top,
                rgba(var(--navy), .94) 0%,
                rgba(var(--navy), .76) 22%,
                rgba(var(--navy), .42) 46%,
                rgba(var(--navy), .1) 70%,
                rgba(var(--navy), 0) 90%);
    }

    .sm-hd__spoor { gap: 22px; }
    .sm-hd-doelgroep { font-size: 14px; }
    .sm-hd__knop { padding: 13px 22px; font-size: 15px; }
}

/* Conceptpagina: labeltjes zodat je ziet welke hero je bekijkt. */

/* Het thema zet de kopkleur met een eigen regel en wint van de kleur
   die we op het kader zetten. Hier expliciet vastzetten. De hero staat
   altijd op een foto, dus wit is niet-onderhandelbaar; anders valt de
   kop weg in het beeld. Dat gebeurde in de oude hero ook: de kop stond
   daar op donkergroen 60% bovenop een donkere foto. sm-hd-kleurvast */
.sm-hd .sm-hd__kader h1,
.sm-hd .sm-hd__kader h2,
.sm-hd .sm-hd__kader p,
.sm-hd .sm-hd__kader span,
.sm-hd .sm-hd__kader li{color:#fff}
.sm-hd .sm-hd__lead{color:rgba(255,255,255,.9)}
.sm-hd .sm-hd__belofte{color:rgba(255,255,255,.78)}
.sm-hd .sm-hd__kader a{color:#fff;text-decoration:none}
.sm-hd .sm-hd__knop{color:#fff}
/* Elementor's wrapper mag de hero niet inperken. */
.elementor-widget-sm-hero-daleman .sm-hd{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;max-width:100vw}

/* ============================================================
   Onder de transparante header door.
   De header is doorzichtig en 102 px hoog (94 op mobiel). De hero
   hoort daar onderdoor te lopen zodat logo en menu op de foto staan.
   Dat deed de oude hero met negatieve procent-marges per breakpoint;
   dit is hetzelfde effect maar met de echte hoogte, dus voorspelbaar.

   De header staat static en komt eerder in de HTML, dus zonder hulp
   verft de hero eroverheen. Vandaar relative + z-index op de header.
   ============================================================ */
:root{--sm-hd-header:102px}
header.elementor-location-header{position:relative;z-index:20}
.sm-hd{margin-top:calc(-1 * var(--sm-hd-header))}
/* Inhoud staat onderaan, maar bij een korte hero mag de tekst nooit
   achter het menu vallen. */
.sm-hd__kader{padding-top:calc(26px + var(--sm-hd-header))}
/* Schermvullend, gemeten vanaf de bovenkant van het scherm en niet
   vanaf de hero die onder de header begint. */
.sm-hd--vol{min-height:100svh;min-height:100lvh}
/* Inhoud staat onderaan. Til hem van de onderrand af zodat de
   doelgroepenbalk in een keer meekomt en niet net onder de vouw valt. */
.sm-hd--vol .sm-hd__kader{padding-bottom:72px}
@media (max-width:767px){
  :root{--sm-hd-header:94px}
  .sm-hd__kader{padding-top:calc(22px + var(--sm-hd-header))}
}

/* ============================================================
   Scroll-effect op de hero.

   Gekoppeld aan de scrollAFSTAND, niet aan de fases van het element.
   Dat was met opzet: bij een hero die hoger is dan het scherm lopen
   entry en exit door elkaar en stond de tekst al half doorzichtig
   zodra de pagina laadde. Met een vast bereik vanaf 0 is de stand bij
   het laden gegarandeerd het beginpunt: volledig zichtbaar.

   Het beeld blijft achter bij de scroll en zoomt licht uit. De tekst
   zakt weg en vervaagt over de eerste 460 px, dus lang voordat je hem
   voorbij bent. Kent de browser dit niet, dan gebeurt er niets en
   staat alles gewoon stil.
   ============================================================ */
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
  .sm-hd__beeld{
    animation:sm-hd-diepte linear both;
    animation-timeline:scroll();
    animation-range:0 100svh;
  }
  .sm-hd__kader{
    animation:sm-hd-weg linear both;
    animation-timeline:scroll();
    animation-range:0 460px;
  }
}
}
@keyframes sm-hd-diepte{
  from{transform:translateY(0) scale(1.04)}
  to{transform:translateY(11%) scale(1)}
}
@keyframes sm-hd-weg{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(-52px)}
}

/* ============================================================
   Echt schermvullend, twee correcties.

   1. De HTML-widget van Elementor zet er standaard marge omheen.
      Daardoor begon de hero 20 px onder de bovenkant en kwam hij
      onderaan precies die 20 px tekort. Marge eraf.

   2. svh is de KLEINSTE viewport, gemeten met de adresbalk in beeld.
      Schuift die balk weg tijdens het scrollen, dan wordt het scherm
      hoger en valt er een witte strook onder de hero. lvh is de
      grootste en dekt dus altijd. Een paar pixels overloop zie je
      niet, een witte strook wel. svh blijft ervoor staan als terugval
      voor browsers die lvh niet kennen.
   ============================================================ */
.elementor-widget-sm-hero-daleman:has(.sm-hd){margin:0}
.elementor-widget-sm-hero-daleman:has(.sm-hd) > .elementor-widget-container{margin:0}

/* ============================================================
   Schermvullend, definitieve aanpak.

   De negatieve marge bleef vechten met de wikkels die Elementor om
   een HTML-widget zet: de hero begon steeds 20 px te laag en kwam
   onderaan precies die 20 px tekort. In plaats van dat gat na te
   rekenen halen we de oorzaak weg: de header wordt absoluut
   gepositioneerd en neemt dus geen ruimte meer in. De inhoud begint
   daardoor vanzelf op nul en de hero hoeft niet meer omhoog getrokken
   te worden.

   Alleen op paginas die een eigen hero hebben, zodat pagina's zonder
   hero hun normale ruimte onder de header houden.
   ============================================================ */
body:has(.sm-hd) header.elementor-location-header{
  position:absolute;
  top:0;left:0;right:0;
  z-index:20;
}
body:has(.sm-hd) .sm-hd{margin-top:0}

/* ============================================================
   Mobiel: inhoud terug naar BOVEN, zoals in de oude hero.

   Die stond daar niet toevallig. Met de tekst hoog in beeld blijft de
   onderste helft van de foto vrij, en daar staat Ramon met zijn steel.
   Onderaan uitlijnen legt de tekst juist over hem heen. Op desktop is
   er breedte genoeg en werkt onderaan wel, dus dat blijft.

   De oude hero deed dit met padding-top 40% van de breedte, dus ~164 px
   op een 411 px scherm. Hier vast in pixels plus de headerhoogte, want
   procenten van de BREEDTE schalen niet mee met de hoogte van het
   scherm en dat gaf op smalle toestellen rare sprongen.
   sm-hd-mobiel-boven */
@media (max-width: 767px) {
  .sm-hd--vol{align-items:flex-start}
  .sm-hd--vol .sm-hd__kader{
    padding-top:calc(var(--sm-hd-header, 94px) + 64px);
    padding-bottom:28px;
  }
  /* De doelgroepenbalk hoort bij de tekst, dus die schuift mee omhoog.
     Iets minder ruimte erboven zodat het blok compact blijft. */
  .sm-hd--vol .sm-hd__doelgroepen{margin-top:26px;padding-top:18px}
}