/*!
 * =============================================================================
 * GPS HEADER
 * =============================================================================
 * PURPOSE      : Premium redesign van de FacetWP-resultatenkaart (.fwpl-result)
 *                en de filter-sidebar (.sportscholen-filters-desktop-filters)
 *                op het sportschool-archief en de taxonomieën stad/wijk/
 *                fitnessketens. Sprint 2 van de visuele transformatie:
 *                "High-End Directory"-look (Airbnb-frisheid × Booking-autoriteit).
 *
 *                Component-laag: consumeert uitsluitend tokens uit tokens.css
 *                (zero hardcoded kleuren, radii of shadows).
 *
 * PATH         : wp-content/themes/sportlist/css/filters-and-cards.css
 *
 * DEPENDENCIES : css/tokens.css (geladen via functions.php vóór dit bestand),
 *                style.css (basis-layout — wordt hier deels overridden),
 *                FacetWP layout builder classes (.fwpl-result, .fwpl-item.*),
 *                FacetWP selections (ul.facetwp-selections).
 *
 * =============================================================================
 * CSS-VARIABELEN (uitsluitend tokens uit tokens.css)
 * =============================================================================
 *   Kleur:    --color-brand, --color-brand-hover, --color-brand-on,
 *             --color-accent, --color-accent-subtle,
 *             --color-text, --color-text-muted, --color-heading,
 *             --color-surface, --color-surface-sunken, --color-surface-muted,
 *             --color-border-subtle, --color-border-default,
 *             --color-focus-ring
 *   Space:    --space-1..--space-8
 *   Radius:   --radius-sm, --radius-md, --radius-lg, --radius-xl,
 *             --radius-pill
 *   Shadow:   --shadow-xs, --shadow-sm, --shadow-card, --shadow-raised,
 *             --shadow-focus
 *   Type:     --fs-body-sm, --fs-body, --fs-body-lg, --fs-h3, --fs-caption,
 *             --fs-overline, --fw-medium, --fw-semibold, --fw-bold,
 *             --lh-snug, --lh-heading, --ls-caps
 *   Motion:   --duration-fast, --duration-base, --ease-out,
 *             --transition-hover
 *   Z-index:  --z-sticky, --z-raised
 *
 * =============================================================================
 * SECTIONOVERZICHT
 * =============================================================================
 *    1.  PAGE-LAYOUT TUNING (sticky sidebar, spacing)
 *    2.  FILTER SIDEBAR (container, groepkop, inputs, knoppen)
 *    3.  ACTIVE FILTER CHIPS (.facetwp-selections + reset-all)
 *    4.  RESULTS HEADER (counts + sort)
 *    5.  RESULT CARD (.fwpl-result, image, title, review-badge, price, CTA)
 *    6.  MOBILE FLYOUTS (kaart- en filter-knoppen)
 *    7.  PAGINATION
 *    8.  RESPONSIVE
 *    9.  TAXONOMY/ARCHIVE HERO (Sprint 5 — city-and-intro-text + wijk-knoppen)
 *   10.  FAQ-SECTIE POLISH (Sprint 5 — .sl-faq-taxonomy tokens-unify)
 *
 * @package Sportlist
 */

/* ============================================================
   1. PAGE-LAYOUT TUNING
   Geeft de resultatenpagina meer ademruimte en fixeert de
   filter-sidebar zodat filteren op lange lijsten prettig blijft.
   ============================================================ */

.sportscholen-page {
    padding-block: var(--space-4) var(--space-10);
}

.sportscholen-layout {
    gap: var(--space-6);
}

.sportscholen-filters-desktop-filters {
    position: sticky;
    top: var(--space-6);
    align-self: flex-start;
    max-height: calc(100vh - var(--space-12));
    overflow-y: auto;
    padding: var(--space-5) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    scrollbar-width: thin;
    z-index: var(--z-raised);
}

.sportscholen-filters-desktop-filters::-webkit-scrollbar {
    width: 6px;
}

.sportscholen-filters-desktop-filters::-webkit-scrollbar-thumb {
    background: var(--color-border-default);
    border-radius: var(--radius-pill);
}

.sportscholen-filters-desktop-filters > h2 {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.sportscholen-filters-desktop-filters > h2::before {
    content: "tune";
    font-family: 'Material Icons';
    font-size: 18px;
    color: var(--color-brand);
}

/* ============================================================
   2. FILTER SIDEBAR — groepen, kop, inputs
   Elke .content-section is één filtergroep. Kop is een
   mini-caps-label, inputs krijgen tokens-based polish.
   ============================================================ */

.sportscholen-filters-desktop-filters .content-section {
    padding: var(--space-3) 0;
    border: 0;
    border-bottom: 1px solid var(--color-border-subtle);
    background: transparent;
    margin: 0;
    box-shadow: none;
}

.sportscholen-filters-desktop-filters .content-section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.sportscholen-filters-desktop-filters .flyout-row h3 {
    font-size: var(--fs-overline);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-2);
    line-height: var(--lh-heading);
}

.sportscholen-filters-desktop-filters .flyout-row h3 strong {
    font-weight: inherit;
}

/* FacetWP checkbox-rijen */
.sportscholen-filters-desktop-filters .facetwp-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    font-size: var(--fs-body-sm);
    color: var(--color-text);
    cursor: pointer;
    border-radius: var(--radius-xs);
    transition: color var(--duration-fast) var(--ease-out);
}

.sportscholen-filters-desktop-filters .facetwp-checkbox:hover {
    color: var(--color-brand);
}

.sportscholen-filters-desktop-filters .facetwp-checkbox.checked {
    color: var(--color-brand);
    font-weight: var(--fw-semibold);
}

.sportscholen-filters-desktop-filters .facetwp-counter {
    color: var(--color-text-faint);
    font-size: var(--fs-caption);
    font-weight: var(--fw-regular);
    margin-left: auto;
}

/* Zoek-input (naam sportschool) */
.sportscholen-filters-desktop-filters input.facetwp-search {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font-size: var(--fs-body-sm);
    color: var(--color-text);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.sportscholen-filters-desktop-filters input.facetwp-search:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: var(--shadow-focus);
}

/* Radio-groep (minimale reviewscore) */
.sportscholen-filters-desktop-filters .facetwp-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    margin: 0 var(--space-1) var(--space-1) 0;
    font-size: var(--fs-body-sm);
    color: var(--color-text-muted);
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: var(--transition-hover);
}

.sportscholen-filters-desktop-filters .facetwp-radio:hover {
    border-color: var(--color-brand);
    color: var(--color-brand);
}

.sportscholen-filters-desktop-filters .facetwp-radio.checked {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-brand-on);
    font-weight: var(--fw-semibold);
}

/* ============================================================
   3. ACTIVE FILTER CHIPS (.facetwp-selections) + RESET
   Wordt gerenderd door de [facetwp selections="true"] shortcode
   die we toevoegen in de PHP-templates. Chips tonen per-facet
   welke keuze actief is; klikken verwijdert die filter.
   ============================================================ */

.sl-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-brand-subtle);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
}

.sl-active-filters:empty,
.sl-active-filters:has(ul.facetwp-selections:empty) {
    display: none;
}

.sl-active-filters-label {
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    color: var(--color-brand);
    margin-right: var(--space-1);
}

ul.facetwp-selections {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 1 1 auto;
}

ul.facetwp-selections li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 4px var(--space-2) 4px var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-pill);
    font-size: var(--fs-body-sm);
    color: var(--color-text);
    cursor: pointer;
    transition: var(--transition-hover);
}

ul.facetwp-selections li:hover {
    border-color: var(--color-brand);
    color: var(--color-brand);
    box-shadow: var(--shadow-xs);
}

ul.facetwp-selections li .facetwp-selection-value {
    font-weight: var(--fw-medium);
}

ul.facetwp-selections li::after {
    content: "close";
    font-family: 'Material Icons';
    font-size: 14px;
    line-height: 1;
    color: var(--color-text-faint);
    margin-left: var(--space-1);
    transition: color var(--duration-fast) var(--ease-out);
}

ul.facetwp-selections li:hover::after {
    color: var(--color-brand);
}

.sl-reset-filters {
    margin-left: auto;
    padding: 4px var(--space-3);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--duration-fast) var(--ease-out);
}

.sl-reset-filters:hover {
    color: var(--color-brand);
}

.sl-reset-filters:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* ============================================================
   4. RESULTS HEADER (counts + sort)
   Nette uitlijning van "24 sportscholen gevonden" + sort-select.
   ============================================================ */

.mobile_flyout-and-sort-container {
    align-items: center;
    padding: var(--space-2) 0;
    margin-block: 0 var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
    border-bottom: 1px solid var(--color-border-subtle);
}

.result_counts,
.result_counts .facetwp-facet {
    font-size: var(--fs-body-sm);
    color: var(--color-text-muted);
    font-weight: var(--fw-medium);
}

.result_counts strong {
    color: var(--color-text);
    font-weight: var(--fw-semibold);
}

.sort-results-container {
    gap: var(--space-2);
}

.facetwp-facet-sort_results select,
.facetwp-facet-sort_results_abonnementen select {
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font-size: var(--fs-body-sm);
    color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out);
}

.facetwp-facet-sort_results select:hover,
.facetwp-facet-sort_results_abonnementen select:hover {
    border-color: var(--color-brand);
}

.facetwp-facet-sort_results select:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: var(--shadow-focus);
}

/* ============================================================
   5. RESULT CARD (.fwpl-result)
   High-end directory-kaart: witte surface, subtiele border,
   card-shadow, lift-on-hover. Image krijgt radius en object-fit;
   titel is heading-kleur, reviewbadge is accent-amber (matcht
   dashboard-notification), CTA is brand-blauw pill.
   ============================================================ */

.fwpl-result {
    position: relative;
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: var(--transition-hover);
    overflow: hidden;
    cursor: pointer;
}

.fwpl-result:hover {
    /* Vervangt de oude transform: scale(1.03) + brightness-hack. */
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
    border-color: var(--color-border-strong);
    filter: none;
}

.fwpl-result:focus-within {
    outline: none;
    box-shadow: var(--shadow-focus), var(--shadow-card);
    border-color: var(--color-brand);
}

/* Image */
.fwpl-item.el-qdnz3 img,
.bijhorende_sportschool_image,
.bijhorende_sportschool_image img,
.attachment-thumbnail.size-thumbnail.wp-post-image {
    width: 100%;
    max-width: 160px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    margin-right: var(--space-3);
    transition: transform var(--duration-slow) var(--ease-out);
}

.fwpl-result:hover .fwpl-item.el-qdnz3 img,
.fwpl-result:hover .bijhorende_sportschool_image img {
    transform: scale(1.02);
}

/* Titel */
.fwpl-item.post-title {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
    color: var(--color-heading);
    letter-spacing: var(--ls-tight);
    margin: 0 0 var(--space-1);
}

.fwpl-item.post-title a {
    color: inherit;
    text-decoration: none;
}

.fwpl-result:hover .fwpl-item.post-title {
    color: var(--color-brand-hover);
}

/* Kolommen rechts uitlijnen blijft, maar nette text-kleur. */
.fwpl-col.column-two {
    color: var(--color-text-muted);
    font-size: var(--fs-body-sm);
    line-height: var(--lh-snug);
}

/* Reviewbadge — amber pill ipv generieke green/absolute */
.fwpl-item.review-score,
.fwpl-col.custom-review-score .fwpl-item.score-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 32px;
    padding: 0 var(--space-2);
    background: var(--color-accent);
    color: var(--color-accent-on);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-bold);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
    letter-spacing: 0;
}

.fwpl-item.review-score::before {
    content: "star";
    font-family: 'Material Icons';
    font-size: 14px;
    margin-right: 2px;
    color: var(--color-accent-on);
}

.fwpl-item.number-reviews {
    font-size: var(--fs-caption);
    color: var(--color-text-muted);
    font-weight: var(--fw-medium);
    margin-top: var(--space-1);
}

/* Open-days + prijs — secundaire info */
.sportschool-open-days {
    color: var(--color-text-muted);
    font-weight: var(--fw-medium);
    font-size: var(--fs-body-sm);
}

.sportschool-price {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: var(--color-text);
    font-weight: var(--fw-bold);
    font-size: var(--fs-body);
}

.sportschool-price::before {
    content: "vanaf";
    color: var(--color-text-muted);
    font-weight: var(--fw-regular);
    font-size: var(--fs-caption);
    text-transform: lowercase;
}

/* CTA-knop */
.fwpl-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    background: var(--color-brand);
    color: var(--color-brand-on);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-xs);
    transition: var(--transition-hover);
    text-decoration: none;
    letter-spacing: 0;
    border: 0;
    cursor: pointer;
}

.fwpl-result:hover .fwpl-btn {
    background: var(--color-brand-hover);
    box-shadow: var(--shadow-sm);
}

.fwpl-btn::after {
    content: "arrow_forward";
    font-family: 'Material Icons';
    font-size: 16px;
    margin-left: 2px;
    transition: transform var(--duration-fast) var(--ease-out);
}

.fwpl-result:hover .fwpl-btn::after {
    transform: translateX(2px);
}

/* Vinkjes + kruisjes — subtieler, niet neon-groen/rood */
.vinkje,
.check-icon {
    color: var(--status-success);
}

.kruisje {
    color: var(--color-text-faint);
}

/* Pro-badge — lint wordt geïnjecteerd door facetwp_template_html filter
   in functions.php (klasse .is-pro op de card, pseudo-element toont "Pro"). */
.fwpl-result.is-pro::before {
    content: "Pro";
    position: absolute;
    top: var(--space-3);
    left: 0;
    padding: 2px var(--space-3) 2px var(--space-2);
    background: var(--color-accent);
    color: var(--color-accent-on);
    font-size: var(--fs-overline);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    box-shadow: var(--shadow-xs);
    z-index: var(--z-raised);
    pointer-events: none;
}

/* Subtiele accent-outline op Pro-kaarten */
.fwpl-result.is-pro {
    border-color: var(--accent-200);
    box-shadow: var(--shadow-sm);
}

.fwpl-result.is-pro:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-card);
}

/* ============================================================
   6. MOBILE FLYOUTS (kaart- en filter-knoppen)
   Pill-vormige knoppen met brand-kleur op de archiefpagina.
   ============================================================ */

.facetwp-flyout-open,
.facetwp-flyout2-open {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    width: auto;
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface);
    color: var(--color-brand);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-pill);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: var(--transition-hover);
}

.facetwp-flyout-open:hover,
.facetwp-flyout2-open:hover {
    background: var(--color-brand);
    color: var(--color-brand-on);
    border-color: var(--color-brand);
    box-shadow: var(--shadow-sm);
}

.facetwp-flyout-open .material-icons,
.facetwp-flyout2-open .material-icons {
    font-size: 18px;
}

/* ============================================================
   7. PAGINATION
   .facetwp-pager basis-polish — tokens-based typografie.
   ============================================================ */

.sportscholen-pagination {
    margin-top: var(--space-8);
    display: flex;
    justify-content: center;
}

.sportscholen-pagination .facetwp-pager {
    display: inline-flex;
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--color-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-xs);
}

.sportscholen-pagination .facetwp-pager .facetwp-page {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-2);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: var(--transition-hover);
}

.sportscholen-pagination .facetwp-pager .facetwp-page:hover {
    background: var(--color-brand-subtle);
    color: var(--color-brand);
}

.sportscholen-pagination .facetwp-pager .facetwp-page.facetwp-current-page {
    background: var(--color-brand);
    color: var(--color-brand-on);
}

.sportscholen-pagination .facetwp-pager .facetwp-page.facetwp-disabled {
    color: var(--color-text-faint);
    cursor: not-allowed;
    opacity: 0.5;
}

/* ============================================================
   8. RESPONSIVE
   ============================================================ */

@media (max-width: 1400px) {
    .sportscholen-filters-desktop-filters {
        position: static;
        max-height: none;
    }
}

@media (max-width: 900px) {
    .fwpl-result {
        padding: var(--space-3);
        border-radius: var(--radius-md);
    }

    .fwpl-item.el-qdnz3 img,
    .bijhorende_sportschool_image img {
        max-width: 120px;
        aspect-ratio: 1 / 1;
    }

    .fwpl-item.post-title {
        font-size: var(--fs-body);
    }

    .sl-active-filters {
        padding: var(--space-2) var(--space-3);
    }

    .sl-reset-filters {
        margin-left: 0;
        width: 100%;
        text-align: left;
        padding: 4px 0;
    }
}

@media (max-width: 600px) {
    .fwpl-item.el-qdnz3 img,
    .bijhorende_sportschool_image img {
        max-width: 90px;
    }

    .fwpl-btn {
        padding: var(--space-1) var(--space-3);
        font-size: var(--fs-caption);
    }
}

/* ============================================================
   9. TAXONOMY/ARCHIVE HERO (Sprint 5)
   Gradient-hero met breadcrumbs, h1/h2 en intro-paragraph.
   Wijk-knoppen omgevormd van generieke .button naar pill-chips.
   ============================================================ */

.sportscholen-page > .city-and-intro-text {
    position: relative;
    padding: var(--space-8) var(--space-5) var(--space-6);
    margin-bottom: var(--space-6);
    background: linear-gradient(
        135deg,
        var(--color-brand-subtle) 0%,
        var(--color-surface-sunken) 100%
    );
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.sportscholen-page > .city-and-intro-text::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 420px;
    height: 420px;
    background: radial-gradient(
        circle,
        rgba(245, 166, 35, 0.08) 0%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 0;
}

.sportscholen-page > .city-and-intro-text > * {
    position: relative;
    z-index: var(--z-base);
}

.sportscholen-page > .city-and-intro-text h1 {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
    color: var(--color-heading);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-tight);
    margin: 0 0 var(--space-2);
}

.sportscholen-page > .city-and-intro-text h2 {
    font-size: var(--fs-body-lg);
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
    line-height: var(--lh-snug);
}

.sportscholen-page > .city-and-intro-text p {
    max-width: 720px;
    font-size: var(--fs-body);
    color: var(--color-text);
    line-height: var(--lh-body);
    margin: 0;
}

.sportscholen-page .breadcrumbs-class {
    margin-bottom: var(--space-3);
    font-size: var(--fs-caption);
    color: var(--color-text-muted);
}

.sportscholen-page .breadcrumbs-class a {
    color: var(--color-brand);
    text-decoration: none;
}

.sportscholen-page .breadcrumbs-class a:hover {
    text-decoration: underline;
}

/* Wijk-knoppen — pill-chips in plaats van generieke button. */
.wijk-buttons-container {
    margin: var(--space-5) 0 var(--space-6);
}

.wijk-buttons-container h3 {
    font-size: var(--fs-overline);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-2);
}

.wijk-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
}

.wijk-buttons .button {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-pill);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    box-shadow: var(--shadow-xs);
    transition: var(--transition-hover);
    white-space: nowrap;
}

.wijk-buttons .button:hover {
    background: var(--color-brand);
    color: var(--color-brand-on);
    border-color: var(--color-brand);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.wijk-buttons .button:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus), var(--shadow-xs);
}

/* ============================================================
   10. FAQ-SECTIE POLISH (Sprint 5)
   Tokens-unify op de bestaande .sl-faq-taxonomy markup. Laat
   de JS-interactie intact, vernieuwt alleen de visuele laag.
   ============================================================ */

.sl-faq-taxonomy {
    padding: var(--space-10) var(--space-5);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border-subtle);
}

.sl-faq-taxonomy__inner {
    max-width: 860px;
    margin: 0 auto;
}

.sl-faq-taxonomy__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    color: var(--color-heading);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-heading);
    margin: 0 0 var(--space-6);
}

.sl-faq-taxonomy__icon {
    color: var(--color-brand);
    font-size: 26px !important;
}

.sl-faq-taxonomy__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
}

.sl-faq-taxonomy__item {
    border-bottom: 1px solid var(--color-border-subtle);
}

.sl-faq-taxonomy__item:last-child {
    border-bottom: none;
}

.sl-faq-taxonomy__question {
    width: 100%;
    background: none;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    text-align: left;
    line-height: var(--lh-snug);
    transition: background-color var(--duration-fast) var(--ease-out);
}

.sl-faq-taxonomy__question:hover,
.sl-faq-taxonomy__question[aria-expanded="true"] {
    background: var(--color-surface-sunken);
}

.sl-faq-taxonomy__question:focus-visible {
    outline: none;
    background: var(--color-brand-subtle);
    box-shadow: inset 3px 0 0 var(--color-brand);
}

.sl-faq-taxonomy__chevron {
    flex-shrink: 0;
    color: var(--color-brand);
    transition: transform var(--duration-fast) var(--ease-out);
}

.sl-faq-taxonomy__question[aria-expanded="true"] .sl-faq-taxonomy__chevron {
    transform: rotate(180deg);
}

.sl-faq-taxonomy__answer {
    padding: 0 var(--space-5) var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--fs-body-sm);
    line-height: var(--lh-body);
}

.sl-faq-taxonomy__answer p {
    margin: 0;
}

@media (max-width: 900px) {
    .sportscholen-page > .city-and-intro-text {
        padding: var(--space-5) var(--space-4);
    }

    .sl-faq-taxonomy {
        padding: var(--space-6) var(--space-4);
    }

    .sl-faq-taxonomy__question {
        padding: var(--space-3) var(--space-4);
        font-size: var(--fs-body-sm);
    }
}