/*!
Theme Name:         cor10staal
Theme URI:          https://www.cor10staal.nl
Description:        Custom thema voor cor10staal.nl, door Redduck
Version:            1.0.16
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-cor10
*/

:root {
	--cor10 : #8c4d32;
	--base-font-family : 'Roboto', sans-serif;
	--header-font-family : var(--base-font-family);
	--body-bg : #FFFFFF;
	--text-color : #222;
	--text-color-light : #888;
	--title-color : var(--cor10);
	--link-color : var(--cor10);
	--link-color-hover : #000;
	--border-color : #EEE;
	--accent-color : var(--cor10);
	--accent-color-light : var(--accent-color);
	--price-color : #00AB2E;
	--button-bg : var(--cor10);
	--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: #FAFAFA;
	--footer-title-color: var(--title-color);
	--footer-text-color: var(--text-color);
	--footer-link-color: var(--link-color);
}

body, html {font-weight: 300;font-size:1.0625rem;line-height: 1.6;}
h1, h2 {font-weight:200;text-transform: lowercase;}
.nav-menu li a {text-transform: lowercase;}

.page.has-post-thumbnail .site-content {padding-top:0;}

.site-main {padding-block:5rem;}

.site-footer {border-top:1px solid var(--border-color);}
.footer-widgets {padding-block:5rem;}


div.wpforms-container-full .wpforms-confirmation-container-full, 
div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
	background: #fff8f5;
	border-color: var(--cor10);
	color: var(--cor10);
}

.hero-set {display:grid;grid-template-columns:1fr;grid-template-rows:150vw 75vw 75vw;}
.hero-set > * {position: relative;}
.hero-set .post-thumbnail {position: absolute;inset:0;margin: 0;}
.hero-set .post-thumbnail img {position: absolute;top:0;left:0;width:100%;height:100%;object-fit: cover;object-position: center;}
.hero-set .post-thumbnail::after {display: block;content: "";position: absolute;inset:0;background: linear-gradient(1800deg,rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 33%);}
.hero-set .inner {position: absolute;right:0;bottom:0;left:0;padding:1rem;font-size:1.25rem;color:#FFF;z-index:9;text-shadow:1px 1px rgba(0,0,0,.2);text-decoration:none;}
.hero-set a.inner h2:hover {text-decoration: underline;}
.hero-set .inner .button {margin-top:1rem;}
.hero-set .inner h2 {margin:0;color:#FFF;}

.page-hero {position: relative;height: 50vh;height: 50svh;}
.page-hero img {position: absolute;top:0;left:0;width:100%;height:100%;object-fit: cover;object-position: center;}


.wp-block-gallery.has-nested-images figure.wp-block-image {flex-grow: 0;}





@media screen and (min-width:768px) {
.hero-set {grid-template-columns:repeat(2, 1fr);grid-template-rows:auto auto;
	grid-template-areas: 
		"hero hero"
		"sub-1 sub-2"
}
.hero-set .hero {grid-area:hero;height:80vh;height: 80svh;}
.hero-set .sub-1 {grid-area:sub-1;aspect-ratio:16 / 9;} 
.hero-set .sub-2 {grid-area:sub-2;aspect-ratio:16 / 9;} 
	.hero-set .inner {padding:2rem;}
}