@charset "UTF-8";

/*
Theme Name: WP WIZ Theme 2025
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.  
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
Version: 1.1.022
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: 'OpenSansRegular';
  font-weight: 300;
  src:  url('assets/fonts/OpenSans-Regular.woff2') format('woff2'),
        url('assets/fonts/OpenSans-Regular.woff') format('woff');
}


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

    /* -- FONTS -- */ 

    --global-font-primary:     Garamond, serif;
    --global-font-secondary:   Verdana, sans-serif;

    --global-font-size-basic:  16px; 
   
    
    /* -- COLORS -- */
    
    --global-color-orange:      #f18721;
    --global-color-purple:      #4826c6;
    --global-color-darkblue:    #000415;
    --global-color-black:       #000000;
    --global-color-white:       #FFFFFF;


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

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

    /* -- TYPOGRAPHIC ELEMENTS -- */
    --global-color-h1:          var(--global-color-purple);
    
   
    /* -- MEASURES -- */
    
    --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));
    
    --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;
    
}
    
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 --------------------------------------------------------- */
/* -------------------------------------------------------------------*/


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);
}

body, div, header, main, article, section, ul, li {
    box-sizing:             border-box;
}

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);

}


/* -------------------------------------------------------------------*/
/* -- 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;

    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 ----------------*/
/* -------------------------------------------------------------------*/

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

@media (max-width: 1023px) {


    nav.primary-navigation {
        display: none;
    }

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

    div.mobileswitch {
         display: none;
    }

    div.mobileswitch.show {
         display: block;
    }

}


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

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


    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(--global-color-h1);

}

.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);

}