/*
Theme Name: Gerritsma Auto's
Theme URI: https://gerritsma-autos.nl
Description: Child-thema van Blocksy voor Gerritsma Auto's. Kleuren, typografie en de header/footer
             staan in de Customizer (database); dit bestand bevat alleen aanvullingen die daar
             niet in te vangen zijn.
Author: LuckWorks
Template: blocksy
Version: 1.0.0
Text Domain: gerritsma
*/

/* ------------------------------------------------------------------
   Header
   Het logo bevat de bedrijfsnaam al, dus de tekstuele sitetitel ernaast
   is dubbelop. Blocksy heeft hiervoor een schakelaar onder
   Customizer > Header > Logo > Site Title; die staat standaard aan.
   ------------------------------------------------------------------ */
/* Twee klassen diep, zodat deze regel het wint van Blocksy's eigen
   dynamische stylesheet - die laadt later en zou bij gelijke
   specificiteit voorgaan. Vandaar geen !important. */
.ct-header .site-title-container,
.site-branding .site-title-container {
    display: none;
}

.site-branding .site-logo-container img {
    max-height: 62px;
    width: auto;
}

/* ------------------------------------------------------------------
   Subtiele modernisering - de basis blijft gelijk, dit haalt alleen
   de scherpe randjes eraf.
   ------------------------------------------------------------------ */

/* Zachte overgangen op alles wat klikbaar is */
a,
.ct-header [data-id="menu"] .menu a,
button,
.wp-element-button {
    transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

/* Menu: iets meer lucht en een rustige onderstreping bij hover
   in plaats van een harde kleurwissel */
.ct-header [data-id="menu"] > ul > li > a {
    letter-spacing: .04em;
}

/* Knoppen: minimale afronding, scheelt de "2015"-look zonder
   de strakke uitstraling te verliezen */
.wp-element-button,
.ct-button,
button[type="submit"],
input[type="submit"] {
    border-radius: 3px;
}

/* Zichtbare focus voor toetsenbordgebruik - ontbrak volledig */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--theme-palette-color-1, #dd1d28);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Fluent Forms - laat het zoekopdrachtformulier de huisstijl volgen
   ------------------------------------------------------------------ */
.fluentform .ff-btn-submit {
    border-radius: 3px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.fluentform .ff-el-form-control:focus {
    border-color: var(--theme-palette-color-1, #dd1d28);
    box-shadow: 0 0 0 3px rgba(221, 29, 40, .12);
}

/* Respecteer de systeemvoorkeur voor minder beweging */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* ------------------------------------------------------------------
   Footerkolommen
   Gerenderd vanuit functions.php op de hook blocksy:footer:before,
   omdat Blocksy's eigen footer-widgetgebieden alleen via de Customizer
   aan te zetten zijn. De inhoud staat in gewone widgets.
   ------------------------------------------------------------------ */
/* Eigen achtergrond, geen transparant.
   De hook blocksy:footer:before vuurt VOORDAT het footer-element opent, dus dit
   blok staat er buiten en zou anders op de lichte body-achtergrond landen -
   lichtgrijze tekst op bijna wit. #080808 is dezelfde tint als Blocksy's footer
   eronder en als de oude site, dus visueel loopt het door als een geheel. */
.gerritsma-footer-kolommen {
    background: #080808;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding: 64px 20px 48px;
    color: #a9abad;
}

.gerritsma-footer-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 48px;
}

.gerritsma-footer-kolom p {
    margin: 0 0 .8em;
    font-size: .94rem;
    line-height: 1.75;
}

.gerritsma-footer-kolom a {
    color: #e8e8e9;
    text-decoration: none;
    transition: color .18s ease;
}

.gerritsma-footer-kolom a:hover,
.gerritsma-footer-kolom a:focus-visible {
    color: var(--theme-palette-color-1, #dd1d28);
}

/* Kopjes boven de kolommen */
.gerritsma-footer-kop {
    font-family: Kanit, "Arial Narrow", Arial, sans-serif;
    font-size: .82rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #ffffff;
    margin: 0 0 1.1rem;
}

/* De payoff mag iets meer aandacht krijgen dan de rest */
.gerritsma-footer-payoff {
    font-family: Kanit, "Arial Narrow", Arial, sans-serif;
    font-size: 1.15rem !important;
    color: #ffffff;
    margin-bottom: 1rem !important;
}

.gerritsma-footer-adres {
    color: #c4c6c8;
}

.gerritsma-footer-klein {
    font-size: .84rem !important;
    color: #85878a;
}

.gerritsma-footer-lijst {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    font-size: .94rem;
}

/* ---- Sociale kanalen ---- */
.gerritsma-socials {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1.5rem;
}

.gerritsma-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    color: #e8e8e9;
    transition: color .18s ease, background-color .18s ease,
                border-color .18s ease, transform .18s ease;
}

.gerritsma-social svg {
    width: 19px;
    height: 19px;
    display: block;
}

.gerritsma-social:hover,
.gerritsma-social:focus-visible {
    color: #ffffff;
    background: var(--theme-palette-color-1, #dd1d28);
    border-color: var(--theme-palette-color-1, #dd1d28);
    transform: translateY(-2px);
}

.gerritsma-sterren {
    color: #f5b301;
    letter-spacing: .12em;
    font-size: 1rem;
}

.gerritsma-footer-reviews {
    font-size: .9rem !important;
}

/* De copyrightbalk onder de kolommen wat lucht geven */
.ct-footer-copyright {
    padding-block: .4rem;
}

/* ------------------------------------------------------------------
   Slider op schermhoogte - alle apparaten

   Zo deed de oude site het ook: de hero vult het scherm en de bezoeker
   ziet hem in zijn geheel, zonder dat er iets van de volgende sectie
   onderaan meepiept.

   Smart Slider heeft hier zelf een instelling voor (responsive-mode
   "fullpage"), maar die zit NIET in de gratis versie: alleen het type
   FullWidth is geregistreerd, de factory valt terug op standaardgedrag.
   De optienaam staat wel in de code omdat die gedeeld is met de
   Pro-versie. Vandaar dat we het hier met CSS doen.

   Waarom dvh en niet vh: op mobiel is 100vh de hoogte MET verborgen
   adresbalk. Bij het laden is die balk zichtbaar, waardoor de onderkant
   juist buiten beeld valt - precies wat we willen voorkomen. 100dvh
   volgt de werkelijk zichtbare hoogte. De vh-regel blijft staan als
   terugval voor browsers zonder dvh-ondersteuning.

   Geen !important nodig: deze selector is specifieker dan die van
   Smart Slider zelf, en de plugin zet de hoogte niet via JavaScript
   terug (getest, ook na een schermdraai).

   Terugzetten naar de vaste hoogte: verwijder dit hele blok.
   ------------------------------------------------------------------ */
.n2-section-smartslider .n2-ss-slider,
.n2-section-smartslider .n2-ss-slider-1,
.n2-section-smartslider .n2-ss-slider-2 {
    height: 100vh;
    height: 100dvh;
}

/* ------------------------------------------------------------------
   Scroll-aanwijzer onder in de hero

   Een schermvullende hero verbergt dat er meer onder staat. Dit pijltje
   maakt dat zichtbaar en scrolt bij een klik naar de eerstvolgende
   sectie. Het is een echte knop, geen decoratie, zodat hij ook met het
   toetsenbord en met een schermlezer bruikbaar is.
   ------------------------------------------------------------------ */
/* De container moet even hoog worden als de slider erin, anders steekt de
   slider eruit en hangt de scroll-aanwijzer (die hier absoluut in staat)
   ergens halverwege het scherm. */
.gerritsma-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
}

.gerritsma-scroll {
    position: absolute;
    left: 50%;
    /* Boven de bolletjes van de slider, die onderaan in het midden staan.
       Zonder deze marge valt de pijl er precies overheen. */
    bottom: 68px;
    transform: translateX(-50%);
    z-index: 5;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;

    background: none;
    border: 0;
    padding: .5rem .9rem;
    cursor: pointer;
    color: #fff;

    font-family: inherit;
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;

    /* De foto eronder is niet te voorspellen, dus een schaduw zodat de
       aanwijzer op zowel lichte als donkere beelden leesbaar blijft. */
    text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
    filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .5));

    opacity: .85;
    transition: opacity .2s ease;
}

.gerritsma-scroll:hover,
.gerritsma-scroll:focus-visible {
    opacity: 1;
}

.gerritsma-scroll svg {
    width: 26px;
    height: 26px;
    animation: gerritsma-wip 2.2s ease-in-out infinite;
}

@keyframes gerritsma-wip {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(7px); }
}

/* Op lage schermen (telefoon in liggende stand) valt de tekst weg,
   anders botst hij met de knop in de slide. */
@media (max-height: 480px) {
    .gerritsma-scroll span { display: none; }
    .gerritsma-scroll svg  { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .gerritsma-scroll svg { animation: none; }
}

/* De knop staat absoluut, maar zijn Elementor-wrapper telt nog wel mee in de
   hoogte van de hero. Dat gaf 24px extra onder de slider. */
.gerritsma-hero .elementor-widget-html {
    height: 0;
    margin: 0;
}

/* ------------------------------------------------------------------
   Tekstgrootte in de slider

   Smart Slider schaalt zijn lagen ten opzichte van een vast ontwerp-
   canvas. Op een breed scherm bleef de merknaam daardoor op 23px hangen
   - veel te klein voor een schermvullende hero.

   De maten staan hier in clamp(), zodat ze vloeiend meeschalen met de
   schermbreedte in plaats van in de stappen die Smart Slider hanteert.

   Waarom hier en niet in de slider-editor: lettergroottes zitten in
   Smart Slider in aparte stijl-presets met een eigen opslagformaat.
   Die programmatisch aanmaken is foutgevoelig. Let op de keerzijde:
   past iemand de grootte later in de Smart Slider-editor aan, dan wint
   deze CSS. Verwijder in dat geval het betreffende blok hieronder.

   De volgorde van de lagen ligt vast: 1 merknaam, 2 boodschap, 3 knop.

   Waarom hier wel !important, terwijl ik dat elders vermijd: Smart Slider
   schrijft zijn lettergroottes weg als #n2-ss-2 .n2-font-... - een
   ID-selector. Die is met klassen niet te verslaan, hoeveel je er ook
   stapelt. Dit is dus geen luiheid maar de enige route.
   ------------------------------------------------------------------ */

/* 1. Merknaam */
.n2-ss-section-main-content > .n2-ss-layer:nth-child(1) .n2-ss-text {
    font-size: clamp(1.9rem, 4.6vw, 4.25rem) !important;
    line-height: 1.08;
    letter-spacing: .02em;
}

/* 2. Boodschap van de slide */
.n2-ss-section-main-content > .n2-ss-layer:nth-child(2) .n2-ss-text {
    font-size: clamp(1.05rem, 1.7vw, 1.6rem) !important;
    line-height: 1.35;
}

/* 3. Knop */
.n2-ss-section-main-content .n2-ss-button-container {
    font-size: clamp(1rem, 1.25vw, 1.2rem) !important;
}

.n2-ss-section-main-content .n2-ss-button-container > a,
.n2-ss-section-main-content .n2-ss-button-container > div {
    padding: clamp(.7rem, 1.1vw, 1.05rem) clamp(1.3rem, 2.2vw, 2.1rem) !important;
    line-height: 1.2 !important
}

/* Footerlogo. Iets ruimer dan de originele 132px, want op een donkere
   achtergrond oogt hij anders kleiner dan hij is. */
.gerritsma-footer-logo {
    display: inline-block;
    margin-bottom: 1.4rem;
    opacity: .92;
    transition: opacity .18s ease;
}

.gerritsma-footer-logo:hover,
.gerritsma-footer-logo:focus-visible {
    opacity: 1;
}

.gerritsma-footer-logo img {
    width: 150px;
    height: auto;
    display: block;
}

/* Logo en payoff gecentreerd boven de footerkolommen */
.gerritsma-footer-top {
    text-align: center;
    margin-bottom: 3rem;
}

.gerritsma-footer-top .gerritsma-footer-logo {
    margin-bottom: .9rem;
}

.gerritsma-footer-top .gerritsma-footer-logo img {
    margin: 0 auto;
}

.gerritsma-footer-top .gerritsma-footer-payoff {
    margin: 0 !important;
}

/* Kolominhoud gecentreerd, passend bij het gecentreerde logo erboven.
   De socialknoppen en de linklijst centreren als flex-items apart -
   text-align raakt die niet. */
.gerritsma-footer-kolom {
    text-align: center;
}

.gerritsma-footer-kolom .gerritsma-footer-lijst {
    align-items: center;
}

.gerritsma-footer-kolom .gerritsma-socials {
    justify-content: center;
}

/* Importeren: formulier rechts naast de tekst op desktop; op tablet en mobiel direct na de intro.
   De kolommen zelf zijn gewone Elementor-containers (klassen gi-intro, gi-formulier, gi-stappen). */
@media (min-width: 1025px) {
	.e-con.gerritsma-import-boven {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 420px;
		grid-template-areas: "intro formulier" "stappen formulier";
		column-gap: 56px;
		row-gap: 0;
		align-items: start;
	}
	.gerritsma-import-boven > .gi-intro { grid-area: intro; }
	.gerritsma-import-boven > .gi-stappen { grid-area: stappen; }
	.gerritsma-import-boven > .gi-formulier { grid-area: formulier; }
}
/* Meeschuiven tijdens het lezen, alleen als het hele formulier op het scherm past. */
@media (min-width: 1025px) and (min-height: 900px) {
	.gerritsma-import-boven > .gi-formulier { position: sticky; top: 115px; }
}