/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme - 1906 Slagerij
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      4.0
*/

/* ============================================
   1906 SLAGERIJ - CSS STYLESHEET
   Versie: 4.0 - Gebaseerd op wireframes
   ============================================ */

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    /* Brand Kleuren */
    --color-black: #000000;
    --color-red: #e10600;
    --color-gold: #a29061;

    /* Button kleuren */
    --btn-gold: #c2b08a;
    --btn-gold-hover: #d4c4a0;

    /* Achtergrond kleuren */
    --bg-white: #ffffff;
    --bg-cream: #f7f5f2;
    --bg-placeholder: #e5e5e5;
    --border-color: #e0e0e0;

    /* Tekst kleuren */
    --text-dark: #1a1a1a;
    --text-muted: #888888;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 2rem;
    --space-2xl: 2.5rem;
    --space-3xl: 2.5rem;

    /* Container */
    --container-max: 1400px;
    --container-padding: 1rem;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
}

/* ============================================
   SITE HEADER (vaste header voor subpagina's)
   ============================================ */
.site-header {
    position: relative;
    z-index: 1000;
    background: var(--color-black);
    padding: 0.75rem 3rem;
}

.site-header .header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: none;
}

.site-header .header-logo a {
    text-decoration: none;
}

.site-header .header-logo-img {
    height: 100px;
    width: auto;
    object-fit: contain;
}

.site-header .header-logo-text {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-decoration: none;
}

.site-header .hamburger-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.site-header .hamburger-menu span {
    display: block;
    width: 28px;
    min-width: 28px;
    max-width: 28px;
    height: 2px;
    min-height: 2px;
    max-height: 2px;
    background: var(--color-gold);
    border-radius: 0;
    transform: none;
}

/* Header actions (button + hamburger) */
.site-header .header-actions,
.hero-header .header-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Header button styling - site-header (kleinere versie) */
.site-header .btn-header {
    background: var(--color-gold);
    color: var(--color-black);
    border: none;
    padding: 0.35rem 0.85rem;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.site-header .btn-header:hover {
    background: #b8a066;
    color: var(--color-black);
}

/* Header button styling - hero-header (grotere versie) */
.hero-header .btn-header {
    background: var(--color-gold);
    color: var(--color-black);
    border: none;
    padding: 0.6rem 1.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.hero-header .btn-header:hover {
    background: #b8a066;
    color: var(--color-black);
}

/* Hero header hamburger groter */
.hero-header .menu-toggle span {
    width: 42px;
    height: 3px;
}

.hero-header .menu-toggle {
    gap: 8px;
}

/* Hero home specifieke header-actions styling */
.blok-hero-home .header-actions,
.blok-hero-subpagina .header-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.blok-hero-home .header-actions .btn-header,
.blok-hero-subpagina .header-actions .btn-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 400;
    font-family: 'Bellota Text', sans-serif;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: var(--btn-gold);
    color: #ffffff;
    transition: all 0.25s ease;
}

.blok-hero-home .header-actions .btn-header:hover,
.blok-hero-subpagina .header-actions .btn-header:hover {
    background: var(--btn-gold-hover);
    color: #ffffff;
}

.blok-hero-home .header-actions .menu-toggle,
.blok-hero-subpagina .header-actions .menu-toggle {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
    background: none !important;
    border: none !important;
    padding: 0;
    cursor: pointer;
}

.blok-hero-home .header-actions .menu-toggle span,
.blok-hero-subpagina .header-actions .menu-toggle span {
    display: block;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 3px !important;
    min-height: 3px !important;
    max-height: 3px !important;
    background: var(--color-gold) !important;
    border-radius: 0 !important;
    transform: none !important;
    transition: none !important;
}

/* Verberg header op homepage en pagina's met hero (hero heeft eigen header) */
.home .site-header,
.has-hero-header .site-header {
    display: none;
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Bellota Text', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-dark);
    background: var(--bg-white);
}

/* ============================================
   CONTAINER
   ============================================ */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* ============================================
   PLACEHOLDER (voor development)
   ============================================ */
.placeholder {
    background: var(--bg-placeholder);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dark);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-md);
}

.placeholder-icon {
    width: 70px;
    height: 70px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--text-dark);
    background: var(--bg-white);
    text-transform: uppercase;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    font-size: 0.875rem;
    font-weight: 400;
    font-family: 'Bellota Text', sans-serif;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: var(--btn-gold);
    color: #ffffff;
    transition: all 0.25s ease;
}

.btn:hover {
    background: var(--btn-gold-hover);
    color: #ffffff;
}

/* ============================================
   SECTION LABELS
   ============================================ */

/* Verticaal streepje links */
.section-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--space-sm);
    justify-content: center;
}

.section-label-left {
    justify-content: flex-start;
}

.section-label::before {
    content: '';
    width: 2px;
    height: 16px;
    background: var(--color-gold);
}

.section-label span {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-gold);
}

/* Horizontaal streepje links */
.section-label-horizontal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: var(--space-sm);
}

.section-label-horizontal::before {
    content: '';
    width: 16px;
    height: 2px;
    background: var(--color-gold);
}

.section-label-horizontal span {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-gold);
}

/* ============================================
   GOUDEN SCHEIDINGSLIJN
   ============================================ */
.gold-divider {
    max-width: var(--container-max);
    margin: var(--space-lg) auto;
    padding: 0 var(--container-padding);
}

.gold-divider hr {
    border: none;
    border-top: 1px solid var(--color-gold);
}

/* ============================================
   ACHTERGROND CLASSES
   ============================================ */
.bg-wit {
    background: var(--bg-white);
}

.bg-creme {
    background: var(--bg-cream);
}

.bg-zwart {
    background: var(--color-black);
}

.bg-zwart h2,
.bg-zwart h3,
.bg-zwart p,
.bg-zwart .tekst,
.bg-zwart .tekst p {
    color: #ffffff;
}

.bg-zwart .section-label span {
    color: var(--color-gold);
}

/* ============================================
   UITLIJNING CLASSES
   ============================================ */
.align-left {
    text-align: left;
}

.align-center {
    text-align: center;
}

.align-left .section-label,
.align-left .section-label-horizontal {
    justify-content: flex-start;
}

.align-center .section-label,
.align-center .section-label-horizontal {
    justify-content: center;
}

/* ============================================
   KOLOMMEN CLASSES
   ============================================ */
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ============================================
   OUDE HEADER (niet meer in gebruik - .site-header is de nieuwe)
   Behouden voor backwards compatibility met blokken
   ============================================ */
.header {
    background: var(--color-black);
    padding: var(--space-md) var(--container-padding);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--container-max);
    margin: 0 auto;
}

.logo {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ffffff;
}

.logo a {
    color: #ffffff;
    text-decoration: none;
}

.logo img {
    max-height: 60px;
    width: auto;
}

.menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    outline: none;
}

.menu-toggle:focus {
    outline: none;
}

.menu-toggle span {
    width: 28px;
    height: 2px;
    background: var(--color-gold);
    display: block;
}

/* ============================================
   BLOK 1: TEKST GECENTREERD
   ============================================ */
.blok-tekst-gecentreerd {
    padding: var(--space-3xl) 0;
    margin-top: 0 !important;
    /* Achtergrond wordt bepaald door .bg-wit, .bg-zwart, .bg-creme classes */
}

/* Minder witruimte onderaan */
.blok-tekst-gecentreerd.compact-bottom {
    padding-bottom: var(--space-sm);
}

.blok-tekst-gecentreerd .content {
    max-width: 900px;
}

/* Links: content start aan linkerkant van container (gelijk met andere blokken) */
.blok-tekst-gecentreerd.align-left .content {
    margin: 0;
    text-align: left;
}

/* Links: label ook links uitlijnen */
.blok-tekst-gecentreerd.align-left .section-label {
    justify-content: flex-start;
}

/* Gecentreerd: content in het midden van de pagina */
.blok-tekst-gecentreerd.align-center .content {
    margin: 0 auto;
    text-align: center;
}

/* Gecentreerd: label ook gecentreerd */
.blok-tekst-gecentreerd.align-center .section-label {
    justify-content: center;
}

.blok-tekst-gecentreerd h2 {
    font-size: 1.75rem;
    font-weight: 400;
    margin-bottom: var(--space-md);
    margin-top: 0;
    line-height: 1.3;
}

.blok-tekst-gecentreerd p,
.blok-tekst-gecentreerd .tekst {
    color: var(--text-dark);
    margin-bottom: var(--space-lg);
    line-height: 1.7;
}

/* Label horizontaal gecentreerd (zoals wireframe) */
.blok-tekst-gecentreerd .section-label,
.blok-tekst-gecentreerd .section-label-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: var(--space-sm);
}

.blok-tekst-gecentreerd .section-label::before,
.blok-tekst-gecentreerd .section-label-center::before {
    content: '';
    width: 20px;
    height: 2px;
    background: var(--color-gold);
}

.blok-tekst-gecentreerd .section-label span,
.blok-tekst-gecentreerd .section-label-center span {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-gold);
}

/* ============================================
   BLOK 2: TEKST MET ICOON
   ============================================ */
.blok-tekst-icoon {
    padding: var(--space-xl) 0;
    /* Achtergrond wordt bepaald door .bg-wit, .bg-zwart, .bg-creme classes */
}

.blok-tekst-icoon .strip-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: center;
}

.blok-tekst-icoon .strip-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.blok-tekst-icoon .strip-icon img {
    max-width: 70px;
    height: auto;
}

.blok-tekst-icoon .strip-content h2 {
    font-size: 1.75rem;
    font-weight: 400;
    margin-bottom: var(--space-sm);
    margin-top: 0;
    /* Kleur wordt bepaald door achtergrond class */
}

.blok-tekst-icoon .strip-content p,
.blok-tekst-icoon .strip-content .tekst,
.blok-tekst-icoon .strip-content .tekst p {
    line-height: 1.7;
    margin-bottom: var(--space-md);
    /* Kleur wordt bepaald door achtergrond class */
}

.blok-tekst-icoon .section-label span {
    color: var(--color-gold);
}

/* Tekst icoon - zwarte achtergrond: witte tekst */
.blok-tekst-icoon.bg-zwart .strip-content h2 {
    color: #ffffff;
}

.blok-tekst-icoon.bg-zwart .strip-content p,
.blok-tekst-icoon.bg-zwart .strip-content .tekst,
.blok-tekst-icoon.bg-zwart .strip-content .tekst p {
    color: rgba(255, 255, 255, 0.7);
}

/* Tekst icoon - lichte achtergrond: donkere tekst */
.blok-tekst-icoon.bg-wit .strip-content h2,
.blok-tekst-icoon.bg-creme .strip-content h2 {
    color: var(--text-dark);
}

.blok-tekst-icoon.bg-wit .strip-content p,
.blok-tekst-icoon.bg-wit .strip-content .tekst,
.blok-tekst-icoon.bg-wit .strip-content .tekst p,
.blok-tekst-icoon.bg-creme .strip-content p,
.blok-tekst-icoon.bg-creme .strip-content .tekst,
.blok-tekst-icoon.bg-creme .strip-content .tekst p {
    color: var(--text-dark);
}

/* ============================================
   BLOK 3: TEKST MET AFBEELDING
   ============================================ */
.blok-tekst-afbeelding {
    padding: var(--space-3xl) 0;
}

.blok-tekst-afbeelding .split-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: center;
}

.blok-tekst-afbeelding .split-image {
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.blok-tekst-afbeelding .split-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blok-tekst-afbeelding .split-content h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: var(--space-md);
}

.blok-tekst-afbeelding .split-content p,
.blok-tekst-afbeelding .split-content .tekst {
    color: var(--text-dark);
    margin-bottom: var(--space-lg);
    line-height: 1.7;
}

/* Volgorde wordt nu bepaald in PHP, geen extra CSS nodig */

/* ============================================
   BLOK 4: KAARTEN
   ============================================ */
.blok-kaarten {
    padding: var(--space-3xl) 0;
}

.blok-kaarten .header {
    background: transparent;
    padding: 0;
    margin-bottom: var(--space-xl);
}

.blok-kaarten .header h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-top: 0;
}

.blok-kaarten .header p {
    color: var(--text-dark);
    line-height: 1.7;
    max-width: 700px;
}

.blok-kaarten .kaarten-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.blok-kaarten .kaart {
    padding: var(--space-xl);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-align: left;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-sm);
}

.blok-kaarten .kaart .nummer {
    font-size: 2.5rem;
    color: var(--color-gold);
    font-weight: 300;
    grid-column: 1;
    grid-row: 1;
    line-height: 1;
    align-self: center;
}

.blok-kaarten .kaart .kaart-icon {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    width: 60px;
    height: 60px;
}

.blok-kaarten .kaart .kaart-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.blok-kaarten .kaart h3 {
    font-size: 1.1rem;
    font-weight: 600;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
}

.blok-kaarten .kaart .tekst,
.blok-kaarten .kaart p {
    font-size: 0.9rem;
    color: var(--text-dark);
    line-height: 1.7;
    margin-top: 4px;
    grid-column: 2;
}

.blok-kaarten .kaart .tekst p {
    margin: 0;
}

.blok-kaarten .kaart .btn {
    grid-column: 2;
    margin-top: var(--space-md);
}

/* ============================================
   BLOK 5: AFBEELDINGEN GRID
   ============================================ */
.blok-afbeeldingen-grid {
    padding: var(--space-3xl) 0;
}

.blok-afbeeldingen-grid .header {
    background: transparent;
    padding: 0;
    margin-bottom: var(--space-xl);
}

.blok-afbeeldingen-grid .header .section-label {
    margin-bottom: 1rem;
}

.blok-afbeeldingen-grid .header h2 {
    font-size: 1.75rem;
    font-weight: 400;
    margin-top: 0;
}

.blok-afbeeldingen-grid .afbeeldingen-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

.blok-afbeeldingen-grid .afbeelding-card {
    border-radius: var(--radius-md);
    overflow: hidden;
}

.blok-afbeeldingen-grid .afbeelding-card .image {
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.blok-afbeeldingen-grid .afbeelding-card .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blok-afbeeldingen-grid .afbeelding-card .card-content {
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    padding: var(--space-md);
    background: var(--bg-white);
}

.blok-afbeeldingen-grid .afbeelding-card .title {
    display: block;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    text-decoration: none;
    margin: 0;
}

.blok-afbeeldingen-grid .afbeelding-card a.title {
    text-align: center;
}

.blok-afbeeldingen-grid .afbeelding-card a.title:hover {
    color: var(--color-gold);
}

.blok-afbeeldingen-grid .afbeelding-card .beschrijving {
    margin-top: var(--space-sm);
    font-size: 0.9rem;
    color: var(--text-dark);
    line-height: 1.6;
}

.blok-afbeeldingen-grid .afbeelding-card .beschrijving p {
    margin: 0;
}

/* Carrousel weergave - 3D Coverflow */
.blok-afbeeldingen-grid .afbeeldingen-carousel {
    position: relative;
    overflow: visible;
    perspective: 1000px;
    padding: 40px 0;
}

.blok-afbeeldingen-grid .carousel-track {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 550px;
}

.blok-afbeeldingen-grid .carousel-slide {
    position: absolute;
    width: 340px;
    transition: all 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
    transform-style: preserve-3d;
}

/* Middelste slide - naar voren */
.blok-afbeeldingen-grid .carousel-slide.active {
    transform: translateX(-50%) scale(1.1);
    z-index: 3;
    left: 50%;
}

/* Linker slide - naar achteren */
.blok-afbeeldingen-grid .carousel-slide.prev {
    transform: translateX(-50%) scale(0.85);
    z-index: 2;
    left: 22%;
    opacity: 0.7;
}

/* Rechter slide - naar achteren */
.blok-afbeeldingen-grid .carousel-slide.next {
    transform: translateX(-50%) scale(0.85);
    z-index: 2;
    left: 78%;
    opacity: 0.7;
}

/* Verborgen slides */
.blok-afbeeldingen-grid .carousel-slide.hidden {
    opacity: 0;
    transform: scale(0.5);
    z-index: 0;
    pointer-events: none;
}

.blok-afbeeldingen-grid .carousel-slide .afbeelding-card {
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

.blok-afbeeldingen-grid .carousel-slide.active .afbeelding-card {
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

.blok-afbeeldingen-grid .carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--btn-gold);
    border: 1px solid var(--btn-gold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.blok-afbeeldingen-grid .carousel-btn:hover {
    background: var(--btn-gold-hover);
    border-color: var(--btn-gold-hover);
}

.blok-afbeeldingen-grid .carousel-btn svg {
    fill: #ffffff;
}

.blok-afbeeldingen-grid .carousel-prev {
    left: 2%;
}

.blok-afbeeldingen-grid .carousel-next {
    right: 2%;
}

/* Dots verborgen op desktop */
.blok-afbeeldingen-grid .carousel-dots {
    display: none;
}

/* Responsive carrousel - mobiel: swipe zoals bento grid */
@media (max-width: 768px) {
    .blok-afbeeldingen-grid .afbeeldingen-carousel {
        overflow: visible !important;
        perspective: none !important;
        padding: 0 !important;
    }

    .blok-afbeeldingen-grid .carousel-track {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch;
        gap: 12px !important;
        height: auto !important;
        position: relative !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        scrollbar-width: none;
    }

    .blok-afbeeldingen-grid .carousel-track::-webkit-scrollbar {
        display: none;
    }

    .blok-afbeeldingen-grid .carousel-slide,
    .blok-afbeeldingen-grid .carousel-slide.active,
    .blok-afbeeldingen-grid .carousel-slide.prev,
    .blok-afbeeldingen-grid .carousel-slide.next,
    .blok-afbeeldingen-grid .carousel-slide.hidden {
        position: relative !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        scroll-snap-align: center !important;
        transform: none !important;
        opacity: 1 !important;
        left: auto !important;
        z-index: 1 !important;
        pointer-events: auto !important;
        transition: none !important;
        transform-style: flat !important;
    }

    .blok-afbeeldingen-grid .carousel-slide .afbeelding-card,
    .blok-afbeeldingen-grid .carousel-slide.active .afbeelding-card {
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .blok-afbeeldingen-grid .carousel-btn {
        display: none !important;
    }

    /* Rotating dots - venster van 3 dots */
    .blok-afbeeldingen-grid .carousel-dots {
        display: block !important;
        margin: 16px auto 0 auto;
        width: 46px; /* 3 dots: 3x10px + 2x8px gap */
        overflow: hidden;
    }

    .blok-afbeeldingen-grid .carousel-dots-track {
        display: flex;
        gap: 8px;
        transition: transform 0.3s ease;
        width: max-content;
    }

    .blok-afbeeldingen-grid .carousel-dots .dot {
        display: block;
        width: 10px;
        height: 10px;
        min-width: 10px;
        border-radius: 50%;
        background: #ccc;
        transition: background 0.3s ease;
    }

    .blok-afbeeldingen-grid .carousel-dots .dot.active {
        background: var(--color-gold);
    }
}

/* ============================================
   BLOK 6: HERO SUBPAGINA
   ============================================ */
.blok-hero-subpagina {
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--bg-placeholder);
    margin-bottom: 0 !important;
}

/* Verwijder witte lijn/ruimte tussen blokken */
.blok-hero-subpagina + section,
.blok-hero-subpagina + .blok-tekst-gecentreerd {
    margin-top: 0 !important;
}

/* Header binnen hero subpagina - ZELFDE ALS HOMEPAGE */
.blok-hero-subpagina .hero-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    width: 100%;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 2rem 4rem !important;
}

/* Als header-container WEL bestaat */
.blok-hero-subpagina .header-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0;
    width: 100%;
}

/* Logo styling - zelfde als homepage */
.blok-hero-subpagina .logo,
.blok-hero-subpagina .header-container .logo {
    flex: 0 0 auto;
}

.blok-hero-subpagina .logo a,
.blok-hero-subpagina .header-container .logo a {
    color: var(--text-dark);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.blok-hero-subpagina .logo img,
.blok-hero-subpagina .header-container .logo img,
.blok-hero-subpagina .logo .site-logo,
.blok-hero-subpagina .header-container .logo .site-logo {
    max-height: 150px !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    display: block;
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
    object-fit: contain;
}

/* Menu toggle button - zelfde als homepage */
.blok-hero-subpagina .menu-toggle,
.blok-hero-subpagina .header-container .menu-toggle {
    flex: 0 0 auto;
    order: 2;
    background: none !important;
    border: none !important;
    padding: 0;
    cursor: pointer;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
}

.blok-hero-subpagina .menu-toggle span,
.blok-hero-subpagina .header-container .menu-toggle span {
    display: block;
    width: 42px;
    height: 3px;
    background: var(--color-gold);
}

.blok-hero-subpagina .hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

/* Geen donker filter op subpagina hero - filter alleen op homepage */
.blok-hero-subpagina .hero-bg::after {
    display: none;
}

.blok-hero-subpagina .container {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: flex-start;
    padding: var(--space-xl) 2rem;
    padding-top: 220px; /* Ruimte voor header (logo + marge) */
}

.blok-hero-subpagina .hero-content {
    background: var(--bg-white);
    padding: var(--space-xl);
    border-radius: var(--radius-md);
    max-width: 600px;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.blok-hero-subpagina h1 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: var(--space-sm);
    margin-top: 0;
    color: var(--text-dark);
}

.blok-hero-subpagina p,
.blok-hero-subpagina .hero-tekst,
.blok-hero-subpagina .hero-tekst p {
    color: var(--text-dark);
    line-height: 1.7;
    margin: 0;
}

/* ============================================
   BLOK 7: BENTO GRID
   ============================================ */
.blok-bento-grid {
    padding: var(--space-3xl) 0;
}

.blok-bento-grid .header {
    background: transparent;
    padding: 0;
    margin-bottom: var(--space-xl);
}

.blok-bento-grid .header h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-top: 0;
}

.blok-bento-grid .header p {
    color: var(--text-dark);
    line-height: 1.7;
    max-width: 700px;
}

.blok-bento-grid .bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

.blok-bento-grid .bento-item {
    background: var(--bg-placeholder);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    min-height: 250px;
    background-size: cover;
    background-position: center center;
}

.blok-bento-grid .bento-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.75rem 1rem;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 70%, rgba(0,0,0,0) 100%);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.blok-bento-grid .bento-caption p {
    font-size: 1.1rem;
    font-weight: 500;
    color: white;
    line-height: 1.4;
    text-shadow: 0 2px 4px rgba(0,0,0,0.7);
}

.blok-bento-grid .bento-caption.quote p {
    font-style: italic;
    margin-bottom: var(--space-sm);
}

.blok-bento-grid .bento-caption .author {
    font-weight: 600;
    font-style: normal;
    font-size: 0.9rem;
    display: block;
}

.blok-bento-grid .bento-caption .function {
    font-size: 0.8rem;
    opacity: 0.9;
}

/* Klikbare bento items */
.blok-bento-grid a.bento-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Bento dots: verborgen op desktop */
.blok-bento-grid .bento-dots {
    display: none;
}

/* ============================================
   BLOK 8: HERO HOME
   ============================================ */
.blok-hero-home {
    position: relative;
    min-height: 85vh;
    min-height: 85svh;
    background: var(--bg-placeholder);
    display: flex;
    flex-direction: column;
    margin-bottom: 0 !important;
}

/* Achtergrond afbeelding */
.blok-hero-home .hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 40%;
    z-index: 0;
}

/* Donkere overlay over de achtergrond */
.blok-hero-home .hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1;
}

/* Header binnen hero - DIRECT op hero-header flex toepassen */
.blok-hero-home .hero-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    width: 100%;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 2rem 4rem !important;
}

/* Als header-container WEL bestaat */
.blok-hero-home .header-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0;
    width: 100%;
}

/* Logo styling */
.blok-hero-home .logo,
.blok-hero-home .header-container .logo {
    flex: 0 0 auto;
}

.blok-hero-home .logo a,
.blok-hero-home .header-container .logo a {
    color: var(--text-dark);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.blok-hero-home .logo img,
.blok-hero-home .header-container .logo img,
.blok-hero-home .logo .site-logo,
.blok-hero-home .header-container .logo .site-logo {
    max-height: 150px !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    display: block;
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
    object-fit: contain;
}

/* Menu toggle button */
.blok-hero-home .menu-toggle,
.blok-hero-home .header-container .menu-toggle {
    flex: 0 0 auto;
    order: 2;
    background: none !important;
    border: none !important;
    padding: 0;
    cursor: pointer;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
}

.blok-hero-home .menu-toggle span,
.blok-hero-home .header-container .menu-toggle span {
    display: block;
    width: 42px;
    height: 3px;
    background: var(--color-gold);
}

/* Hero body */
.blok-hero-home .hero-body {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    align-items: flex-start;
    padding-top: calc(200px + 3vh);
}

.blok-hero-home .container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.blok-hero-home .hero-content {
    max-width: 600px;
}

/* Uitlijning */
.blok-hero-home.align-left .hero-content {
    text-align: left;
}

.blok-hero-home.align-center .hero-content {
    text-align: center;
    margin: 0 auto;
}

.blok-hero-home.align-center .section-label {
    justify-content: center;
}

/* Section label in hero - GOUD/BEIGE */
.blok-hero-home .section-label {
    margin-bottom: 1rem;
    justify-content: flex-start;
}

.blok-hero-home .section-label span {
    font-family: 'Bellota Text', sans-serif;
    color: var(--btn-gold);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
}

.blok-hero-home .section-label::before {
    background: var(--btn-gold);
}

/* Titels - WIT */
.blok-hero-home h1,
.blok-hero-home .hero-content h1 {
    font-family: 'Bellota Text', sans-serif;
    font-size: 3.5rem;
    font-weight: 300;
    margin: 0 0 0.15rem 0 !important;
    line-height: 1.15;
    color: #ffffff;
}

/* Beschrijving - WIT */
.blok-hero-home .hero-desc,
.blok-hero-home .hero-content p,
.blok-hero-home .hero-content p.hero-desc,
p.hero-desc,
.hero-desc {
    font-family: 'Bellota Text', sans-serif !important;
    font-size: 1.1rem !important;
    margin: 0.15rem 0 1rem 0 !important;
    line-height: 1.7 !important;
    color: #ffffff !important;
}

section.blok-hero-home p.hero-desc {
    color: white !important;
}

/* Button in hero - GOUD met WITTE tekst */
.blok-hero-home .btn {
    font-family: 'Bellota Text', sans-serif;
    background: var(--btn-gold);
    border: none;
    color: #ffffff;
    padding: 1rem 2rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.blok-hero-home .btn:hover {
    background: var(--btn-gold-hover);
    color: #ffffff;
}

/* ============================================
   BLOK 9: VACATURES
   ============================================ */
.blok-vacatures {
    padding: var(--space-3xl) 0;
}

.blok-vacatures .vacatures-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.blok-vacatures .vacature-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    text-align: left;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
}

.blok-vacatures .vacature-card-content {
    flex: 1;
}

.blok-vacatures .vacature-card h3 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: var(--space-xs);
}

.blok-vacatures .vacature-card p,
.blok-vacatures .vacature-card .tekst {
    color: var(--text-dark);
    font-size: 0.875rem;
    line-height: 1.7;
    margin-bottom: 0;
}

.blok-vacatures .vacature-card .btn {
    flex-shrink: 0;
    min-width: 180px;
    text-align: center;
}

/* ============================================
   BLOK 10: FAQ
   ============================================ */
.blok-faq {
    padding: var(--space-sm) 0;
}

.blok-tekst-afbeelding + .blok-faq {
    padding-top: 0;
}

body:has(.blok-contact) .blok-faq {
    padding-top: 3.5rem;
}

.blok-tekst-afbeelding:has(+ .blok-faq) {
    padding-bottom: var(--space-sm);
}

.blok-faq .faq-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.blok-faq .faq-header::before,
.blok-faq .faq-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--btn-gold);
}

.blok-faq .faq-header h2 {
    font-size: 1.5rem;
    font-weight: 400;
    white-space: nowrap;
}

.blok-faq .faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* FAQ item als details element */
.blok-faq .faq-item {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin-bottom: var(--space-sm);
}

/* Verberg standaard marker van details */
.blok-faq .faq-item summary {
    list-style: none;
}
.blok-faq .faq-item summary::-webkit-details-marker {
    display: none;
}

.blok-faq .faq-question {
    width: 100%;
    background: var(--bg-white);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    font-family: 'Bellota Text', sans-serif;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease;
    color: var(--text-dark);
}

.blok-faq .faq-question span:first-child {
    color: var(--text-dark);
}


.blok-faq .faq-question .icon {
    color: var(--color-gold);
    font-size: 1.2rem;
    transition: transform 0.3s ease;
    line-height: 1;
}

/* Roteer icon wanneer open */
.blok-faq .faq-item[open] .faq-question .icon {
    transform: rotate(180deg);
}

/* Verwijder standaard focus outline */
.blok-faq .faq-question:focus {
    outline: none;
}

.blok-faq .faq-question:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

.blok-faq .faq-answer {
    padding: 0 var(--space-lg) var(--space-lg);
}

.blok-faq .faq-answer p {
    color: var(--text-dark);
    line-height: 1.7;
    margin: 0;
}

/* ============================================
   BLOK 11: USP / CIJFERS
   ============================================ */
.blok-cijfers {
    padding: var(--space-3xl) 0;
}

.blok-cijfers .header {
    background: transparent;
    padding: 0;
    text-align: center;
    margin-bottom: var(--space-xl);
}

.blok-cijfers .header h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-top: 0;
}

.blok-cijfers .cijfers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.blok-cijfers .cijfer-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    text-align: center;
}

.blok-cijfers .cijfer-card .nummer {
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-gold);
    margin-bottom: var(--space-xs);
}

.blok-cijfers .cijfer-card p {
    font-size: 0.875rem;
    color: var(--text-dark);
}

/* ============================================
   BLOK 12: ICONEN / KERNWAARDEN
   ============================================ */
.blok-iconen {
    background: var(--color-black);
    padding: 40px 0 50px 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Iconen direct na hero home - geen ruimte */
.blok-hero-home + .blok-iconen {
    margin-top: 0 !important;
}

.blok-iconen .container {
    display: flex;
    justify-content: center;
}

.blok-iconen .iconen-grid {
    display: flex;
    justify-content: center;
    gap: 0;
    max-width: 1400px;
    width: 100%;
}

.blok-iconen .icoon-item {
    text-align: center;
    position: relative;
    flex: 1;
    padding: 0 40px;
    max-width: 450px;
}

/* Scheidingslijn tussen items */
.blok-iconen .icoon-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 5%;
    bottom: 5%;
    width: 1px;
    background-color: rgba(162, 144, 97, 0.2);
}

.blok-iconen .icoon-item .icon {
    margin: 0 auto 20px;
}

.blok-iconen .icoon-item .icon img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.blok-iconen .icoon-item h3 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 12px;
    text-transform: none;
}

.blok-iconen .icoon-item p {
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    line-height: 1.6;
}

.blok-iconen .iconen-dots {
    display: none;
}

/* ============================================
   BLOK 13: PROCES / STAPPEN
   ============================================ */
.blok-proces {
    padding: var(--space-3xl) 0;
}

/* Proces header - full width zwart */
.blok-proces-header {
    background: var(--color-black);
    padding: var(--space-3xl) 0;
    text-align: center;
}

.blok-proces-header .section-label {
    justify-content: center;
}

.blok-proces-header h2 {
    color: #fff;
    font-size: 1.75rem;
    font-weight: 400;
    margin-top: 0;
}

.blok-proces-header .tekst,
.blok-proces-header .tekst p {
    color: rgba(255, 255, 255, 0.8);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}

.blok-proces-header .btn {
    margin-top: var(--space-lg);
}

/* Proces secties container */
.blok-proces .proces-secties {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xl);
}

/* Individuele sectie - 2 kolommen */
.blok-proces .proces-sectie {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: center;
}

/* Afbeelding kolom */
.blok-proces .sectie-image {
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--bg-placeholder);
}

.blok-proces .sectie-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blok-proces .sectie-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dark);
    font-size: 0.875rem;
}

/* Content kolom */
.blok-proces .sectie-content {
    padding: var(--space-md) 0;
}

.blok-proces .sectie-content h3 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: var(--space-sm);
    margin-top: 0;
}

.blok-proces .sectie-tekst {
    font-size: 1rem;
    color: var(--text-dark);
    line-height: 1.7;
}

.blok-proces .sectie-tekst p {
    margin: 0 0 var(--space-sm) 0;
}

/* Desktop: 2 kolommen met afwisselende volgorde */
@media (min-width: 768px) {
    .blok-proces .proces-sectie {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2xl);
    }

    /* Standaard: afbeelding links, tekst rechts */
    .blok-proces .proces-sectie .sectie-image {
        order: 1;
    }

    .blok-proces .proces-sectie .sectie-content {
        order: 2;
    }

    /* Reversed: tekst links, afbeelding rechts */
    .blok-proces .proces-sectie.sectie-reversed .sectie-image {
        order: 2;
    }

    .blok-proces .proces-sectie.sectie-reversed .sectie-content {
        order: 1;
    }
}

/* ============================================
   FOOTER
   ============================================ */
.blok-footer {
    padding: 60px 0 50px 0;
    background: var(--color-black);
    text-align: left;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.blok-footer > .container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.blok-footer .footer-main-grid {
    display: grid;
    grid-template-columns: 1.5fr 1.3fr 1fr;
    gap: 40px;
    align-items: stretch;
}

.blok-footer .footer-brand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.blok-footer .footer-logo {
    max-width: 280px;
    height: auto;
    margin-bottom: 25px;
    display: block;
}

.blok-footer .footer-socials {
    display: flex;
    gap: 12px;
    align-items: center;
}

.blok-footer .footer-socials a {
    color: var(--color-gold);
    transition: opacity 0.3s ease;
}

.blok-footer .footer-socials a:hover {
    opacity: 0.7;
}

.blok-footer .footer-socials svg {
    width: 24px;
    height: 24px;
}

.blok-footer .footer-address {
    font-size: 15px;
    line-height: 1.8;
    color: #ffffff;
}

.blok-footer .footer-address p {
    margin: 0;
    color: #ffffff;
}

.blok-footer .footer-address p + p {
    margin-top: 18px;
}

.blok-footer .footer-email a,
.blok-footer .footer-address a {
    color: #ffffff;
    text-decoration: underline;
    font-size: 15px;
}

.blok-footer .footer-phone {
    color: #ffffff;
    font-size: 15px;
}

.blok-footer .footer-links {
    font-size: 14px;
    text-align: left;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
}

.blok-footer .footer-legal {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    margin-top: auto;
}

.blok-footer .footer-legal a {
    color: #ffffff;
    text-decoration: underline;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.blok-footer .footer-legal a:hover {
    opacity: 0.7;
}

.blok-footer .footer-legal img.footer-legal-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Footer responsive */
@media (max-width: 900px) {
    .blok-footer .footer-main-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .blok-footer .footer-links {
        grid-column: 1 / -1;
        text-align: left;
    }

    .blok-footer .footer-legal {
        align-items: flex-start;
    }
}

@media (max-width: 600px) {
    .blok-footer .footer-main-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .blok-footer {
        padding: 45px 0 35px 0;
    }
}

/* ============================================
   HAMBURGER MENU OVERLAY - KIPSTER STYLE
   3 kolommen met gouden verticale lijnen
   ============================================ */

/* Verberg GeneratePress menu dat buiten onze overlay staat */
body > nav.nav-menu,
body > .nav-menu,
#site-navigation,
.main-navigation {
    display: none !important;
}

/* Basis overlay */
.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-black);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 2rem 4rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Admin bar compensatie */
body.admin-bar .nav-overlay {
    top: 32px;
    height: calc(100% - 32px);
}

.nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Header: Logo links, X rechts */
.nav-overlay .nav-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    padding: 0 0 3rem 0;
}

/* Logo - links, groot */
.nav-overlay .nav-logo {
    display: flex;
    align-items: center;
}

.nav-overlay .nav-logo img,
.nav-overlay .nav-logo-img {
    max-height: 150px;
    width: auto;
}

.nav-overlay .nav-logo-text {
    font-family: 'Bellota Text', sans-serif;
    font-size: 3rem;
    color: #ffffff;
    font-weight: 700;
}

/* X knop - rechts in header, uitgelijnd met hamburger */
.nav-overlay .nav-close {
    background: none;
    border: none;
    cursor: pointer;
    width: 35px;
    height: 35px;
    padding: 0;
    position: relative;
    margin-top: 60px;
}

.nav-overlay .nav-close span {
    position: absolute;
    width: 35px;
    height: 2px;
    background: var(--color-gold);
    top: 50%;
    left: 0;
}

.nav-overlay .nav-close span:first-child {
    transform: rotate(45deg);
}

.nav-overlay .nav-close span:last-child {
    transform: rotate(-45deg);
}

/* Menu container - 3 kolommen met flexbox */
.nav-overlay .nav-menu-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* Kolommen */
.nav-overlay .nav-column {
    flex: 1;
    padding: 0 5rem;
    text-align: left;
    min-width: 280px;
}

/* Gouden verticale lijnen tussen kolommen - zelfde stijl als iconen blok */
.nav-overlay .nav-divider {
    width: 1px;
    height: 320px;
    background-color: rgba(162, 144, 97, 0.5);
    flex-shrink: 0;
    margin-top: -20px;
}

/* Kolom titels - ZELFDE GROOTTE als links */
.nav-overlay .nav-column-title {
    font-family: 'Bellota Text', sans-serif !important;
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1.25rem;
    text-decoration: none !important;
    display: block;
    transition: color 0.2s ease;
    line-height: 1.4;
}

.nav-overlay a.nav-column-title,
.nav-overlay a.nav-column-title:hover,
.nav-overlay a.nav-column-title:visited {
    text-decoration: none !important;
}

.nav-overlay a.nav-column-title:hover {
    color: var(--color-gold);
}

/* Links in kolommen */
.nav-overlay .nav-column-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Alle kolommen starten op dezelfde hoogte */
.nav-overlay .nav-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.nav-overlay .nav-column-links li {
    margin-bottom: 1.25rem;
}

.nav-overlay .nav-column-links li a {
    font-family: 'Bellota Text', sans-serif !important;
    color: #ffffff;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color 0.2s ease;
    white-space: nowrap;
    line-height: 1.4;
}

.nav-overlay .nav-column-links li a:hover {
    color: var(--color-gold);
}

/* Socials - horizontaal */
.nav-overlay .nav-socials {
    display: flex;
    gap: 1.5rem;
}

.nav-overlay .nav-socials li a {
    font-family: 'Bellota Text', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--color-gold);
}

.nav-overlay .nav-socials li a svg {
    fill: var(--color-gold);
    width: 28px;
    height: 28px;
}

.nav-overlay .nav-winkel-link {
    display: none;
}

/* Mobiel responsive */
@media (max-width: 768px) {
    .nav-overlay {
        padding: 2rem 1.5rem;
        overflow-y: auto;
        align-items: center;
        justify-content: center;
    }

    .nav-overlay .nav-header {
        padding: 0;
        justify-content: center;
        position: relative;
        margin-bottom: 1.5rem;
    }

    .nav-overlay .nav-logo {
        justify-content: center;
        width: 100%;
    }

    .nav-overlay .nav-logo img,
    .nav-overlay .nav-logo-img {
        max-height: 140px;
        width: auto;
    }

    .nav-overlay .nav-close {
        position: absolute;
        right: 0;
        top: 0;
        margin-top: 0;
    }

    .nav-overlay .nav-menu-container {
        flex-direction: column;
        gap: 0;
        align-items: center;
    }

    .nav-overlay .nav-divider {
        display: none;
    }

    .nav-overlay .nav-column {
        padding: 0;
        text-align: center;
        width: 100%;
    }

    .nav-overlay .nav-column:first-child {
        margin-bottom: 1.25rem;
    }

    .nav-overlay .nav-column-title {
        font-size: 1rem;
        margin-bottom: 0.6rem;
    }

    .nav-overlay .nav-column-links li {
        margin-bottom: 0.5rem;
    }

    .nav-overlay .nav-column-links li a {
        font-size: 1rem;
        line-height: 1.4;
    }

    .nav-overlay .nav-winkel-link {
        display: inline-block;
        color: #ffffff;
        background: var(--btn-gold);
        font-family: 'Bellota Text', sans-serif;
        font-size: 0.85rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        text-decoration: none;
        text-align: center;
        margin-top: 1.25rem;
        padding: 0.75rem 2.5rem;
        border: none;
        border-radius: var(--radius-sm);
    }

    .nav-overlay .nav-socials {
        justify-content: center;
        gap: 1.25rem;
        margin-top: 1.25rem;
    }

    .nav-overlay .nav-socials li a svg {
        width: 22px;
        height: 22px;
    }

    .nav-overlay .desktop-only {
        display: none !important;
    }

    /* Hero header responsive */
    .blok-hero-home .hero-header,
    .blok-hero-subpagina .hero-header {
        padding: 1rem 1.5rem !important;
    }

    .blok-hero-home .header-container,
    .blok-hero-subpagina .header-container {
        flex-wrap: nowrap;
    }

    .blok-hero-home .logo img,
    .blok-hero-home .logo .site-logo,
    .blok-hero-subpagina .logo img,
    .blok-hero-subpagina .logo .site-logo {
        max-height: 80px !important;
    }

    /* Header actions op mobiel */
    .blok-hero-home .header-actions,
    .blok-hero-subpagina .header-actions {
        gap: 0.75rem;
    }

    /* Buttons verbergen op mobiel, alleen hamburger menu */
    .site-header .btn-header,
    .blok-hero-home .header-actions .btn-header,
    .blok-hero-subpagina .header-actions .btn-header {
        display: none;
    }

    /* Hamburger kleiner op mobiel */
    .blok-hero-home .header-actions .menu-toggle span,
    .blok-hero-subpagina .header-actions .menu-toggle span,
    .blok-hero-home .menu-toggle span,
    .blok-hero-subpagina .menu-toggle span {
        width: 32px !important;
        height: 2px !important;
    }

    .blok-hero-home .header-actions .menu-toggle,
    .blok-hero-subpagina .header-actions .menu-toggle,
    .blok-hero-home .menu-toggle,
    .blok-hero-subpagina .menu-toggle {
        gap: 6px !important;
    }

    /* Hero home fullscreen op mobiel */
    .blok-hero-home {
        min-height: 100vh;
        min-height: 100svh;
    }

    /* Hero content verticaal centreren */
    .blok-hero-home .hero-body {
        display: flex !important;
        align-items: center !important;
        padding-top: 0 !important;
        padding-bottom: 3rem !important;
        min-height: 100vh;
        min-height: 100svh;
    }

    .blok-hero-home .hero-content {
        max-width: 100%;
    }

    .blok-hero-home .section-label {
        margin-bottom: 1.25rem;
    }

    .blok-hero-home h1 {
        font-size: 2.5rem;
        line-height: 1.15;
        margin-bottom: 1rem;
    }

    .blok-hero-home .hero-desc {
        font-size: 1rem;
        line-height: 1.6;
        margin-top: 0.5rem !important;
    }

    .blok-hero-subpagina h1 {
        font-size: 1.5rem;
    }

    .blok-hero-subpagina .hero-content {
        margin-top: 120px;
    }
}

/* ============================================
   RESPONSIVE - SMALL MOBILE (480px en kleiner)
   ============================================ */
@media (max-width: 480px) {
    /* Hero header nog compacter */
    .blok-hero-home .hero-header,
    .blok-hero-subpagina .hero-header {
        padding: 0.75rem 1rem !important;
    }

    .blok-hero-home .logo img,
    .blok-hero-home .logo .site-logo,
    .blok-hero-subpagina .logo img,
    .blok-hero-subpagina .logo .site-logo {
        max-height: 60px !important;
    }

    /* Header actions nog kleiner */
    .blok-hero-home .header-actions,
    .blok-hero-subpagina .header-actions {
        gap: 0.5rem;
    }

    /* Buttons verborgen op mobiel */
    .blok-hero-home .header-actions .btn-header,
    .blok-hero-subpagina .header-actions .btn-header {
        display: none;
    }

    /* Hamburger nog kleiner */
    .blok-hero-home .header-actions .menu-toggle span,
    .blok-hero-subpagina .header-actions .menu-toggle span,
    .blok-hero-home .menu-toggle span,
    .blok-hero-subpagina .menu-toggle span {
        width: 26px !important;
        height: 2px !important;
    }

    .blok-hero-home .header-actions .menu-toggle,
    .blok-hero-subpagina .header-actions .menu-toggle,
    .blok-hero-home .menu-toggle,
    .blok-hero-subpagina .menu-toggle {
        gap: 5px !important;
    }

    /* Hero home volledig scherm */
    .blok-hero-home .hero-body {
        min-height: 100vh;
        min-height: 100svh;
    }

    .blok-hero-home h1 {
        font-size: 2rem;
        line-height: 1.15;
    }

    .blok-hero-home .hero-desc {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .blok-hero-subpagina h1 {
        font-size: 1.25rem;
    }

    .blok-hero-subpagina .hero-content {
        margin-top: 100px;
    }

    /* Hero content button */
    .blok-hero-home .btn,
    .blok-hero-subpagina .btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.75rem;
    }
}

/* ============================================
   RESPONSIVE - TABLET (481px+)
   ============================================ */
@media (min-width: 481px) {
    :root {
        --container-padding: 1.25rem;
    }

    /* Hero home */
    .blok-hero-home h1 {
        font-size: 2.5rem;
    }

    /* Tekst met icoon */
    .blok-tekst-icoon .strip-grid {
        grid-template-columns: 1fr 1fr;
        text-align: left;
    }

    /* Tekst met afbeelding */
    .blok-tekst-afbeelding .split-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Kaarten */
    .blok-kaarten .kaarten-grid.cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .blok-kaarten .kaarten-grid.cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Afbeeldingen grid */
    .blok-afbeeldingen-grid .afbeeldingen-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Bento grid */
    .blok-bento-grid .bento-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        min-height: 450px;
    }

    .blok-bento-grid .bento-item {
        min-height: auto;
    }

    .blok-bento-grid .bento-item:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .blok-bento-grid .bento-item:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }

    .blok-bento-grid .bento-item:nth-child(3) {
        grid-column: 2;
        grid-row: 1 / 3;
    }

    /* Iconen */
    .blok-iconen .iconen-grid {
        grid-template-columns: repeat(4, 1fr);
    }

}

/* ============================================
   RESPONSIVE - DESKTOP (1025px+)
   ============================================ */
@media (min-width: 1025px) {
    :root {
        --container-padding: 1.5rem;
    }

    /* Hero home */
    .blok-hero-home {
        min-height: 85vh;
        min-height: 85svh;
    }

    .blok-hero-home h1 {
        font-size: 3rem;
    }

    /* Hero subpagina */
    .blok-hero-subpagina h1 {
        font-size: 1.75rem;
    }

    /* Bento grid */
    .blok-bento-grid .bento-grid {
        min-height: 500px;
    }

    /* Tekst gecentreerd */
    .blok-tekst-gecentreerd h2 {
        font-size: 2rem;
    }
}

/* ============================================
   RESPONSIVE - LARGE DESKTOP (1281px+)
   ============================================ */
@media (min-width: 1281px) {
    /* Header */
    .header {
        padding: var(--space-lg) 4rem;
    }

    .logo {
        font-size: 1.25rem;
    }

    .logo img {
        max-height: 70px;
    }

    .menu-toggle span {
        width: 42px;
        height: 3px;
    }

    .menu-toggle {
        gap: 8px;
    }

    /* Hero home */
    .blok-hero-home h1 {
        font-size: 3.5rem;
    }

    .blok-hero-home .hero-header {
        padding: var(--space-lg) var(--container-padding);
    }

    .blok-hero-home .logo {
        font-size: 1.25rem;
    }

    .blok-hero-home .logo img {
        max-height: 80px;
    }

    .blok-hero-home .menu-toggle span {
        width: 42px;
        height: 3px;
    }

    .blok-hero-home .menu-toggle {
        gap: 8px;
    }

    /* Bento grid */
    .blok-bento-grid .bento-grid {
        min-height: 550px;
    }

    /* Nav overlay */
    .nav-header {
        padding: var(--space-lg) 4rem;
    }

    .nav-logo {
        font-size: 1.25rem;
    }

    .nav-close span {
        width: 32px;
        height: 3px;
    }

    .nav-close {
        width: 32px;
        height: 32px;
    }

    .nav-menu a {
        font-size: 1.5rem;
    }
}

/* ============================================
   RESPONSIVE - LAPTOP (1025px - 1400px)
   Moet NA desktop komen om te overschrijven
   ============================================ */
@media (min-width: 1025px) and (max-width: 1400px) {
    /* Achtergrond uitzoomen zodat meer van de afbeelding zichtbaar is */
    .blok-hero-home .hero-bg {
        background-size: 120% auto !important;
        background-position: center bottom !important;
    }

    /* Tekst verder van logo af (meer ruimte bovenaan) */
    .blok-hero-home .hero-body {
        padding-top: calc(220px + 5vh) !important;
    }

    .blok-hero-home .hero-content {
        max-width: 550px !important;
    }

    .blok-hero-home h1 {
        font-size: 2.5rem !important;
    }
}

/* ============================================
   RESPONSIVE - EXTRA LARGE (1600px+)
   ============================================ */
@media (min-width: 1600px) {
    /* Header */
    .header {
        padding: var(--space-lg) 5rem;
    }

    .logo {
        font-size: 1.5rem;
    }

    .menu-toggle span {
        width: 42px;
        height: 3px;
    }

    .menu-toggle {
        gap: 8px;
    }

    /* Hero home */
    .blok-hero-home .hero-header {
        padding: var(--space-lg) 5rem;
    }

    .blok-hero-home .logo {
        font-size: 1.5rem;
    }

    .blok-hero-home .menu-toggle span {
        width: 42px;
    }

    .blok-hero-home .menu-toggle {
        gap: 8px;
    }

    /* Nav overlay */
    .nav-header {
        padding: var(--space-lg) 5rem;
    }

    .nav-logo {
        font-size: 1.5rem;
    }

    .nav-close span {
        width: 36px;
        height: 3px;
    }

    .nav-close {
        width: 36px;
        height: 36px;
    }

    .nav-menu a {
        font-size: 1.5rem;
    }
}

/* ============================================
   BLOK 14: CONTACT
   ============================================ */
.blok-contact {
    padding: var(--space-xl) var(--container-padding) 0;
}

.blok-contact .container {
    max-width: var(--container-max);
    margin: 0 auto;
}

/* Label links boven titel */
.blok-contact .contact-left .section-label {
    justify-content: flex-start;
    margin-bottom: var(--space-sm);
}

/* Grid: links info+contactblokken, rechts formulier */
.blok-contact .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
}

/* Linker kolom: Titel, tekst, contactblokken */
.blok-contact .contact-left {
    display: flex;
    flex-direction: column;
}

.blok-contact .contact-blocks {
    margin-top: var(--space-xl);
}

.blok-contact .contact-left h2 {
    font-family: 'Bellota Text', serif;
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--color-black);
    margin-bottom: var(--space-md);
}

.blok-contact .contact-tekst {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-dark);
    margin-bottom: var(--space-xl);
}

.blok-contact .contact-blocks {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.blok-contact .contact-block-item {
    display: flex;
    gap: var(--space-md);
    align-items: center;
}

.blok-contact .contact-icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-cream);
    border-radius: 50%;
}

.blok-contact .contact-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.blok-contact .contact-content h4 {
    font-family: 'Bellota Text', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.15rem;
    color: var(--color-black);
}

.blok-contact .contact-content p {
    font-family: 'Bellota Text', sans-serif;
    font-size: 0.9rem;
    color: var(--text-dark);
    margin: 0;
}

/* Contact Form 7 styling */
.blok-contact .contact-form .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.blok-contact .contact-form .wpcf7-form > div[style] {
    margin-bottom: 0;
}

.blok-contact .contact-form .wpcf7-form label {
    font-size: 0;
    line-height: 0;
}

.blok-contact .contact-form .wpcf7-form .wpcf7-form-control-wrap {
    display: block;
}

.blok-contact .contact-form input[type="text"],
.blok-contact .contact-form input[type="email"],
.blok-contact .contact-form input[type="tel"],
.blok-contact .contact-form textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: 'Bellota Text', sans-serif;
    font-size: 1rem;
    color: var(--text-dark);
    background: var(--bg-white);
    box-sizing: border-box;
}

.blok-contact .contact-form textarea {
    min-height: 150px;
    resize: vertical;
}

.blok-contact .contact-form .wpcf7-form p {
    margin: 0;
}

.blok-contact .contact-form .wpcf7-submit {
    width: auto;
    padding: 0.75rem 2rem;
    background: var(--btn-gold);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-family: 'Bellota Text', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.25s ease;
    display: block;
    margin-left: auto;
}

.blok-contact .contact-form .wpcf7-submit:hover {
    background: var(--btn-gold-hover);
}

.blok-contact .contact-form .wpcf7-response-output {
    margin: var(--space-sm) 0 0;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
    .blok-contact {
        background: var(--bg-white) !important;
    }

    .blok-contact .contact-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .blok-contact .contact-left {
        display: contents;
    }

    .blok-contact {
        padding: 1.5rem var(--container-padding) 0 !important;
    }

    .blok-contact .contact-left .section-label { order: 1; margin-bottom: 0.75rem; }
    .blok-contact .contact-left h2 { order: 2; margin-bottom: 0.75rem; }
    .blok-contact .contact-left .contact-tekst { order: 3; margin-bottom: 1.25rem; }
    .blok-contact .contact-right { order: 4; margin-top: 0; }
    .blok-contact .contact-blocks { order: 5; margin-top: 0.75rem; margin-bottom: 1.5rem; }

    /* Formulier velden onder elkaar en full-width */
    .blok-contact .contact-form .wpcf7-form > div[style] {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-md) !important;
    }

    .blok-contact .contact-form .wpcf7-form > div[style] > p {
        width: 100% !important;
        flex: none !important;
    }
}

/* ============================================
   BLOK 15: LANDKAART
   ============================================ */
.blok-landkaart {
    padding: 0;
    margin: 0;
    width: 100%;
}

.blok-landkaart .container {
    max-width: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

.blok-landkaart .landkaart-content {
    width: 100%;
    margin: 0;
    line-height: 0;
}

.blok-landkaart .landkaart-content iframe,
.blok-landkaart .landkaart-content > div,
.blok-landkaart .landkaart-content p {
    width: 100% !important;
    height: calc(100vh - 180px);
    min-height: 500px;
    border: none;
    display: block;
    margin: 0;
    padding: 0;
}

/* Verwijder border-top van footer als landkaart ervoor staat */
.blok-landkaart + .blok-footer {
    border-top: none;
}

/* ============================================
   RESPONSIVE - MOBILE (768px en kleiner)
   Alleen mobile aanpassingen, desktop blijft ongewijzigd
   ============================================ */
@media (max-width: 768px) {

    /* --- Labels gecentreerd alleen voor gecentreerde blokken --- */
    .blok-tekst-gecentreerd.align-left .section-label,
    .blok-tekst-gecentreerd.align-center .section-label,
    .blok-tekst-icoon .section-label {
        justify-content: center;
    }

    /* --- Algemene spacing verkleinen --- */
    .blok-tekst-gecentreerd,
    .blok-tekst-afbeelding,
    .blok-kaarten,
    .blok-bento-grid,
    .blok-vacatures,
    .blok-cijfers,
    .blok-proces {
        padding: var(--space-xl) 0;
    }

    /* --- Tekst Gecentreerd --- */
    .blok-tekst-gecentreerd h2 {
        font-size: 1.4rem;
    }

    .blok-tekst-gecentreerd .content {
        max-width: 100%;
    }

    .blok-tekst-gecentreerd .btn {
        display: inline-block;
        margin: 1.5rem auto 0;
    }

    /* --- Tekst met Icoon --- */
    .blok-tekst-icoon .strip-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .blok-tekst-icoon .strip-icon img {
        max-width: 50px;
    }

    .blok-tekst-icoon .strip-content h2 {
        font-size: 1.4rem;
    }

    /* --- Tekst met Afbeelding: alles links, knop onder afbeelding --- */
    .blok-tekst-afbeelding,
    .blok-tekst-afbeelding.align-center,
    .blok-tekst-afbeelding.align-left {
        text-align: left;
    }

    .blok-tekst-afbeelding .section-label {
        justify-content: flex-start;
    }

    .blok-tekst-afbeelding .split-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .blok-tekst-afbeelding .split-content {
        display: contents;
    }

    .blok-tekst-afbeelding .section-label { order: 1; margin-bottom: var(--space-sm); }
    .blok-tekst-afbeelding .split-content h2 { order: 2; font-size: 1.3rem; margin-bottom: 0.5rem; }
    .blok-tekst-afbeelding .split-content .tekst { order: 3; margin-bottom: 0.5rem; }
    .blok-tekst-afbeelding .split-content p { margin-bottom: 0.75rem; }
    .blok-tekst-afbeelding .split-image { order: 4; aspect-ratio: 16/10; margin-bottom: 1.5rem; }
    .blok-tekst-afbeelding .btn { order: 5; width: 50%; align-self: flex-start; }

    /* --- Kaarten --- */
    .blok-kaarten .kaarten-grid,
    .blok-kaarten .kaarten-grid.cols-3,
    .blok-kaarten .kaarten-grid.cols-4 {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .blok-kaarten .kaart {
        padding: var(--space-lg);
    }

    .blok-kaarten .kaart .nummer {
        font-size: 2rem;
    }

    .blok-kaarten .kaart .kaart-icon {
        width: 48px;
        height: 48px;
    }

    .blok-kaarten .header h2 {
        font-size: 1.3rem;
    }

    /* --- Afbeeldingen Grid --- */
    .blok-afbeeldingen-grid .afbeeldingen-grid {
        grid-template-columns: 1fr;
    }

    .blok-afbeeldingen-grid .header {
        text-align: left;
    }

    .blok-afbeeldingen-grid .section-label {
        justify-content: flex-start;
    }

    /* --- Bento Grid: mobile carrousel --- */
    .blok-bento-grid .bento-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        min-height: auto;
        scrollbar-width: none;
    }

    .blok-bento-grid .bento-grid::-webkit-scrollbar {
        display: none;
    }

    .blok-bento-grid .bento-item,
    .blok-bento-grid a.bento-item {
        min-width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        scroll-snap-align: center;
        min-height: 280px;
        border-radius: var(--radius-md);
    }

    .blok-bento-grid .bento-item:nth-child(1),
    .blok-bento-grid .bento-item:nth-child(2),
    .blok-bento-grid .bento-item:nth-child(3) {
        grid-column: unset;
        grid-row: unset;
    }

    .blok-bento-grid .bento-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 16px;
    }

    .blok-bento-grid .bento-dots .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ccc;
        transition: background 0.3s ease;
        cursor: pointer;
    }

    .blok-bento-grid .bento-dots .dot.active {
        background: var(--color-gold);
    }

    .blok-bento-grid .header {
        text-align: left;
    }

    .blok-bento-grid .section-label {
        justify-content: flex-start;
    }

    .blok-bento-grid .header h2 {
        font-size: 1.3rem;
    }

    /* --- Vacatures --- */
    .blok-vacatures .vacature-card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
    }

    .blok-vacatures .vacature-card .btn {
        min-width: auto;
        width: 100%;
        text-align: center;
    }

    .blok-vacatures .vacature-card h3 {
        font-size: 1.2rem;
    }

    /* --- Cijfers / USP --- */
    .blok-cijfers .cijfers-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .blok-cijfers .cijfer-card .nummer {
        font-size: 1.5rem;
    }

    /* --- Iconen / Kernwaarden (swipe carrousel) --- */
    .blok-iconen .container {
        padding: 0;
        display: block;
    }

    .blok-iconen .iconen-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        max-width: 100%;
        scrollbar-width: none;
    }

    .blok-iconen .iconen-grid::-webkit-scrollbar {
        display: none;
    }

    .blok-iconen .icoon-item {
        min-width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        scroll-snap-align: start;
        padding: 0 40px;
        box-sizing: border-box;
    }

    .blok-iconen .icoon-item:not(:last-child)::after {
        display: none;
    }

    .blok-iconen .icoon-item h3 {
        font-size: 16px;
    }

    .blok-iconen .icoon-item p {
        font-size: 13px;
    }

    /* Carousel dots */
    .blok-iconen .iconen-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 20px;
    }

    .blok-iconen .iconen-dots .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255,255,255,0.3);
        transition: background 0.3s ease;
        cursor: pointer;
    }

    .blok-iconen .iconen-dots .dot.active {
        background: var(--color-gold);
    }

    /* --- Proces / Stappen --- */
    .blok-proces .proces-sectie {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .blok-proces-header {
        padding: var(--space-xl) 0;
    }

    .blok-proces-header h2 {
        font-size: 1.4rem;
    }

    /* --- FAQ --- */
    .blok-faq .faq-question {
        padding: var(--space-sm) var(--space-md);
        font-size: 0.9rem;
    }

    .blok-faq .faq-answer {
        padding: 0 var(--space-md) var(--space-md);
    }

    .blok-faq .faq-header h2 {
        font-size: 1.2rem;
    }

    /* --- Contact --- */
    .blok-contact {
        padding: var(--space-xl) var(--container-padding);
    }

    .blok-contact .contact-left h2 {
        font-size: 1.8rem;
    }

    .blok-contact .contact-icon {
        width: 60px;
        height: 60px;
    }

    .blok-contact .contact-icon img {
        width: 30px;
        height: 30px;
    }

    .blok-contact .contact-form .wpcf7-submit {
        width: 100%;
        text-align: center;
    }

    /* --- Landkaart --- */
    .blok-landkaart .landkaart-content iframe,
    .blok-landkaart .landkaart-content > div,
    .blok-landkaart .landkaart-content p {
        height: calc(100vh - 160px);
        min-height: 500px;
    }

    /* --- Nav Overlay - extra compact voor kleine schermen --- */
    .nav-overlay .nav-column-title,
    .nav-overlay .nav-column-links li a {
        font-size: 0.95rem;
    }

    .nav-overlay .nav-column-links li {
        margin-bottom: 0.3rem;
    }

    .nav-overlay .nav-column {
        align-items: center;
        min-width: auto;
    }

    /* --- Buttons algemeen --- */
    .btn {
        font-size: 0.8rem;
        padding: 0.7rem 1.5rem;
    }
}

/* ============================================
   RESPONSIVE - SMALL MOBILE (480px en kleiner)
   Extra aanpassingen voor kleine telefoons
   ============================================ */
@media (max-width: 480px) {

    /* Nog kleinere spacing */
    .blok-tekst-gecentreerd,
    .blok-tekst-afbeelding,
    .blok-kaarten,
    .blok-bento-grid,
    .blok-vacatures,
    .blok-cijfers {
        padding: var(--space-lg) 0;
    }

    /* Tekst Gecentreerd */
    .blok-tekst-gecentreerd h2 {
        font-size: 1.2rem;
    }

    /* Tekst met Afbeelding */
    .blok-tekst-afbeelding .split-content h2 {
        font-size: 1.15rem;
    }

    /* Kaarten */
    .blok-kaarten .kaart {
        padding: var(--space-md);
    }

    .blok-kaarten .kaart .nummer {
        font-size: 1.6rem;
    }

    /* Iconen */
    .blok-iconen {
        padding: 25px 0 35px 0;
    }

    .blok-iconen .icoon-item .icon img {
        width: 40px;
        height: 40px;
    }

    /* Contact */
    .blok-contact .contact-left h2 {
        font-size: 1.5rem;
    }

    /* FAQ */
    .blok-faq .faq-question {
        font-size: 0.85rem;
        padding: var(--space-sm);
    }

    .blok-faq .faq-answer {
        padding: 0 var(--space-sm) var(--space-sm);
        font-size: 0.85rem;
    }
}

/* ============================================
   GENERATEPRESS OVERRIDES
   ============================================ */

/* Verberg GeneratePress header volledig (NIET onze eigen .site-header) */
#masthead,
.generate-header {
    display: none !important;
}

/* Reset ALLE GeneratePress containers - full width */
.site,
#page,
.site-content,
.content-area,
#primary,
#content,
main,
main#main,
.site-main,
.entry-content,
.inside-article,
article,
article.page {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Verwijder sidebars */
.sidebar,
#secondary,
aside {
    display: none !important;
}

/* Body full width */
body {
    margin: 0 !important;
    padding: 0 !important;
}

/* Reset button defaults */
button {
    border: none;
    background: none;
    outline: none;
    cursor: pointer;
}