/**
 * Websiteplan Theme - Frontend Styles
 *
 * Generieke, merk-onafhankelijke base-reset. Geldt voor elke Websiteplan-installatie
 * en elke klant. Merk-specifieke stijlen (brand-tokens, .btn, .eyebrow, etc.) horen
 * NIET hier maar in het Global Custom CSS-veld (wpt_global_custom_css) of de
 * klant-specifieke mu-plugin / site-tokens.css.
 *
 * @package WebsiteplanTheme
 * @since 1.0.0
 */

/* -----------------------------------------------------------------------
   Base Reset — universeel, merk-onafhankelijk
   Zorgt dat <a>-tags geen browser-standaard underline/kleur krijgen,
   box-sizing consistent is en beelden responsief zijn.
   Opgelost: nav-links + knoppen onderstreept op nieuwe pillar-pagina's
   (delta 57 — verplaatst van wpt_global_custom_css naar thema-laag).
   ----------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* Resets browser-standaard margin/padding + font-smoothing.
   Lettertypes en kleuren worden per klant-installatie ingesteld
   via de site-tokens mu-plugin en het Global Custom CSS-veld. */
body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Kritieke link-reset: voorkomt browser-standaard blauw + underline op alle <a>-tags.
   Klant-/thema-specifieke kleuren overschrijven dit via hogere-specificity selectors. */
a {
    color: inherit;
    text-decoration: none;
}

/* Knop-reset: zet cursor en font-family consistent zonder visuele aanpassingen. */
button {
    font-family: inherit;
    cursor: pointer;
}

/* Toegankelijkheid: visible focus voor toetsenbord-navigatie (WCAG AA). */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 3px;
}

/* -----------------------------------------------------------------------
   Content-tabel veeg-hint — fail-safe zichtbaarheidsregel (v1.8.0.61, actie
   A2 Plan 3 rvsplaat, backward-compat-fix na code-review 07-07-2026).

   Waarom hier en niet (alleen) in de per-installatie Globale CSS: Globale
   CSS (wpt_global_custom_css) is LEEG op elke nieuwe/andere installatie
   totdat een klant hem zelf vult. Zonder deze regel hier krijgt
   .wpt-content-table__hint de browser-default display:block zodra de
   table-feature wordt aangezet — dus altijd zichtbaar, ook op desktop en
   op een niet-scrollbare tabel. Dit bestand wordt ALTIJD geënqueued
   (Enqueue_Manager::enqueue_frontend(), geen toggle-check), dus de
   hidden-by-default garantie geldt voor elke installatie, ongeacht of er
   al Globale CSS is ingevuld.

   Scope-verdeling (bewust): dit bestand bevat UITSLUITEND de
   zichtbaarheids-/layout-logica (hidden-by-default + mobiel-tonen bij
   .is-scrollable). De puur-visuele skin (achtergrond, rand, radius,
   --wpt-*-tokens, icoon-animatie) hoort in de Globale CSS per installatie
   (laadt ná dit bestand, wp_head prioriteit 20) — niet hier, anders is de
   look voor elke klant identiek i.p.v. per-site stijlbaar. */
.wpt-content-table__hint {
    display: none;
}

@media (max-width: 767px) {
    .wpt-content-table.is-scrollable .wpt-content-table__hint {
        display: flex;
        align-items: center;
        gap: 8px;
    }
}

/* Fallback content (when no template assigned) */
.wpt-content {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* 404 page */
.wpt-404 {
    text-align: center;
    padding: 60px 20px;
}

.wpt-404 h1 {
    font-size: 2em;
    margin-bottom: 0.5em;
}

.wpt-404 a {
    color: #2271b1;
}

/* Kaart zonder afbeelding in de zelf-vullende modus ([wpt_cards source="children"],
   v1.8.0.84). Fail-safe op thema-niveau, net als de veeg-hint-regel hierboven: de
   Globale CSS is leeg op elke installatie die hem nog niet heeft ingevuld, en zonder
   deze regel valt er een kaal gat in de kaart wanneer een redacteur de uitgelichte
   afbeelding vergeet. Merk-agnostisch: uitsluitend --wpt-*-tokens met fallback, geen
   merkkleur.

   AFMETING (code-review-bevinding 5): de placeholder krijgt hier zelf een min-height,
   want in de spec- en tegel-layout is hij een LEEG element (.vcard-img / .gcard-img
   zonder inhoud). Zonder eigen afmeting klapt dat tot 0px dicht op elke installatie
   waarvan de Globale CSS die container geen vaste hoogte of aspect-ratio geeft, en dan
   voorkomt deze regel het gat juist niet.

   AFHANKELIJKHEID, eerlijk benoemd: geeft de Globale CSS van een installatie die
   container wél een eigen height/aspect-ratio, dan wint die (laadt later, gelijke
   specificiteit) en is de min-height hieronder alleen nog een ondergrens. Dat is de
   bedoeling — per installatie bijstellen mag. */
.wpt-card-img--empty {
    display: block;
    min-height: 140px;
    background-color: var(--wpt-surface-2-token, #F4F4F5);
    border-radius: inherit;
}

/* Standalone placeholder: de artikel-layout (.seg-card) heeft geen eigen
   beeld-container, dus daar rendert een eigen <span> die zelf ruimte moet innemen. */
span.wpt-card-img--empty {
    width: 100%;
    aspect-ratio: 4 / 3;
}