/**
 * PONCK - Accessibility fixes voor Dit is Gouda
 *
 * Alleen toegankelijkheidsgerelateerde CSS.
 * Iedere aanpassing koppelen we aan het betreffende Cardan-auditpunt.
 */


/* ==========================================================
   CARDAN ACCESSIBILITY FIXES
   ========================================================== */
/**
 * ==========================================================
 * WCAG criterium: 1.4.11 - Contrast van niet-tekstuele content
 * Cardan kenmerk: GGG-8.F41
 * ==========================================================
 *
 * Probleem:
 * De navigatiepijlen in de afbeelding-lightbox hebben niet altijd
 * voldoende contrast wanneer zij boven lichte delen van een foto staan.
 *
 * Oplossing:
 * Verberg de standaard Magnific Popup-pijlen volledig en teken
 * zelf één duidelijke witte pijl op een vaste donkere achtergrond.
 * De knoppen blijven volledig zichtbaar en krijgen bij hover/focus
 * de rode huisstijlkleur.
 */

.mfp-arrow {
    width: 56px !important;
    height: 56px !important;
    margin-top: -28px !important;
    padding: 0 !important;
    opacity: 1 !important;
    background: #1f1f1f !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
}

/* Standaard Magnific Popup-pijl volledig verwijderen */
.mfp-arrow::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
}

/* Basis voor de nieuwe witte pijl */
.mfp-arrow::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    opacity: 1 !important;
    border: 0 !important;
}

/* Pijl naar links */
.mfp-arrow-left::after {
    border-left: 3px solid #ffffff !important;
    border-bottom: 3px solid #ffffff !important;
    transform: translate(-35%, -50%) rotate(45deg) !important;
}

/* Pijl naar rechts */
.mfp-arrow-right::after {
    border-top: 3px solid #ffffff !important;
    border-right: 3px solid #ffffff !important;
    transform: translate(-65%, -50%) rotate(45deg) !important;
}

/* Bestaande opacity van Magnific Popup hard overschrijven */
.mfp-fade.mfp-wrap.mfp-ready .mfp-arrow {
    opacity: 1 !important;
}

/* Hover en focus */
.mfp-fade.mfp-wrap.mfp-ready .mfp-arrow:hover,
.mfp-fade.mfp-wrap.mfp-ready .mfp-arrow:focus {
    background: #EA1017 !important;
    border-color: #EA1017 !important;
    opacity: 1 !important;
}

/* Duidelijke toetsenbordfocus */
.mfp-arrow:focus-visible {
    outline: 3px solid #ffffff !important;
    outline-offset: 4px !important;
}

/**
 * ==========================================================
 * WCAG criterium: 1.3.1 - Info en relaties
 * Cardan kenmerk: GGG-8.F40
 * ==========================================================
 *
 * Probleem:
 * Metadata zoals auteur, datum, fotografie en leestijd wordt
 * visueel als label-waardecombinatie weergegeven, maar deze
 * relaties zijn niet semantisch vastgelegd.
 *
 * Oplossing:
 * Behoud na het ombouwen naar <dl>, <dt> en <dd> de bestaande
 * visuele uitlijning op desktop en mobiel.
 */

/**
 * WCAG 1.3.1 / GGG-8.F9
 *
 * Behoud de bestaande footeropmaak na omzetting naar ul/li.
 */
.ponck-footer-links-list-item::marker {
    content: "" !important;
}

@media (max-width: 767px) {
    .ponck-footer-links-list {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .ponck-footer-links-list-item {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .ponck-footer-links-list-item > .w-text,
    .ponck-footer-links-list-item > .w-html {
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }
}

/* ==========================================================
   Algemeen
   ========================================================== */

.ponck-accessible-metadata {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 1.2rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ponck-accessible-metadata .ponck-metadata-pair {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
}

.ponck-accessible-metadata dt,
.ponck-accessible-metadata dd {
    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================
   Desktop: visuele bolletjes als afscheider
   ========================================================== */

.ponck-accessible-metadata .w-iconbox-icon {
    margin-left: -1rem !important;
    margin-right: 1.6rem !important;
}


/* ==========================================================
   Mobiele metadata
   ========================================================== */

.ponck-accessible-metadata-mobile {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ponck-accessible-metadata-mobile .ponck-metadata-pair {
    display: block !important;
}

.ponck-accessible-metadata-mobile dt,
.ponck-accessible-metadata-mobile dd {
    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================
   Mobiel: gelijke kolommen en nette onderlinge uitlijning
   ========================================================== */

@media (max-width: 767px) {
    .w-hwrapper:has(> .ponck-accessible-metadata-mobile) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        column-gap: 2rem !important;
        row-gap: 0 !important;
        width: 100% !important;
    }

    .w-hwrapper:has(> .ponck-accessible-metadata-mobile)
    > .ponck-accessible-metadata-mobile {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
}

/**
 * WCAG 2.5.2 / GGG-8.F56
 */
.ponck-loadmore-proxy-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 2rem;
}

.ponck-loadmore-proxy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ponck-loadmore-proxy-button:focus-visible {
    outline: 3px solid #ffffff !important;
    outline-offset: 3px !important;
}

.ponck-loadmore-proxy-button:disabled {
    cursor: wait;
    opacity: 0.7;
}

/* ==========================================================
   FOCUS STATES
   ========================================================== */

/**
 * ==========================================================
 * WCAG criterium: 1.4.11 - Contrast van niet-tekstuele content
 * Cardan kenmerk: GGG-8.F28
 * ==========================================================
 *
 * Probleem:
 * De focusindicator heeft niet overal voldoende contrast en
 * moet met duidelijke ruimte losstaan van de content.
 *
 * Oplossing:
 * Gebruik een pseudo-element als aparte focusring op afstand
 * van het element, zonder bestaande iconen/pijlen te overschrijven.
 */


/* ==========================================================
   Basis
   ========================================================== */

a,
button,
[role="button"],
[tabindex]:not([tabindex="-1"]) {
    position: relative;
}


/* Standaard focusring verwijderen */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/*
* Filterknoppen:
 * wanneer de checkbox toetsenbordfocus krijgt, toon de
 * focusindicator rond de volledige visuele filterknop.
 */

.w-filter-item-value {
    position: relative !important;
    overflow: visible !important;
}

/* Bestaande focusstijl op de verborgen checkbox verwijderen */
.w-filter-item-value input[type="checkbox"]:focus,
.w-filter-item-value input[type="checkbox"]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Volledige visuele filterknop markeren bij toetsenbordfocus */
.w-filter-item-value:has(input[type="checkbox"]:focus),
.w-filter-item-value:has(input[type="checkbox"]:focus-visible) {
    position: relative !important;
    z-index: 2 !important;
}

/* Witte binnenring + zwarte buitenring, met afstand tot de knop */
.w-filter-item-value:has(input[type="checkbox"]:focus)::after,
.w-filter-item-value:has(input[type="checkbox"]:focus-visible)::after {
    content: "" !important;
    position: absolute !important;
    inset: -8px !important;
    pointer-events: none !important;
    border: 3px solid #ffffff !important;
    outline: 3px solid #000000 !important;
    outline-offset: 0px !important;
    border-radius: inherit !important;
    z-index: 10 !important;
}

/* ==========================================================
   Algemene focusring
   ========================================================== */

a:not(.owl-prev):not(.owl-next):focus-visible::after,
button:not(.owl-prev):not(.owl-next):focus-visible::after,
[role="button"]:not(.owl-prev):not(.owl-next):focus-visible::after,
[tabindex]:not([tabindex="-1"]):not(.owl-prev):not(.owl-next):focus-visible::after {
    content: "" !important;
    position: absolute !important;
    inset: -10px !important;
    z-index: 9999 !important;
    pointer-events: none !important;

    border: 3px solid #ffffff !important;
    outline: 3px solid #000000 !important;
    outline-offset: 3px !important;

    border-radius: inherit !important;
}


/* ==========================================================
   Owl Carousel apart behandelen
   ========================================================== */

/**
 * Owl Carousel focus:
 * witte binnenring en zwarte buitenring,
 * met echte afstand tot de knop.
 */

.owl-nav button.owl-prev:focus-visible,
.owl-nav button.owl-next:focus-visible {
    outline: 3px solid #ffffff !important;
    outline-offset: 6px !important;
}

/* Zwarte buitenring zonder box-shadow */
.owl-nav button.owl-prev:focus-visible::before,
.owl-nav button.owl-next:focus-visible::before {
    content: "" !important;
    position: absolute !important;
    inset: -14px !important;
    border: 3px solid #000000 !important;
    pointer-events: none !important;
}


/* ==========================================================
   CookieYes switches
   ========================================================== */

.cky-switch {
    position: relative !important;
    overflow: visible !important;
}

.cky-switch:has(input:focus-visible)::after {
    content: "" !important;
    position: absolute !important;
    inset: -8px !important;
    border: 3px solid #ffffff !important;
    outline: 3px solid #000000 !important;
    outline-offset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

.cky-switch input:focus,
.cky-switch input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}


/* ==========================================================
   Gravity Forms
   ========================================================== */

/*
 * Directe wrappers rond invoervelden voorbereiden
 * op de eigen focusring.
 */
.gform_wrapper .gform-grid-col,
.gform_wrapper .ginput_container,
.gform_wrapper .gchoice {
    position: relative !important;
    overflow: visible !important;
}


/*
 * Tekstvelden binnen Gravity Forms.
 */
.gform_wrapper .gform-grid-col:has(> input:focus-visible)::after,
.gform_wrapper .ginput_container:has(> input:focus-visible)::after,
.gform_wrapper .ginput_container:has(> textarea:focus-visible)::after,
.gform_wrapper .ginput_container:has(> select:focus-visible)::after,
.gform_wrapper .gchoice:has(> input:focus-visible)::after {
    content: "" !important;
    position: absolute !important;
    inset: -8px !important;
    border: 3px solid #ffffff !important;
    outline: 3px solid #000000 !important;
    outline-offset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 10 !important;
}


/*
 * Eventuele standaardfocus van Impreza of Gravity Forms
 * op het invoerveld zelf verwijderen.
 */
.gform_wrapper input:focus,
.gform_wrapper input:focus-visible,
.gform_wrapper textarea:focus,
.gform_wrapper textarea:focus-visible,
.gform_wrapper select:focus,
.gform_wrapper select:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* back to top kleuren */
.w-toplink,
.w-toplink.visible,
.w-toplink.active {
	background: #000 !important;
	color: #fff !important;
	border: 2px solid #fff !important;
	opacity: 1 !important;
	filter: none !important;
}

.w-toplink:hover,
.w-toplink:focus {
	background: #EA1017 !important;
	color: #fff !important;
	border-color: #fff !important;
	opacity: 1 !important;
}

.w-toplink::before,
.w-toplink i,
.w-toplink i::before,
.w-toplink:hover::before,
.w-toplink:hover i,
.w-toplink:hover i::before {
	color: #fff !important;
	opacity: 1 !important;
	text-shadow: none !important;
}

/**
 * ==========================================================
 * WCAG criterium: 1.4.10 - Reflow
 * Cardan kenmerk: GGG-10.F47
 * ==========================================================
 *
 * De lettergrootte reageert op de beschikbare CSS-viewport.
 * Browserzoom verkleint die viewport automatisch.
 */
.ponck-fit-grid-title,
.ponck-fit-grid-title a,
.ponck-fit-grid-title span {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.1 !important;
}

@media (max-width: 767px) {
    .ponck-fit-grid-title,
    .ponck-fit-grid-title a,
    .ponck-fit-grid-title span {
        font-size: clamp(
            13px,
            4vw,
            22px
        ) !important;

        line-height: 0.9 !important;
    }
}

@media (max-width: 400px) {
    .ponck-fit-grid-title,
    .ponck-fit-grid-title a,
    .ponck-fit-grid-title span {
        font-size: 13px !important;
        line-height: 0.8 !important;
    }
}