/*!
Theme Name:         Wouter Monden
Theme URI:          https://www.woutermonden.nl
Description:        Custom thema voor Wouter Monden, door Redduck
Version:            1.0.23
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-woutermonden
Coolors:			https://coolors.co/3c99c3-27191f-b0b2c3-2b3440-384c4c
*/





:root {
	--wouterblue: #3c99c3;
	--wouterblack: #27191F;
	--woutergrey: #B0B2C3;
	--woutermetal: #2B3440;
	--woutergreen: #384C4C;	
	--base-font-family : 'Poppins', sans-serif;
	--header-font-family : var(--base-font-family);
	--body-bg : linear-gradient(128deg,rgba(253, 253, 253, 1) 0%, rgba(245, 253, 255, 1) 100%);;
	--text-color : #27191F;
	--text-color-light : #888;
	--title-color : #2B3440;
	--link-color : #2380C3;
	--link-color-hover : #2B3440;
	--border-color : #B0B2C3;
	--accent-color : var(--wouterblue);
	--accent-color-light : var(--accent-color);
	--price-color : #00AB2E;
	--button-bg : var(--wouterblue);
	--button-text : #FFF;
	--input-bg: #FFF;
	--footer-button-bg : #FFF;
	--footer-button-text : #333;	
	--shop-button-bg : #FFCE00;
	--shop-button-bg-hover : #FFAE00;
	--shop-button-text : #000;	
	--border-radius : .25rem;
	--button-border-radius : .25rem;
	--header-height : 4rem;
	--header-bg: #2B3440;
	--header-color: #FFF;
	--footer-title-color: var(--title-color);
	--footer-text-color: var(--text-color);
	--footer-link-color: var(--link-color);
}

h1, h2, h3 {text-transform: uppercase;letter-spacing:-.025em;font-weight:600;}


.hero {height:90vh;height:90svh;position: relative;background:#2B3440;}
.hero .post-thumbnail,
.hero .post-thumbnail img {position: absolute;top:0;left:0;width:100%;height: 100%;object-fit: cover;}
.hero header {display: none;}

.site-header {transition: .2s;border-bottom:1px solid rgba(255,255,255,.1);}
.site-header .container {max-width:100%;}
body.home:not(.sticky) .site-header {background:transparent;border-color:transparent;}
.site-branding h1 {font-weight:800;text-transform: uppercase;letter-spacing: 1px;}
.main-navigation li a {font-weight:600;text-transform: uppercase;letter-spacing: -1px;font-size:1rem;}

.site-content,
body.sticky .site-content {padding-block:10rem;}
body.home .site-content {padding-top:0;}

body.home section {padding-block:7rem;}
body.home section .section-heading {text-align: center;margin-bottom:3rem;}
body.home section .section-heading a {text-decoration: none;color:inherit;}

body.home section.playlist {background:var(--wouterblue);color:#FFF;text-shadow:1px 1px 0 rgba(0,0,0,.2)}
body.home section.playlist .section-heading a {color:#FFF;}

body.home section.column {background:var(--woutermetal);color:#FFF;text-shadow:1px 1px 0 rgba(0,0,0,.2)}
body.home section.column .section-heading,
body.home section.podcast .section-heading {text-align: left;margin-bottom:.5rem;}
body.home section.column .section-heading a,
body.home section.podcast .section-heading a {color:#FFF;}
body.home .section-heading a:hover {text-decoration: underline;}


.videorow .video,
.videorow a.image,
.videorow a.image img {aspect-ratio:16 / 9;position: relative;background-color:#cccccc;background-repeat: no-repeat;background-position: center; object-fit: cover;} 
.videorow .video iframe {position: absolute;top:0;left:0;width: 100%;height: 100%;}
.videorow h3 a {font-size:1rem;color:var(--text-color);text-decoration: none;}
.videorow.video > * {margin-block:1rem;}

.giglist {list-style: none;margin: 0 auto;padding: 0;width:min(768px, 100%);border-radius: var(--border-radius);overflow: hidden;border:1px solid #EEE;}
.giglist a {text-decoration: none;}
.giglist li {padding:1rem;line-height: 1.5;}
.giglist li.gig {display:grid;grid-template-columns:14rem auto 5rem;gap:1rem;background:rgba(0,0,0,.01);}
.giglist li.gig:nth-child(odd) {background:rgba(0,0,0,.02);}
.giglist li.gig .day {text-transform: capitalize;font-size: .925rem;}
.giglist li.gig .date {font-weight: 600;}
.giglist li.gig .venue a {font-weight:600;text-transform: uppercase;letter-spacing:-1px;font-size: 1.25rem;}
.giglist li.gig .venue a:hover {text-decoration: underline;}
.giglist li.gig .tickets {align-items: flex-end;}
.giglist li.gig .remarks {grid-column: 1 / 4;grid-row: 2 / 3;padding:.67rem;font-weight:600;position: relative;width: fit-content;background: #FFF;}
.giglist li.gig .remarks::before {width:3px;height:100%;content: "";background:var(--wouterblue);position: absolute;left:0;}
.giglist li.gig > * {display:flex;justify-content:center;flex-direction: column;}
.giglist .button,
div.readmore .button {background:var(--woutermetal);width: fit-content;}

div.mailing {border:3px solid var(--wouterblue);padding:1.5rem 1.5rem .5rem;border-radius:var(--border-radius);font-size: 1.125rem;margin-block:2rem;}
div.mailing a {text-decoration:underline;}
div.mailing strong {font-weight:600;text-transform: uppercase;letter-spacing: -1px;}
div.readmore {text-align: center;}

body.home .giglist {border-color:rgba(255,255,255,.1);}
body.home .giglist li.gig:nth-child(odd) {background:rgba(255,255,255,.02);}
body.home .giglist a,
body.home div.mailing a {color:#FFF;}
body.home .giglist li.gig .remarks::before {background:var(--woutermetal);}
body.home .giglist li.gig .remarks {background:rgba(255,255,255,.1);}
body.home div.mailing {background:rgba(255,255,255,.1);}

.collinks {display:flex;gap:.5rem;align-items: center;}
.collinks a {display:flex;width:2.5rem;height:2.5rem;align-items: center;justify-content: center;color:#FFF;text-decoration: none;font-size: 1.5rem;}

body:not(.home) .collinks {margin-block:.5rem 4rem;padding-top:.5rem;border-top:1px solid var(--border-color);}
body:not(.home) .collinks a.youtube {color:#F00;}
body:not(.home) .collinks a.spotify {color:#1DB954;}
body:not(.home) .collinks a.itunes {color:#d60017;}
body:not(.home) .collinks a.kink svg {width:1.25rem;fill:#000;}

body:not(.home) .videorow h3 {margin-block:1rem 0;font-size:1rem;}
body:not(.home) .videorow .subtitle {min-height: 3.25rem;}
body:not(.home) .videorow .date {opacity: .5;}

body:not(.home) .videorow.video h3 {margin-block:.5rem 4rem;}

.podcastlist {list-style: none;margin: 0;padding: 0;display:grid;gap:2rem;}
.podcastlist a {text-decoration: none;color:var(--text-color);}
.podcastlist a .details .guest {text-transform: uppercase;font-weight: 600;color:var(--wouterblue);letter-spacing: -.5px;}
.podcastlist a .details .date {opacity: .5;font-size:.825rem;margin-top:auto;}

body:not(.home) .podcastlist {grid-template-columns: repeat(3, 1fr);margin-block:3rem;}
body:not(.home) .podcastlist a .thumbnail {margin-bottom:.5rem;}
body:not(.home) .podcastlist a,
body:not(.home) .podcastlist a .details {display:flex;flex-direction: column;height: 100%;}
body:not(.home) .podcastlist a .details .title {margin-bottom:1rem;}

section.podcast {background:#000;color:#FFF;text-shadow:1px 1px 0 rgba(0,0,0,.2);position: relative;background-position: center;background-size:auto 100%;background-repeat:no-repeat;}
section.podcast .container {z-index: 1;position: relative;}
section.podcast .podcastlist {grid-template-columns:100%;}
section.podcast .podcastlist a.link {display:grid;grid-template-columns:5rem 1fr;gap:1rem;align-items: center;padding:1rem;background:var(--wouterblue);color:#FFF;border-radius: var(--border-radius);outline:2px solid transparent;transition: .2s;}
section.podcast .podcastlist a.link .guest {color:#FFF;}
section.podcast .podcastlist a.link:hover {outline:2px solid #FFF;}

.page-id-16 .site-content article,
.page-id-18 .entry-content,
.page-id-20 .entry-content,
.page-id-24 .entry-content,
.page-id-26 .entry-content,
.page-id-18 .entry-header,
.page-id-20 .entry-header,
.page-id-24 .entry-header,
.page-id-26 .entry-header,
.page-id-22 .entry-content .wp-block-group,
.page-id-938 .site-content article,
div.mailing {width:min(768px, 100%);}

.page-id-16 .site-content article,
.page-id-18 .entry-content,
.page-id-20 .entry-content,
.page-id-24 .entry-content,
.page-id-26 .entry-content,
.page-id-18 .entry-header,
.page-id-20 .entry-header,
.page-id-24 .entry-header,
.page-id-26 .entry-header,
.page-id-938 .site-content article,
div.mailing {margin-inline:auto;}

.page-id-16 .entry-content,
.page-id-18 .entry-content,
.page-id-20 .entry-content,
.page-id-24 .entry-content,
.page-id-26 .entry-content {margin-bottom:4rem;}

body.home section.newsletter {text-align: center;}
body.home section.newsletter .section-heading {margin-bottom:.5rem;}

.site-footer {position: absolute;left:0;width:100%;bottom:0;}
.site-info .left ul.footer-menu {align-items: center;gap:1rem;}
.site-info .left ul.footer-menu li a {color:#000;transition:.2s;display: block;}
.site-info .left ul.footer-menu li:hover a {transform: scale(1.5);}
.site-info .left ul.footer-menu li.instagram a {color:var(--instagram);}
.site-info .left ul.footer-menu li.facebook a {color:var(--facebook);}
.site-info .left ul.footer-menu li.youtube a {color:#F00;}
.site-info .left ul.footer-menu li.linkedin a {color:var(--linkedin);}
.site-info .left ul.footer-menu li.bluesky a {color:#0085ff;font-size:.875rem;}

.popup {position: fixed;z-index: 999;background:#FFF;box-shadow:0 0 4rem rgba(0,0,0,.1);right:2rem;bottom:-3rem;padding:2.5rem 2rem 5rem;width:400px;border:1px solid #F1F1F1;transition: .2s;border-radius:var(--border-radius) var(--border-radius) 0 0;}
.popup p {font-size:1.25rem;}
.popup .topclose {position: absolute;top:0;right:0;line-height: 1;padding:.5rem;}
.popup .topclose:hover {color:red;cursor: pointer;}
.popup iframe {height:52px;}
body.sticky .popup,
.popup.clicked {bottom:-30rem;}

@media screen and (max-width:991px) {
	body.home section.podcast {padding-bottom:20rem;background-position: center bottom;background-size:auto 20rem}
	body.home .podcastlist {gap:1rem;margin-top:3rem;}
	.site-header .main-navigation ul li a {font-size: 1.375rem;}
}

@media screen and (max-width:768px) {
	body, html {font-size:17px;}
	.giglist li.gig {gap:0;padding-inline:1rem;}
	.giglist li.gig:not(:last-child) {border-bottom:1px solid #EEE;}
	body.home .giglist  li.gig:not(:last-child) {border-color:rgba(255,255,255,.1);}
	.giglist li.gig .playdate {grid-column: 1 / 3;grid-row:1 / 2;flex-direction: row;gap:.25rem;justify-content: flex-start;font-weight: 600;}
	.giglist li.gig .playdate * {font-size:1rem;}
	.giglist li.gig .tickets {grid-column: 1 / 4;grid-row:3 / 4;align-items: flex-start;padding-top:.5rem;}
	.giglist li.gig .tickets .button {padding:.67rem;font-size:.925rem;}
	.giglist li.gig .location {grid-column: 1 / 4;grid-row:2 / 3;}
	.giglist li.gig .remarks {grid-column: 1 / 4;grid-row:4 / 5;}
	body:not(.home) .podcastlist {grid-template-columns: repeat(2, 1fr);}
}

@media screen and (max-width:500px) {
	.popup {width: 100%;right:0;}
	body:not(.home) .podcastlist {grid-template-columns: 1fr;}
}



@media screen and (min-width:992px) {
	body:not(.sticky) .site-header {position:absolute;left:0;width: 100%;}
	body.home:not(.sticky) .site-branding {display:none;}
	.hero .post-thumbnail {width:50%;}
	.hero header {position: absolute;top:0;right:0;height:100%;width:50%;display: flex;padding:3rem;align-items: center;justify-content: center;}
	.hero header h2 {color:#FFF;text-transform: uppercase;font-size:5rem;font-weight: 800;line-height: 1;padding-left:2rem;position: relative;letter-spacing:-.025em;text-shadow:1px 1px 0 #000;}
	.hero header h2::before {display:block;width:10px;height: 100%;content: "";background:#FFF;position: absolute;left: 0;box-shadow:1px 1px 0 #000;}
	body:not(.home) .podcastlist {display:grid;gap:2rem;grid-template-columns: repeat(4, 1fr)}

	li.podcast:nth-child(2n+1), li.gig:nth-child(2n+1), div.video:nth-child(2n+1) {animation-delay: .05s;}
	li.podcast:nth-child(3n+1), li.gig:nth-child(3n+1), div.video:nth-child(3n+1) {animation-delay: .1s;}
	
	
}


@media screen and (min-width:1140px) {
	.hero header h2 {font-size:6rem;}
}

@media screen and (min-width:1400px) {
	.hero header h2 {font-size:8rem;}
	body:not(.home) .podcastlist {grid-template-columns: repeat(6, 1fr)}
}