@charset "UTF-8";

/*
Theme Name: WP WIZ Theme 22
Theme URI: https://webinzicht.nl/wpthemes/wpwebinzicht22/
Author: Web Inzicht - (digital) design & communication
Author URI: https://webinzicht.nl/
Description: WP WIZ Theme 22 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 Theme 22 is required for your website to function normally. Please do not remove this theme. Update if required.  
Requires at least: 5.3
Tested up to: 5.7
Requires PHP: 5.6
Version: 1.0.0.104
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wpwebinzicht22
Tags: One-column, 3 menus, custom-logo, featured-images, footer-widgets, translation-ready, Responsive-ready. Comments are not supported. 

WP Theme 22, (C) 2022 web inzicht.nl
WP Theme 22 is distributed under the terms of the GNU GPL.
*/

/* -------------------------------------------------------------------*/
/* -- 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:     'OpenSansRegular', serif;
    --global--font-secondary:   'OpenSansRegular', serif;
    
    
    /* -- COLORS -- */
    
    --global-color-body:        #88A47C;   
    --global-color-pagediv:     #E6E2C3;
    
    --global-color-h1:          #1C315E;
    --global-color-h2:          #227C70;
    
    --global-color-link:        #227C70;
    --global-color-hovlink:     #88A47C;
    --global-color-vislink:     #0000ff;
    
    --global-color-button:      #1C315E;
    --global-color-buthov:      #88A47C;
    --global-color-buttxt:      #ffffff;
    
    
    /* -- MEASURES -- */
    
    --global-width-max:         100vw;
    --global-width-100:         100%;       
    --global-height-max:        100vh;
    --global-height-100:        100%;        
    
    --global-maxw1-pagediv:      100%;
    --global-maxw2-pagediv:      1600px;
    --global-width-pagediv:      calc(var(--global-maxw2-pagediv) - 4rem);
    
    
    --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 lightgrey;
    --dev-bg-01:                red;
    --dev-bg-02:                blue;
    --dev-bg-03:                green;
    --dev-bg-04:                gold;
    --dev-bg-05:                lightgrey;
    
}
    
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;

}

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

body {
/*  all:                    initial; */ /* THIS BREAKS THE PAGE EDITOR H1 field!! */ 
    font-family:            var(--global--font-primary);
    margin:                 0;
    padding:                0;
}

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;
    color:  var(--global-color-buttxt);
    background-color:  var(--global-color-button);
}


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


body {

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

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

}


div.pagediv {

    width:                  var(--global-width-max);
    max-width:              var(--global-width-100);
    
    background-color:       var(--global-color-pagediv);

}


/* --- NESTED (pagediv) BASIC BLOCKS ----------------------------------*/


/* margined width */
/* header.mainheader {

    max-width:              var(--global-width-pagediv);
    margin:                 auto;

    display:                grid;
    grid-template-columns:  auto auto;
    column-gap:             var(--global-vpadding);
    border:                 var(--dev-border-05);

} */

/* full width */
/* div.bigimage {

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

} */

/* margined width */
/* main.site-main {
    max-width:              var(--global-width-pagediv);
    margin:                 auto;
    border:                 var(--dev-border-05);

} */


/* margined width */
/* div.footerblock {

    max-width:              var(--global-width-pagediv);
    margin:                 auto;
    border:                 var(--dev-border-05);

} */


/* --- NESTED ( pagediv > main ) BASIC BLOCKS -------------------------*/

/* main header.page-header, main header.woocommerce-products-header {

    padding-left:           var(--global-hpadding);
    padding-right:          var(--global-hpadding);

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

}


main article.thearticle {

    padding-left:           var(--global-hpadding);
    padding-right:          var(--global-hpadding);

} */

/* --- NESTED ( pagediv > main > article ) BASIC BLOCKS ---------------*/

    /* -- LISTED ITEMS --  */

/* 
main article > article.post-list-block {

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


}

main article section {

    display:                flex;
    flex-direction:         row;
    flex-wrap:              wrap;

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

}

main article section article.post-list-block {

    width:                  100%;
    border:                 var(--dev-border-05);

}

main article section article.post-list-block.product {

    width:                  calc(100% / 4 - 4rem);
    border:                 var(--dev-border-05);

}

main article section article.post-list-block.product li.product {

    width:                  100%;
} */





    /* -- SINGLE ITEMS --  */






/* -------------------------------------------------------------------*/
/* -- 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:                  100px;
    height:                 100px;

    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 screen and (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);

}