/*!
 * =============================================================================
 * GPS HEADER
 * =============================================================================
 * PURPOSE      : Unified Design System-laag voor de hele Sportlist-website.
 *                Bevat universele hotfixes (horizontal scroll, visibility-
 *                guards), één canonieke Card-DNA (.sl-card), één gestylede
 *                numbered list (.sl-list--numbered), genormaliseerde
 *                typografie-gewichten (max --fw-semibold op headings) en
 *                gedeelde grid-utilities (.sl-grid--4col, .sl-chip-list).
 *
 *                Wordt GLOBAAL geladen, ALS LAATSTE CSS-bestand. Deze laag
 *                heeft als enige doel om visuele eilandjes (sportschool-,
 *                abonnement-, advies-, dashboard-pagina's) onder één
 *                "Sportlist Design DNA" te brengen — geen pagina-specifieke
 *                logica.
 *
 * PATH         : wp-content/themes/sportlist/css/sl-design-system.css
 *
 * DEPENDENCIES : css/tokens.css (alle var(--*)-waarden), style.css (basis,
 *                wordt selectief overridden). Geladen als laatste sheet,
 *                zodat tokens-based system-rules van page-bestanden zoals
 *                filters-and-cards.css / single-sportschool.css / homepage.css
 *                NIET worden overschreven (system = vangnet, geen reset).
 *
 * =============================================================================
 * CSS-VARIABELEN (uitsluitend tokens uit tokens.css)
 * =============================================================================
 *   Kleur:    --color-brand, --color-brand-hover, --color-brand-on,
 *             --color-brand-subtle, --color-accent, --color-text,
 *             --color-text-muted, --color-heading, --color-surface,
 *             --color-surface-sunken, --color-border-default,
 *             --color-border-subtle, --color-border-strong, --color-focus-ring
 *   Space:    --space-1..--space-10
 *   Radius:   --radius-md, --radius-lg, --radius-pill
 *   Shadow:   --shadow-xs, --shadow-sm, --shadow-card, --shadow-focus
 *   Type:     --fw-medium, --fw-semibold, --fw-bold, --fs-body-sm, --fs-body,
 *             --fs-h2, --fs-h3, --lh-snug, --lh-heading
 *   Motion:   --transition-hover, --duration-fast, --ease-out
 *
 * =============================================================================
 * SECTIONOVERZICHT
 * =============================================================================
 *    1.  GLOBALE HOTFIXES (no-horizontal-scroll, visibility-guards)
 *    2.  TYPOGRAFIE-NORMALISATIE (heading weights → semibold)
 *    3.  UNIVERSELE NUMBERED LIST (.sl-list--numbered)
 *    4.  CARD-DNA (.sl-card + bestaande kaart-classes harmoniseren)
 *    5.  CHIP-LIST + COMPACT WIJKEN-GRID (.sl-chip-list, .sl-grid--4col)
 *    6.  CHECKBOX/LABEL SPACING-FIXES
 *    7.  ICON-VISIBILITY GUARD
 *    8.  RESPONSIVE
 *
 * @package Sportlist
 */

/* ============================================================
   1. GLOBALE HOTFIXES
   Voorkomt horizontale scroll op pagina's met embed-kaart of
   wide content. min(100%, 100vw) is veiliger dan max-width:100vw
   omdat het de scrollbar-breedte respecteert.
   ============================================================ */

html,
body {
    overflow-x: clip;
    max-width: 100%;
}

#facetwp-map,
.fwpl-result,
.fwpl-result * {
    max-width: 100%;
}

/* Visibility-guard: voorkomt dat resultaten ooit collapseren
   doordat een aspect-ratio of grid-overschrijving misgaat. */
.fwpl-result {
    min-height: 1px;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================================
   2. TYPOGRAFIE-NORMALISATIE
   Verlicht het algemene "bold-vermoeidheid"-gevoel van de site:
   alle h1-h4 en sterke body-elementen krijgen --fw-semibold.
   --fw-bold blijft beschikbaar voor opzettelijke uitschieters
   (review-score badges, hero displays).
   ============================================================ */

h1, h2, h3, h4,
.uagb-heading-text,
.page-title {
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-heading);
}

/* Openingstijden — vroeger bold, nu medium voor rustiger beeld. */
.opening-hours-table,
.opening-hours-table td,
.opening-hours-table th,
.sportschool-open-days {
    font-weight: var(--fw-medium);
}

/* Nav-links: medium ipv bold. */
header nav a,
.menu-item a {
    font-weight: var(--fw-medium);
}

/* ============================================================
   3. UNIVERSELE NUMBERED LIST
   Gebruik <ol class="sl-list sl-list--numbered"> overal waar
   een genummerde lijst voorkomt: artikelen, wizard-stappen,
   FAQ, abonnement-features. Vervangt eerdere ad-hoc styling
   in advies.css, dashboard.css en page-templates.
   ============================================================ */

.sl-list {
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
    color: var(--color-text);
    line-height: var(--lh-body);
}

.sl-list--numbered {
    counter-reset: sl-numbered;
}

.sl-list--numbered > li {
    position: relative;
    padding: var(--space-2) 0 var(--space-2) calc(var(--space-8) + var(--space-1));
    margin: 0;
    counter-increment: sl-numbered;
    border-bottom: 1px solid var(--color-border-subtle);
}

.sl-list--numbered > li:last-child {
    border-bottom: 0;
}

.sl-list--numbered > li::before {
    content: counter(sl-numbered);
    position: absolute;
    top: var(--space-2);
    left: 0;
    width: var(--space-7);
    height: var(--space-7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-brand-subtle);
    color: var(--color-brand);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-bold);
    border-radius: var(--radius-pill);
    line-height: 1;
    flex-shrink: 0;
}

.sl-list--numbered > li > strong:first-child,
.sl-list--numbered > li > b:first-child {
    display: block;
    color: var(--color-heading);
    font-weight: var(--fw-semibold);
    margin-bottom: 2px;
}

/* ============================================================
   4. CARD-DNA
   Eén canonieke kaart-stijl. Vervangt drie verschillende
   shadow/border/radius-combinaties in style.css en advies.css.
   Wordt OOK toegepast op bestaande pagina-classes via een
   alias-block, zodat er geen markup-changes nodig zijn.
   ============================================================ */

.sl-card,
body.home .city-item,
body.home .fitnessketen-item,
body.home .advies-item,
body.home .affiliate-item,
body.home .product-gerelateerd-item,
.fwpl-result,
.thema-item,
.advies-post,
.advies-post-gerelateerd {
    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;
}

.sl-card:hover,
body.home .city-item:hover,
body.home .fitnessketen-item:hover,
body.home .advies-item:hover,
body.home .affiliate-item:hover,
body.home .product-gerelateerd-item:hover,
.thema-item:hover,
.advies-post:hover,
.advies-post-gerelateerd:hover {
    box-shadow: var(--shadow-card);
    border-color: var(--color-border-strong);
    transform: translateY(-2px);
}

/* Card title — universeel medium-weight voor rustig beeld. */
.sl-card__title,
.thema-item h2.thema-title,
.advies-post .titel,
.advies-post-gerelateerd .advies-header-gerelateerd-titel {
    font-weight: var(--fw-semibold);
    color: var(--color-heading);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-tight);
}

/* ============================================================
   5. CHIP-LIST + COMPACT WIJKEN-GRID
   Wijken-overzicht op stad-pagina: van enorme lijst naar
   compacte 4-koloms grid (chips). Op mobile: scrollable
   horizontaal (chip-list pattern). Werkt zowel met de
   bestaande .wijk-buttons markup als nieuwe .sl-chip-list.
   ============================================================ */

.sl-chip-list,
.wijk-buttons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
    margin: var(--space-3) 0 var(--space-5);
    padding: 0;
    list-style: none;
    overflow: visible;
}

.sl-chip,
.sl-chip-list a,
.wijk-buttons .button {
    display: inline-flex;
    align-items: center;
    justify-content: 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;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sl-chip:hover,
.sl-chip-list a:hover,
.wijk-buttons .button:hover {
    background: var(--color-brand);
    color: var(--color-brand-on);
    border-color: var(--color-brand);
}

.sl-grid--4col {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

/* ============================================================
   6. CHECKBOX/LABEL SPACING-FIXES
   Voorkomt overlap van checkbox-glyphs en hun label-tekst in
   FacetWP- en native-formulieren. Gebruikt flex-gap ipv float
   of negatieve margins.
   ============================================================ */

.facetwp-checkbox,
.facetwp-radio,
label.checkbox-label,
.dashboard-form-row label > input[type="checkbox"] + span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    line-height: var(--lh-snug);
}

.facetwp-checkbox::before,
.facetwp-checkbox > input,
.facetwp-radio::before {
    flex-shrink: 0;
}

/* Voorkomt ::before checkbox-glyph van FacetWP overlapt label. */
.facetwp-checkbox {
    padding-left: 0;
    background-position: 0 50%;
    background-repeat: no-repeat;
}

/* ============================================================
   7. ICON-TYPOGRAFIE
   Alleen font-feature-instellingen voor ligatuur-rendering.
   GEEN font-size:0 hide-guard meer — die veroorzaakte "icoontjes
   verdwenen" wanneer LiteSpeed een oude custom-script.js
   serveerde en de .fonts-loaded class nooit werd gezet. Een
   flits van platte-tekst ligatuur is acceptabeler dan
   permanent onzichtbare iconen.
   ============================================================ */

.material-icons,
.material-symbols-outlined {
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    font-display: block;
    text-rendering: optimizeLegibility;
    direction: ltr;
    white-space: nowrap;
    word-wrap: normal;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1;
}

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

@media (max-width: 1100px) {
    .sl-chip-list,
    .wijk-buttons,
    .sl-grid--4col {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .sl-chip-list,
    .wijk-buttons {
        grid-template-columns: none;
        display: flex;
        overflow-x: auto;
        padding-bottom: var(--space-2);
        scrollbar-width: none;
    }

    .sl-chip-list::-webkit-scrollbar,
    .wijk-buttons::-webkit-scrollbar {
        display: none;
    }

    .sl-chip,
    .sl-chip-list a,
    .wijk-buttons .button {
        flex: 0 0 auto;
    }

    .sl-grid--4col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 500px) {
    .sl-grid--4col {
        grid-template-columns: 1fr;
    }
}