/*
 * De basis is bewust gescoped. Daardoor verandert het activeren van de plugin
 * geen bestaande WordPress- of plugininterface buiten Wheel Warriors-blokken.
 *
 * Geef de buitenste wrapper van een View de klasse `ww-scope`. Losse
 * componenten buiten zo'n wrapper krijgen `ww-c-component`.
 */

.ww-scope,
.ww-c-component {
    font-family: var(--ww-font-family);
    color: var(--ww-color-navy);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ww-scope *,
.ww-scope *::before,
.ww-scope *::after,
.ww-c-component,
.ww-c-component::before,
.ww-c-component::after {
    box-sizing: border-box;
}

/* Thema-neutralisatie: binnen een View bepalen wij lettertype en kleur. */
.ww-scope h1,
.ww-scope h2,
.ww-scope h3,
.ww-scope h4,
.ww-scope h5,
.ww-scope h6,
.ww-scope p,
.ww-scope a,
.ww-scope li,
.ww-scope span,
.ww-scope button,
.ww-scope input,
.ww-scope select,
.ww-scope textarea {
    font-family: var(--ww-font-family);
}

.ww-scope a {
    text-decoration: none;
}

/* Thema-koppen neutraliseren (Elementor-kit zet h1–h6 wit, uppercase, 900 en in em-maten):
   binnen een View zijn koppen standaard navy, niet-uppercase en in de core-schaal;
   de ww-c-*-klassen (typography.css) verfijnen dat daarna. */
.ww-scope :where(h1, h2, h3, h4, h5, h6) {
    color: var(--ww-color-navy) !important;
    -webkit-text-fill-color: var(--ww-color-navy) !important;
    font-family: var(--ww-font-family) !important;
    font-size: var(--ww-text-h3) !important;
    font-weight: var(--ww-font-weight-extrabold) !important;
    line-height: var(--ww-line-snug) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    margin: 0 !important;
}

.ww-scope :where(h1) { font-size: var(--ww-text-2xl) !important; }
.ww-scope :where(h2) { font-size: var(--ww-text-xl) !important; }
.ww-scope :where(h4, h5, h6) { font-size: var(--ww-text-lg) !important; }

/* Thema's zetten vaak clear: both op koppen; dat breekt tekst naast een
   gefloat icoon (icoon rechtsboven in een kaart). */
.ww-scope h1,
.ww-scope h2,
.ww-scope h3,
.ww-scope h4,
.ww-scope h5,
.ww-scope h6,
.ww-scope p,
.ww-scope ul,
.ww-scope ol,
.ww-c-title,
.ww-c-heading,
.ww-c-kicker,
.ww-c-label,
.ww-c-copy,
.ww-c-accent-line {
    clear: none !important;
}

.ww-scope img,
.ww-scope svg,
.ww-scope video {
    max-width: 100%;
}

.ww-scope img {
    height: auto;
}

.ww-scope button {
    cursor: pointer;
}

/* Thema-knopstijlen (grote pills, min-width, uppercase) neutraliseren binnen een View;
   de ww-c-*-klassen bepalen daarna de vorm. */
.ww-scope button:not(.ww-c-button):not(.ww-c-chip):not(.ww-c-tab),
.ww-scope [type="button"]:not(.ww-c-button):not(.ww-c-chip):not(.ww-c-tab),
.ww-scope [type="submit"]:not(.ww-c-button) {
    min-width: 0;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
}

/* Het hidden-attribuut wint altijd van display-regels van componenten. */
.ww-scope [hidden],
.ww-c-component[hidden] {
    display: none !important;
}

/*
 * Font Awesome duotone. De waarden staan op de wrapper en erven omlaag; een
 * View kan ze op elk niveau overschrijven met eigen --fa-*-waarden.
 * Standaard: blauw met een oranje tweede laag.
 */
.ww-scope,
.ww-c-component {
    --fa-primary-color: var(--ww-fa-primary);
    --fa-secondary-color: var(--ww-fa-secondary);
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: var(--ww-fa-secondary-opacity);
}

/* Iconen op een donkere ondergrond: wit met oranje tweede laag. */
.ww-c-on-dark {
    --fa-primary-color: #fff;
    --fa-secondary-color: var(--ww-color-orange);
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 1;
}

/* Iconen volledig wit (op oranje knoppen of als watermerk). */
.ww-c-icon--white {
    color: #fff;
    --fa-primary-color: #fff;
    --fa-secondary-color: #fff;
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 1;
}

/* Iconen in de tekstkleur (actielinks, pijlen). */
.ww-c-icon--current {
    --fa-primary-color: currentColor;
    --fa-secondary-color: currentColor;
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 0.9;
}

/* Iconen in één accentkleur (zet --ww-icon-color op het element). */
.ww-c-icon--mono {
    color: var(--ww-icon-color, var(--ww-color-blue));
    --fa-primary-color: var(--ww-icon-color, var(--ww-color-blue));
    --fa-secondary-color: var(--ww-icon-color, var(--ww-color-blue));
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 0.45;
}

/* Gedempte iconen (scheidingstekens, decoratie). */
.ww-c-icon--muted {
    --fa-primary-color: var(--ww-color-icon-muted);
    --fa-secondary-color: var(--ww-color-icon-muted);
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 0.4;
}

/*
 * Thema (Astra): op detailpagina's (body.single) waarop een schermbrede WW-View staat,
 * de content-wrappers van het thema op volle breedte zonder padding zetten. Anders
 * verschilt de afstand boven het kruimelpad per post_type. Eén keer hier i.p.v. per View.
 */
body.single:has(.ww-scope.ww-c-full-bleed) #content .ast-container,
body.single:has(.ww-scope.ww-c-full-bleed) #primary,
body.single:has(.ww-scope.ww-c-full-bleed) #main,
body.single article:has(.ww-scope.ww-c-full-bleed),
body.single:has(.ww-scope.ww-c-full-bleed) .entry-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Thema-titel/meta boven een schermbrede View niet tonen (de View heeft zijn eigen hero). */
body.single:has(.ww-scope.ww-c-full-bleed) .entry-header,
body.single:has(.ww-scope.ww-c-full-bleed) .entry-meta {
    display: none !important;
}

.ww-c-container {
    width: 100%;
    max-width: var(--ww-content-width);
    margin-inline: auto;
    padding-inline: var(--ww-page-gutter);
}

.ww-c-container--wide {
    max-width: var(--ww-content-width-wide);
}

.ww-c-container--narrow {
    max-width: var(--ww-content-width-narrow);
}

/* Eén focusstijl voor alles wat klikbaar is binnen een View. */
.ww-scope a:focus-visible,
.ww-scope button:focus-visible,
.ww-scope [tabindex]:focus-visible,
.ww-c-component:focus-visible {
    outline: var(--ww-focus-outline);
    outline-offset: var(--ww-focus-outline-offset);
}

.ww-c-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    .ww-scope *,
    .ww-scope *::before,
    .ww-scope *::after,
    .ww-c-component,
    .ww-c-component::before,
    .ww-c-component::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}