/* =======================================================================================
   1. Eerst de fonts registreren (de techniek)
   ======================================================================================= */

/* =======================================================================================
   1.1. CURLZ PRO REGULAR --> font in het logo
   ======================================================================================= */

@font-face {
    font-family: 'CurlzProRegular';
    src: url('../fonts/CurlzProRegular/font.woff2') format('woff2'), url('../fonts/CurlzProRegular/font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* =======================================================================================
   1.2. BARLOW FAMILIE
   ======================================================================================= */

/* 1.2.1. BARLOW FAMILIE (Standaard)                                                       */

@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow/Barlow-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow/Barlow-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow/Barlow-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow/Barlow-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow/Barlow-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow/Barlow-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow/Barlow-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow/Barlow-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow/Barlow-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow/Barlow-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}
@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow/Barlow-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}
@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow/Barlow-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow/Barlow-RegularItalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow/Barlow-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}
@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow/Barlow-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}
@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow/Barlow-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow/Barlow-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}
@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow/Barlow-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

/* 1.2.2. BARLOW FAMILIE (SemiCondensed)                                                   */

@font-face {
    font-family: 'BarlowSemiCondensed';
    src: url('../fonts/BarlowSemiCondensed/BarlowSemiCondensed-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'BarlowSemiCondensed';
    src: url('../fonts/BarlowSemiCondensed/BarlowSemiCondensed-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'BarlowSemiCondensed';
    src: url('../fonts/BarlowSemiCondensed/BarlowSemiCondensed-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'BarlowSemiCondensed';
    src: url('../fonts/BarlowSemiCondensed/BarlowSemiCondensed-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'BarlowSemiCondensed';
    src: url('../fonts/BarlowSemiCondensed/BarlowSemiCondensed-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'BarlowSemiCondensed';
    src: url('../fonts/BarlowSemiCondensed/BarlowSemiCondensed-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'BarlowSemiCondensed';
    src: url('../fonts/BarlowSemiCondensed/BarlowSemiCondensed-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'BarlowSemiCondensed';
    src: url('../fonts/BarlowSemiCondensed/BarlowSemiCondensed-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'BarlowSemiCondensed';
    src: url('../fonts/BarlowSemiCondensed/BarlowSemiCondensed-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'BarlowSemiCondensed';
    src: url('../fonts/BarlowSemiCondensed/BarlowSemiCondensed-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}
@font-face {
    font-family: 'BarlowSemiCondensed';
    src: url('../fonts/BarlowSemiCondensed/BarlowSemiCondensed-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}
@font-face {
    font-family: 'BarlowSemiCondensed';
    src: url('../fonts/BarlowSemiCondensed/BarlowSemiCondensed-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'BarlowSemiCondensed';
    src: url('../fonts/BarlowSemiCondensed/BarlowSemiCondensed-RegularItalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'BarlowSemiCondensed';
    src: url('../fonts/BarlowSemiCondensed/BarlowSemiCondensed-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}
@font-face {
    font-family: 'BarlowSemiCondensed';
    src: url('../fonts/BarlowSemiCondensed/BarlowSemiCondensed-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}
@font-face {
    font-family: 'BarlowSemiCondensed';
    src: url('../fonts/BarlowSemiCondensed/BarlowSemiCondensed-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'BarlowSemiCondensed';
    src: url('../fonts/BarlowSemiCondensed/BarlowSemiCondensed-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}
@font-face {
    font-family: 'BarlowSemiCondensed';
    src: url('../fonts/BarlowSemiCondensed/BarlowSemiCondensed-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

/* 1.2.3. BARLOW FAMILIE (Condensed)                                                        */

@font-face {
    font-family: 'BarlowCondensed';
    src: url('../fonts/BarlowCondensed/BarlowCondensed-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'BarlowCondensed';
    src: url('../fonts/BarlowCondensed/BarlowCondensed-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'BarlowCondensed';
    src: url('../fonts/BarlowCondensed/BarlowCondensed-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'BarlowCondensed';
    src: url('../fonts/BarlowCondensed/BarlowCondensed-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'BarlowCondensed';
    src: url('../fonts/BarlowCondensed/BarlowCondensed-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'BarlowCondensed';
    src: url('../fonts/BarlowCondensed/BarlowCondensed-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'BarlowCondensed';
    src: url('../fonts/BarlowCondensed/BarlowCondensed-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'BarlowCondensed';
    src: url('../fonts/BarlowCondensed/BarlowCondensed-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'BarlowCondensed';
    src: url('../fonts/BarlowCondensed/BarlowCondensed-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'BarlowCondensed';
    src: url('../fonts/BarlowCondensed/BarlowCondensed-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}
@font-face {
    font-family: 'BarlowCondensed';
    src: url('../fonts/BarlowCondensed/BarlowCondensed-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}
@font-face {
    font-family: 'BarlowCondensed';
    src: url('../fonts/BarlowCondensed/BarlowCondensed-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'BarlowCondensed';
    src: url('../fonts/BarlowCondensed/BarlowCondensed-RegularItalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'BarlowCondensed';
    src: url('../fonts/BarlowCondensed/BarlowCondensed-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}
@font-face {
    font-family: 'BarlowCondensed';
    src: url('../fonts/BarlowCondensed/BarlowCondensed-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}
@font-face {
    font-family: 'BarlowCondensed';
    src: url('../fonts/BarlowCondensed/BarlowCondensed-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'BarlowCondensed';
    src: url('../fonts/BarlowCondensed/BarlowCondensed-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}
@font-face {
    font-family: 'BarlowCondensed';
    src: url('../fonts/BarlowCondensed/BarlowCondensed-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

/* =======================================================================================
   1.3. VARIABLE FONTS (Inter, Nunito, Work Sans)
   ======================================================================================= */

/* 1.3.1. VARIABLE FONT Inter                                                              */

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* 1.3.2. VARIABLE FONT Nunito                                                             */

@font-face {
    font-family: 'Nunito';
    src: url('../fonts/Nunito/Nunito-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Nunito';
    src: url('../fonts/Nunito/Nunito-Italic-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 200 900;
    font-style: italic;
    font-display: swap;
}

/* 1.3.3. VARIABLE FONT WorkSans                                                           */

@font-face {
    font-family: 'WorkSans';
    src: url('../fonts/WorkSans/WorkSans-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'WorkSans';
    src: url('../fonts/WorkSans/WorkSans-Italic-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* =======================================================================================
   2. CLASSES VOOR GEBRUIK
   ======================================================================================= */

.font-curlz { font-family: 'CurlzProRegular', cursive; } /* cursive is de fallback voor de browser */
.font-barlow { font-family: 'Barlow', sans-serif; }
.font-barlow-semi-condensed { font-family: 'BarlowSemiCondensed', sans-serif; }
.font-barlow-condensed { font-family: 'BarlowCondensed', sans-serif; }
.font-inter { font-family: 'Inter', sans-serif; }
.font-nunito { font-family: 'Nunito', sans-serif; }
.font-worksans { font-family: 'WorkSans', sans-serif; }

/* ======================================================================================
   3. HUISSTIJL TOEPASSING
   ====================================================================================== */
   
/* 3.1. H1: Paginatitel: Paars, Barlow Bold                                                */

        /* Verwijder de paarse achtergrond van de Olivero teaser-header                    */
.teaser__top,
.node__title,
h1.page-title {
    background: none !important; /* Geen box achtergrond                                   */
    background-color: transparant !important; /* Achtergrondkleur box transparant          */
    box-shadow: none !important; /* Geen schaduw rond de box                               */
    border: none !important; /* Geen rand rond de box                                      */
}

        /* Styling voor de titel-link: Paars op Wit + Onderlijnd                           */
#main-wrapper h1.page-title,
#main-wrapper .node__title a,
h1.page-title a {
    display: inline-block !important; /* Breedte volgt nu tekst + padding                  */
    background-color: #ffffff !important; /* Achtergrondkleur wit                          */
    color: rgba(54, 33, 126, 1) !important; /* Tekstkleur paars                            */
    padding: 5px 15px !important; /* Boven/onder 5px, links/rechts 15px                    */
    font-family: 'Barlow', sans-serif !important; /* Lettertype Barlow                     */
    font-weight: 700 !important; /* Bold                                                   */
    text-decoration: underline !important; /* Onderlijnd voor herkenbaarheid als link      */
}

        /* Hover effect: Transparante achtergrond + Oranje tekst + Geen onderlijning       */
#main-wrapper .node__title a:hover,
h1.page-title a:hover {
    background-color: transparent !important; /* Achtergrondkleur transparant              */
    color: rgba(233, 91, 19, 1) !important; /* Tesktkleur oranje                           */
    text-decoration: none !important; /* Geen onderlijning                                 */
}

        /*      Zet de eerste letter van de titel om naar hoofdletter                      */
#main-wrapper h1.page-title::first-letter,
#main-wrapper .node__title a::first-letter {
    text-transform: uppercase !important; /* Zet eerste letter om naar hoofdletter         */
}

/* 3.2. H2: Wit op Paars, Barlow Condensed Medium, volledig uitgevuld                      */

        /* Instellingen box, lettertype, kleuren, uitlijning, merges, padding, tekst       */
h2 {
display: block !important;
    width: 100% !important;
    background-color: rgba(54, 33, 126, 1) !important; /* Balk met paarse achtergrond      */
    color: #ffffff !important; /* Tekstkleur wit                                           */
    padding: 12px 20px !important; /* Boven/onder 12px, links/rechts 20 px                 */
    box-sizing: border-box; /* Groote box = inhoud + padding + border + margin             */
    text-align: justify !important; /* Tekst volledig uitvullen                            */
    text-align-last: justify; /* Forceert ook de laatste/enige regel om uit te vullen      */
    font-family: 'BarlowCondensed', sans-serif; /* Lettertype BarlowCondensed              */
    font-weight: 500 !important; /* Medium                                                 */
    margin-top: 1.5em !important; /* Bovenmarge                                            */
    margin-bottom: 1em !important; /* Ondermarge                                           */ 
    display: block !important; /* Zorgt dat de balk doorloopt over de volle breedte        */
    text-transform: none !important; /* Behoud wat de redacteur typt                       */
}

        /* Zet de eerste letter van H2 om naar hoofdletter                                 */
h2::first-letter {
    text-transform: uppercase !important; /* Zet om naar hoofdletter                       */
} 

/* 3.3. H3: Barlow Semi-Bold 1.5em paars                                                   */

h3 {
    font-family: 'Barlow', sans-serif !important; /* Lettertype Barlow                     */
    font-weight: 600 !important; /* Semi-bold                                              */
    color: rgba(54, 33, 126, 1) !important; /* Tekstkleur paars                            */
    font-size: 1.5rem !important; /* Lettergrootte 1.5em                                   */
    margin-top: 1.2em !important; /* Bovenmarge 1.2em                                      */
    margin-bottom: 0.5em !important; /* Ondermarge 0,5em                                   */
}

/* 3.4. H4: Barlow Semi-Bold 1.15em onderlijnd paars                                       */

h4 {
    font-family: 'Barlow', sans-serif !important; /* Lettertype Barlow                     */
    font-weight: 600 !important; /* Semi-bold                                              */
    color: rgba(54, 33, 126, 1) !important; /* Tesktkleur ook paars voor consistentie      */
    font-size: 1.15rem !important; /* Lettergrootte 1.15em, iets groter dan body text      */
    text-decoration: underline !important; /* Onderlijnd                                   */
    text-underline-offset: 4px; /* Afstand text onderlijning 4px                           */
} 

/* 3.5. Algemene tekst: Inter regular, zwart                                               */

body, p, .text-content p, .field__item p {
    font-family: 'Inter', sans-serif !important; /* Lettertype Inter                       */
    font-weight: 400 !important; /* Regular                                                */
    color: #000000 !important; /* Tekstkleur zwart                                         */
}

/* 3.6. Inleidende paragraaf: Inter Bold, 1.15em, zwart                                    */

.node__content p.inleidende-paragraaf,
 p.inleidende-paragraaf {
    font-family: 'Inter', sans-serif; /* Lettertype Inter                                  */
    font-weight: 700 !important; /* Bold                                                   */
    font-size: 1.15rem !important; /* Net dat beetje extra gewicht                         */
    color: #000000; /* Tekstkleur zwart                                                    */
    text-align: justify !important; /* Tekst uitvullen                                     */
    line-height: 1.7 !important; /*Iets meer ruimte tussen de regels geeft de box rust     */
    display: block !important; /* Standaard block                                          */
    overflow: visible !important; /* Maak de overflow zichtbaar                            */
    padding-left: 0 !important; /* geen linker-padding                                     */
    margin-bottom: 1.5em !important; /* Ondermarge 1.5em                                   */
} 

/* 3.7. Kleine Hoofdletters                                                                */

.kleine-hoofdletters,
.small-caps {
    font-variant: small-caps !important; /* Kleine Hoofdletters             */
}

/* 3.8. Menu-items: Barlow Condensed Bold Paars                                            */

.primary-nav__menu-link-inner {
    font-family: 'BarlowCondensed', sans-serif; /* Lettertype BarlowCondensed              */
    font-weight: 700 !Important; /* Bold                                                   */
    color: rgba(54, 33, 126, 1) !important; /* Tekstkleur paars                            */
    
}

/* 3.9. Accenttekst: Orange Springe: Barlow Black: Wit op Oranje                           */

        /* Instellingen box, lettertype, marges en padding, kleuren, uitlijning            */
.accent-orange-springer {
    font-family: 'Inter', sans-serif !important; /* Lettertype Inter                       */
    font-weight: 900 !important; /* Black                                                  */
    color: #ffffff !important; /* Tekstkleur wit                                           */
    background-color: rgba(233, 91, 19, 1) !important; /* Achtergrondkleur oranje          */
    padding: 2px 10px 2px 40px !important; /* Boven/onder 2px, rechts 10px, links 40px     */
    float: right !important; /* De box wordt rechts uitgelijnd strak tegen de kantlijn     */
    display: block !important; /* Toon de box als block                                    */
    margin: 1px 0px 0px 20px !important; /* Boven 3px, rechts/onder 0px, links 20px        */
    line-height: 1.2 !important; /* Lijnhoogte 120%                                        */
    white-space: nowrap !important; /* Zorgt ervoor dat de regel erna niet breekt          */
    box-sizing: border-box !important; /* boxafmetingen excl. marges, border en padding    */
    position: relative !important; /* Positioneer box relatief                             */
    z-index: 10 !important; /* Zorgt dat de box bonenop blijft liggen en tekst er niet
                               onderdoor kruipt                                            */
}

/* 3.10. Footer: Nunito                                                                    */

.site-footer {
    font-family: 'Nunito', sans-serif !important; /* Lettertype Nunito                     */
}

/* 3.10. Verberg Branding                                                                  */

.site-branding__text,
.site-branding__name,
.site-branding__slogan {
    display: none !important; /* Branding en naam niet tonen in de box met het logo        */
}

/* 3.11. Het vergrootglas van de zoekfunctie Paars maken door de butron waar het
         vergrootglas in zit paars te maken                                                */
         
.block-search-wide__button {
    color: rgba(54, 33, 126, 1) !important; /* Kleur paars                                 */
}
      /* Voor de zekerheid ook het path van het vergrootglas zelf dwingen                  */
.block-search-wide__button svg path {
    fill: rgba(54, 33, 126, 1) !important; /* Kleur paars                                  */
}

/* 3.12. De overige menu-items in de header                                                */

.block-user-login-block,
.block-account,
#block-rczuidrand-account-menu a,
.account-nav__menu-link-inner {
    font-family: 'BarlowCondensed', sans-serif !important; /* Lettertype BarlowCondensed   */
    color: rgba(54, 33, 126, 1) !important; /* Tekstkleur paars                            */
    font-weight: 700 !important; /* Bold                                                   */
}

/* 3.13. De secundaire navigatie (Inloggen, Mijn account, Uitloggen)                       */

.secondary-nav__menu-link {
    font-family: 'BarlowCondensed', sans-serif !important; /* Lettertype BarlowCondensed   */
    color: rgba(54, 33, 126, 1) !important; /* Tekstkleur paars                            */
    font-weight: 700 !important; /* Bold                                                   */
}
      /* Zorg dat de kleur ook bij hover paars blijft                                      */
.secondary-nav__menu-link:hover {
    color: rgba(233, 91, 19, 1) !important; /* Tekstkleur paars                            */
}

/* 3.14. Hyperlinks in de tekst                                                            */
.node__content a, 
.layout-content a {
    color: rgba(54, 33, 126, 1) !important; /* Tesktkleur Paars                            */
    text-decoration: underline !important; /* Onderlijnen, goed voor de toegankelijkheid   */
    font-weight: 500 !important; /* Medium                                                 */
}

/* 3.15. Specifieke herstelregel voor links in de paarse H2 balken                         */

#main-wrapper h2 a {
    color: #cccccc !important; /* Tekstkleur lichtgrijs                                    */
    background-color: transparent !important;  /* Geen achtergrondkleur-box                */
    background-image: none !important; /* Verwijdert Olivero swipe-gradiënt                */
    border-bottom: none !important; /* Verwijdert de Olivero lijn                          */
    box-shadow: none !important; /* Verwijdert de Olivero schaduwlijn                      */
    text-decoration: underline !important; /* Alleen onze eigen grijze lijn                */
    text-decoration-thickness: 1px !important; /* Forceert een fijne lijn                  */
    text-underline-offset: 3px !important; /* Geeft de letters wat ademruimte              */
}

#main-wrapper h2 a:hover,
.node__title a:hover,
h2.page-title a:hover {
    color: rgba(233, 91, 19, 1) !important; /* Oranje, overschrijft alles                  */
    background-color: transparent !important; /* Geen achergrondkleur-box                  */
    background-image: none !important; /* Verwijdert Olivero swipe-gradiënt                */
    border-bottom: none !important; /* Verwijdert de Olivero lijn                          */
    box-shadow: none !important; /* Verwijdert de Olivero schaduwlijn                      */
    text-decoration: none !important; /* Geen lijn bij hover                               */
}

/* 3.16. Hyperlinks bij hover (als je er met de muis overgaat)                             */

.node__content a:hover, 
.layout-content a:hover {
    color: rgba(233, 91, 19, 1) !important; /* Tekstkleur oranje                           */
}

/* =======================================================================================
   4. CONTROLEER DE GROTE AFBEELDINGEN EN MEDIA IN DE TEKST                  
   ======================================================================================= */

/* Dit zorgt ervoor dat logo's of QR-code in svg-bestanden niet het hele scherm overnemen.
   Gecombineerde regel voor alle afbeeldingen in de content, inclusief je logo en QR-code. */
.node__content img,
.node__content svg,
.field--name-field-media-image img {
    max-width: 250px !important; /* Maximu breedtte 250px                                  */
    height: auto !important; /* Hoogte automatisch                                         */
    display: block !important; /* Block grootte = inhoud + padding + border + marges       */
    margin-bottom: 10px !important; /* Ondermarge 10px                                     */
}

/* =======================================================================================
   5. VERBETER DE TEKSTOMLOOP (BIJ LINKS/RECHTS/GECENTREERDE UITLIJNING) VAN MEDIA     
   ======================================================================================= */

/* 5.1 Media links uitlijnen met tekstomloop                                               */

.media--align-left {
    float: left; /* Media links uitlijnen                                                  */
    margin-right: 20px; /* Rechtermarge 20px                                               */
    margin-bottom: 10px; /* Ondermarge 10px                                                */
}

/* 5.2. Media rechts uitlijnen met tekstomloop                                             */

.media--align-right {
    float: right; /* Media rechts uitlijnen                                                */
    margin-left: 20px; /* Linkermarge 20px                                                 */
    margin-bottom: 10px; /* Ondermarge 10px                                                */
}

/* 5.3. Media centreren met tekstomloop                                                    */

.field--name-field-media-image .field__item {
    display: flex; /* Maak box waarvan de kinderen flex-items zijn                         */
    justify-content: flex-start; /* Verander naar 'center' voor centrering                 */

/* =======================================================================================
6. CUSTOM MULTISELECT GEMEENTE FILTER (HUISSTIJL: PAARS & ORANJE)
======================================================================================= */

/* 6.1. Verberg de originele Drupal elementen volledig */
#views-exposed-form-agenda-page-1 .form-item-field-gemeente-value > label,
#views-exposed-form-agenda-page-1 select#edit-field-gemeente-value,
#views-exposed-form-agenda-page-1 .form-actions {
    display: none !important;
    visibility: hidden !important;
}

/* 6.2. De container van de nieuwe dropdown */
.custom-multiselect {
    display: block !important;
    width: 100% !important;
    max-width: 400px !important;
    position: relative !important;
    font-family: 'Inter', sans-serif !important;
    margin-bottom: 20px !important;
}

/* 6.3. De PAARSE knop met witte letters (Trigger) */
.dropdown-trigger {
    width: 100% !important;
    min-height: 45px !important;
    background-color: rgba(54, 33, 126, 1) !important;
    color: #ffffff !important;
    border: 2px solid rgba(54, 33, 126, 1) !important;
    padding: 8px 45px 8px 15px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    text-align: left !important;
    position: relative !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    display: block !important;
}

/* 6.4. Het witte pijltje op de knop */
.dropdown-trigger::after {
    content: '▼' !important;
    color: #ffffff !important;
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 12px !important;
}

/* 6.5. De dropdown lijst (witte achtergrond, grijze rand) */
ul.dropdown-list {
    display: none;
    list-style: none !important;
    list-style-type: none !important;
    margin: 4px 0 0 0 !important;
    padding: 12px !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(60, 60, 60, 1) !important;
    border-radius: 4px !important;
    box-shadow: 0 8px 16px rgba(0,0,0,0.15) !important;
    position: absolute !important;
    z-index: 1000 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 6.6. De lijst-items (Geen bullets) */
ul.dropdown-list li {
    list-style-type: none !important;
    list-style-image: none !important;
    display: block !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

/* 6.7. Labels en Checkboxes binnen de lijst */
ul.dropdown-list label {
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    color: #000000 !important;
    font-weight: 400 !important;
}

ul.dropdown-list li:hover label {
    color: rgba(233, 91, 19, 1) !important;
}

/* 6.8. De Checkbox styling fix */
ul.dropdown-list input[type="checkbox"] {
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    margin: 0 12px 0 0 !important;
    width: 15px !important;
    height: 15px !important;
    cursor: pointer !important;
    accent-color: rgba(233, 91, 19, 1) !important;
}

ul.dropdown-list label span {
    display: inline-block !important;
    line-height: 1.2 !important;
}

/* =======================================================================================
   7. TEST OM TE ZIEN? OF DEZE style.css WORDT GELADEN                       
   ======================================================================================= */
/* body {
    border-top: 10px solid orange !important;
} */