/*
Theme Name: IT Live Child Theme
Theme URI: https://itlive.nl
Description: IT Live managed — premium v3.0
Author: IT Live
Author URI: https://itlive.nl
Template: hello-elementor
Version: 3.0
*/

/* ═══════════════════════════════════════════════════
   1. CSS VARIABLES
   ═══════════════════════════════════════════════════ */

:root {
    --primary:        var(--e-global-color-primary,   #2563eb);
    --secondary:      var(--e-global-color-secondary, #f97316);
    --text:           var(--e-global-color-text,      #1e293b);
    --accent:         var(--e-global-color-accent,    #38bdf8);
    --bg:             #ffffff;
    --primary-light:  color-mix(in srgb, var(--primary) 10%, #fff);
    --shadow-sm:      0 4px 12px rgba(0,0,0,.06);
    --shadow-md:      0 12px 32px rgba(0,0,0,.10);
    --shadow-lg:      0 24px 60px rgba(0,0,0,.14);
    --shadow-glow:    0 8px 24px color-mix(in srgb, var(--primary) 35%, transparent);
    --smooth:         cubic-bezier(.23,1,.32,1);
    --bounce:         cubic-bezier(.68,-.55,.265,1.55);
    --radius-sm:      8px;
    --radius-md:      16px;
    --radius-lg:      24px;
    --radius-xl:      50px;
}

/* ═══════════════════════════════════════════════════
   2. RESET & BASE
   ═══════════════════════════════════════════════════ */

html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    scroll-behavior: smooth;
}
* { box-sizing: border-box !important; }

body {
    font-family: var(--e-global-typography-primary-font-family, 'Inter'), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* KLEUR-ERFT-20260916
   Hier stond `color` op p en op h1..h6. Een eigen regel op het element wint altijd van overerving,
   dus tekst in een gekleurde of donkere band werd donker — daarom stonden er overal
   `color:#fff !important`-lappen omheen (hero-tekst werd zwart op blauw). De kleur staat nu
   alleen nog op body en erft verder omlaag: een band die zijn eigen tekstkleur zet, geeft die
   gewoon door. Gemeten 16-09 door deze regels in de browser weg te halen, 6 paginatypes x 2
   schermen: geen enkele tekstkleur veranderde ongewenst. */
h1, h2, h3, h4, h5, h6 { line-height: 1.1; letter-spacing: -.01em; }
p { line-height: 1.75; }
a { color: var(--primary); transition: color .2s; }
::selection { background: var(--primary); color: #fff; }

/* Full-width Elementor pages */
.site-main,
.elementor-page .page-content,
.elementor-page .site-content,
.elementor-page .entry-content,
body.elementor-page .site-main .entry-content {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* CONTAINERRUIMTE-20260916
   Hier stond `padding:0 !important` + `max-width/width:100% !important` op ELKE flexbox-container
   en elke HTML-widget, plus `max-width:100%; padding:0 !important` op elke boxed binnencontainer.
   Bedoeling was witte randen weghalen rond blokken die zelf de volle breedte tekenen (de
   vlootversie van dit bestand noemt het "remove default Elementor padding that causes double
   spacing"). Gevolg: geen enkele ruimte-instelling uit de editor werkte nog, en de header en de
   homepage moesten er met eigen !important omheen bouwen.
   Gemeten 16-09 door deze regels in de browser te verwijderen op 6 paginatypes x 2 schermen:
   geen verschil in tekstranden, overloop of beeld. De editor bepaalt het nu weer. */
.e-con.e-parent, .elementor-widget-html { max-width: 100%; }
.page-header, .entry-header, h1.entry-title, .post-header { display: none !important; }
.elementor-widget-html { overflow: visible !important; margin-bottom: 0 !important; }

/* ═══════════════════════════════════════════════════
   3. CONTRAST GUARDS (WCAG 4.5:1)
   ═══════════════════════════════════════════════════ */

/* KLEUR-ERFT-20260916
   Twee `color: inherit`-lappen zijn weg (kopwidget en `.elementor-2 …`): die waren alleen nodig
   zolang p en h1..h6 hierboven zelf een kleur zetten.
   Uit de contrastwacht hieronder zijn drie selectors weg die ELKE alinea met een inline
   `color:#fff` hard donker maakten, ongeacht de achtergrond — precies dat maakte witte hero-tekst
   zwart op blauw. Gemeten 16-09: die drie raakten op geen van de 6 paginatypes nog een element
   (0 treffers, pc en mobiel). Wat blijft staan, toetst wél of de achtergrond echt wit is. */
.elementor-section[data-settings*="\"background_color\":\"#ffffff\""] .elementor-heading-title[style*="color:#fff"],
.elementor-section[data-settings*="\"background_color\":\"#fff\""]    .elementor-heading-title[style*="color:#fff"],
.e-con[style*="background:#fff"] .elementor-heading-title[style*="color:#fff"],
.e-con[style*="background: #fff"] .elementor-heading-title[style*="color:#fff"] {
    color: var(--text) !important;
}

/* ═══════════════════════════════════════════════════
   4. KEYFRAME ANIMATIONS
   ═══════════════════════════════════════════════════ */

@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeDown {
    from { opacity: 0; transform: translateY(-24px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* DODE-REGELS-20260916: `@keyframes float`, `shimmer`, `dropdownIn` en `pulseGlow` stonden hier.
   Ze hoorden bij `.feature-card`, het uitklapmenu van de thema-header en `.itlive-btn-primary` —
   alle drie in deze ronde weggehaald. Gemeten 16-09: geen enkel bestand of Elementor-element roept
   deze animaties nog aan (`animation: float|shimmer|dropdownIn|pulseGlow` komt nergens voor).
   `heroFadeUp` en `heroFadeDown` hierboven BLIJVEN: die draaien op de eerste sectie van /contact/. */

/* ═══════════════════════════════════════════════════
   DODE-REGELS-20260916 — header, navigatie en hamburger weggehaald
   ═══════════════════════════════════════════════════ */

/* Hier stond de opmaak van de Hello-thema-header (`.site-header`), het bureaubladmenu met
   uitklapmenu en een zelfgebouwde hamburgerknop (`.itl-hamburger`).
   Gemeten 16-09: 0 elementen met `.site-header` op 11 paginatypes (home, pakketten, stadspagina,
   product, contact, blog, veelgestelde vragen, over ons, locaties, 404 en zoekresultaten), pc en
   mobiel. De header komt van Elementor-sjabloon 362 en gebruikt `mhe-*`-klassen; het Hello-thema
   tekent hier geen header meer. De JS die deze hamburger bouwde is in dezelfde ronde uit
   functions.php gehaald. Komt de thema-header ooit terug, dan hoort deze opmaak er weer bij. */

/* ═══════════════════════════════════════════════════
   DODE-REGELS-20260916 — scroll-reveal weggehaald
   ═══════════════════════════════════════════════════ */

/* Hier stonden `.ilv-reveal`, `-left`, `-right`, `-scale` en `.ilv-stagger`: blokken die pas
   zichtbaar worden als je ze in beeld scrollt. Gemeten 16-09: die klassen staan op geen enkele
   paginasoort in de HTML en in geen enkel bestand, Elementor-element of bericht — alleen in de JS
   die ze zou aansturen, en die is in dezelfde ronde uit functions.php gehaald.
   Elementor heeft hier trouwens een eigen voorziening voor (bewegingseffecten per container). */

/* ═══════════════════════════════════════════════════
   9. HERO SECTION
   ═══════════════════════════════════════════════════ */

/* First Elementor section = hero: full bleed */
.elementor-top-section:first-child,
.elementor-top-section:first-child > .elementor-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hero text animations */
.elementor-top-section:first-child h1 { animation: heroFadeUp .9s var(--smooth) .1s both; }
.elementor-top-section:first-child h2 { animation: heroFadeDown .8s var(--smooth) .05s both; }
.elementor-top-section:first-child p  { animation: heroFadeUp .9s var(--smooth) .25s both; }
.elementor-top-section:first-child a  { animation: heroFadeUp .9s var(--smooth) .4s both; }


/* ═══════════════════════════════════════════════════
   10. SECTION SPACING & CONTAINERS
   ═══════════════════════════════════════════════════ */

/* LEGACY-SECTIES-20260916
   Deze vier regels hieronder doen hetzelfde voor de oude `.elementor-section`-opbouw als de
   weggehaalde regels voor flexbox-containers deden — maar ze BLIJVEN, met reden.
   Gemeten 16-09: alleen /contact/ gebruikt nog oude secties (2 stuks); de andere vijf paginatypes
   hebben er nul. Haal je hier het !important weg, dan gaan de ruimte-instellingen gelden die ooit
   in de editor zijn opgeslagen terwijl dit thema ze toch overschreef — op /contact/ leverde dat
   een leeg gat van ~128px boven "Boek je les" op (pc) en een smallere tekstkolom (mobiel).
   Weghalen kan pas als die pagina in flexbox-containers is herbouwd. */
.elementor-top-section:not(:first-child):not(:last-child) {
    padding: 80px 0 !important;
    border-top: 1px solid rgba(0,0,0,.03);
}
.elementor-top-section:first-child,
.elementor-top-section:last-child { padding: 0 !important; }

.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1200px;
    padding-left: 40px !important;
    padding-right: 40px !important;
}
.elementor-widget-html .elementor-widget-container { padding: 0 !important; }

/* ═══════════════════════════════════════════════════
   11. CARD HOVER EFFECTS
   ═══════════════════════════════════════════════════ */

/* Generic inline cards (border-radius + box-shadow) */
[style*="border-radius"][style*="box-shadow"],
[style*="border-radius: 1"][style*="overflow: hidden"] {
    transition: transform .4s var(--smooth), box-shadow .4s var(--smooth) !important;
}
[style*="border-radius"][style*="box-shadow"]:hover,
[style*="border-radius: 1"][style*="overflow: hidden"]:hover {
    transform: translateY(-8px) !important;
    box-shadow: var(--shadow-lg) !important;
}
/* Image zoom inside cards */
[style*="border-radius"][style*="overflow: hidden"] img {
    transition: transform .55s var(--smooth) !important;
}
[style*="border-radius"][style*="overflow: hidden"]:hover img {
    transform: scale(1.06) !important;
}

/* DODE-REGELS-20260916
   Hier stond hover-opmaak voor `.itlive-service-card`, `.itlive-card`, `.ilp-card`,
   `.feature-card` (met zweefanimatie) en `.services-grid-desktop`/`.itlive-services-grid`.
   Gemeten 16-09: 0 elementen op 11 paginatypes en 0 treffers in bestanden, Elementor-data en
   berichtinhoud; `.itlive-hero` en `.itlive-card` bestaan alleen nog in een beheerscherm
   (`itlive-admin-experience.php`), niet op de site zelf.
   De generieke kaartregels hierboven — die werken op een inline `border-radius` + `box-shadow` —
   BLIJVEN staan, want die raken wél elementen. */

/* ═══════════════════════════════════════════════════
   DODE-REGELS-20260916 — knopopmaak op eigen klassen weggehaald
   ═══════════════════════════════════════════════════ */

/* Hier stonden `.itlive-btn-primary` (met rimpel-effect) en `.itlive-btn-outline-white`.
   Gemeten 16-09: 0 elementen op 11 paginatypes, 0 treffers in bestanden en Elementor-data.
   Knoppen komen nu uit de Elementor-kit (post 9) en uit de paginabestanden zelf. */

/* ═══════════════════════════════════════════════════
   13. FORMS
   ═══════════════════════════════════════════════════ */

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
textarea,
select {
    transition: border-color .25s, box-shadow .25s, transform .25s !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
textarea:focus,
select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent), var(--shadow-sm) !important;
    transform: translateY(-1px);
    outline: none;
}
button[type="submit"]:hover,
input[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}

/* ═══════════════════════════════════════════════════
   14. IMAGES — Lazy load fade-in
   ═══════════════════════════════════════════════════ */

img { max-width: 100%; height: auto; }
img[loading="lazy"] { opacity: 0; transition: opacity .5s var(--smooth); }
img[loading="lazy"].itl-loaded { opacity: 1; }

/* ═══════════════════════════════════════════════════
   15. FOOTER
   ═══════════════════════════════════════════════════ */

.site-footer,
#site-footer,
footer#site-footer,
footer.site-footer {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    max-width: none !important;
    width: 100% !important;
}
.site-footer .footer-inner,
.site-footer .site-branding,
.site-footer .copyright { display: none !important; }

/* DODE-REGELS-20260916
   Hier stond de opmaak van een TWEEDE footer (`.itl-footer`), die in functions.php aan
   `hello_elementor_footer` hing. Gemeten 16-09: `itl-footer` komt op geen van 11 paginatypes in
   de HTML voor; de footer die de bezoeker ziet komt uit `mayar-footer.php`. Die tweede footer is
   in dezelfde ronde uit functions.php gehaald — hij bevatte bovendien openingstijden die niet
   kloppen en sociale links naar `#`.
   De regels hierboven, die de standaardfooter van het Hello-thema leegmaken, BLIJVEN staan. */

/* ═══════════════════════════════════════════════════
   16. UTILITIES
   ═══════════════════════════════════════════════════ */


/* Custom scrollbar */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #000)); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { filter: brightness(1.2); }

/* ═══════════════════════════════════════════════════
   17. RESPONSIVE — TABLET (≤1024px)
   ═══════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .elementor-section.elementor-section-boxed > .elementor-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* ═══════════════════════════════════════════════════
   18. RESPONSIVE — MOBILE (≤767px)
   ═══════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* Elementor full-width on mobile */
    .elementor-section, .elementor-top-section {
        width: 100% !important; max-width: 100% !important;
        left: 0 !important; margin-left: 0 !important; margin-right: 0 !important;
        overflow-x: hidden !important; overflow-y: visible !important;
    }
    .elementor-column {
        width: 100% !important; max-width: 100% !important;
        padding-left: 0 !important; padding-right: 0 !important;
    }
    .elementor-container {
        width: 100% !important; max-width: 100% !important;
        padding-left: 15px !important; padding-right: 15px !important;
        margin: 0 auto !important;
    }
    .elementor-top-section:not(:first-child):not(:last-child) { padding: 48px 0 !important; }


    /* Grid resets */
    div[style*="grid-template-columns:repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }


    h1, h2, h3 { word-wrap: break-word !important; overflow-wrap: break-word !important; }
    /* AFBREEKSTREEPJES-WEG-20260916
       Hier stond `hyphens: auto !important` op h1/h2/h3, met een uitzondering voor de homepage.
       Gemeten 16-09 op 390 px: dat brak koppen middenin een woord af ("Scooterrijbe-wijs",
       "dichtstbij-zijnde", "theorie-exa-men") op de stadspagina's en /theorie-examen-locatie/,
       en het `!important` won van de `hyphens: none` die paginabestanden zelf zetten — elke
       pagina moest er dus apart omheen werken. De regel hierboven (`word-wrap`/`overflow-wrap:
       break-word`) vangt écht te lange woorden al op, zonder streepjes middenin een woord. */
}

/* ═══════════════════════════════════════════════════
   19. RESPONSIVE — SMALL (≤480px)
   ═══════════════════════════════════════════════════ */

@media (max-width: 480px) {
    button[type="submit"], a[href*="offerte"] { min-height: 48px; }
}

/* ═══════════════════════════════════════════════════
   20. DESKTOP GRID HELPERS
   ═══════════════════════════════════════════════════ */

@media (min-width: 1025px) {
    div[style*="grid-template-columns:repeat(4,1fr)"],
    div[style*="grid-template-columns:repeat(4, 1fr)"] { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ═══════════════════════════════════════════════════
   20b. FORMULIERVELDEN — uitzondering op de kit
   ═══════════════════════════════════════════════════ */

/* FORMULIER-KIT-20260916
   De Elementor-kit stijlt formuliervelden met `input:not([type=button]):not([type=submit])`.
   Dat raakt ook aankruisvakjes en keuzerondjes: die zouden dan de padding, hoogte en
   hoekafronding van een tekstveld krijgen (een vierkantje van 16px met 12px ronding wordt een
   bolletje) — zichtbaar op het afrekenscherm. Daarom hier terug naar het normale vakje.
   De klassenaam van de kit staat er letterlijk in omdat de kitregel anders zwaarder weegt. */
body.elementor-kit-9 input[type="checkbox"],
body.elementor-kit-9 input[type="radio"] {
    padding: 0;
    min-height: 0;
    width: auto;
    height: auto;
    border-radius: 3px;
}
body.elementor-kit-9 input[type="radio"] { border-radius: 50%; }

/* ═══════════════════════════════════════════════════
   21. ACCESSIBILITY
   ═══════════════════════════════════════════════════ */

.skip-link { position: absolute; left: -9999px; z-index: 999; padding: 8px 16px; background: var(--primary); color: #fff; text-decoration: none; border-radius: 0 0 var(--radius-sm) 0; }
.skip-link:focus { left: 8px; top: 8px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ═══════════════════════════════════════════════════
   22. PRINT
   ═══════════════════════════════════════════════════ */

@media print {
    /* DODE-REGELS-20260916: `.site-header`, `.itlive-hero-glow` en `.itl-hamburger` bestaan
       nergens meer op de site en zijn uit deze lijst gehaald. */
    .site-footer, .ilchat-widget { display: none !important; }
}

/* ═══════════════════════════════════════════════════
   DODE-REGELS-20260916 — badges, sectietitels, FAQ-accordeon, lichte footer, eigen hero
   ═══════════════════════════════════════════════════ */

/* Hier stonden vijf blokken die allemaal op klassen werkten die niet meer bestaan:
     `.itlive-section-badge` / `.itlive-badge`                       labeltjes boven een sectiekop
     `.itlive-services-/stats-/testimonials-/faq-wrapper h2`, `.itlive-cta`      sectietitels
     `.itlive-faq-item` / `.itlive-faq-icon` / `.itlive-faq-answer`  uitklapvragen
     `.itl-footer*`                                                  de tweede footer (zie boven)
     `.itlive-hero`                                                  eigen hero-blok
   Gemeten 16-09: 0 elementen op 11 paginatypes (pc en mobiel) en 0 treffers in bestanden,
   Elementor-data en berichtinhoud. De uitklapvragen op /veelgestelde-vragen/ gebruiken `mfaq-*`
   en de stadspagina's `mlc-faq-*`; die hebben hun eigen opmaak in hun eigen bestand. */


/* DODE-REGELS-20260916: hier stond `.mhe-contact-btn{display:none!important}` — een zwevende
   contactknop die de header-knop op mobiel overlapte. Gemeten 16-09: die klasse komt in geen enkel
   bestand en op geen enkele pagina meer voor; de knop is bij de bron weggehaald. */

/* ═══════════════════════════════════════════════════
   28. TIKDOELEN OP MOBIEL
   ═══════════════════════════════════════════════════ */

/* TIKDOELEN-20260920
   Gemeten 16/20-09 op 390 px, ná volledig scrollen: de links in de voettekst waren 15 tot 17 px
   hoog en stonden dicht op elkaar, en op /contact/ waren juist de belangrijkste links klein —
   TELEFOON 75x16, E-MAIL 51x16, LESCENTRUM 100x16. De sociale icoontjes waren 40x40.
   Het ontwerp blijft zoals het is: de links krijgen binnenruimte ERBIJ en een even grote
   negatieve buitenruimte, zodat het aanraakvlak groeit maar er niets verschuift. De maat is
   afgestemd op de regelafstand, zodat twee aanraakvlakken elkaar niet overlappen — een te groot
   vlak zou kliks van de buurman afpakken en dat is erger dan een klein vlak.
   Gemeten vóór → na op /contact/: 23 → 1 bedieningselement onder 24 px; op de homepage 37 → 15
   (wat overblijft zijn de stipjes van de reviewcarrousel, zie mayar-leesbaarheid.php).
   Waarom 24 px de ondergrens is en niet overal 44: 44x44 is de AAA-eis, 24x24 de AA-eis van
   WCAG 2.2. Waar een knop alleen staat halen we 44; in een lijst met regelafstand 27 px zou 44
   de buurregel overlappen, dus daar is 24+ het maximum dat veilig kan. */
@media (max-width: 767px) {
    /* De icoontjes blijven 40x40 zoals ze getekend zijn; er komt een onzichtbare laag van
       44x44 overheen, zodat de duim meer ruimte heeft zonder dat de voettekst verspringt.
       Gemeten 20-09: de eerdere poging met `width: 44px` deed niets — de voettekst drukt zijn
       eigen stijlblok ná dit bestand af, en bij gelijke soortelijkheid wint de laatste. */
    .mf-socials a, .elementor-social-icon { position: relative; }
    .mf-socials a::after, .elementor-social-icon::after {
        content: ""; position: absolute; top: 50%; left: 50%;
        width: 44px; height: 44px; transform: translate(-50%, -50%);
    }

    .mf-col li > a,
    .mf-legal a,
    .mf-link,
    .mf-blog-list a,
    .mf-loc-grid li a,
    .mf-contact-item a,
    .mp-kruimel a,
    .mloc-slot a {
        display: inline-block;
        padding-block: 5px;
        margin-block: -5px;
    }
    .mf-legal a { padding-inline: 6px; margin-inline: -2px; }

    /* contactblokken: de titel is de link naar bellen/mailen/route */
    .elementor-icon-box-title a {
        display: inline-block;
        padding-block: 8px;
        margin-block: -8px;
    }
}

/* ═══════════════════════════════════════════════════
   29. REGELLENGTE OP PC
   ═══════════════════════════════════════════════════ */

/* REGELLENGTE-20260920
   Gemeten 20-09 op 1440 px: de langste alinea's waren 1040 px (/over-ons/), 1080 px (/locaties/)
   en 894 px (prijsindicatie op de homepage). Dat is 130 tot 150 tekens per regel; je oog raakt
   bij het terugspringen de volgende regel kwijt. De productpagina's zaten met 620 px juist goed.
   62ch komt op deze letter uit op ongeveer 680 px — precies de breedte die de hero's en de
   contactteksten op deze site al gebruiken, dus het sluit aan bij wat er staat.
   Alleen een bovengrens, geen vaste breedte: alles wat al smaller is (kaarten, kolommen,
   tabelcellen) verandert niet. Gemeten: /over-ons/ 1040 → 680 px, homepage 894 → 680 px,
   paginahoogte +0 tot +30 px, geen horizontale schuifbalk, kaartrasters ongewijzigd. */
@media (min-width: 1025px) {
    .site-main p { max-width: 62ch; }
    .site-main [style*="text-align:center"] p,
    .site-main [style*="text-align: center"] p,
    .mp-hero p,
    .mp-cta p { margin-inline: auto; }
}