/*
Theme Name:   Ikbloei
Description:  Ikbloei child theme
Author:       Pieter
Template:     twentytwentyone
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
*/

/* Font includes */
@font-face {
    font-family: Noteworthy;
    src: url(./fonts/Noteworthy.ttf);
}


body .entry-content, body .entry-summary {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 15px;
    padding: 0 10px;
        
    @media (min-width: 992px) {
        font-size: 16px;
        padding: 0;
    }
}

body .entry-content p, body .entry-summary p {
    line-height: 26px;
}

body.home .entry-content, body.home .entry-summary {
    color: #7b8770;
}


/*** Base ***/
body.has-main-navigation {
    background: #fff;
    background-color: #fff;
    color: #77421b;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 16px;
}

body h1,body h2, body h3,h4,h5,h6 {
    color: #7b8770 !important;
    font-family: 'Noteworthy', sans-serif;
}

body h3 {
    font-size: 24px;
}

.entry-content {
    margin: 0 auto;
    max-width: 900px;
}

/*** Header ***/
header .site-logo {
    margin: 0;
}

.wp-custom-logo header.site-header {
    align-items: end;
    height: 60px;
    margin-bottom: 20px;
    padding-top: 0;
    padding-bottom: 0;    
  

    @media (min-width: 992px) {
        height: auto;
        margin-bottom: 30px;
    }

}

header .primary-navigation a, header .primary-navigation a:link {
    color: #7b8770;
    font-size: 16px;
}

.site .site-main {
    padding-top: 0;
    min-height: calc(100vh - 100px);
    
    @media (min-width: 992px) {
        min-height: calc(100vh - 300px);
    }


}

.singular .site-main .has-post-thumbnail .entry-header.homepage-hero {
    margin-top: 0;
    max-width: 100%;
    padding-bottom: 0;
  
    @media (min-width: 992px) {
        margin-top: -25px;
    }
}

.site-main .homepage-hero .post-thumbnail {
    max-width: 100%;
    width: auto;
}

.site-main .homepage-hero .post-thumbnail img {
    width: auto !important;
    margin-top: 0;
    
    @media (min-width: 992px) {

    }
}

.site-main .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator) {
    max-width: 900px;
}


/*** content page ***/
body.singular article .entry-header {
    border: none;
    padding: 0 0 20px 0;
    margin: 0;
}

body.singular article h1.entry-title {
   font-size: 34px;
}

body.singular article h3.wp-block-heading {
    margin-bottom: 0;
}

body.singular article h3.wp-block-heading + p {
    margin-top: 0;
}


.page-sub-menu-holder ul {
    align-items: center;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-sub-menu-holder ul li {
    display: inline;
    background: #a1c8a9;
    border-radius: 50%;
    margin-right: 25px;
    height: 180px;    
    width: 180px;
}

.page-sub-menu-holder ul li:first-child {
    background: #a7b9a1;
}

.page-sub-menu-holder ul li:nth-child(2) {
    background: #58704b
}

.page-sub-menu-holder ul li:nth-child(3) {
    background: #aebea0;
}

.page-sub-menu-holder ul li:nth-child(4) {
    background: #aab89f;
}

.page-sub-menu-holder ul li.current_page_item {
    background: #5d7348;
}


/* Leeromgeving */
.page-sub-menu-holder ul.sub-menu-list--de-leeromgeving li {
    background: #c9ac9d
}

.page-sub-menu-holder ul.sub-menu-list--de-leeromgeving li:nth-child(2) {
    background: #b48770
}

.page-sub-menu-holder ul.sub-menu-list--de-leeromgeving li:nth-child(3) {
    background: #cc825d
}

.page-sub-menu-holder ul.sub-menu-list--de-leeromgeving li:nth-child(4) {
    background: #dd9875
}

/* Praktische informatie */
.page-sub-menu-holder ul.sub-menu-list--praktische-informatie li {
    background: #af7b51;
}

.page-sub-menu-holder ul.sub-menu-list--praktische-informatie li:nth-child(2) {
    background: #aa7040
}

.page-sub-menu-holder ul.sub-menu-list--praktische-informatie li:nth-child(3) {
    background: #b1703c
}

.page-sub-menu-holder ul.sub-menu-list--praktische-informatie li:nth-child(4) {
    background: #ac876a
}



.page-sub-menu-holder ul li a, .page-sub-menu-holder ul li a:link, .page-sub-menu-holder ul li a:focus, 
.page-sub-menu-holder ul li a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
    align-items: center;
    border-radius: 50%;
    color: #fff;
    display: flex;
    font-size: 14px;
    height: 180px;    
    justify-content: center;
    background: transparent;
    padding: 40px;    
    text-align: center;
    text-decoration: none;
    width: 180px;
}

@media only screen and (max-width: 481px) {
    .page-sub-menu-holder ul {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 15px;
        grid-row-gap: 15px;
    }
    
    .page-sub-menu-holder ul li {
        display: inline-block;
        width: auto;
        height: 100%;
        min-height: 55px;
        border-radius: 8px;
        margin-right: 0;
    }

    .page-sub-menu-holder ul li a, .page-sub-menu-holder ul li a:link, .page-sub-menu-holder ul li a:focus, 
    .page-sub-menu-holder ul li a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
        align-items: center;
        display: flex;
        width: auto;
        height: 100%;
        padding: 0;
        border-radius: 8px;
        font-size: 16px;
        line-height: 18px;

    }
}

.page-title-holder {
    position: relative;
}

.page-title-holder .back-link {
    color: #77421b;
    left: -100px;
    position: absolute;   
    text-decoration: none; 

    @media only screen and (max-width: 481px) {
        display: none;
    }
    
}

/*** Blog overview page ***/
ul.wp-block-latest-posts__list.wp-block-latest-posts li a.wp-block-latest-posts__post-title {
    font-weight: bold;
    text-decoration: none;
    font-size: 18px;
    
}

ul.wp-block-latest-posts__list.wp-block-latest-posts li .wp-block-latest-posts__post-excerpt {
    font-size: 16px;
    margin: 0;
}


/*** Kernwaarden list ***/
ul.kernwaarden {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    
    @media (min-width: 992px) {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

ul.kernwaarden li {
    align-items: center;
    background: #899483;
    border-radius: 50%;
    color: #fff;
    display: flex;
    justify-content: center;    
    width: 180px;
    height: 180px;
    padding: 10px;
    text-align: center;

    @media only screen and (max-width: 481px) {
        grid-template-columns: 1fr 1fr;
        width: 150px;
        height: 150px;
        font-size: 14px;
    }


}


ul.kernwaarden li:nth-child(1) { background: #727c6b; }
ul.kernwaarden li:nth-child(2) { background: #899483; }
ul.kernwaarden li:nth-child(3) { background: #c9ac9d; }
ul.kernwaarden li:nth-child(4) { background: #bf927b; }
ul.kernwaarden li:nth-child(5) { background: #af7b51; }
ul.kernwaarden li:nth-child(6) { background: #77421b; }
ul.kernwaarden li:nth-child(7) { background: #889484; }
ul.kernwaarden li:nth-child(8) { background: #727c6b; }


/*** Contact form ***/
.wpcf7-form p {
    margin-bottom: 15px;
}

input[type=text], input[type=email], input[type=url], input[type=password], input[type=search], input[type=number], input[type=tel], input[type=date], input[type=month], input[type=week], input[type=time], input[type=datetime], input[type=datetime-local], input[type=color], .site textarea
{
    border: 1px solid #58704b !important;
}

input[type=text]:focus, input[type=email]:focus, input[type=number]:focus, input[type=tel]:focus, .site textarea {
    outline: none !important;
}

.wpcf7-form label {
    font-size: 16px;
}


.wpcf7-form input[type=submit] {
    background: #58704b !important;
    border: none;
    color: #fff;
}

.wpcf7-form input[type=submit]:hover {
    background: #aab89f !important;
    color: #fff;
    border: none;
}




/*** Footer ***/
footer.site-footer {
    background: #a78661;
    max-width: 100%;
    padding: 0;
    position: relative;
}

footer.site-footer.site-footer--article {
    background: #a6bcac;
}

footer.site-footer.site-footer--article .footer-content--widget {
    background: #727c6b;
}


footer.site-footer.site-footer--article.site-footer--over-bloei {
    background: #727c6b;
}

footer.site-footer.site-footer--article.site-footer--over-bloei .footer-content--widget {
    background: #889484;
}

footer.site-footer.site-footer--article.site-footer--de-leeromgeving {
    background: #c9ac9d;
}

footer.site-footer.site-footer--article.site-footer--de-leeromgeving .footer-content--widget {
    background: #af7b51;
}


footer.site-footer.site-footer--article.site-footer--praktische-informatie {
    background: #af7b51;
}

footer.site-footer.site-footer--article.site-footer--praktische-informatie  .footer-content--widget {
    background: #c9ac9d;
}



footer.site-footer.site-footer--article.site-footer--contact {
    background: #889484;
}

footer.site-footer.site-footer--article.site-footer--contact .footer-content--widget {
    background: #727c6b;
}



footer.site-footer.site-footer--article.site-footer--helpende-handen {
    background: #727c6b;
}

footer.site-footer.site-footer--article.site-footer--helpende-handen .footer-content--widget {
    background: #889484;
}


footer.site-footer.site-footer--article.site-footer--nieuws {
    background: #bf927b;
}

footer.site-footer.site-footer--article.site-footer--nieuws .footer-content--widget {
    background: #af7b51;
}


footer.site-footer .footer-content {
    max-width: 1240px;
    margin: 0 auto;
    padding: 20px 0;
    position: relative;
}


footer.site-footer .footer-content.footer-content--widget {
    max-width: 100%;
}


.widget-footer-content {
    max-width: 1240px;
    margin: 0 auto;
}

footer.site-footer.site-footer--article .footer-content--quote {
    padding: 15px 10px;
    
    @media (min-width: 992px) {
        padding: 50px 0 100px;
    }
}




footer.site-footer ul {
    align-items: center;
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin-top: 0;
}

footer.site-footer ul li {
    align-items: center;
    color: #fff;
    display: flex;
    flex: 1 1 auto;
    font-size: 14px;
    justify-content: space-between;
    padding: 0;  
}

footer.site-footer ul li:not(:last-child):after {
    align-items: center;
    content: "|";
    display: flex;
    margin: auto;
}



@media only screen and (max-width: 481px) {
    footer.site-footer ul {
        display: block;
        padding-left: 20px;
    }

    footer.site-footer ul li {
        display: block;
        text-align: left;
    }

    footer.site-footer ul li:not(:last-child):after {
        content: "";
        display: none;
    }
}

footer.site-footer ul li a, footer.site-footer ul li a:link {
    color: #fff;
}

footer.site-footer ul li a, footer.site-footer ul li a:focus,
footer.site-footer ul li a, footer.site-footer ul li a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
    outline: none;
    background: transparent;
}

footer.site-footer.site-footer--article .footer-content {
    color: #fff;    
}

footer.site-footer.site-footer--article .footer-content .quote-holder {
    position: relative;
}


footer.site-footer.site-footer--article .footer-content .quote-holder blockquote {
    font-size: 18px;
    font-style: italic;
    font-weight: bold;
    line-height: 22px;
    margin: 0;
    max-width: 1000px;
    padding: 0;
    z-index: 1;
  

    @media (min-width: 992px) {
        font-size: 45px;
        line-height: 50px;
    }
}

footer.site-footer.site-footer--article .footer-content .quote-holder blockquote.alt-quote {
    display: none;
    font-family: 'Noteworthy', sans-serif;
    font-size: 50px;
    margin: -50px 0 0 100px;
    opacity: 0.4;
    position: absolute;
    z-index: 0;

    @media only screen and (max-width: 481px) {
        display: none;
    }   
}

footer.site-footer.site-footer--article .footer-content blockquote:before {
    content: '';
}

footer.site-footer.site-footer--article .footer-content .post-thumbnail{
    display: none;
    
    margin: 0;
    max-width: 310px;
    padding: 0;
    position: absolute;
    right: -150px;
    top: -300px;
    width: auto;

    @media (min-width: 992px) {
        display: inline;
    }
}


footer.site-footer.site-footer--article .footer-content .post-thumbnail .wp-post-image {
    margin: 0;
    padding: 0;
    width: auto;
}