/*
Theme Name: K.F. Wommels — Total child
Template: Total
Version: 2.1.0
Description: Aanvullende opmaak voor K.F. Wommels; basisopmaak via Total en WPBakery.
*/

/* =====================================================================
   K.F. WOMMELS — AANVULLENDE CSS
   Beheer: Weergave > Thema bestand editor > K.F. Wommels — Total child

   Gebruik voor kleuren, typografie en afstanden eerst Total / WPBakery.
   Lettertypen: Total > Custom Fonts (Inter en Archivo, lokaal gehost).
   Hier staan de handgeschreven aanvullingen van het child theme.
   CSS die Total/WPBakery uit instellingen genereert blijft in die systemen.

   INHOUD
   01. Toetsenbordfocus — zichtbare rand rond het actieve element
   02. Lange teksten — voorkom dat links buiten de inhoud vallen
   03. Tabellen — horizontaal scrollen en oude vaste hoogten opheffen
   04. Stagingmelding — herkenbare opmaak voor testmeldingen
   05. Total-fotoslider — afstand boven de aparte pauzeknop
   06. Minder beweging — respecteer de voorkeur van de bezoeker
   07. Total nieuwskaart — subtiele hoverdetails
   ===================================================================== */

/* 01. TOETSENBORDFOCUS
   Helpt bezoekers die met Tab door links, knoppen en velden navigeren. */
:focus-visible {
    outline: 3px solid #176dba;
    outline-offset: 4px;
}

/* 02. LANGE TEKSTEN
   Breekt lange woorden en URL's binnen pagina- en berichtinhoud af. */
.single-content {
    overflow-wrap: anywhere;
}

/* 03. TABELLEN
   Brede tabellen kunnen op smalle schermen horizontaal scrollen.
   Bestaande clubtabellen bevatten vaste inline-hoogten. !important is
   hier nodig om die te overrulen, zodat alle tekst zichtbaar blijft. */
.single-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.single-content table,
.single-content table tr,
.single-content table td,
.single-content table th {
    height: auto !important;
}

/* 04. STAGINGMELDING
   Alleen voor elementen met deze klasse; schakelt zelf geen testmodus in. */
.kfw-staging-note {
    padding: 24px;
    border: 1px solid #dccb95;
    background: #fff5de;
    border-radius: 8px;
}

/* 05. TOTAL-FOTOSLIDER
   Ruimte boven de pauzeknop. De bediening staat in assets/accessibility.js. */
.kfw-slider-pause {
    margin-top: 10px;
}

/* 06. MINDER BEWEGING
   Schakelt vloeiend scrollen uit als het besturingssysteem dit vraagt. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }
}

/* 07. TOTAL NIEUWSKAART
   Het ontwerp zelf is bewerkbaar in Total > Custom Cards > nieuwskaart.
   Kleuren, lettertypen, afstanden, afbeelding en tekst komen uit native
   Total-elementen. Alleen aanvullende hoverdetails staan hier.
   Dezelfde klasse werkt op de homepage, nieuwsindex en bij hergebruik. */
.kfw-total-news-card .kfw-total-news-card-shell {
    transition: box-shadow .2s;
}
.kfw-total-news-card:hover .kfw-total-news-card-shell {
    box-shadow: 0 12px 25px #17150f12;
}
.kfw-total-news-card .kfw-total-news-card-image {
    overflow: hidden;
}
.kfw-total-news-card .kfw-total-news-card-image img {
    transition: transform .3s;
}
.kfw-total-news-card:hover .kfw-total-news-card-image img {
    transform: scale(1.025);
}
/* De overzichtslink blijft rechts naast de kop op brede schermen. */
@media (min-width: 768px) {
    .kfw-native-news-heading .kfw-native-news-all { float: right; }
}
@media (max-width: 767px) {
    .kfw-native-news-heading .kfw-native-news-all { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .kfw-total-news-card .kfw-total-news-card-shell,
    .kfw-total-news-card .kfw-total-news-card-image img { transition: none; }
    .kfw-total-news-card:hover .kfw-total-news-card-image img { transform: none; }
}


/* 08. HERO — VOLLEDIG GROENE ACHTERGROND
   Clubgroen uit Total Color Palette; op desktop én mobiel.
   De donkere tekstkaart en fotoslider behouden hun eigen achtergrond. */
.kfw-club-component section.kfw-hero {
    background: var(--wpex-palette-8880-color, #2e761f);
}

/* 09. FOTOSLIDER — BETROUWBARE HOOGTE OP MOBIEL EN TABLET
   De dia's staan absoluut gepositioneerd en bepalen zelf geen hoogte.
   Een onzichtbaar verhoudingsvlak houdt ruimte vrij, ook wanneer een
   mobiele browser aspect-ratio op het grid-item niet goed berekent.
   Tablet: 4:3. Telefoon: vierkant, zoals het bestaande ontwerp. */
@media (max-width: 1023px) {
    .kfw-club-component .kfw-hero .kfw-slider {
        width: 100%;
        min-width: 0;
        min-height: 0;
        aspect-ratio: auto;
    }
    .kfw-club-component .kfw-hero .kfw-slider::before {
        content: "";
        display: block;
        padding-top: 75%;
        pointer-events: none;
    }
}
@media (max-width: 767px) {
    .kfw-club-component .kfw-hero .kfw-slider::before {
        padding-top: 100%;
    }
}

/* 10. FOTOSLIDER — ZACHTE OVERGANG ZONDER ZWARTE FLITS
   De nieuwe, reeds geladen foto vervaagt boven de volledig zichtbare oude.
   JavaScript verbergt de oude dia pas na afloop van de overgang. */
.kfw-club-component .kfw-slider[data-kfw-initialised] .kfw-slide {
    opacity: 0;
    z-index: 0;
    transition: opacity .6s ease-in-out;
}
.kfw-club-component .kfw-slider[data-kfw-initialised] .kfw-slide.is-active {
    opacity: 1;
    z-index: 1;
}
.kfw-club-component .kfw-slider[data-kfw-initialised] .kfw-slide.is-incoming {
    z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
    .kfw-club-component .kfw-slider[data-kfw-initialised] .kfw-slide {
        transition: none;
    }
}