/*
Theme Name: De Wielersite
Theme URI: https://www.dewielersite.com
Description: Custom theme voor De Wielersite — Laravel API + Polylang
Version: 0.1.0
Author: Frans Bouwmeester
Text Domain: wielersite
*/

/* ── Kleurpalet ─────────────────────────────────────────────────────────── */
:root {
    /* Basiskleur — verander alleen dit om het hele palet te verschuiven */
    --ws-base:        hsl(220 75% 15%);

    /* Varianten via CSS relative color syntax (from), alleen lightness varieert */
    --ws-navy:        var(--ws-base);
    --ws-navy-mid:    hsl(from var(--ws-base) h s 20%);
    --ws-blue:        hsl(from var(--ws-base) h s 45%);
    --ws-blue-hover:  hsl(from var(--ws-base) h s 38%);
    --ws-accent:      hsl(from var(--ws-base) h s 60%);
    --ws-accent-soft: hsl(from var(--ws-base) h s 96%);

    --navbar-height:  56px;
}

/* Bootstrap bg-dark overschrijven */
.bg-dark,
.navbar-dark.bg-dark { background-color: var(--ws-navy) !important; }

/* Table dark: via Bootstrap 5 CSS-variabelen (juiste methode) */
.table-dark {
    --bs-table-bg:         var(--ws-navy-mid);
    --bs-table-striped-bg: hsl(from var(--ws-base) h s 22%);
    --bs-table-hover-bg:   hsl(from var(--ws-base) h s 25%);
    --bs-table-border-color: hsl(from var(--ws-base) h s 30%);
    --bs-table-color: #fff;
}

/* Primaire knop */
.btn-primary {
    background-color: var(--ws-blue);
    border-color:     var(--ws-blue);
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--ws-blue-hover);
    border-color:     var(--ws-blue-hover);
}

/* Donkere knop */
.btn-dark {
    background-color: var(--ws-navy-mid);
    border-color:     var(--ws-navy-mid);
}

/* Links */
a { color: var(--ws-accent); }
a:hover { color: var(--ws-blue-hover); }

/* Tabel hover row */
.table-hover > tbody > tr:hover > * {
    background-color: var(--ws-accent-soft);
}

/* Paginering */
.page-item.active .page-link {
    background-color: var(--ws-blue);
    border-color:     var(--ws-blue);
}
.page-link { color: var(--ws-accent); }
.page-link:hover { color: var(--ws-blue-hover); }

/* Nav tabs */
.nav-tabs .nav-link.active {
    color:        var(--ws-blue);
    border-color: var(--ws-blue) var(--ws-blue) #fff;
}
.nav-tabs .nav-link:hover { color: var(--ws-blue-hover); }

/* Badges */
.badge.bg-secondary { background-color: var(--ws-navy-mid) !important; }

/* ── Input fields ───────────────────────────────────────────────────────── */
.form-control {
    border: 1.5px solid hsl(from var(--ws-base) h s 82%);
    border-radius: 0.5rem;
    color: hsl(from var(--ws-base) h s 22%);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.form-control:hover {
    border-color: var(--ws-blue);
}

.form-control:focus {
    border-color: var(--ws-accent);
    box-shadow: 0 0 0 3px hsl(from var(--ws-base) h s 60% / 0.18);
    outline: none;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn-outline-secondary {
    border-color: hsl(from var(--ws-base) h s 75%);
    color:        hsl(from var(--ws-base) h s 35%);
}

.btn-outline-secondary:hover {
    background-color: hsl(from var(--ws-base) h s 95%);
    border-color:     var(--ws-blue);
    color:            var(--ws-blue);
}

/* ── Taalwisseler dropdown ──────────────────────────────────────────────── */
.ws-lang-dropdown .dropdown-menu {
    min-width: 160px;
    border: 1.5px solid hsl(from var(--ws-base) h s 82%);
    border-radius: 0.5rem;
    box-shadow: 0 6px 20px hsl(from var(--ws-base) h s 15% / 0.2);
    padding: 0.25rem;
}

.ws-lang-dropdown .dropdown-item {
    border-radius: 0.35rem;
    padding: 0.4rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ws-lang-dropdown .dropdown-item:hover {
    background-color: hsl(from var(--ws-base) h s 94%);
    color: var(--ws-blue);
}

.ws-lang-dropdown .dropdown-item.active {
    background-color: var(--ws-blue);
    color: #fff;
}

/* Navbar: felle witte tekst, geel-accent bij hover */
.navbar-dark .navbar-nav .nav-link {
    color: #fff;
    font-weight: 500;
    letter-spacing: .01em;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .show > .nav-link {
    color: hsl(from var(--ws-base) h s 80%);
}

/* Block header: sitetitel en navigatie-links altijd wit */
.ws-site-header .wp-block-site-title a,
.ws-site-header .wp-block-site-title a:hover {
    color: #fff;
    text-decoration: none;
}

.ws-site-header .wp-block-navigation-item__content,
.ws-site-header .wp-block-navigation-item__content:hover {
    color: #fff;
}

/* ── Fixed navbar + WP admin bar offset ────────────────────────────────── */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

.admin-bar .navbar {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .navbar {
        top: 46px;
    }
}

/* ── Layout: footer sticky to bottom ───────────────────────────────────── */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body > main,
body > .wp-site-blocks,
.wp-site-blocks > .ws-main-content {
    flex: 1;
}

/* Block theme: inhoud tussen header en footer groeit mee */
.wp-site-blocks {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.wp-site-blocks > .ws-site-footer {
    margin-top: auto;
}

/* PHP page templates: compenseer vaste header hoogte */
.ws-php-main {
    margin-top: var(--navbar-height);
    padding: 1.5rem 1rem;
    max-width: 1200px;
    margin-inline: auto;
    flex: 1;
    width: 100%;
}

body.admin-bar .ws-php-main {
    margin-top: calc(var(--navbar-height) + 32px);
}

@media screen and (max-width: 782px) {
    body.admin-bar .ws-php-main {
        margin-top: calc(var(--navbar-height) + 46px);
    }
}

/* ── Nieuws templates ───────────────────────────────────────────────────── */

/* Single post: featured image met align=right via Gutenberg block settings */
.ws-single-post .wp-block-post-featured-image.alignright,
.ws-single-post .wp-block-post-featured-image.alignright img,
.ws-single-post .wp-block-post-featured-image.alignright .ws-legacy-thumbnail {
    border-radius: 6px;
    max-width: 42%;
}

/* ── Nieuws feed (front-page) ───────────────────────────────────────────── */

/* Hero — flexbox, vaste hoogte, tekst knipt af met line-clamp */
.ws-nf-hero {
    grid-column: 1 / -1;
    border: 1.5px solid hsl(from var(--ws-base) h s 88%);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.ws-nf-hero:hover { box-shadow: 0 4px 20px hsl(from var(--ws-base) h s 15% / 0.12); }

.ws-nf-hero-link {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--wp--preset--spacing--sm, 1rem);
    padding: var(--wp--preset--spacing--sm, 1rem);
    height: 360px;
    text-decoration: none;
    color: inherit;
}

.ws-nf-hero-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    overflow: hidden;
}

.ws-nf-hero-text .ws-nf-excerpt {
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 9;
}

.ws-nf-hero-img {
    overflow: hidden;
    border-radius: 6px;
}

.ws-nf-hero-img img,
.ws-nf-hero-img .ws-no-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 6px;
}
.ws-nf-title { font-weight: 700; font-size: 1.3rem; margin: 0 0 0.5rem; }
.ws-nf-excerpt { font-size: 0.9rem; color: hsl(from var(--ws-base) h s 40%); margin: 0; }

/* Grid kaartjes */
.ws-nf-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.ws-nf-card { border-radius: 8px; overflow: hidden; transition: box-shadow 0.2s; }
.ws-nf-card-link {
    display: block;
    padding: 0.9rem;
    text-decoration: none;
    color: inherit;
    border: 1.5px solid hsl(from var(--ws-base) h s 88%);
    border-radius: 8px;
    height: 100%;
}
.ws-nf-card-link:hover { box-shadow: 0 4px 12px hsl(from var(--ws-base) h s 15% / 0.1); }
.ws-nf-card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: top; border-radius: 5px; margin-bottom: 0.5rem; display: block; }
.ws-nf-card-title { font-size: 0.9rem; font-weight: 600; margin: 0.2rem 0 0.35rem; }
.ws-nf-card-excerpt { font-size: 0.8rem; color: hsl(from var(--ws-base) h s 45%); margin: 0; }

/* Placeholder voor kaartjes zonder afbeelding */
/* Geen foto: onzichtbaar vlak, icoon als lichtblauw badge rechtsboven */
.ws-no-img {
    width: 100%;
    aspect-ratio: 3/1;
    border-radius: 5px;
    margin-bottom: 0.5rem;
    position: relative;
}

.ws-no-img > span {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    background: hsl(from var(--ws-base) h s 90%);
    color: hsl(from var(--ws-base) h s 35%);
    font-size: 0.85rem;
    line-height: 1;
    padding: 0.22rem 0.35rem;
    border-radius: 4px;
}

/* Hero placeholder */
.ws-nf-hero-img .ws-no-img {
    height: 100%;
    min-height: 200px;
    border-radius: 0;
    font-size: 3rem;
}

@media (max-width: 768px) {
    .ws-nf-grid { grid-template-columns: repeat(2, 1fr); }
    .ws-nf-hero-img { display: none; }
}

/* ── Mixed feed: één query, CSS-gestuurde hero ──────────────────────────── */

/* Grid-container: 3 kolommen voor alle items */
.ws-mixed-feed .wp-block-post-template {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Hero (eerste item): volle breedte */
.ws-mixed-feed .wp-block-post-template > li:first-child {
    grid-column: 1 / -1;
}

/* Alle feed-items: kaartje styling + hover schaduw */
.ws-feed-item {
    height: 100%;
    background: #fff;
    transition: box-shadow 0.2s ease;
}

.ws-feed-item:hover {
    box-shadow: 0 4px 20px hsl(from var(--ws-base) h s 15% / 0.13);
}

/* Hero: grotere afbeelding */
.ws-mixed-feed .wp-block-post-template > li:first-child .ws-feed-img-col img,
.ws-mixed-feed .wp-block-post-template > li:first-child .ws-feed-img-col .ws-legacy-thumbnail {
    height: 240px;
    width: 100%;
    object-fit: cover;
    border-radius: 6px;
}

/* Kaartjes (niet-hero): afbeelding bovenaan, tekst eronder
   Override de Gutenberg columns naar verticaal stapelen */
.ws-mixed-feed .wp-block-post-template > li:not(:first-child) .wp-block-columns.is-layout-flex {
    flex-wrap: wrap !important;
    gap: 0 !important;
}

.ws-mixed-feed .wp-block-post-template > li:not(:first-child) .wp-block-column {
    flex-basis: 100% !important;
    max-width: 100% !important;
}

.ws-mixed-feed .wp-block-post-template > li:not(:first-child) .ws-feed-img-col {
    order: -1;
    margin-bottom: 0.5rem;
}

.ws-mixed-feed .wp-block-post-template > li:not(:first-child) .ws-feed-img-col img,
.ws-mixed-feed .wp-block-post-template > li:not(:first-child) .ws-feed-img-col .ws-legacy-thumbnail {
    height: 150px;
    width: 100%;
    object-fit: cover;
    border-radius: 6px;
}

/* Kleinere titel + compactere spacing in kaartjes */
.ws-mixed-feed .wp-block-post-template > li:not(:first-child) .wp-block-post-title {
    font-size: 0.95rem !important;
    margin-top: 0.25rem !important;
    margin-bottom: 0.4rem !important;
}

.ws-mixed-feed .wp-block-post-template > li:not(:first-child) .wp-block-post-date {
    margin-bottom: 0 !important;
}

.ws-mixed-feed .wp-block-post-template > li:not(:first-child) .wp-block-post-excerpt {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.ws-mixed-feed .wp-block-post-template > li:not(:first-child) .wp-block-post-excerpt p {
    margin: 0 !important;
    font-size: 0.85rem;
    color: hsl(from var(--ws-base) h s 40%);
}

/* Stretched link: hele kaart klikbaar via titel-link ::after
   Screen readers gebruiken de titel als toegankelijke naam */
.ws-feed-item {
    position: relative;
}

.ws-feed-item .wp-block-post-title a::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 1;
}

@media (max-width: 640px) {
    .ws-single-post .ws-article-image,
    .ws-single-post .wp-block-post-featured-image {
        float: none;
        max-width: 100%;
        margin: 0 0 1.5rem 0;
    }
}

/* ── Lees meer knop (pill) ──────────────────────────────────────────────── */
.ws-btn-more,
a.ws-btn-more {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.75rem;
    padding: 0.4rem 1rem;
    background-color: var(--ws-blue);
    color: #fff !important;
    border-radius: 2rem;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.ws-btn-more:hover,
a.ws-btn-more:hover {
    background-color: var(--ws-blue-hover);
    color: #fff !important;
}

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.ws-breadcrumb {
    font-size: 0.82rem;
    color: hsl(from var(--ws-base) h s 50%);
    margin-bottom: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

.ws-breadcrumb a {
    color: var(--ws-accent);
    text-decoration: none;
}

.ws-breadcrumb a:hover {
    color: var(--ws-blue);
    text-decoration: underline;
}

/* ── Detail page accordeons ─────────────────────────────────────────────── */
.ws-accordion-item {
    border: 1.5px solid hsl(from var(--ws-base) h s 88%);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}
.ws-accordion-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    cursor: pointer;
    list-style: none;
    background: hsl(from var(--ws-base) h s 97%);
    user-select: none;
    font-weight: 600;
    font-size: 0.95rem;
}
.ws-accordion-summary::-webkit-details-marker { display: none; }
.ws-accordion-summary::before {
    content: '▶';
    font-size: 0.6rem;
    transition: transform 0.18s;
    opacity: 0.4;
    flex-shrink: 0;
}
details[open] > .ws-accordion-summary::before { transform: rotate(90deg); }
.ws-accordion-summary .ws-acc-count {
    font-weight: 400;
    color: #888;
    font-size: 0.82rem;
}
.ws-accordion-body { padding: 0; }
.ws-accordion-body .table { margin-bottom: 0; }

.ws-bc-sep {
    margin: 0 0.3rem;
    opacity: 0.5;
}

.ws-bc-current {
    color: hsl(from var(--ws-base) h s 40%);
}

/* ── Zoekresultaten (wielersite/zoekresultaten block) ──────────────────── */

/* Inleiding */
.ws-search-intro { margin-bottom: 1.5rem; }
.ws-search-query { font-size: 1rem; margin-bottom: 0.6rem; }
.ws-search-counts { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.ws-count-pill {
    display: inline-flex;
    padding: 0.3rem 0.8rem;
    border-radius: 2rem;
    font-size: 0.82rem;
    font-weight: 500;
    border: 1.5px solid hsl(from var(--ws-base) h s 75%);
    color: hsl(from var(--ws-base) h s 40%);
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
}
.ws-count-pill:hover,
.ws-count-pill.active {
    background-color: var(--ws-blue);
    border-color: var(--ws-blue);
    color: #fff !important;
}

/* Gedeelde datum stijl */
.ws-sr-date { font-size: 0.78rem; color: hsl(from var(--ws-base) h s 60%); display: block; margin-bottom: 0.3rem; }

/* Laad meer */
.ws-load-more-wrap { text-align: center; margin-top: 1.5rem; }
.ws-no-results { color: hsl(from var(--ws-base) h s 50%); font-size: 0.95rem; }

/* ── Zoekresultaten (oud block - niet meer gebruikt) ─────────────────────── */
.ws-search-grid .wp-block-post-template {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.ws-search-card {
    height: 100%;
    background: #fff;
    transition: box-shadow 0.2s ease;
    position: relative;
}

.ws-search-card:hover {
    box-shadow: 0 4px 16px hsl(from var(--ws-base) h s 15% / 0.12);
}

/* Stretched link voor kaartjes */
.ws-search-card .wp-block-post-title a::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 1;
}

.ws-search-card .ws-card-img img,
.ws-search-card .ws-card-img .ws-legacy-thumbnail {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: 0.6rem;
}

/* Query-total tekst */
.wp-block-query-total {
    font-size: 0.85rem;
    color: hsl(from var(--ws-base) h s 50%);
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .ws-search-grid .wp-block-post-template {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .ws-search-grid .wp-block-post-template {
        grid-template-columns: 1fr;
    }
}

/* ── Zoekbalk in header ─────────────────────────────────────────────────── */
.ws-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.ws-search-toggle {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0.35rem 0.5rem;
    display: flex;
    align-items: center;
    opacity: 0.8;
    transition: opacity 0.15s;
}
.ws-search-toggle:hover { opacity: 1; }

.ws-search-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: #fff;
    border: 1.5px solid hsl(from var(--ws-base) h s 82%);
    border-radius: 0.6rem;
    box-shadow: 0 8px 24px hsl(from var(--ws-base) h s 15% / 0.2);
    padding: 1rem;
    min-width: 280px;
    z-index: 2000;
}

.ws-search-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ws-search-input {
    border: 1.5px solid hsl(from var(--ws-base) h s 82%);
    border-radius: 0.4rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.95rem;
    color: hsl(from var(--ws-base) h s 22%);
    width: 100%;
}

.ws-search-input:focus {
    border-color: var(--ws-accent);
    outline: none;
    box-shadow: 0 0 0 2px hsl(from var(--ws-base) h s 60% / 0.15);
}

.ws-search-scope {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: hsl(from var(--ws-base) h s 35%);
}

.ws-search-scope label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
}

.ws-search-submit {
    background-color: var(--ws-blue);
    color: #fff;
    border: none;
    border-radius: 0.4rem;
    padding: 0.45rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.15s;
}
.ws-search-submit:hover { background-color: var(--ws-blue-hover); }

/* ── Progress bar (lazy load) ───────────────────────────────────────────── */
@keyframes ws-progress {
    0%   { width: 0%;   opacity: 1; }
    80%  { width: 90%;  opacity: 1; }
    100% { width: 100%; opacity: 0; }
}

.ws-spinner {
    height: 3px;
    background: var(--ws-blue);
    border-radius: 2px;
    margin: 0.5rem 0 1rem;
    animation: ws-progress 1.5s ease-out forwards;
}

/* ── Voorpagina secties ─────────────────────────────────────────────────── */
.ws-fp-sectie {
    margin-bottom: 2.5rem;
}

.ws-fp-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: hsl(from var(--ws-base) h s 55%);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ws-fp-wissel-badge {
    font-size: 0.9rem;
    opacity: 0.5;
    cursor: default;
}

button.ws-fp-wissel-badge {
    background: none;
    border: none;
    padding: 0 0.15rem;
    cursor: pointer;
    line-height: 1;
    opacity: 0.45;
    transition: opacity 0.15s;
}
button.ws-fp-wissel-badge:hover { opacity: 0.8; }

.ws-fp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.ws-fp-type-badge {
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: hsl(from var(--ws-base) h s 60%);
    margin-bottom: 0.2rem;
}

/* "Alle..." pill button */
.ws-fp-alle {
    margin-top: 0.75rem;
    text-align: right;
}

.ws-fp-alle a {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.9rem;
    border: 1.5px solid var(--ws-accent);
    border-radius: 2rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ws-accent);
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
}

.ws-fp-alle a:hover {
    background-color: var(--ws-blue);
    border-color: var(--ws-blue);
    color: #fff;
}

@media (max-width: 640px) {
    .ws-fp-grid { grid-template-columns: 1fr; }
}

/* ── Collapsible filter panel ───────────────────────────────────────────── */
.ws-filter-panel {
    border: 1.5px solid hsl(from var(--ws-base) h s 88%);
    border-radius: 8px;
    overflow: hidden;
}

.ws-filter-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: hsl(from var(--ws-base) h s 35%);
    background: hsl(from var(--ws-base) h s 97%);
    list-style: none;
    user-select: none;
}

.ws-filter-toggle::-webkit-details-marker { display: none; }
.ws-filter-toggle::before { content: '▶'; font-size: 0.65rem; transition: transform 0.2s; }
details[open] .ws-filter-toggle::before { transform: rotate(90deg); }

.ws-filter-badge {
    font-size: 0.7rem;
    background: var(--ws-blue);
    color: #fff;
    padding: 0.1rem 0.45rem;
    border-radius: 2rem;
}

/* ── Filter formulier: 4-koloms grid ───────────────────────────────────────
   Kolom 1 + 2: inputs/selects (ws-filter-fields, spant 2 cols)
   Kolom 3: checkboxes (ws-filter-checks)
   Kolom 4: zoekknop  (ws-filter-actions)
──────────────────────────────────────────────────────────────────────────── */
.ws-filter-form {
    padding: 1rem;
    border-top: 1px solid hsl(from var(--ws-base) h s 92%);
    display: grid;
    grid-template-columns: 1fr 1fr auto auto;
    gap: 0.5rem 1.25rem;
    align-items: end;
}

/* ws-filter-fields spant kolommen 1+2 en verdeelt inputs intern in 2 kolommen */
.ws-filter-fields {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
}

/* Elk veld: label links, input rechts */
.ws-filter-fields > div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ws-filter-fields .form-label {
    margin-bottom: 0;
    font-size: 0.8rem;
    color: hsl(from var(--ws-base) h s 45%);
    white-space: nowrap;
    min-width: 4.5rem;
    flex-shrink: 0;
}

.ws-filter-fields .form-control,
.ws-filter-fields .form-select {
    flex: 1;
    min-width: 0;
}

/* Kolom 3: checkboxes gestapeld */
.ws-filter-checks {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    justify-content: flex-end;
}

.ws-filter-checks label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}

/* Kolom 4: zoekknop onderaan */
.ws-filter-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
    justify-content: flex-end;
}

.ws-filter-actions .btn-primary {
    border-radius: 2rem;
    padding: 0.35rem 1.25rem;
    font-size: 0.85rem;
}

.ws-filter-actions .btn-outline-secondary {
    border-radius: 2rem;
    padding: 0.35rem 0.9rem;
    font-size: 0.82rem;
}

@media (max-width: 900px) {
    .ws-filter-form { grid-template-columns: 1fr 1fr; }
    .ws-filter-fields { grid-column: span 2; }
    .ws-filter-checks, .ws-filter-actions { grid-column: span 1; }
}
@media (max-width: 600px) {
    .ws-filter-form { grid-template-columns: 1fr; }
    .ws-filter-fields { grid-column: 1; grid-template-columns: 1fr; }
    .ws-filter-checks, .ws-filter-actions { grid-column: 1; }
}

/* ── A-Z filter ─────────────────────────────────────────────────────────── */
.ws-az-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.ws-az-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid hsl(from var(--ws-base) h s 88%);
    color: hsl(from var(--ws-base) h s 40%);
    transition: background-color 0.12s;
}

.ws-az-btn:hover { background: hsl(from var(--ws-base) h s 94%); color: var(--ws-blue); }
.ws-az-active { background: var(--ws-blue) !important; border-color: var(--ws-blue) !important; color: #fff !important; }
.ws-az-disabled { opacity: 0.3; cursor: default; }

/* ── Lijst kaartjes grid ─────────────────────────────────────────────────── */
.ws-list-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.ws-list-card {
    position: relative;
    background: #fff;
    border: 1.5px solid hsl(from var(--ws-base) h s 88%);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.15s;
}

.ws-list-card:hover {
    box-shadow: 0 3px 12px hsl(from var(--ws-base) h s 15% / 0.1);
}

.ws-list-card-link {
    display: block;
    padding: 0.9rem;
    text-decoration: none;
    color: inherit;
}

/* Stretched link */
.ws-list-card-link::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* Avatar placeholder voor coureurs */
.ws-coureur-avatar {
    width: 100%;
    height: 100px;
    font-size: 2.5rem;
    font-weight: 700;
    color: hsl(from var(--ws-base) h s 70%);
    background: hsl(from var(--ws-base) h s 94%);
    margin-bottom: 0.6rem;
    border-radius: 5px;
}

.ws-list-card-meta {
    font-size: 0.78rem;
    color: hsl(from var(--ws-base) h s 55%);
    margin-bottom: 0.2rem;
}

.ws-list-card-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

@media (max-width: 768px) { .ws-list-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ws-list-grid { grid-template-columns: 1fr; } }

/* ── Welkom block ───────────────────────────────────────────────────────── */
.ws-welkom {
    padding: 1.25rem 1.5rem;
    border-left: 4px solid var(--ws-accent);
    background: hsl(from var(--ws-base) h s 97%);
    border-radius: 0 8px 8px 0;
    margin-bottom: 2rem;
}

.ws-welkom-titel {
    font-size: 1.25rem;
    font-weight: 700;
    color: hsl(from var(--ws-base) h s 35%);
    margin: 0 0 0.5rem;
}

.ws-welkom-tekst {
    font-size: 0.92rem;
    color: hsl(from var(--ws-base) h s 38%);
    line-height: 1.65;
    margin: 0;
}

/* ── Skeleton placeholder (Facebook-stijl) ──────────────────────────────── */
@keyframes ws-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.ws-skeleton {
    background: linear-gradient(
        90deg,
        hsl(from var(--ws-base) h s 93%) 25%,
        hsl(from var(--ws-base) h s 88%) 50%,
        hsl(from var(--ws-base) h s 93%) 75%
    );
    background-size: 800px 100%;
    animation: ws-shimmer 1.4s infinite linear;
    border-radius: 4px;
}

.ws-skeleton-card {
    border: 1.5px solid hsl(from var(--ws-base) h s 90%);
    border-radius: 8px;
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ws-skeleton-img  { height: 130px; border-radius: 5px; }
.ws-skeleton-date { height: 10px; width: 70px; }
.ws-skeleton-title { height: 14px; width: 90%; }
.ws-skeleton-title.ws-sk-short { width: 60%; }

/* ── Countdown bar voor wisselende secties ──────────────────────────────── */
.ws-countdown-bar {
    height: 2px;
    width: 100%;
    background: var(--ws-accent);
    margin-bottom: 0.75rem;
    border-radius: 1px;
    transition: width 20s linear;
}

/* ── Meer nieuws block ───────────────────────────────────────────────────── */
.ws-meer-nieuws { margin-top: 2.5rem; }

.ws-meer-label {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: hsl(from var(--ws-base) h s 60%);
    margin-bottom: 1rem;
}

.ws-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.ws-related-card {
    position: relative;
    transition: box-shadow 0.15s;
    border: 1px solid hsl(from var(--ws-base) h s 90%);
    border-radius: 6px;
    overflow: hidden;
}

.ws-related-card:hover {
    box-shadow: 0 2px 10px hsl(from var(--ws-base) h s 15% / 0.1);
}

.ws-related-link {
    display: block;
    padding: 0.5rem;
    text-decoration: none;
    color: inherit;
}

/* Stretched link */
.ws-related-link::after {
    content: '';
    position: absolute;
    inset: 0;
}

.ws-related-thumb {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    margin-bottom: 0.5rem;
}

.ws-related-no-img {
    background: hsl(from var(--ws-base) h s 93%);
    margin-bottom: 0.35rem;
}

.ws-related-title {
    font-size: 0.75rem;
    font-weight: 600;
    margin: 0.15rem 0 0;
    line-height: 1.3;
}

/* Fade-in animatie voor geladen kaartjes (laad meer) */
@keyframes ws-fade-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Wacht op viewport: initieel onzichtbaar */
.ws-await-fade { opacity: 0; }

/* Triggert zodra het kaartje volledig in beeld is */
.ws-nf-card.ws-fade-in,
.ws-sr-card.ws-fade-in,
.ws-related-card.ws-fade-in,
.ws-list-card.ws-fade-in {
    animation: ws-fade-in 0.4s ease forwards;
}

@media (max-width: 900px) {
    .ws-related-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
    .ws-related-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Block theme header / footer ────────────────────────────────────────── */
.ws-site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

.admin-bar .ws-site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ws-site-header { top: 46px; } }

.ws-main-content { margin-top: var(--navbar-height); }
.admin-bar .ws-main-content { margin-top: calc(var(--navbar-height) + 32px); }

/* Navigation block stijlen passend bij Bootstrap navbar */
.ws-site-header .wp-block-navigation {
    --nav-foreground: #fff;
    font-weight: 500;
}

.ws-site-header .wp-block-navigation-item__content {
    color: #fff !important;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    transition: background-color 0.15s;
}

.ws-site-header .wp-block-navigation-item__content:hover {
    background-color: hsl(from var(--ws-base) h s 25%);
    color: #fff !important;
}

.ws-site-header .wp-block-navigation__submenu-container {
    background-color: #fff;
    border: 1.5px solid hsl(from var(--ws-base) h s 82%);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px hsl(from var(--ws-base) h s 15% / 0.2);
    padding: 0.25rem;
    min-width: 200px;
}

.ws-site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    color: hsl(from var(--ws-base) h s 22%) !important;
}

.ws-site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    background-color: hsl(from var(--ws-base) h s 94%);
    color: var(--ws-blue) !important;
}

/* Footer block */
.ws-site-footer a {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
}

.ws-site-footer a:hover { color: #fff; }

.ws-footer-list { list-style: none; padding: 0; margin: 0; }
.ws-footer-list li { margin-bottom: 0.35rem; font-size: 0.875rem; }

/* ── Moderne select boxes ───────────────────────────────────────────────── */
.form-select,
select.form-control {
    appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    background-size: 1rem;
    padding-right: 2.25rem;
    border: 1.5px solid hsl(from var(--ws-base) h s 82%);
    border-radius: 0.5rem;
    color: hsl(from var(--ws-base) h s 22%);
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.form-select:hover {
    border-color: var(--ws-blue);
}

.form-select:focus {
    border-color: var(--ws-accent);
    box-shadow: 0 0 0 3px hsl(from var(--ws-base) h s 60% / 0.18);
    outline: none;
}

/* Kleine variant */
.form-select-sm {
    border-radius: 0.375rem;
    font-size: .875rem;
}

/* Picker (Chrome 135+) — stijl de dropdown popup */
.form-select::picker(select) {
    border: 1.5px solid hsl(from var(--ws-base) h s 82%);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px hsl(from var(--ws-base) h s 15% / 0.2);
    padding: 0.25rem;
}

.form-select option:checked {
    background-color: hsl(from var(--ws-base) h s 94%);
    color: var(--ws-blue);
}

.form-select option:hover {
    background-color: hsl(from var(--ws-base) h s 96%);
}

/* ── Gedeelde strip basis ───────────────────────────────────────────────── */
.ws-foto-strip,
.ws-video-strip {
    display: flex;
    gap: 0.5em;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.ws-foto-strip::-webkit-scrollbar,
.ws-video-strip::-webkit-scrollbar {
    display: none;
}

/* Gedeelde scroll-button stijl */
.ws-foto-strip::scroll-button(left),
.ws-foto-strip::scroll-button(right),
.ws-video-strip::scroll-button(left),
.ws-video-strip::scroll-button(right) {
    border: none;
    background: rgba(0, 0, 0, .65);
    color: white;
    font-size: 1.5rem;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    cursor: pointer;
    position: fixed;
}

.ws-foto-strip::scroll-button(left),
.ws-video-strip::scroll-button(left) {
    content: '‹';
    position-area: left center;
    translate: 50%;
}

.ws-foto-strip::scroll-button(right),
.ws-video-strip::scroll-button(right) {
    content: '›';
    position-area: right center;
    translate: -50%;
}

.ws-foto-strip::scroll-button(right):disabled,
.ws-foto-strip::scroll-button(left):disabled,
.ws-video-strip::scroll-button(right):disabled,
.ws-video-strip::scroll-button(left):disabled {
    opacity: 0.5;
    cursor: auto;
}

/* ── Foto filmstrip ─────────────────────────────────────────────────────── */
.ws-foto-strip-img {
    height: 200px;
    width: auto;
    flex-shrink: 0;
    object-fit: cover;
    object-position: top;
    border-radius: 4px;
    cursor: zoom-in;
}

.ws-foto-modal-img { max-height: 80vh; }

/* Overwinningskaartje */
.ws-overw-card-inner { display: flex; flex-direction: column; height: 100%; }
.ws-overw-icon { font-size: 1.4rem; height: 2.5rem; line-height: 2.5rem; }
.ws-overw-card-top { flex: 1; padding: .6rem .75rem .4rem; text-decoration: none; color: inherit; display: block; }
.ws-overw-title { font-size: .85rem; }
.ws-overw-finish { font-size: .75rem; display: block; }
.ws-overw-card-coureur {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .35rem .75rem;
    border-top: 1px solid hsl(from var(--ws-base) h s 92%);
    font-size: .82rem;
    text-decoration: none;
    color: inherit;
    background: hsl(from var(--ws-base) h s 97%);
    gap: .5rem;
}

.ws-overw-coureur-thumb {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    flex-shrink: 0;
}
.ws-website-icon { font-size: 1.1rem; text-decoration: none; }

.ws-foto-strip {
    anchor-name: --foto-strip;
}

.ws-foto-strip::scroll-button(left),
.ws-foto-strip::scroll-button(right) {
    position-anchor: --foto-strip;
}

/* ── Video strip ────────────────────────────────────────────────────────── */
.ws-video-strip {
    anchor-name: --video-strip;
}

.ws-video-strip::scroll-button(left),
.ws-video-strip::scroll-button(right) {
    position-anchor: --video-strip;
}

.ws-video-item {
    flex-shrink: 0;
    width: 280px;
    border-radius: 4px;
    overflow: hidden;
    background: #111;
    cursor: pointer;
    position: relative;
}

.ws-video-item img {
    width: 100%;
    height: 158px;
    object-fit: cover;
    display: block;
}

.ws-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    font-size: 3rem;
    filter: drop-shadow(0 0 6px rgba(0,0,0,.9));
    opacity: .9;
    pointer-events: none;
}

.ws-video-caption {
    padding: 4px 8px 6px;
    font-size: .75rem;
    color: #ccc;
    margin: 0;
    background: #111;
}

.ws-video-caption span {
    color: #888;
    margin-right: .4em;
}

.ws-video-no-preview {
    height: 158px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: .8rem;
}

/* ── Nieuws home: featured + grid ───────────────────────────────────────── */
.ws-news-card {
    background: #fff;
    border: 1.5px solid hsl(from var(--ws-base) h s 90%);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.15s;
    height: 100%;
}

.ws-news-card:hover {
    box-shadow: 0 3px 12px hsl(from var(--ws-base) h s 15% / 0.12);
}

.ws-news-card .wp-block-post-title a {
    text-decoration: none;
    color: inherit;
}

.ws-news-card .wp-block-post-title a:hover {
    color: var(--wp--preset--color--accent);
}

/* Zorg dat featured image altijd aspect-ratio 16/9 houdt in de kaartjes */
.ws-news-card .wp-block-post-featured-image img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: top;
    display: block;
}

/* Featured query: geen extra witruimte */
.ws-query-featured {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1.5px solid hsl(from var(--ws-base) h s 92%);
}

/* Grid query: responsive kolommen */
.ws-query-grid .wp-block-post-template {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 900px) {
    .ws-query-grid .wp-block-post-template { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .ws-query-grid .wp-block-post-template { grid-template-columns: 1fr; }
    .ws-query-featured .wp-block-columns { flex-direction: column; }
}

/* ── Wedstrijduitslag kaartjes (coureur detail) ─────────────────────────── */
.ws-uitslag-card .ws-list-card-link { padding: 0.5rem 0.75rem; display: flex; flex-direction: column; gap: 0.15rem; }

.ws-uitslag-place {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: hsl(from var(--ws-base) h s 55%);
    margin-bottom: 0.2rem;
}

.ws-uitslag-place.ws-place-gold   { color: #c8962c; }
.ws-uitslag-place.ws-place-podium { color: hsl(from var(--ws-base) h s 45%); }