/*
 * vt-overrides.css
 * Visuele overrides die we niet (meer) via app.min.css kunnen oplossen,
 * doordat de SCSS-source niet beschikbaar is in dit project.
 * Wordt geladen NA app.min.css (zie c-header__styles.twig).
 */

/* X (was: Twitter) share-button — background van Twitter-blauw naar X-zwart.
   SVG fill="#fff" attribuut staat op de <svg> zelf; hover overruled via CSS. */
.c-content .c-sharethispage a.c-social.c-twitter,
section.c-section .c-imagetext__text .c-sharethispage a.c-social.c-twitter {
    background: #000;
}
.c-content .c-sharethispage a.c-social.c-twitter:hover,
section.c-section .c-imagetext__text .c-sharethispage a.c-social.c-twitter:hover {
    background: #e1e1e1;
}
.c-content .c-sharethispage a.c-social.c-twitter:hover svg,
section.c-section .c-imagetext__text .c-sharethispage a.c-social.c-twitter:hover svg {
    fill: #000;
}

/* SVG-iconen verticaal afstemmen op FontAwesome glyph-baseline. */
.c-content .c-sharethispage a.c-social svg,
section.c-section .c-imagetext__text .c-sharethispage a.c-social svg,
.menu__social a svg {
    position: relative;
    top: 5px;
}

/* Hero-button op homepage / sub-hero's: horizontale marge op mobiel
   (basis-rule zet 'm op width:100% margin:0 zodat hij edge-to-edge ligt). */
@media screen and (max-width: 39.9375em) {
    section.c-section__hero .c-wrapper a.c-button {
        width: calc(100% - 6rem);
        margin-left: 3rem;
        margin-right: 3rem;
    }
    section.c-section__hero .c-wrapper h2 {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

/* Off-canvas drilldown: submenu-items visueel laten inspringen tov de parent-pane.
   Foundation reset zet padding op 0 binnen .is-drilldown-submenu, hier expliciet
   overrulen. Uitsluiten: .js-drilldown-back (terug-knop met chevron op left:0)
   en .is-submenu-parent-item (de parent-link bovenin de sub-pane, blijft op
   oorspronkelijke positie zodat het verschil tussen parent en kinderen zichtbaar is). */
div.off-canvas .c-offcanvas__nav .drilldown .is-drilldown-submenu > li:not(.js-drilldown-back):not(.is-submenu-parent-item) > a {
    padding-left: 2rem;
}

/* Off-canvas flyout breder zodat lange menu-items op één regel passen.
   Foundation default is 250px; closed-state translateX moet matchen aan width.
   Open-state (.is-open) blijft Foundation's eigen translate(0,0) gebruiken. */
.off-canvas.position-right,
.off-canvas-content .off-canvas.position-right {
    width: 320px;
}
.off-canvas.position-right:not(.is-open),
.off-canvas-content .off-canvas.position-right:not(.is-open) {
    transform: translateX(320px);
}

/* Branche-tegels / imagetext-blokken op mobiel: tekst-cell die als first-child
   in de grid-x staat (= text-eerst, image-tweede in DOM-volgorde — om-en-om-layout)
   heeft een desktop-rule `padding: 8rem 0 8rem 12rem` die NIET in een media-query
   zit, waardoor op mobiel een 12rem left-padding overblijft en de tekst ver naar
   rechts verschijnt. Overschrijven naar dezelfde kleine padding als de andere
   variant op mobiel. */
@media screen and (max-width: 39.9375em) {
    /* c-imagetext blokken (Hotels = image-eerst, Campings = text-eerst met c-margin):
       beide krijgen 1.5rem links/rechts. Campings krijgt extra top/bottom via de
       specifiekere first-child regel hieronder. */
    section.c-section .c-imagetext .c-imagetext__text {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    section.c-section .c-imagetext.c-margin .grid-x > .c-imagetext__text:first-child,
    section.c-section .c-imagetext.c-margin .c-imagetext__text {
        padding: 2rem 1.5rem;
    }
    /* Columns-blocks (Trustpilot, etc): content-cell op mobiel iets meer
       links/rechts ademruimte (default heeft alleen Foundation grid-gutter). */
    section.c-section .c-columns .c-content .c-content-cnt {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Tablet (medium-only): trusted-icoon naast logo houden.
   Op die breakpoint is .c-section__logomenubar--menu (.cell auto) verborgen via
   show-for-large; daardoor heeft de grid-x maar 3 items (logo, trusted, hamburger)
   en met align-justify zit trusted precies in het midden. Hamburger naar rechts
   duwen met margin-left:auto trekt trusted weer naast het logo. */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
    section.c-section__logomenubar .grid-x > .c-section__logomenubar--bars {
        margin-left: auto;
    }
}

/* Block-headers / columns-sections op mobiel: extra ademruimte aan de bovenkant.
   padding-top (niet margin) zodat de section-bg-color de extra ruimte vult en de
   section-top tegen het voorgaande block blijft plakken — alleen de content
   schuift naar beneden. :has() pakt sections met .c-header (Onze diensten) én
   sections met enkel .c-columns (Trustpilot). */
@media screen and (max-width: 39.9375em) {
    section.c-section:has(> .c-header),
    section.c-section:has(> .grid-container.c-columns) {
        padding-top: 4rem;
    }
}

/* CKEditor blockquote in rich-text body (contentFieldBody e.d.): tekst iets
   groter, en het border-left-lijntje minder ver naar onderen door strakkere
   line-height + kleinere onderruimte. Waarden zijn een startpunt — visueel
   bij te stellen. Het losse quote-BLOK (.c-quotes-cnt blockquote) blijft ongemoeid. */
.c-content blockquote,
section.c-section .c-imagetext__text blockquote {
    font-size: 2.5rem;
    line-height: 2.9rem;
    margin-bottom: 1rem;
    padding-bottom: 0;
}
/* CKEditor wikkelt de quote-tekst in een <p>; die erft .c-content p-styling
   (normale grootte/kleur) en breekt de quote-look. Laat 'm de blockquote erven. */
.c-content blockquote p,
section.c-section .c-imagetext__text blockquote p {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
}