/* ============================================================
   VML CUSTOM CSS  —  verlichtmijnleven.nl
   Alle custom CSS van Claude staat in DIT bestand (+ vml-custom.js).
   Terugdraaien (CSS/JS): verwijder vml-custom.css en vml-custom.js uit
   het child-theme en haal de functie sarah_child_vml_assets() uit
   functions.php weg. Daarmee is ALLE custom CSS/JS in één keer terug.
   De SEO-teksten staan in de plugin 'The SEO Framework' (per pagina,
   bewerkbaar in de WP-beheeromgeving), niet in dit bestand.
   Nummers verwijzen naar de gevraagde wijzigingen.
   ============================================================ */

/* --- Punt 2 (volledige breedte / geen zijranden) is BEWUST teruggedraaid.
   Reden: het op 100% zetten van de theme-container rekte ook de Elementor-
   secties met content-breedte 'full width' (o.a. de prijzenblokken) uit,
   waardoor die links uitlijnden i.p.v. gecentreerd. De volle-breedte
   hero-afbeeldingen blijven wel volle breedte: dat zijn 'stretched'
   secties die zichzelf via Elementor over het hele venster uitrekken.
   Zo blijft de lay-out gelijk aan wat je in Elementor ziet en bewerkbaar. --- */

/* --- Punt 1: minder witruimte boven (titel/inhoud hoger, op gelijke hoogte).
   De menubalk heeft margin-bottom 50px en de inhoud .post-excerpt
   margin-top 16px; die verkleinen we. Alleen verticaal, breedte ongemoeid. --- */
.container:has(> .row > .col-md-12 > .single-post-content) {
    margin-top: 0 !important;
}
.single-post-content {
    padding-top: 0 !important;
}
.page-template-default .site-header {
    margin-bottom: 15px !important;
}
.page-template-default .post-excerpt {
    margin-top: 0 !important;
}
/* Op de meeste pagina's heeft de EERSTE Elementor-kolom 10px padding-top,
   waardoor de titel iets lager staat dan op /over-mij/ (daar is dat 0).
   We halen alleen die padding-top van de eerste sectie weg zodat de h2
   op alle inhoudspagina's even hoog staat als op /over-mij/. */
.page-template-default .post-excerpt .elementor > .elementor-top-section:first-child
    > .elementor-container > .elementor-column
    > .elementor-widget-wrap.elementor-element-populated {
    padding-top: 0 !important;
}

/* --- Punt 3: hero-afbeelding strak onder de menubalk op de twee 'Rust'-pagina's.
   Hier zetten we de afstand helemaal op 0 (specifieker dan punt 1). --- */
.page-id-2753 .single-post-content,
.page-id-643  .single-post-content {
    padding-top: 0 !important;
}
.page-id-2753 .container:has(.single-post-content),
.page-id-643  .container:has(.single-post-content) {
    margin-top: 0 !important;
}
.page-id-2753 .site-header,
.page-id-643  .site-header {
    margin-bottom: 0 !important;
}
.page-id-2753 .post-excerpt,
.page-id-643  .post-excerpt {
    margin-top: 0 !important;
}

/* --- Contactinfo-blok (NAW + KvK + e-mail) centreren op de contactpagina.
   Scope = de Elementor HTML-widget die het e-mailadres (.vml-mail) bevat,
   zodat alleen dit blok gecentreerd wordt. --- */
body.page-id-2476 .elementor-widget-container:has(.vml-mail) {
    text-align: center !important;
}

/* --- Punt 5: contactpagina witte achtergrond (afbeelding zelf wordt via
   het verwijderde uitgelichte beeld weggehaald; rest matcht de overige pagina's). --- */
body.page-id-2476,
body.page-id-2476 .single-post-content {
    background-color: #ffffff !important;
}

/* --- Punt 2 (vervolg): box-shadow rond .single-post-content weghalen.
   De boxed-layout tekende een zachte schaduw (rgba(0,0,0,0.06) 0 2px 2px)
   rond het content-artikel; die halen we weg zodat de pagina vlak oogt
   zonder de Elementor-secties aan te raken. --- */
.single-post-content {
    box-shadow: none !important;
}

/* --- H2-hoogte gelijktrekken met /over-mij/.
   De paginatitel-h2 had per pagina een andere line-height ingesteld
   (over-mij = 30px, prijzen e.a. = 55px), waardoor de titelhoogte verschilde.
   We zetten alleen de TITEL-h2 (de enige h2 in de eerste sectie) op
   line-height 1, zodat de hoogte overal gelijk is aan over-mij.
   Subkoppen (h3 pakketnamen) blijven ongemoeid.
   NB: in de Elementor-editor blijft de oude line-height zichtbaar; dit is
   puur een frontend-correctie via CSS. --- */
.page-template-default .post-excerpt
    .elementor-top-section:first-child h2.elementor-heading-title {
    line-height: 1 !important;
}

/* --- Punt 4 (vervolg): contactformulier-velden waren vast op ~312px en
   stonden daardoor smal in de 880px brede kolom. We laten de tekst-/e-mail-/
   tel-velden en het bericht-veld de volle breedte van het formulier vullen.
   Scope = .wpcf7 (alleen het Contact Form 7-formulier); Elementor blijft
   ongemoeid want CF7 wordt niet door Elementor beheerd. De verzendknop
   houdt zijn eigen breedte. --- */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 textarea,
.wpcf7 select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* De velden zaten in een inline-block <label> die naar de intrinsieke
   size=40-breedte (~312px) kromp. Label + wrap op volle breedte zetten zodat
   de 100%-velden de hele kolom vullen. Verzendknop heeft geen label en blijft. */
.wpcf7 form label {
    display: block !important;
    width: 100% !important;
}
.wpcf7 .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
}
/* Verzendknop: gecentreerd + in de huisstijl (zelfde look als de
   'meer info'-knoppen: wit met huisstijl-blauwe rand/tekst, uppercase Jost). */
.wpcf7 input[type="submit"] {
    display: block !important;
    margin: 10px auto 0 !important;
    width: auto !important;
    background-color: #ffffff !important;
    color: #6185ce !important;
    border: 1px solid #6185ce !important;
    border-radius: 3px !important;
    padding: 15px 25px !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background-color .2s ease, color .2s ease !important;
}
.wpcf7 input[type="submit"]:hover {
    background-color: #6185ce !important;
    color: #ffffff !important;
}

/* === VML Topbar: telefoon + e-mail boven de header ===
   Dunne balk boven logo/nav, zelfde achtergrond als de footer.
   Op < 480px verdwijnt het e-mailadres (te smal), telefoon blijft. === */
.vml-topbar {
    background: #f9f9f9;
    border-bottom: 1px solid #ececec;
    width: 100%;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    color: #777;
    letter-spacing: 0.4px;
    line-height: 1;
}
.vml-topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}
.vml-topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #777;
    text-decoration: none;
    transition: color .2s;
    cursor: pointer;
}
.vml-topbar-item:hover { color: #6185ce; }
.vml-topbar-item a      { color: inherit; text-decoration: none; }
.vml-topbar-item a:hover { color: #6185ce; }
@media (max-width: 480px) {
    .vml-topbar-mail { display: none !important; }
    .vml-topbar-inner { gap: 0; }
}

/* === Mobiele overflow-fix ===
   Op echte mobiele apparaten (DPR 3) vallen rand-teksten buiten het zichtbare
   kader doordat .post-excerpt overflow:hidden heeft en de binnenbreedte van
   Elementor de containerbreedte overschrijdt.
   overflow-x: hidden op html (niet body) voorkomt de horizontale knip
   zonder de iOS-Safari scroll-bijwerkingen van body-overflow. === */
html {
    overflow-x: hidden;
}

/* === Mobiele paginatitel-fix ===
   Door padding-top: 0 op de eerste sectie staat de h2 op mobiel helemaal
   boven in de overflow:hidden container (.post-excerpt). Bij een meerdere-
   regelige titel (bv. "HOE LICHTER LEVEN IS / ONTSTAAN") verdwijnt de
   bovenste regel. Een kleine padding-top herstelt dit uitsluitend voor
   mobiel — desktop (al getest) blijft ongewijzigd. === */
@media (max-width: 767px) {
    .page-template-default .post-excerpt
        .elementor > .elementor-top-section:first-child
        > .elementor-container > .elementor-column
        > .elementor-widget-wrap.elementor-element-populated {
        padding-top: 12px !important;
    }
    /* Over mij (page-id-1065): Elementor outer section heeft margin-top: -102px
       maar de inner section padding-top daalt op mobiel naar 15px (vs 100px desktop).
       Resultaat: h2 start 75px boven de .post-excerpt grens en is grotendeels
       verborgen. We compenseren: 90px + 15px - 102px = +3px → h2 net binnen PE. */
    body.page-id-1065 .post-excerpt
        .elementor > .elementor-top-section:first-child
        > .elementor-container > .elementor-column
        > .elementor-widget-wrap.elementor-element-populated {
        padding-top: 90px !important;
    }
}