/* =====================================================
   OCCASIONPLEIN TWENTE
   Definitieve CSS
   Zwart + warm oranje
   ===================================================== */

:root {
    --opt-dark: #111111;
    --opt-orange: #f28c28;
    --opt-orange-dark: #e76f1e;
    --opt-text: #303236;
    --opt-muted: #6b6d70;
    --opt-light: #f6f5f2;
    --opt-border: #e5e2dc;
    --opt-white: #ffffff;

    --opt-radius: 16px;
    --opt-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);
    --opt-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.14);

    --opt-gradient: linear-gradient(
        135deg,
        var(--opt-orange),
        var(--opt-orange-dark)
    );
}


/* =====================================================
   ALGEMEEN
   ===================================================== */

div.sharedaddy,
#content div.sharedaddy,
#main div.sharedaddy {
    display: none !important;
}


/* =====================================================
   HEADER / LOGO / NAVIGATIE
   ===================================================== */

.has-contrast-background-color {
    padding-top: 22px !important;
    padding-bottom: 22px !important;

    background: var(--opt-dark) !important;

    border-bottom: 3px solid var(--opt-orange);
}

.has-contrast-background-color > .wp-block-columns {
    max-width: 1200px;

    margin: 0 auto !important;

    align-items: center !important;
}


/* Logo */
.has-contrast-background-color .wp-block-image {
    margin: 0 !important;
}

.has-contrast-background-color .wp-block-image img {
    display: block;

    width: 300px !important;
    max-width: 100%;
    height: auto !important;
}


/* Navigatie */
.has-contrast-background-color .wp-block-navigation {
    margin: 0;
}


/* Terugknop */
.has-contrast-background-color
.wp-block-navigation-item__content {
    display: inline-flex;

    align-items: center;

    padding: 11px 18px !important;

    background: var(--opt-orange);

    color: var(--opt-white) !important;

    border-radius: 9px;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 0.4px;

    text-decoration: none !important;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.has-contrast-background-color
.wp-block-navigation-item__content::before {
    content: "←";

    margin-right: 8px;

    font-size: 17px;
}

.has-contrast-background-color
.wp-block-navigation-item__content:hover {
    background: var(--opt-orange-dark);

    transform: translateY(-2px);

    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.18);
}


/* =====================================================
   AUTO OVERZICHT
   ===================================================== */

.category-auto-aanbod > .wp-block-columns {
    margin-bottom: 30px;

    overflow: hidden;

    background: var(--opt-white);

    border-radius: var(--opt-radius);

    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.category-auto-aanbod > .wp-block-columns:hover {
    transform: translateY(-4px);

    box-shadow: var(--opt-shadow-hover);
}


/* Foto */
.category-auto-aanbod .wp-block-post-featured-image,
.category-auto-aanbod .wp-block-post-featured-image a {
    height: 100%;

    margin: 0;

    overflow: hidden;
}

.category-auto-aanbod .wp-block-post-featured-image img {
    display: block;

    width: 100% !important;
    height: 100% !important;

    min-height: 280px;

    object-fit: cover !important;

    transition: transform 0.35s ease;
}

.category-auto-aanbod > .wp-block-columns:hover
.wp-block-post-featured-image img {
    transform: scale(1.035);
}


/* Tekstkolom */
.category-auto-aanbod > .wp-block-columns >
.wp-block-column:last-child {
    padding: 28px 30px 28px 12px;
}


/* Autotitel */
.category-auto-aanbod .wp-block-post-title {
    margin: 0 0 12px;

    font-size: clamp(26px, 3vw, 38px);
    font-weight: 700;

    line-height: 1.15;
}

.category-auto-aanbod .wp-block-post-title a {
    color: var(--opt-dark);

    text-decoration: none;
}

.category-auto-aanbod .wp-block-post-title a:hover {
    color: var(--opt-orange-dark);
}


/* Specificatieregel */
.category-auto-aanbod .wp-block-post-excerpt {
    margin-bottom: 16px;
}

.category-auto-aanbod .wp-block-post-excerpt__excerpt {
    margin: 0;

    padding: 10px 12px;

    background: var(--opt-light);

    border-radius: 9px;

    color: #44474c;

    font-size: 15px;
    font-weight: 600;

    line-height: 1.6;
}


/* Omschrijving */
.category-auto-aanbod .wp-block-paragraph {
    color: var(--opt-muted);

    line-height: 1.65;
}


/* Bekijk auto knop */
.category-auto-aanbod .wp-block-read-more {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 8px;

    padding: 12px 22px;

    background: var(--opt-gradient) !important;

    color: var(--opt-white) !important;

    border: 0;

    border-radius: 9px;

    box-shadow:
        0 5px 14px rgba(242, 140, 40, 0.25);

    font-size: 16px;
    font-weight: 700;

    text-decoration: none !important;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.category-auto-aanbod .wp-block-read-more::after {
    content: "→";

    font-size: 18px;

    transition: transform 0.2s ease;
}

.category-auto-aanbod .wp-block-read-more:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 18px rgba(242, 140, 40, 0.35);
}

.category-auto-aanbod .wp-block-read-more:hover::after {
    transform: translateX(4px);
}


/* Oude scheidingslijnen verbergen */
.category-auto-aanbod > .wp-block-separator {
    display: none;
}


/* =====================================================
   VERKOCHT LABEL
   Tag in WordPress: Verkocht
   ===================================================== */

.tag-verkocht .wp-block-post-featured-image {
    position: relative;

    overflow: hidden;
}


/* Schuin VERKOCHT lint */
.tag-verkocht .wp-block-post-featured-image::after {
    content: "VERKOCHT";

    position: absolute;

    top: 24px;
    left: -44px;

    z-index: 10;

    width: 190px;

    padding: 11px 0;

    background: var(--opt-orange);

    color: var(--opt-white);

    text-align: center;

    font-size: 15px;
    font-weight: 800;

    letter-spacing: 1.5px;

    transform: rotate(-45deg);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.22);

    pointer-events: none;
}


/* Verkochte foto subtiel rustiger */
.tag-verkocht .wp-block-post-featured-image img {
    filter: grayscale(20%);

    opacity: 0.88;
}


/* =====================================================
   AUTOPAGINA HEADER
   ===================================================== */

.single-post .has-accent-1-background-color {
    padding: 42px 30px !important;

    background: var(--opt-dark) !important;

    border-radius: 0 0 18px 18px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.16);
}


/* Header centreren */
.single-post .has-accent-1-background-color >
.wp-block-columns {
    width: 100% !important;

    max-width: 1200px !important;

    margin: 0 auto !important;

    padding: 0 !important;

    gap: 0 !important;
}


/* Lege linker kolom verwijderen */
.single-post .has-accent-1-background-color
.wp-block-columns > .wp-block-column:first-child {
    display: none !important;
}


/* Titelkolom volledige breedte */
.single-post .has-accent-1-background-color
.wp-block-columns > .wp-block-column:last-child {
    flex-basis: 100% !important;

    width: 100% !important;
    max-width: 100% !important;
}


/* Autonaam */
.single-post .has-accent-1-background-color
.wp-block-post-title {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--opt-white) !important;

    font-size:
        clamp(32px, 4vw, 46px) !important;

    font-weight: 700;

    line-height: 1.15;

    word-break: normal !important;
    overflow-wrap: normal !important;
}


/* Oranje accent onder titel */
.single-post .has-accent-1-background-color
.wp-block-post-title::after {
    content: "";

    display: block;

    width: 50px;
    height: 4px;

    margin: 15px 0 13px;

    background: var(--opt-orange);

    border-radius: 20px;
}


/* Specificaties */
.single-post .has-accent-1-background-color
.wp-block-post-excerpt {
    margin: 0 !important;
}

.single-post .has-accent-1-background-color
.wp-block-post-excerpt__excerpt {
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    color: #e6e6e6 !important;

    font-size: 17px;
    font-weight: 500;

    line-height: 1.5;
}


/* =====================================================
   AUTOPAGINA CONTENT
   ===================================================== */

.single-post .wp-block-post-content {
    color: var(--opt-text);

    line-height: 1.7;
}


/* Oude ===== regel verwijderen */
.single-post .wp-block-post-content > p:first-of-type {
    display: none;
}


/* Hoofdtitel */
.single-post .wp-block-post-content h1 {
    margin: 0 0 24px;

    padding-bottom: 14px;

    color: var(--opt-dark);

    border-bottom:
        3px solid var(--opt-orange);

    font-size:
        clamp(28px, 4vw, 42px);

    line-height: 1.15;
}


/* Sectietitels */
.single-post .wp-block-post-content h2 {
    margin: 40px 0 18px;

    color: var(--opt-dark);

    font-size: 24px;
}


/* Informatieblokken */
.single-post .wp-block-post-content h1 ~ p,
.single-post .wp-block-post-content h2 + p {
    padding: 18px 20px;

    background: #faf9f7;

    border:
        1px solid var(--opt-border);

    border-radius: 12px;
}


/* Prijsblok */
.single-post .wp-block-post-content h1 + p {
    display: inline-block;

    background: var(--opt-dark);

    color: var(--opt-white);

    border: 0;

    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.12);

    font-size: 22px;
    font-weight: 700;
}


/* Scheidingslijnen */
.single-post .wp-block-separator {
    margin: 36px 0 !important;

    border: 0 !important;

    border-top:
        1px solid var(--opt-border) !important;

    opacity: 1 !important;
}


/* =====================================================
   FOTOGALERIJ
   ===================================================== */

.single-post .wp-block-jetpack-tiled-gallery {
    max-width: 850px !important;

    margin:
        25px auto 35px !important;

    overflow: hidden;

    border-radius: var(--opt-radius);

    box-shadow: var(--opt-shadow);
}

.single-post .tiled-gallery__item {
    overflow: hidden;
}

.single-post .tiled-gallery__item img {
    transition: transform 0.35s ease;
}

.single-post .tiled-gallery__item:hover img {
    transform: scale(1.025);
}


/* =====================================================
   STICKY CONTACT AUTOPAGINA
   ===================================================== */

.single-post .auto-contact-sticky {
    position: fixed !important;

    top: 300px;
    right: 35px;

    z-index: 100;

    width: 280px;

    padding: 26px;

    box-sizing: border-box;

    background: var(--opt-dark);

    color: var(--opt-white);

    border-top:
        4px solid var(--opt-orange);

    border-radius: var(--opt-radius);

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.18);
}


/* Contacttitel */
.single-post .auto-contact-sticky h3 {
    margin: 0 0 12px;

    color: var(--opt-white);

    font-size: 23px;

    line-height: 1.25;
}


/* Contacttekst */
.single-post .auto-contact-sticky p {
    margin: 0 0 20px;

    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    color: #eeeeee !important;

    line-height: 1.55;
}


/* Contactknoppen */
.single-post .auto-contact-sticky a {
    display: block;

    width: 100%;

    box-sizing: border-box;

    padding: 13px 16px;

    margin-top: 10px;

    border-radius: 9px;

    text-align: center;

    text-decoration: none !important;

    font-weight: 700;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* Bellen */
.single-post .auto-contact-sticky
.contact-call {
    background: var(--opt-gradient);

    color: var(--opt-white) !important;
}


/* WhatsApp */
.single-post .auto-contact-sticky
.contact-whatsapp {
    background: #25d366;

    color: var(--opt-white) !important;
}


/* Hover */
.single-post .auto-contact-sticky a:hover {
    transform: translateY(-2px);

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.18);
}


/* =====================================================
   OVER ONS
   ===================================================== */

.wp-block-heading.has-xx-large-font-size {
    margin-bottom: 20px;

    color: var(--opt-dark);

    line-height: 1.15;
}

.wp-block-column[style*="flex-basis:70%"] > p {
    max-width: 750px;

    color: #5e6064;

    font-size: 17px;

    line-height: 1.8;
}

.wp-block-column[style*="flex-basis:70%"] >
p:nth-of-type(3) {
    color: var(--opt-dark);

    font-weight: 600;
}


/* =====================================================
   CONTACTKAART OVER ONS
   ===================================================== */

.wp-block-column[style*="flex-basis:33.33%"]
.has-accent-4-background-color {
    padding: 30px !important;

    background: var(--opt-dark) !important;

    color: var(--opt-white);

    border-top:
        4px solid var(--opt-orange);

    border-radius: var(--opt-radius);

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.14);
}

.wp-block-column[style*="flex-basis:33.33%"]
.has-accent-4-background-color h3 {
    margin: 0 0 18px;

    color: var(--opt-orange);

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 1.5px;
}

.wp-block-column[style*="flex-basis:33.33%"]
.has-accent-4-background-color blockquote {
    margin: 0;

    padding: 0;

    border: 0;
}

.wp-block-column[style*="flex-basis:33.33%"]
.has-accent-4-background-color p {
    margin: 0;

    color: var(--opt-white);

    line-height: 1.8;
}

.wp-block-column[style*="flex-basis:33.33%"]
.has-accent-4-background-color a {
    color: var(--opt-orange) !important;

    font-weight: 700;

    text-decoration: none;
}

.wp-block-column[style*="flex-basis:33.33%"]
.has-accent-4-background-color a:hover {
    text-decoration: underline;
}


/* =====================================================
   GOOGLE MAPS
   ===================================================== */

iframe[src*="google.com/maps"] {
    display: block;

    width: 100% !important;
    height: 450px !important;

    margin-top: 35px;

    border: 0 !important;

    border-radius: var(--opt-radius);

    box-shadow: var(--opt-shadow);
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 1100px) {

    .single-post .auto-contact-sticky {
        position: static !important;

        width: 100%;

        margin: 30px 0;
    }
}


/* =====================================================
   MOBIEL
   ===================================================== */

@media (max-width: 781px) {

    /* Header */
    .has-contrast-background-color {
        padding:
            16px 18px !important;
    }

    .has-contrast-background-color >
    .wp-block-columns {
        gap: 15px !important;
    }

    .has-contrast-background-color
    .wp-block-image img {
        width: 220px !important;
    }

    .has-contrast-background-color
    .wp-block-navigation__responsive-container-open {
        color: var(--opt-white);
    }

    .has-contrast-background-color
    .wp-block-navigation__responsive-container-open svg {
        fill: var(--opt-white);
    }


    /* Auto overzicht */
    .category-auto-aanbod > .wp-block-columns {
        margin-bottom: 22px;

        border-radius: 12px;
    }

    .category-auto-aanbod > .wp-block-columns >
    .wp-block-column:last-child {
        padding: 22px;
    }

    .category-auto-aanbod
    .wp-block-post-featured-image img {
        min-height: 220px;
    }

    .category-auto-aanbod
    .wp-block-post-title {
        font-size: 28px;
    }

    .category-auto-aanbod
    .wp-block-post-excerpt__excerpt {
        font-size: 14px;
    }

    .category-auto-aanbod
    .wp-block-read-more {
        width: 100%;

        box-sizing: border-box;

        justify-content: center;
    }


    /* Verkocht lint iets kleiner */
    .tag-verkocht
    .wp-block-post-featured-image::after {
        top: 20px;
        left: -48px;

        width: 185px;

        padding: 9px 0;

        font-size: 13px;
    }


    /* Autopagina header */
    .single-post
    .has-accent-1-background-color {
        padding:
            28px 20px !important;

        border-radius:
            0 0 14px 14px;
    }

    .single-post
    .has-accent-1-background-color
    .wp-block-post-title {
        font-size:
            30px !important;
    }

    .single-post
    .has-accent-1-background-color
    .wp-block-post-excerpt__excerpt {
        font-size:
            15px !important;
    }


    /* Autodetail */
    .single-post
    .wp-block-post-content h1 {
        font-size: 30px;
    }

    .single-post
    .wp-block-post-content h2 {
        font-size: 21px;
    }

    .single-post
    .wp-block-post-content h1 ~ p,
    .single-post
    .wp-block-post-content h2 + p {
        padding: 15px 16px;
    }

    .single-post
    .wp-block-post-content h1 + p {
        display: block;

        font-size: 20px;
    }


    /* Galerij */
    .single-post
    .wp-block-jetpack-tiled-gallery {
        max-width: 100% !important;

        margin:
            15px auto 25px !important;

        border-radius: 12px;
    }


    /* Over ons */
    .wp-block-column[style*="flex-basis:70%"] > p {
        font-size: 16px;

        line-height: 1.7;
    }

    .wp-block-column[style*="flex-basis:33.33%"]
    .has-accent-4-background-color {
        margin-top: 10px;

        padding: 24px !important;

        border-radius: 12px;
    }


    /* Maps */
    iframe[src*="google.com/maps"] {
        height: 350px !important;

        margin-top: 25px;

        border-radius: 12px;
    }
}


/* =====================================================
   VERKOCHT - DETAILPAGINA OP BASIS VAN TAG
   ===================================================== */

body.single-post:has(.tag-verkocht)
.has-accent-1-background-color
.wp-block-post-title::before,
body.single-post:has(a[href*="/tag/verkocht"])
.has-accent-1-background-color
.wp-block-post-title::before {
    content: "VERKOCHT";

    display: table;

    margin-bottom: 14px;
    padding: 8px 14px;

    background: var(--opt-orange);
    color: #fff;

    border-radius: 7px;

    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1.4px;
}


/* Contacttitel verbergen */
body.single-post:has(.tag-verkocht)
.auto-contact-sticky h3,
body.single-post:has(a[href*="/tag/verkocht"])
.auto-contact-sticky h3 {
    font-size: 0;
}

/* Tekst: Deze auto is verkocht */
body.single-post:has(.tag-verkocht)
.auto-contact-sticky h3::after,
body.single-post:has(a[href*="/tag/verkocht"])
.auto-contact-sticky h3::after {
    content: "Deze auto is verkocht";
    font-size: 23px;
}


/* Tekst onder de titel bij verkochte auto */
body.single-post:has(.tag-verkocht)
.auto-contact-sticky p,
body.single-post:has(a[href*="/tag/verkocht"])
.auto-contact-sticky p {
    font-size: 0 !important;
}

body.single-post:has(.tag-verkocht)
.auto-contact-sticky p::after,
body.single-post:has(a[href*="/tag/verkocht"])
.auto-contact-sticky p::after {
    content: "Vergelijkbare auto gezocht?\A\A Vertel ons je wensen, dan gaan we graag voor je op zoek.";
white-space: pre-line;
    display: block;
    font-size: 16px !important;
    line-height: 1.55 !important;
    color: #eeeeee !important;
}


/* Tags verbergen */
.single-post .taxonomy-post_tag.wp-block-post-terms {
    display: none !important;
}


/* =====================================================
   VERKOCHTE AUTO'S ALTIJD ONDERAAN
   ===================================================== */

.wp-block-query .wp-block-post-template {
    display: flex !important;

    flex-direction: column !important;
}


/* Alle auto's normaal */
.wp-block-query
.wp-block-post.category-auto-aanbod {
    order: 1;
}


/* Verkochte auto's onderaan */
.wp-block-query
.wp-block-post.category-auto-aanbod.tag-verkocht {
    order: 99;
}


/* =====================================================
   VERKOCHT - DETAILPAGINA AUTOMATISCH
   ===================================================== */

body.single-post:has(.tag-verkocht)
.has-accent-1-background-color
.wp-block-post-title::before {
    content: "VERKOCHT";

    display: table;

    margin-bottom: 14px;
    padding: 8px 14px;

    background: var(--opt-orange);
    color: #fff;

    border-radius: 7px;

    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1.4px;
}


/* Contacttitel vervangen */
body.single-post:has(.tag-verkocht)
.auto-contact-sticky h3 {
    font-size: 0;
}

body.single-post:has(.tag-verkocht)
.auto-contact-sticky h3::after {
    content: "Deze auto is verkocht";

    font-size: 23px;
}


/* ==================================================
   OCCASIONPLEIN TWENTE — AUTODEALER FOOTER
   ================================================== */

.wp-block-group.has-contrast-background-color:has(.wp-block-site-title) {
    position: relative;

    overflow: hidden;

    padding: 55px 5vw 50px !important;

    background:
        linear-gradient(
            110deg,
            rgba(255,255,255,.025),
            transparent 45%
        ),
        var(--opt-dark) !important;
}


/* Oranje accentlijn bovenaan */
.wp-block-group.has-contrast-background-color:has(.wp-block-site-title)::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background: var(--opt-orange);
}


/* =========================
   BEDRIJFSNAAM
   ========================= */

.wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
.wp-block-site-title {
    position: relative;

    margin: 0 0 45px !important;

    padding-bottom: 24px;

    font-size: clamp(32px, 4vw, 52px) !important;

    line-height: 1 !important;

    font-weight: 800 !important;

    letter-spacing: -2px;

    text-transform: uppercase;

    border-bottom:
        1px solid rgba(255,255,255,.14);
}

.wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
.wp-block-site-title a {
    color: #fff !important;

    text-decoration: none !important;
}


/* Ondertitel */
.wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
.wp-block-site-title::after {
    content:
        "OCCASIONS  •  RDW ERKEND  •  PROEFRIT OP AFSPRAAK";

    display: block;

    margin-top: 13px;

    color: rgba(255,255,255,.55);

    font-size: 11px;

    line-height: 1.4;

    font-weight: 600;

    letter-spacing: 2.2px;
}


/* =========================
   TWEE INFOBLOKKEN
   ========================= */

.wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
.wp-block-columns {
    position: relative;

    gap: 0 !important;

    margin: 0 !important;

    padding: 0 !important;
}

.wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
.wp-block-column {
    border: 0 !important;

    padding: 15px 45px !important;
}


/* RDW gedeelte */
.wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
.wp-block-column:first-child {
    padding-left: 0 !important;

    border-right:
        1px solid rgba(255,255,255,.15) !important;
}


/* Openingstijden */
.wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
.wp-block-column:nth-child(2) {
    position: relative;

    padding-right: 0 !important;
}


/* =========================
   ALGEMENE KOPPEN
   ========================= */

.wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
.wp-block-column h3 {
    margin: 0 !important;

    color: #fff !important;

    font-size: 16px !important;

    font-weight: 700 !important;

    line-height: 1.75 !important;

    letter-spacing: .3px;
}


/* =========================
   RDW KOP
   ========================= */

.wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
.wp-block-column:first-child h3 {
    display: inline-block;

    margin-bottom: 16px !important;

    padding-left: 14px;

    border-left:
        4px solid var(--opt-orange);

    font-size: 20px !important;

    line-height: 1.2 !important;

    text-transform: uppercase !important;

    letter-spacing: 1px;
}


/* =========================
   RDW TEKST
   ========================= */

.wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
.wp-block-column:first-child p {
    max-width: 390px;

    margin: 0 0 22px !important;

    color:
        rgba(255,255,255,.68) !important;

    font-size: 15px !important;

    line-height: 1.65 !important;
}


/* =========================
   RDW AFBEELDING
   ========================= */

.wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
.wp-block-image {
    margin: 25px 0 0 !important;
}

.wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
.wp-block-image img {
    width: 155px !important;

    max-width: 100%;

    height: auto !important;

    background: #fff;

    padding: 6px;
}


/* =========================
   BEZOEK & PROEFRIT LABEL
   ========================= */

.wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
.wp-block-column:nth-child(2)::before {
    content: "BEZOEK & PROEFRIT";

    display: block;

    margin-bottom: 16px;

    padding-left: 14px;

    border-left:
        4px solid var(--opt-orange);

    color: #fff;

    font-size: 20px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 1px;
}


/* =========================
   OPENINGSTIJDEN
   ========================= */

.wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
.wp-block-column:nth-child(2) h3 {
    font-size: 16px !important;

    font-weight: 500 !important;

    line-height: 1.9 !important;

    text-transform: none !important;

    letter-spacing: 0 !important;
}


/* =========================
   TELEFOONNUMMER
   ========================= */

.wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
a[href^="tel:"] {
    display: inline-block;

    margin-top: 8px;

    color: #fff !important;

    font-size: 22px !important;

    font-weight: 800 !important;

    letter-spacing: .4px;

    text-decoration: none !important;

    border-bottom:
        3px solid var(--opt-orange);

    transition:
        color .2s ease,
        border-color .2s ease;
}

.wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
a[href^="tel:"]:hover {
    color: var(--opt-orange) !important;

    border-bottom-color: #fff;
}


/* =========================
   SUBTIELE ACHTERGRONDTEKST
   ========================= */

.wp-block-group.has-contrast-background-color:has(.wp-block-site-title)::after {
    content: "OCCASIONS";

    position: absolute;

    right: -20px;
    bottom: -25px;

    color:
        rgba(255,255,255,.025);

    font-size:
        clamp(80px, 12vw, 180px);

    line-height: .8;

    font-weight: 900;

    letter-spacing: -8px;

    pointer-events: none;
}


/* =========================
   FOOTER MOBIEL
   ========================= */

@media (max-width: 781px) {

    .wp-block-group.has-contrast-background-color:has(.wp-block-site-title) {
        padding:
            40px 22px !important;
    }

    .wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
    .wp-block-site-title {
        margin-bottom:
            28px !important;

        padding-bottom: 20px;

        font-size:
            31px !important;

        letter-spacing: -1px;
    }

    .wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
    .wp-block-site-title::after {
        font-size: 9px;

        line-height: 1.6;

        letter-spacing: 1.4px;
    }

    .wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
    .wp-block-columns {
        display: block !important;
    }

    .wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
    .wp-block-column {
        width: 100% !important;

        padding:
            30px 0 !important;
    }

    .wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
    .wp-block-column:first-child {
        padding-top: 0 !important;

        border-right: 0 !important;

        border-bottom:
            1px solid rgba(255,255,255,.15) !important;
    }

    .wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
    .wp-block-column:nth-child(2) {
        padding-bottom: 0 !important;
    }

    .wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
    .wp-block-column:first-child h3,
    .wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
    .wp-block-column:nth-child(2)::before {
        font-size:
            18px !important;
    }

    .wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
    a[href^="tel:"] {
        font-size:
            20px !important;
    }

    .wp-block-group.has-contrast-background-color:has(.wp-block-site-title)::after {
        display: none;
    }
}

/* ==================================================
   FOOTER — FINETUNING
   ================================================== */

/* Info-blokken iets mooier uitlijnen */
.wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
.wp-block-columns {
    align-items: center !important;
}

/* RDW logo iets groter */
.wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
.wp-block-image img {
    width: 175px !important;
}

/* Openingsdagen iets minder dominant */
.wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
.wp-block-column:nth-child(2) h3 {
    color: rgba(255,255,255,.82) !important;
    line-height: 2 !important;
}

/* Telefoonnummer iets netter */
.wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
a[href^="tel:"] {
    border-bottom-width: 2px !important;
    padding-bottom: 3px;
}

/* Verticale scheidingslijn iets subtieler */
.wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
.wp-block-column:first-child {
    border-right-color: rgba(255,255,255,.10) !important;
}

/* Achtergrondwoord rustiger en iets hoger */
.wp-block-group.has-contrast-background-color:has(.wp-block-site-title)::after {
    right: -10px;
    bottom: -5px;
    color: rgba(255,255,255,.018);
    font-size: clamp(75px, 10vw, 150px);
}

/* Iets meer ruimte onder de hoofdheader */
.wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
.wp-block-site-title {
    margin-bottom: 38px !important;
}


/* Mobiel */
@media (max-width: 781px) {

    .wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
    .wp-block-columns {
        align-items: stretch !important;
    }

    .wp-block-group.has-contrast-background-color:has(.wp-block-site-title)
    .wp-block-image img {
        width: 160px !important;
    }
}

/* =====================================================
   HEADER / NAVIGATIE — OPGESCHOONDE DEFINITIEVE VERSIE
   Desktop vanaf 901px
   Hamburger t/m 900px
   ===================================================== */

/* -------------------------
   BASIS / DESKTOP
   ------------------------- */
header.wp-block-template-part {
    position: relative !important;
    overflow: hidden !important;

    padding-top: 55px;

    background-image:
        url("https://occasionpleintwente.com/wp-content/uploads/2026/08/zwarte-sportauto-design.jpg") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    border-bottom: 5px solid var(--opt-orange) !important;
}

header.wp-block-template-part > .wp-block-group {
    position: relative !important;
    z-index: 2;

    padding-top: 45px !important;
    padding-bottom: 45px !important;

    background: transparent !important;
    border: 0 !important;
}

header.wp-block-template-part .wp-block-columns {
    position: static !important;
    align-items: center !important;
}

header.wp-block-template-part
.wp-block-columns > .wp-block-column:first-child {
    flex-basis: 100% !important;
}

header.wp-block-template-part .wp-block-image {
    margin: 25px 0 0 !important;
}

header.wp-block-template-part .wp-block-image img {
    display: block;
    width: 400px !important;
    max-width: 100% !important;
    height: auto !important;
}

header.wp-block-template-part .wp-block-social-links {
    display: none !important;
}

header.wp-block-template-part
.wp-block-columns > .wp-block-column:last-child {
    position: absolute !important;
    top: 125px;
    right: max(30px, calc((100% - 1200px) / 2));
    z-index: 20;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

header.wp-block-template-part .wp-block-navigation {
    position: static !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Geen pijlen bij de headerknoppen */
header.wp-block-template-part
.wp-block-navigation-item__content::before,
header.wp-block-template-part
.wp-block-navigation-item__content::after {
    content: none !important;
    display: none !important;
}

/* Desktopknoppen */
header.wp-block-template-part
.wp-block-navigation-item__content {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 48px !important;
    padding: 0 20px !important;

    background: var(--opt-orange) !important;
    color: #fff !important;

    border-radius: 9px !important;

    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    box-shadow: 0 5px 14px rgba(0,0,0,.18) !important;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease !important;
}

header.wp-block-template-part
.wp-block-navigation-item__content:hover {
    background: var(--opt-orange-dark) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,.24) !important;
}

header.wp-block-template-part
.wp-block-navigation__container {
    gap: 12px !important;
}

/* Oude losse HR niet meer als tweede hero gebruiken */
header.wp-block-template-part .double-hr {
    display: none !important;
}


/* -------------------------
   MOBIEL + TABLET
   t/m 900px = hamburger
   ------------------------- */
@media (max-width: 900px) {

    header.wp-block-template-part {
        min-height: 140px !important;
        height: auto !important;
        padding: 0 !important;

        background-image:
            linear-gradient(rgba(0,0,0,.68), rgba(0,0,0,.68)),
            url("https://occasionpleintwente.com/wp-content/uploads/2026/08/zwarte-sportauto-design.jpg") !important;
        background-size: cover !important;
        background-position: 65% center !important;
        background-repeat: no-repeat !important;

        border-bottom: 3px solid var(--opt-orange) !important;
        overflow: hidden !important;
    }

    header.wp-block-template-part > .wp-block-group {
        position: relative !important;
        min-height: 140px !important;
        margin: 0 !important;
        padding: 20px 18px !important;
        background: transparent !important;
    }

    header.wp-block-template-part .wp-block-columns {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        min-height: 100px !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    header.wp-block-template-part
    .wp-block-columns > .wp-block-column:first-child {
        position: static !important;
        flex: 0 1 auto !important;
        flex-basis: auto !important;
        width: auto !important;
    }

    header.wp-block-template-part .wp-block-image {
        position: static !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateY(10px) !important;
    }

    header.wp-block-template-part .wp-block-image img {
        width: 165px !important;
        max-width: 52vw !important;
        height: auto !important;
    }

    /* Rechter kolom bevat alleen de hamburger */
    header.wp-block-template-part
    .wp-block-columns > .wp-block-column:last-child {
        position: absolute !important;
        top: 10px !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 100 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
    }

    header.wp-block-template-part .wp-block-navigation {
        position: static !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        transform: none !important;
    }

    /* Hamburger altijd zichtbaar t/m 900px */
    header.wp-block-template-part
    .wp-block-navigation__responsive-container-open {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 8px !important;

        background: transparent !important;
        color: #fff !important;
        border: 0 !important;
    }

    header.wp-block-template-part
    .wp-block-navigation__responsive-container-open svg {
        width: 28px !important;
        height: 28px !important;
        fill: #fff !important;
    }

    /* Gesloten toestand: menu zelf absoluut niet tonen */
    header.wp-block-template-part
    .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Geopend hamburger-menu */
    header.wp-block-template-part
    .wp-block-navigation__responsive-container.is-menu-open {
        position: fixed !important;
        inset: 0 !important;
        z-index: 999999 !important;

        display: flex !important;
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #111 !important;
        color: #fff !important;

        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;

        overflow: hidden !important;
        animation: opt-menu-in .28s ease-out both;
    }

    @keyframes opt-menu-in {
        from { transform: translateX(100%); }
        to   { transform: translateX(0); }
    }

    header.wp-block-template-part
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-close,
    header.wp-block-template-part
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-dialog {
        width: 100% !important;
        height: 100% !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Sluitkruis */
    header.wp-block-template-part
    .wp-block-navigation__responsive-container-close {
        display: none !important;
    }

    header.wp-block-template-part
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close {
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        z-index: 10 !important;

        display: flex !important;
        margin: 0 !important;
        padding: 6px !important;

        background: transparent !important;
        color: #fff !important;
        border: 0 !important;
    }

    header.wp-block-template-part
    .wp-block-navigation__responsive-container-close svg {
        width: 30px !important;
        height: 30px !important;
        fill: #fff !important;
    }

    /* Menu-items centraal */
    header.wp-block-template-part
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        height: 100% !important;
        min-height: 100dvh !important;

        box-sizing: border-box !important;
        padding: 70px 25px !important;
    }

    header.wp-block-template-part
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        width: 100% !important;
        max-width: 420px !important;

        margin: 0 auto !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    header.wp-block-template-part
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    header.wp-block-template-part
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;

        min-height: 0 !important;
        margin: 0 !important;
        padding: 18px 10px !important;

        background: transparent !important;
        color: #fff !important;

        border: 0 !important;
        border-bottom: 3px solid var(--opt-orange) !important;
        border-radius: 0 !important;
        box-shadow: none !important;

        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: center !important;
        text-decoration: none !important;
        text-transform: uppercase !important;

        transform: none !important;
    }

    header.wp-block-template-part
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__label {
        color: #fff !important;
        opacity: 1 !important;
    }
}


/* -------------------------
   LANDSCAPE T/M 900px
   Zelfde hamburger, iets compacter
   ------------------------- */
@media (max-width: 900px) and (orientation: landscape) {

    header.wp-block-template-part {
        min-height: 120px !important;
        background-position: 70% center !important;
    }

    header.wp-block-template-part > .wp-block-group {
        min-height: 120px !important;
        padding: 14px 22px !important;
    }

    header.wp-block-template-part .wp-block-columns {
        min-height: 92px !important;
    }

    header.wp-block-template-part .wp-block-image {
        transform: translateY(6px) !important;
    }

    header.wp-block-template-part .wp-block-image img {
        width: 175px !important;
        max-width: 30vw !important;
    }

    header.wp-block-template-part
    .wp-block-columns > .wp-block-column:last-child {
        top: 6px !important;
    }
}


/* -------------------------
   KLEINE TELEFOONS
   ------------------------- */
@media (max-width: 420px) {

    header.wp-block-template-part {
        min-height: 130px !important;
    }

    header.wp-block-template-part > .wp-block-group {
        min-height: 130px !important;
        padding: 16px 14px !important;
    }

    header.wp-block-template-part .wp-block-columns {
        min-height: 98px !important;
    }

    header.wp-block-template-part .wp-block-image img {
        width: 150px !important;
        max-width: 52vw !important;
    }
}


/* -------------------------
   DESKTOP VANAF 901px
   ------------------------- */
@media (min-width: 901px) {

    header.wp-block-template-part
    .wp-block-navigation__responsive-container-open,
    header.wp-block-template-part
    .wp-block-navigation__responsive-container-close {
        display: none !important;
    }

    header.wp-block-template-part
    .wp-block-navigation__responsive-container {
        position: static !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        background: transparent !important;
    }

    header.wp-block-template-part
    .wp-block-navigation__responsive-container-content {
        display: flex !important;
        align-items: center !important;
        width: auto !important;
        padding: 0 !important;
    }

    header.wp-block-template-part
    .wp-block-navigation__container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    header.wp-block-template-part
    .wp-block-navigation-item {
        width: auto !important;
        border: 0 !important;
    }
}

/* =====================================================
   VERKOCHT BANNER OVER COMPLETE FOTOGALERIJ
   ===================================================== */

/* Galerij als positioneringsvlak */
body.single-post:has(
    .taxonomy-post_tag a[href*="/tag/verkocht"]
)
.wp-block-jetpack-tiled-gallery {
    position: relative !important;
}


/* Eén banner over ALLE foto's */
body.single-post:has(
    .taxonomy-post_tag a[href*="/tag/verkocht"]
)
.wp-block-jetpack-tiled-gallery::after {
    content: "DEZE AUTO IS VERKOCHT";

    position: absolute;

    top: 50%;
    left: 0;

    width: 100%;

    transform: translateY(-50%);

    z-index: 50;

    box-sizing: border-box;

    padding: 18px 25px;

    background: rgba(242, 140, 40, 0.95);

    color: #fff;

    text-align: center;

    font-size: clamp(20px, 3vw, 36px);
    font-weight: 800;

    line-height: 1.15;

    letter-spacing: 2px;
    text-transform: uppercase;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.28);

    pointer-events: none;
}


/* Foto's iets rustiger maken bij verkocht */
body.single-post:has(
    .taxonomy-post_tag a[href*="/tag/verkocht"]
)
.wp-block-jetpack-tiled-gallery img {
    filter: grayscale(20%) brightness(0.72);
}


/* Mobiel */
@media (max-width: 768px) {

    body.single-post:has(
        .taxonomy-post_tag a[href*="/tag/verkocht"]
    )
    .wp-block-jetpack-tiled-gallery::after {
        padding: 14px 12px;

        font-size: 18px;

        letter-spacing: 1.2px;
    }
}


/* Zoektekst - licht en rustig */
.over-ons-tekst > .over-ons-zoek {
    margin: 0 !important;

    padding: 18px 20px;

    background: #faf9f7;

    color: #5c5f63;

    border-left: 4px solid var(--opt-orange);
    border-radius: 0 10px 10px 0;

    box-shadow: none;

    font-size: 16px;
    line-height: 1.7;
}

/* Alleen de vraag extra nadruk */
.over-ons-tekst > .over-ons-zoek strong {
    color: var(--opt-dark);
    font-weight: 800;
}
.over-ons-tekst > .over-ons-usp {
    margin: 0 0 26px !important;
    padding: 4px 0 4px 18px;

    background: transparent;

    border-left: 4px solid var(--opt-orange);

    color: var(--opt-dark);

    font-size: 17px;
    font-weight: 700;
    line-height: 1.65;
}

.over-ons-tekst > .over-ons-usp strong {
    color: var(--opt-dark);
}

.over-ons-tekst
> .over-ons-usp br + strong {
    display: inline-block;

    margin-top: 5px;

    color: var(--opt-orange-dark);

    font-weight: 800;
}

/* =====================================================
   WORDPRESS / JETPACK ROMMEL VERBERGEN
   ===================================================== */

/* Reacties */
#comments,
.comments-area,
.comment-respond,
.wp-block-comments,
.wp-block-post-comments,
.wp-block-post-comments-form,
.wp-block-comments-query-loop,
.wp-block-comment-template {
    display: none !important;
}


/* Jetpack Like / Vind ik leuk */
.sd-like,
.sharedaddy,
div.sharedaddy,
.jetpack-likes-widget-wrapper,
.post-likes-widget,
div[id^="like-post-wrapper"] {
    display: none !important;
}


/* Jetpack abonnement / "Ontdek meer..." */
.wp-block-jetpack-subscriptions,
.wp-block-jetpack-subscriptions__container,
.jetpack-subscribe-modal,
.jetpack-subscribe-modal__modal-content,
#subscribe-email,
#subscribe-submit {
    display: none !important;
}


/* Jetpack subscribe onder een post */
.single-post
.wp-block-group:has(.wp-block-jetpack-subscriptions) {
    display: none !important;
}


/* Eventuele reactie-widget onderaan */
iframe[src*="widgets.wp.com"] {
    display: none !important;
}


    /* Terug naar boven knop */
/* =========================
   TERUG NAAR BOVEN
   ========================= */

.scroll-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;

    padding: 0;

    background: var(--opt-orange);
    color: #fff;

    border: 0;
    border-radius: 50%;

    cursor: pointer;

    box-shadow: 0 8px 22px rgba(0,0,0,.20);

    opacity: 0;
    visibility: hidden;

    transform: translateY(12px);

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease,
        background .2s ease;
}


/* zichtbaar na scrollen */
.scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* =========================
   NORMALE WITTE PIJL
   ========================= */

.scroll-top-arrow {
    position: relative;

    display: block;

    width: 22px;
    height: 26px;
}


/* verticale lijn van pijl */
.scroll-top-arrow::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 7px;

    width: 4px;
    height: 18px;

    background: #fff;
    border-radius: 3px;

    transform: translateX(-50%);
}


/* pijlpunt */
.scroll-top-arrow::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 5px;

    width: 11px;
    height: 11px;

    border-left: 4px solid #fff;
    border-top: 4px solid #fff;

    border-radius: 2px 0 0 0;

    transform:
        translateX(-50%)
        rotate(45deg);
}


/* =========================
   AUTOBAND / VELG
   ========================= */

/* wiel standaard verborgen */
.scroll-top-wheel {
    display: none;

    width: 52px;
    height: 52px;
}


/* tijdens omhoog scrollen pijl weg */
.scroll-top.is-driving .scroll-top-arrow {
    display: none;
}


/* wiel tonen */
.scroll-top.is-driving .scroll-top-wheel {
    display: block;
}


/* knop zelf transparant tijdens wiel */
.scroll-top.is-driving {
    background: transparent;
    box-shadow: none;
}


/* SVG wiel */
.scroll-top-wheel svg {
    display: block;

    width: 100%;
    height: 100%;

    animation: opt-wheel-spin .38s linear infinite;
}


/* zwarte autoband */
.wheel-tire {
    fill: #151515;

    stroke: #050505;
    stroke-width: 10;
}


/* velg */
.wheel-rim {
    fill: var(--opt-orange) !important;

    stroke: #d9d9d9;
    stroke-width: 6;
}


/* spaken */
.wheel-spokes {
    stroke: #ededed;
    stroke-width: 7;
    stroke-linecap: round;
}


/* midden van velg */
.wheel-hub {
    fill: var(--opt-orange) !important;

    stroke: #f2f2f2;
    stroke-width: 4;
}


/* draaiende band */
@keyframes opt-wheel-spin {

    from {
        transform: rotate(0deg);
        transform-origin: center;
    }

    to {
        transform: rotate(-360deg);
        transform-origin: center;
    }

}


/* hover normale knop */
.scroll-top:not(.is-driving):hover {
    background: var(--opt-orange-dark);

    transform: translateY(-3px);
}


/* =========================
   MOBIEL
   ========================= */

@media (max-width: 768px) {

    .scroll-top {
        right: 14px;
        bottom: 14px;

        width: 54px;
        height: 54px;
    }

    .scroll-top-wheel {
        width: 50px;
        height: 50px;
    }

}

.scroll-top.is-driving .scroll-top-wheel {
    display: block !important;
}

.scroll-top.is-driving .scroll-top-wheel svg {
    display: block !important;

    animation: opt-wheel-spin .38s linear infinite !important;

    transform-origin: 50% 50% !important;
}

.scroll-top.is-driving .scroll-top-arrow {
    display: none !important;
}

@keyframes opt-wheel-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

/* =========================================================
   PRIJS ALS ANKERPUNT
   ========================================================= */

.wp-block-column.wp-block-column-is-layout-flow > p:nth-of-type(2) {
    anchor-name: --auto-prijs;

    height: 80px !important;
    box-sizing: border-box;

    display: inline-flex !important;
    align-items: center !important;

    margin: 0 !important;
}


/* =========================================================
   PDF / VOERTUIGRAPPORT KNOP NAAST PRIJS
   v2.7
   ========================================================= */

.opt-v27-btn {
    position: absolute !important;
    position-anchor: --auto-prijs;

    left: anchor(right);
    top: anchor(center);

    transform: translate(16px, -50%) !important;

    min-height: 80px !important;
    height: 80px !important;
    box-sizing: border-box;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    padding: 0 24px !important;

    margin: 0 !important;

    background: #f28c28 !important;
    color: #fff !important;

    border: 0 !important;
    border-radius: 8px !important;

    font-weight: 700 !important;
    text-decoration: none !important;

    white-space: nowrap;

    z-index: 10;
}


/* PDF icoontje */

.opt-v27-pdf {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 38px;
    height: 30px;

    padding: 0 7px;

    background: #111 !important;
    color: #fff !important;

    border-radius: 4px;

    font-size: 11px;
    font-weight: 900;
    letter-spacing: .05em;
}


/* Hover */

.opt-v27-btn:hover {
    background: #df791a !important;
    color: #fff !important;

    transform: translate(16px, calc(-50% - 2px)) !important;
}


/* =========================================================
   FALLBACK VOOR BROWSERS ZONDER CSS ANCHOR POSITIONING
   ========================================================= */

@supports not (position-anchor: --auto-prijs) {

    .wp-block-column.wp-block-column-is-layout-flow {
        position: relative;
    }

    .opt-v27-btn {
        position: relative !important;

        left: auto !important;
        top: auto !important;

        transform: none !important;

        margin-left: 16px !important;

        vertical-align: middle;
    }

    .opt-v27-btn:hover {
        transform: translateY(-2px) !important;
    }
}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 700px) {

    .wp-block-column.wp-block-column-is-layout-flow > p:nth-of-type(2) {
        width: 100% !important;
        max-width: 100% !important;

        height: 70px !important;
        min-height: 70px !important;

        box-sizing: border-box;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;

        margin: 0 0 84px 0 !important;
    }


    .opt-v27-btn {
        position: absolute !important;
        position-anchor: --auto-prijs;

        left: anchor(left);
        top: anchor(bottom);

        transform: translate(0, 12px) !important;

        width: 100% !important;
        max-width: 100% !important;

        min-height: 70px !important;
        height: 70px !important;

        box-sizing: border-box;

        justify-content: center !important;

        padding: 0 18px !important;

        margin: 0 !important;

        white-space: normal;
        text-align: center;
    }


    .opt-v27-btn:hover {
        transform: translate(0, 10px) !important;
    }


    .opt-v27-pdf {
        flex: 0 0 auto;
    }


    /* Mobiele fallback zonder anchor positioning */

    @supports not (position-anchor: --auto-prijs) {

        .opt-v27-btn {
            position: relative !important;

            left: auto !important;
            top: auto !important;

            transform: none !important;

            width: 100% !important;

            margin: 12px 0 0 0 !important;
        }

        .opt-v27-btn:hover {
            transform: translateY(-2px) !important;
        }
    }
}

@media (max-width: 768px) {
  .wp-block-post-excerpt + .wp-block-paragraph {
    display: none;
  }
}

@media (max-width: 768px) {

  /* Tekst "Meer weten over deze auto..." verbergen */
  body.home .wp-block-post-excerpt + .wp-block-paragraph {
    display: none !important;
  }

  /* Lege paragraph onder de knop verwijderen */
  body.home .wp-block-read-more + .wp-block-paragraph:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}