/* 
 *  zet variabelen die niet afhankelijk zijn van de donkerlicht modus
*/

:root {

    /* --wp--preset--font-size--small: 0.842rem;
    --wp--preset--font-size--medium: 1.1rem;
    --wp--preset--font-size--large: 1.25rem;
    --wp--preset--font-size--x-large: 1.6rem;
 */

    /* vvvvvvvvvvvvvvvv  Begin afstanden header-css.css    vvvvvvvvvvvvvvvv */
    --headerbalk-klein: 60px;          /* hoogte van headerbalk als hij smal is */ 
    --headerbalk-groot: 160px;         /* hoogte van headerbalk als hij breed is */ 
    --headerlogo-klein: 47px;          /* hoogte van headerbalk als hij smal is */ 
    --headerlogo-groot: 125px;         /* hoogte van headerbalk als hij breed is */ 
    --header-naam-text-klein: 20px;     /* moet kleiner zijn als --headerbalk-klein */
    --header-naam-text-groot: 50px;     /* moet kleiner zijn als --headerbalk-groot */
    --header-naam-links-klein: 80px;    /* van de naam de linker marge klein   */
    --header-naam-links-groot: 180px;   /* van de naam de linker marge groot  */
    --header-rand-afbeelding: 0px;     /* rand dikte van rode streep boven en onder kop afbeelding
    /* ^^^^^^^^^^^^^^^^  Einde afstanden in de header-css.css    ^^^^^^^^^^^^^^^^ */

    /* vvvvvvvvvvvvvvvv  Begin afstanden menu-css.css    vvvvvvvvvvvvvvvv */
    --menu-smal-breedte: 280px;
    --menu-smal-inspring: 10px;
    --menu-smal-lijndikte: 0px;
    --menu-rand-lijndikte: 7px;
    --menu-smal-rechterkantlijn: 17px;
    --menu-smal-rechterkantlijn-padding: 22px;
    --menu-regel-hoogte: 50px;
    --menu-regel-hoogte-2: 48px;  /* moet --menu-regel-hoogte zijn min 2px dit om scroll smalscherm te voorkomen */

    /* ^^^^^^^^^^^^^^^^  Einde afstanden in de menu-css.css    ^^^^^^^^^^^^^^^^ */

}

/*
* Zet variabelen voor de verschillende kleuren
*/

/* ====================  Variablelen voor de licht modus  =====================*/

/* variabelen voor de header  */
.lichtdonkermode-lichte-modes {

    --blocks-css-bg: #ffffff;

    /* vvvvvvvvvvvvvvvv  Begin kleuren in de header-css.css    vvvvvvvvvvvvvvvv */
    --headerbalk1: #E30B21;
    --headerbalk2: #ffffff;
    --headerkoptext: #ffffff;
    --hamburger-balk: #0e0e0e;
    /* ^^^^^^^^^^^^^^^^  Einde kleuren in de header-css.css    ^^^^^^^^^^^^^^^^ */

    /* vvvvvvvvvvvvvvvv  Begin kleuren in de footer-css.css    vvvvvvvvvvvvvvvv */
    --footerbalk1: #E30B21;
    --footerbalk2: #ffffff;
    --footerbalk1-tekst: #ffffff;
    --footerbalk2-tekst: #000000;
    /* ^^^^^^^^^^^^^^^^  Einde kleuren in de footer-css.css    ^^^^^^^^^^^^^^^^ */

    /* vvvvvvvvvvvvvvvv  Begin kleuren in de voor het darkmode keizer venster vvvvvvvvvvvvvvvv */
    --darkmode-titel-bg: #0D64B0;
    --darkmode-pagina-text: #fefefe ; 
    --darkmode-knop-bg: #e30b21;
    /* ^^^^^^^^^^^^^^^^  Einde kleuren in de voor het darkmode keizer venster    ^^^^^^^^^^^^^^^^ */

    /* vvvvvvvvvvvvvvvv  Begin kleuren in de Menu-css.css    vvvvvvvvvvvvvvvv */
    /* hamburger menu */
    --hamburger-bg: #ffffff00; /* transparant */
    --hamburger-balk: #5f5454; /* Zwart */

    /* menu balk kleuren */
    --menu-tekst: #050505;
    --menu-bg: #ffffff;
    --menu-bg-2:#ffffff;
    --menu-bg-3:#ffffff;
    --menu-bg-4:#ffffff;
    --menu-bg-5:#ffffff;
    --menu-bg-6: #ffffff;
    --menu-bg-lijntje:  #ffffff;;
    --menu-rand-rondom: #e30b21;
    
    /* menu pijltje  */
    --menu-pijlje: #100f0f;

    /* ^^^^^^^^^^^^^^^^  Einde kleuren in de Menu-css.css    ^^^^^^^^^^^^^^^^ */
    --page-pagina-text: #000000;
    --page-titel-text: #000000;
    --page-titel-bg: #ffffff;
    
    /* --image-lichtdonker:1;
    --backgroundimage-lichtdonker:0.1; */
    --page-background: #ffffff;
}

.lichtdonkermode-donkere-modes {

    --blocks-css-bg: #0e0e0ea0;

    /* vvvvvvvvvvvvvvvv  Begin kleuren in de header-css.css    vvvvvvvvvvvvvvvv */
    --headerbalk1: #b30202;
    --headerbalk2: #ddd8d8;
    --headerkoptext: #ddd8d8;
    --hamburger-balk: #0e0e0e;
    /* ^^^^^^^^^^^^^^^^  Einde kleuren in de header-css.css    ^^^^^^^^^^^^^^^^ */

    /* vvvvvvvvvvvvvvvv  Begin kleuren in de footer-css.css    vvvvvvvvvvvvvvvv */
    --footerbalk1: #b30202;
    --footerbalk2: #ddd8d8;
    --footerbalk1-tekst: #ddd8d8;
    --footerbalk2-tekst: #000000;
    /* ^^^^^^^^^^^^^^^^  Einde kleuren in de footer-css.css    ^^^^^^^^^^^^^^^^ */

    /* vvvvvvvvvvvvvvvv  Begin kleuren in de voor het darkmode keizer venster vvvvvvvvvvvvvvvv */
    --darkmode-titel-bg: #0D64B0;
    --darkmode-pagina-text: #fefefe ; 
    --darkmode-knop-bg: #e30b21;
    /* ^^^^^^^^^^^^^^^^  Einde kleuren in de voor het darkmode keizer venster    ^^^^^^^^^^^^^^^^ */

    /* vvvvvvvvvvvvvvvv  Begin kleuren in de Menu-css.css    vvvvvvvvvvvvvvvv */
    /* hamburger menu */
    --hamburger-bg: #ffffff00; /* transparant */
    --hamburger-balk: #5f5454; /* Zwart */

    /* menu balk kleuren */
    --menu-tekst: #050505;
    --menu-bg: #ddd8d8;
    --menu-bg-2:#ddd8d8;
    --menu-bg-3:#f9c4c4;
    --menu-bg-4:#faa2a2;
    --menu-bg-5:#f68e8e;
    --menu-bg-6: #f76f6f;
    --menu-bg-lijntje: #ddd8d8;
    --menu-rand-rondom: #e30b21;

    /* menu pijltje  */
    --menu-pijlje: #100f0f;

    /* ^^^^^^^^^^^^^^^^  Einde kleuren in de Menu-css.css    ^^^^^^^^^^^^^^^^ */

    --page-pagina-bg : #000000;
    --page-pagina-text: #ffffff;
    --page-titel-text: #ffffff;
    --page-titel-bg: #000000;
    /* --image-lichtdonker: 0.75;
    --backgroundimage-lichtdonker:0.6; */
    --page-background: #000000;
    
    img {
        filter: brightness(80%); /* Pas helderheid aan (25% donkerder) */
    }
}

/* ++++++++++++++++++  andere kleuren voor de home pagina +++++++++++++++++++++*/
/* ====================  Variablelen voor de licht modus  =====================*/

/* variabelen voor de header  */
.home.lichtdonkermode-lichte-modes {
    --page-pagina-text: #000000;
    --page-titel-text: #000000;
    --page-titel-bg:#ffffff;
    /* --image-lichtdonker:1;
    --backgroundimage-lichtdonker:0.1; */
    --page-background: #ffffff;
    --blocks-css-bg: #ffffff;
}

.home.lichtdonkermode-donkere-modes {
    --page-pagina-bg : transparent;
    --page-pagina-text: #f4f4f4;
    --page-titel-text: #dbc5c5;
    --page-titel-bg: rgba(237, 22, 22, 0.0);
    /* --image-lichtdonker: 0.75;
    --backgroundimage-lichtdonker:0.6; */
    --page-background: #00004d;;
}