@charset "UTF-8";

/*
Theme Name: WP WIZ Theme 2026
Theme URI: https://webinzicht.nl/wpthemes/wpwebinzicht22/
Author: Web Inzicht — (digital) communications & design
Author URI: https://webinzicht.nl/
Description: WP WIZ Theme is the basic theme for custom made websites made by Web Inzicht. This theme supports common functionality of WordPress, but has no design elements. The client specific lay-out is contained in the Client Child Theme that is also installed on your website. WP WIZ Theme is required for your website to function normally. Please do not remove this theme. Update if required.
Version: 1.2.0
Requires at least: 5.8
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wpwebinzicht22
Tags: one-column, custom-logo, featured-images, footer-widgets, translation-ready
*/


/* -------------------------------------------------------------------*/
/* -- Local Fonts (EXAMPLE) ----------------------------------------- */
/* -------------------------------------------------------------------*/

/* 

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/OpenSans-Regular.woff2') format('woff2'),
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('assets/fonts/raleway-v28-latin-800.woff2') format('woff2');
}

*/

/* -------------------------------------------------------------------*/
/* -- Variables ----------------------------------------------------- */
/* -------------------------------------------------------------------*/
:root { 

    /* -- FONTS -- */ 

    /* Example:
    --global-font-primary:   'Open Sans', Arial, sans-serif;
    --global-font-secondary: 'Raleway', Arial, sans-serif;
    */

    --global-font-primary:     Arial, Helvetica, sans-serif;
    --global-font-secondary:   Georgia, serif;

    --global-font-size-basic:  16px; 
   
    
    /* -- COLORS -- */

    --global-color-orange:      #ff5c00;
    --global-color-darkblue:    #080b16;
    --global-color-cyan:        #00e5ff;
    --global-color-purple:      #8b5cff;

    --global-color-warmblack:   #131313;
    --global-color-eigengrau:   #16161d;

    --global-color-black:       #000000;
    --global-color-white:       #FFFFFF;


    --global-color-body:        var(--global-color-warmblack);   
    --global-color-pagediv:     var(--global-color-black);
    --global-color-alltext:     var(--global-color-white);

    
    /* -- BUTTON & ELEMENT COLORS -- */
    --global-color-button:      var(--global-color-cyan);
    --global-color-buthov:      var(--global-color-orange);
    --global-color-buttxt:      var(--global-color-black);

    /* -- TYPOGRAPHIC ELEMENTS -- */
    --global-color-h1:          var(--global-color-purple);
    --global-color-link:        var(--global-color-cyan);
    --global-color-linkhov:     var(--global-color-orange);
    
   
    /* -- MEASURES ------------------------------------------------------- */

    /* Legacy measures - retained for backwards compatibility */
    --global-width-max:         100vw;
    --global-width-100:         100%;       
    --global-height-max:        100vh;
    --global-height-100:        100%;        
    
    --global-maxw1-pagediv:     100%;      /* full width content */
    --global-maxw2-pagediv:     1600px;    /*  max width content */
    --global-outermargin:       4rem;      /*       outer margin */ 
    --global-width-pagediv:     calc(var(--global-maxw2-pagediv) - var(--global-outermargin));


    /* WIZ22 2026 layout measures */
    --global-content-max:       1600px;
    --global-page-margin:       2rem;
    --global-screen-height:     100dvh;

    
    /* General spacing */
    --global-padding:           2rem;
    --global-hpadding:          2rem;
    --global-vpadding:          2rem; 

    /* -- BORDERS ETC -- */
    --global-border-button:     1px solid var(--global-color-buthov);
    
    
    /* -- DEV OPTIONS -- */
    
    --dev-border-01:            1px solid red;
    --dev-border-02:            1px solid blue;
    --dev-border-03:            1px solid green;
    --dev-border-04:            1px solid gold;
    --dev-border-05:            1px solid silver;
    --dev-bg-01:                red;
    --dev-bg-02:                blue;
    --dev-bg-03:                green;
    --dev-bg-04:                gold;
    --dev-bg-05:                silver;
    --dev-minsize:              0.5rem;
    
}
    
div.devinfo {

    display:                block; 

    z-index:                1000;
    position:               fixed;
    bottom:                 50%;
    left:                   10px;

    width:                  300px;
    min-height:             100px;

    border:                 var(--dev-border-05);
    background-color:       var(--dev-bg-05);
    border-radius:          5px;
    padding:                1rem;

    color:                  black;

}

/* -------------------------------------------------------------------*/
/* -- RESET --------------------------------------------------------- */
/* -------------------------------------------------------------------*/

/* set all boxes in one go */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
/*  all:                    initial; */ /* THIS BREAKS THE PAGE EDITOR H1 field!! */ 

    font-family:            var(--global-font-primary);
    font-size:              var(--global-font-size-basic);

    margin:                 0;
    padding:                0;

    color:                  var(--global-color-alltext);
}


h1, h2, h3, h4, h5, h6 {
/*  all:                    initial; */ /* THIS BREAKS THE PAGE EDITOR H1 field!! */   
    font-family:            var(--global-font-secondary); 
    margin: 0;
    padding: 0;
   
}

nav ul {
    list-style-type:        none;
    margin:                 0;
    padding:                0;
}


/* -------------------------------------------------------------------*/
/* -- ACCESABILITY -------------------------------------------------- */
/* -------------------------------------------------------------------*/


a.skip-link:not(:focus):not(:focus-within) {

    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;   

}


a.skip-link {
    position: fixed!important;
    z-index: 9999;
    top: 15px;
    left: 15px;
    padding: 10px;
    text-decoration: none;

}


/* -------------------------------------------------------------------*/
/* -- BASIC BLOCKS -------------------------------------------------- */
/* -------------------------------------------------------------------*/


body {

    width:                  var(--global-width-max);
    max-width:              var(--global-width-100);

    background-color:       var(--global-color-body);

}


div.pagediv {

    width:                  var(--global-width-pagediv);
    max-width:              var(--global-width-100);
    
    min-height:             var(--global-height-max);   /* content reaches to bottom */

    margin:                 auto;   /* centered content */

    background-color:       var(--global-color-pagediv);

    padding:                var(--global-padding);

}


/* -------------------------------------------------------------------*/
/* -- Header & Menu ------------------------------------------------- */
/* -------------------------------------------------------------------*/

/* --- NAV SVG ELEMENTS ----------------------------------------------*/

svg.mnubutton {
    width:                  32px;
    height:                 32px;

    background-color:       var(--global-color-button); 
    border-radius:          5px;
    cursor:                 pointer;
}

svg.mnubutton {
    fill:                   var(--global-color-buttxt);
}


svg.mnubutton:hover, svg.mnubutton:focus {  
    fill:                   var(--global-color-buttxt);
    background-color:       var(--global-color-buthov); 
}


/* --- NAV MENU ELEMENTS ---------------------------------------------*/

div.logoblock {

    width:                  max-content;
    height:                 max-content;

    min-width:              var(--dev-minsize);
    min-height:             var(--dev-minsize);

    background-repeat:      no-repeat;
    background-size:        contain;

    border:                 var(--dev-border-05);

}

div.navblock {

    display: flex;
    justify-content: right;

    padding-top:            var(--global-vpadding);
    padding-right:          var(--global-hpadding);

}

div.navblock ul.menu-wrapper {

    display:                flex;
    flex-direction:         row;
    justify-content:        flex-end;

}

div.navblock ul.menu-wrapper li {

    margin-left:            var(--global-hpadding);
}

.secondary-menu-container {

    margin-bottom:          var(--global-vpadding);
}

.primary-menu-container {
    
    font-weight:            bold;

}


/* -------------------------------------------------------------------*/
/* -- NAV SWITCH Mobile / Desktop EXAMPLE --------------------------- */
/* -- No media query in main template for ease of use ----------------*/
/* --                                                               --*/
/* -- 16-09-2026 - added backward compatible div switcher ------------*/
/* -------------------------------------------------------------------*/

/* --- MOBILE            ------------------------------*/

@media (max-width: 1023px) {


    nav.primary-navigation {
        display: none;
    }

    nav.primary-navigation.show {
        display: block;
    }

    button.mobileswitch,
    div.mobileswitch {
         display: none;
    }

    button.mobileswitch.show,
    div.mobileswitch.show {
         display: block;
    }

}

/* --- DESKTOP            ------------------------------*/

@media screen and (min-width: 1024px) {


    button.mobileswitch,
    div.mobileswitch {
         display: none;
    }
    
    nav.primary-navigation {
        display: block;
    }

}



/* -------------------------------------------------------------------*/
/* -- Image Basics  ------------------------------------------------- */
/* -------------------------------------------------------------------*/


.wpt22featimage {
    width:                  var(--global-width-100);
    height:                 400px;

    background-repeat:      no-repeat;
    background-size:        cover;
    background-position:    center;

    background-color:       var(--dev-bg-05);
    border:                 var(--dev-border-05);

}

.wpt22featimage img.bigimage {

    height:                 100%;
    width:                  100%;

    object-fit:             cover;
    object-position:        center center;
   
    background-color:       var(--dev-bg-05);


}

.wpt22featimage-thumb {

    height:                 150px;
    width:                  150px;

    background-repeat:      no-repeat;
    background-size:        cover;
    background-position:    center;

    background-color:       var(--dev-bg-05);

}

/* -------------------------------------------------------------------*/
/* -- Content Basics Parent Theme------------------------------------ */
/* -------------------------------------------------------------------*/

h1 {
    color: var(--global-color-h1);
    border-left:    0.25em solid var(--global-color-cyan);
    padding-left:   0.4em;

    margin-top:     1rem;
    margin-bottom:  1rem;
}

a {
    color: var(--global-color-link);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

a:hover,
a:focus {
    color: var(--global-color-linkhov);
}

::selection {
    background-color: var(--global-color-orange);
    color: var(--global-color-black);
}

body {
    line-height: 1.5;
}

h1,
h2,
h3 {
    line-height: 1.15;
}