/*
Theme Name: MaakBar
Description: Child theme voor MaakBar
Author: Heleen
Template: flatsome
Version: 2.9
*/

/*************** EIGEN CSS ***************/

/* Kleuren uit het logo */
:root {
	--maakbar-groen: #4d583a;
	--maakbar-geel: #eab13e;
	--maakbar-oranje: #ce5735;
	--maakbar-creme: #f8f4e8;
}

/* Homepage */
.lead {
	font-size: 1.2em;
}

.mb-hero h1 {
	font-size: 2.8em;
	line-height: 1.15;
}

/* Foto in de hero met de streepjes uit het logo */
.mb-hero-beeld .col-inner {
	position: relative;
}

.mb-hero-beeld img {
	border-radius: 12px;
}

/* De streepjes beginnen achter de foto en stralen uit de rechterbovenhoek */
.mb-hero-beeld .img {
	position: relative;
	z-index: 1;
}

.mb-hero-beeld .col-inner::before,
.mb-hero-beeld .col-inner::after {
	content: "";
	position: absolute;
	left: calc(100% - 30px);
	top: 23px;
	height: 14px;
	border-radius: 7px;
	transform-origin: 0 50%;
	z-index: 0;
}

.mb-hero-beeld .col-inner::before {
	width: 105px;
	background: var(--maakbar-geel);
	transform: rotate(-58deg);
}

.mb-hero-beeld .col-inner::after {
	width: 100px;
	background: var(--maakbar-oranje);
	transform: rotate(-22deg);
}

/* Wat we maken: gekleurde lijn per vak */
.mb-vak .col-inner {
	border-top: 5px solid var(--maakbar-groen);
	padding-top: 20px;
}

.mb-vak-geel .col-inner {
	border-top-color: var(--maakbar-geel);
}

.mb-vak-oranje .col-inner {
	border-top-color: var(--maakbar-oranje);
}

/* Knoppen met harde schaduw in een logokleur */
.button.primary:not(.is-outline),
.button.secondary:not(.is-outline) {
	box-shadow: 5px 5px 0 var(--maakbar-geel);
	transition: transform .15s, box-shadow .15s;
}

.button.secondary:not(.is-outline) {
	box-shadow: 5px 5px 0 #e9b03d;
}

.button.primary:not(.is-outline):hover {
	transform: translate(3px, 3px);
	box-shadow: 2px 2px 0 var(--maakbar-geel);
}

.button.secondary:not(.is-outline):hover {
	transform: translate(3px, 3px);
	box-shadow: 2px 2px 0 #e9b03d;
}

/* Projecten op de homepage: kaart met gekleurd tekstvlak */
.mb-projecten .col-inner,
.mb-projecten .box-image {
	border-radius: 0 !important;
}

.mb-projecten .portfolio-box {
	border-radius: 16px;
	overflow: hidden;
	height: 100%;
	box-shadow: 6px 6px 0 var(--maakbar-groen);
	transition: transform .15s, box-shadow .15s;
}

.mb-projecten .portfolio-box:hover {
	transform: translate(3px, 3px);
	box-shadow: 3px 3px 0 var(--maakbar-groen);
}

.mb-projecten .box-text {
	background: #f7f4e9;
	padding: 18px 20px 20px;
	text-align: center;
	flex: 1;
}

/* Alle kaarten even hoog, ook als een titel over twee regels gaat */
.mb-projecten .col-inner,
.mb-projecten .col-inner > a {
	display: block;
	height: 100%;
}

.mb-projecten .portfolio-box {
	display: flex;
	flex-direction: column;
}

.mb-projecten .box-image {
	width: 100%;
	flex-shrink: 0;
}

.mb-projecten .portfolio-box-title {
	font-family: "Fredoka", sans-serif;
	font-size: 1.5em;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: var(--maakbar-groen);
	opacity: 1;
	margin-bottom: 4px;
}

.mb-projecten .portfolio-box-category {
	text-transform: none;
	letter-spacing: 0;
	font-size: 1em;
	opacity: 1;
	color: var(--maakbar-groen);
}

.mb-projecten .portfolio-box-category .show-on-hover {
	opacity: 1;
	transform: none;
}

/* Wat kinderen leren: woorden met gekleurde puntjes zoals onder het logo */
.mb-woorden {
	font-family: "Fredoka", sans-serif;
	font-size: 1.5em;
	font-weight: 500;
	line-height: 1.7;
	margin: 10px 0 25px;
}

.mb-woorden span {
	display: inline-block;
	white-space: nowrap;
}

.mb-woorden span:not(:last-child)::after {
	content: "\2022";
	margin: 0 .45em;
	color: var(--maakbar-geel);
}

.mb-woorden span:nth-child(2n):not(:last-child)::after {
	color: var(--maakbar-oranje);
}

.mb-samenwerking {
	margin-top: 40px;
	font-size: 1.1em;
	color: var(--maakbar-groen);
}

/* Losse foto's op pagina's */
.mb-foto img {
	border-radius: 12px;
}

/* Contactformulier */
.mb-formulier .col-inner {
	background: #fff;
	padding: 30px;
	border-radius: 12px;
}

.mb-formulier label {
	font-weight: 700;
	color: var(--maakbar-groen);
}

.mb-formulier input[type="submit"] {
	background: var(--maakbar-oranje);
	border-radius: 12px;
	box-shadow: 5px 5px 0 #e9b03d;
	text-transform: none;
	font-size: 1em;
}

.mb-contactgegevens {
	font-size: 1.1em;
}

/* Projectpagina: titel niet in hoofdletters */
.portfolio-single-page .entry-title {
	text-transform: none;
	font-size: 1.7em;
	line-height: 1.2;
	hyphens: auto;
}

/* Andere projecten onder een projectpagina */
div.portfolio-related {
	padding-bottom: 60px;
}

/* Projecten-pagina en andere projecten: foto met afgeronde hoeken, grotere titel */
.mb-projectenlijst .box-image {
	border-radius: 8px;
	overflow: hidden;
}

.mb-projectenlijst .portfolio-box-title {
	font-family: "Fredoka", sans-serif;
	font-size: 1.3em;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: var(--maakbar-groen);
	opacity: 1;
}

.mb-project img {
	border-radius: 8px;
}

.mb-project h3 {
	margin-top: 15px;
}


/*************** ALLEEN DESKTOP ***************/
@media only screen and (min-width: 48em) {

}

/*************** ALLEEN TABLET ***************/
@media only screen and (max-width: 48em) {

}

/*************** ALLEEN MOBIEL ***************/
@media only screen and (max-width: 33.75em) {

}

@media only screen and (max-width: 33.75em) {
	.mb-hero h1 {
		font-size: 2em;
	}
}

/* Streepjes bij de hero-foto: nooit buiten het scherm, korter op mobiel */
.mb-hero {
	overflow: hidden;
}

@media only screen and (max-width: 48em) {
	.mb-hero-beeld .col-inner::before {
		width: 75px;
	}

	.mb-hero-beeld .col-inner::after {
		width: 65px;
	}
}