/*!
Theme Name:         Pepperleads
Theme URI:          https://www.pepperleads.nl
Description:        Custom thema voor Pepperleads, door Redduck
Version:            1.0.45
Author:             Redduck
Author URI:         https://www.redduck.nl
Tags: 				editor-style, featured-images,post-formats, translation-ready
License:            MIT License
License URI:        https://www.opensource.org/licenses/mit-license.php
Template:     		redduck-base
Text Domain:  		redduck-pepperleads
Coolors:			https://coolors.co/243883-f7af5f-ff0054-04a777-3f3f37
*/

/*
#243883 - Marian blue 
#f7af5f - Earth yellow 
#ff0054 - Folly
#04a777 - Jade
#3f3f37 - Black olive
*/



:root {
	--pepperblue : #243883;
	--pepperyellow : #f7af5f;
	--pepperred : #ff0054;
	--peppergreen : #04a777;
	--pepperblack : #3f3f37;
	
	--base-font-family : "Montserrat", serif;
	--header-font-family : var(--base-font-family);
	--header-bg: #FFF;
	--body-bg : #fffbf6;
	--text-color : var(-pepperblack);
	--text-color-light : var(-pepperblack);
	--title-color : var(--pepperblue);
	--link-color : var(--pepperblue);
	--link-color-hover : var(--pepperblue);
	--border-color : #EEE;
	--accent-color : var(--pepperyellow);
	--accent-color-light : var(--accent-color);
	--price-color : var(--peppergreen);
	--button-bg : var(--pepperblue);
	--button-text : #FFF;
	--input-bg: #FFF;
	--footer-button-bg : var(--pepperblue);
	--footer-button-text : #FFF;	
	--shop-button-bg : var(--pepperyellow);
	--shop-button-bg-hover : var(--pepperyellow);
	--shop-button-text : #000;	
	--border-radius : .25rem;
	--button-border-radius : .25rem;
	--header-height : 4rem;
	--footer-title-color: #FFF;
	--footer-text-color: #FFF;
	--footer-link-color: rgba(255,255,255,.9);
}

body {font-size:1.25rem;}
body.home .site-content,
body.home.sticky .site-content {padding-top:0;}

body.home .hero {background:var(--pepperred);height:70vh;height:70svh;width:100%;display:flex;align-items: center;justify-content: center;position: relative;}
body.home .hero .post-thumbnail,
body.home .hero .post-thumbnail img {position: absolute;width:100%;height:100%;top:0;left:0;margin: 0;}
body.home .hero .post-thumbnail img {object-fit: cover;}
body.home .hero .post-thumbnail::after {position: absolute;inset:0;content: "";background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 35%);}
body.home .hero .carousel {width:1170px;max-width:100%;}
body.home .hero .carousel .carousel-item {font-size:2rem;font-weight: 900; color:#FFF;text-shadow: 0 2px 0 rgba(0,0,0,.2);line-height: 1.25;padding:2rem;display:flex;align-items: center;justify-content: center;text-align: center;text-wrap:balance;}
body.home .hero .carousel .carousel-item-start {opacity:0;}


.site-header a.custom-logo-link {width:240px;}
#pepperleads {width:240px;height:40px;}
#pepperleads .st0 {fill:var(--pepperyellow);}
#pepperleads .st1 {fill:var(--pepperblue);}
#pepperleads .st2,
#pepperleads .st3 {fill:var(--pepperblue);}

body.home .site-main section,
body:not(.home) .site-main {padding-block:5rem;}

body.home section.inleiding {background:var(--pepperyellow);font-size:1.5rem;font-weight: 500;}
body.home section.aanpak {background:var(--pepperblue);}
body.home section.waarom {background:var(--body-bg);}
body.home section.pakket {background:var(--pepperred);}
body.home section.over {background:var(--pepperyellow);}
body.home section.contact {background:var(--body-bg);}

body.home section.inleiding,
body.home section.aanpak,
body.home section.pakket,
body.home section.over,
body.home section.inleiding h1,
body.home section.colored h2 {color:#FFF;text-shadow:0 1px 2px rgba(0,0,0,.2);}

body.home section.inleiding h1,
body.home h2.section-title {font-weight: 700;}

body.home section h2,
body.home section .extra,
body.home section footer {width:768px;max-width: 100%;}
body.home section .extra {margin-bottom:4rem;}

body.home section .bullet {padding:1rem;margin-bottom:2rem;border-left:3px solid transparent;}
body.home section .bullet .icon {font-size:3.5rem;}

body.home section.aanpak .icon {color:var(--pepperyellow);}
body.home section.aanpak .bullet {border-color: var(--pepperyellow);}
body.home section.aanpak .title {font-size:1.25rem;color:var(--pepperyellow);}
body.home section.aanpak footer {margin-top:4rem;}

body.home section.waarom .section-title {color:var(--pepperyellow);}
body.home section.waarom .icon {color:var(--pepperblue);}
body.home section.waarom .bullet .text {font-size:1.25rem;}
body.home section.waarom .bullet {border-color: var(--pepperblue);}


body.home section.pakket .post-thumbnail {position: absolute;top:0;right:0;bottom:0;left:0;margin: 0;}
body.home section.pakket .post-thumbnail img {position: absolute;width:100%;height:100%;top:0;left:0;object-fit: cover;opacity:.1;}

body.home section.pakket ul {list-style: none;padding-left: 0;}
body.home section.pakket ul li {padding-left: 1.5em;margin-bottom: 0.5em;position: relative;}

body.home section.pakket ul li::before {content: '';position: absolute;left: 0;top: 6px;width: 1em;height: 1em;background-repeat: no-repeat;background-image: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='check-circle' class='svg-inline--fa fa-check-circle fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23ffffff' d='M28.9,9.5c.3-.6.4-1.3.2-1.9-.2-.8-.7-1.4-1.3-2,.5-.8,1.1-1.5,1.7-2.1.7-.7.7-1.8,0-2.5-.7-.7-1.7-.6-2.4,0-.9.9-1.7,1.9-2.3,2.9-.1.2-.2.2-.4.2-.4,0-.8,0-1.2.1-1.2.3-2.1.9-2.5,2.2,0,0-.1.2-.2.2-2.7,1.1-4.3,3.5-4.4,6.4,0,1.6,0,3.2-.2,4.8-.4,5.3-4.7,9.4-10,9.7-1.2,0-2.4,0-3.6.1-.2,0-.4.2-.4.3,0,.1,0,.4.2.5,2,1.8,4.3,2.8,7,2.9,1.8,0,3.6-.3,5.3-.8,5.2-1.5,9.2-4.6,12-9.2,1-1.8,1.9-3.7,2.7-5.5.9-2,.8-4-.2-6,0-.2,0-.3,0-.5Z'></path></svg>");}

body.home section.freelance .post-thumbnail {position: absolute;top:0;right:0;bottom:0;left:0;margin: 0;}
body.home section.freelance .post-thumbnail img {position: absolute;width:100%;height:100%;top:0;left:0;object-fit: cover;opacity:.1;}

body.home section.reviews {background:var(--pepperblue);}
body.home section.reviews h3 {text-align:center;color:var(--pepperyellow);font-weight:600;margin-bottom: 2rem;}
body.home section .review {border-radius: var(--border-radius);background:#FFF;padding:1.5rem;box-shadow: 0 2px 5px rgba(0,0,0,.2);height: 100%;display: flex;flex-direction: column;}
body.home section .review .text {padding-bottom:2rem;}
body.home section .review .author {margin-top: auto;opacity: .8;}
body.home section .review .author .name {display: grid;grid-template-columns:1.5rem auto;}
body.home section .review .author .name::before {content:"—";width:3rem;}
body.home section .review .author .business {opacity: .5;font-style: italic;font-size: .85em;padding-left:1.5rem;}


.site-footer {padding-block:5rem 2rem;background:var(--pepperblue);}
.site-footer h3 {font-size:2rem;}
.site-info {font-size:1rem;}

.wp-block-file {border-top:1px solid var(--pepperyellow);border-bottom:1px solid var(--pepperyellow);padding-block:.25rem;}


body.home section.over .col-image img {aspect-ratio:1 / 1;object-fit: cover;border-radius: 9999rem;width:100%;max-width:20rem;margin: 0 auto;display: block;} 

#homeCarousel {--f-carousel-spacing:.75rem;--f-carousel-slide-width:80%;--f-progress-color: var(--button-bg);}
#homeCarousel .f-carousel__slide img {object-fit: cover;aspect-ratio: 16 / 9;inline-size:100%;}


@media screen and (min-width:768px) {
	body.home section .bullet {height: 100%;padding-block:0;}
	#homeCarousel {--f-carousel-slide-width:50%;}
}

@media screen and (min-width:992px) {	
	body.home .site-header {position: fixed;left:0;width:100%;z-index: 99;}
	body.home:not(.sticky) .site-header {background:rgba(255,255,255,0);}
	body.home:not(.sticky) .site-header .main-navigation {padding-block:.5rem;}
	body.home:not(.sticky) .site-header a.custom-logo-link {width:240px;}
	body.home:not(.sticky) #pepperleads {width:300px;height:50px;}
	body.home:not(.sticky) #pepperleads .st0,
	body.home:not(.sticky) #pepperleads .st1,
	body.home:not(.sticky) #pepperleads .st2,
	body.home:not(.sticky) #pepperleads .st3 {fill: #FFF;}
	body.home .hero .carousel .carousel-item {font-size:3rem;}
	
	.site-header li a {text-transform:uppercase;font-weight: 700;}
	.site-header li#menu-item-47 a {background:var(--pepperyellow);color:#FFF;font-size: 1rem;}
	.site-header li#menu-item-47 a::after {display:none;}
	body.home:not(.sticky) .site-header li#menu-item-47 a {border-radius: var(--button-border-radius);}

	body.home .site-main section {padding-block:7rem;}
	body.home section.inleiding {text-align: center;}
	
	body.home section.pakket .post-thumbnail {right:50%;}
	body.home section.pakket .col-text {transform: translateX(3rem)}
	body.home section.pakket .post-thumbnail img,
	body.home section.freelance .post-thumbnail img {opacity: .9;}

	body.home section.freelance .post-thumbnail {left:50%;}
	body.home section.freelance .post-thumbnail img {opacity: .9;}
	body.home section.freelance .col-text {transform: translateX(-3rem)}
	
	
	
	body.home section.over .col-image {order:2;} 
	#homeCarousel {--f-carousel-slide-width:33.33%;}
	
}

@media screen and (min-width:1200px) {
	#homeCarousel {--f-carousel-slide-width:25%;}
}

@media screen and (min-width:1400px) {
	body.home .hero .carousel .carousel-item {font-size:4rem;}
}