/*
Theme Name:   Origio
Theme URI:    https://origio.nl
Description:  Child theme van Divi voor Origio. Zand, donkergroen en terra; Jost als lettertype.
Author:       Origio
Template:     Divi
Version:      1.0.0
Text Domain:  origio
*/

/* Merkkleuren
   zand        #F0E8DA  achtergronden
   zand-licht  #F7F2E8  afwisselende secties
   zand-donker #E3D5BC  lijnen, vlakken
   donkergroen #163C2C  tekst en logo
   terra       #BD6A43  punt, knoppen en accenten */
:root {
	--origio-zand: #F0E8DA;
	--origio-zand-licht: #F7F2E8;
	--origio-zand-donker: #E3D5BC;
	--origio-groen: #163C2C;
	--origio-terra: #BD6A43;
	--origio-terra-donker: #A65A37;
}

body,
#page-container,
#et-main-area,
#main-content {
	background-color: var(--origio-zand);
}

body {
	color: var(--origio-groen);
	font-family: 'Jost', Helvetica, Arial, sans-serif;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

/* Divi zet lopende tekst standaard op 500; Origio gebruikt Regular.
   :where() geeft deze regel geen voorrang, zodat een dikte die je in
   Divi bij een module kiest altijd wint. */
:where(.et_pb_text, .et_pb_blurb_description, .et_pb_testimonial_description) {
	font-weight: 400;
}

/* Rustige titels: standaard Regular. Een dikte die je in Divi bij een
   module kiest (Ontwerp > Koptekst), gaat hier voor. */
h1, h2, h3, h4, h5, h6,
.et_pb_module_header,
.et_pb_blurb .et_pb_module_header,
.et_pb_testimonial_author {
	font-family: 'Jost', Helvetica, Arial, sans-serif;
	font-weight: 400;
	color: var(--origio-groen);
	letter-spacing: -0.01em;
	line-height: 1.15;
}

p {
	padding-bottom: 1.1em;
}

a {
	color: var(--origio-terra);
}

/* Knoppen: terra, medium, 16px */
body #page-container .et_pb_button {
	font-family: 'Jost', Helvetica, Arial, sans-serif;
	font-weight: 500;
	transition: background-color .2s ease, color .2s ease;
}

body #page-container .et_pb_button:hover {
	background-color: var(--origio-terra-donker) !important;
}

/* Tekstlink met pijl, zoals "Meer over Origio" */
.origio-pijllink a {
	color: var(--origio-groen);
	text-decoration: none;
	border-bottom: 2px solid var(--origio-terra);
	padding-bottom: 4px;
	font-weight: 500;
}

.origio-pijllink a::after {
	content: ' \2192';
	color: var(--origio-terra);
}

/* Header-menu: standaard Regular, een dikte uit de menumodule gaat voor */
:where(.origio-header) .et_pb_menu .et-menu > li > a {
	font-weight: 400;
}

.origio-header .et_pb_menu .et-menu > li > a:hover {
	color: var(--origio-terra) !important;
	opacity: 1;
}

.origio-header .et_pb_menu__logo img {
	max-height: 56px;
}

/* Blurbs "Op je eigen manier" */
.origio-blurb .et_pb_main_blurb_image {
	margin-bottom: 20px;
}

.origio-blurb .et_pb_main_blurb_image img {
	width: 150px;
	transition: transform .35s ease;
}

.origio-blurb:hover .et_pb_main_blurb_image img {
	transform: translateY(-4px);
}

/* Testimonials */
.origio-testimonial {
	border-radius: 6px;
	height: 100%;
}

/* Divi knipt kaarten met afgeronde hoeken af; het quote-icoon steekt boven de kaart uit */
.origio-testimonial.et_pb_testimonial {
	overflow: visible !important;
}

.origio-testimonial.et_pb_testimonial:before {
	color: var(--origio-terra) !important;
	background-color: var(--origio-zand) !important;
}

/* Testimonial-carrousel: kaarten even hoog, met ruimte ertussen */
.origio-testimonials-rij .slick-track {
	display: flex;
	align-items: stretch !important;
}

.origio-testimonials-rij .slick-slide {
	height: auto;
	padding: 0 14px;
	box-sizing: border-box;
}

.origio-testimonials-rij .slick-slide > div {
	height: 100%;
}

.origio-testimonials-rij .slick-dots li button {
	background: #D4C4A8 !important;
	opacity: 1 !important;
}

.origio-testimonials-rij .slick-dots li.slick-active button {
	background: var(--origio-terra) !important;
}

/* Logo-carrousel: pijlstijl geldt ook op telefoon, waar Divi gelijke waarden overslaat */
.origio-logos-sectie .slick-prev::before,
.origio-logos-sectie .slick-next::before {
	padding: 9px !important;
	color: var(--origio-zand) !important;
	background: var(--origio-groen) !important;
	border-radius: 50% !important;
	font-size: 22px !important;
	opacity: 1 !important;
}

/* Logo-carrousel: 80% van de schermbreedte, op laptops tot 90% zodat de logo's groot genoeg blijven */
@media (min-width: 981px) {
	.et_pb_row.origio-logos-rij {
		min-width: min(1300px, 90%);
	}
}

/* Rij met verticaal gecentreerde kolommen (tekst naast foto) */
@media (min-width: 981px) {
	.et_pb_row.origio-midden {
		display: flex;
		align-items: center;
	}
}

/* Ring-accent, zoals de "o" uit het logo */
.origio-ring {
	position: relative;
}

.origio-ring::after {
	content: '';
	position: absolute;
	right: 2%;
	bottom: -64px;
	width: 34px;
	height: 34px;
	border: 7px solid var(--origio-groen);
	border-radius: 50%;
	box-shadow: 30px 0 0 -10px var(--origio-terra);
	visibility: visible; /* Divi gebruikt ::after van rijen als onzichtbare clearfix */
}

@media (max-width: 980px) {
	.origio-ring::after {
		display: none;
	}
}

/* Rijen met class "gelijke-hoogte": kolommen en de modules erin even hoog (alleen desktop) */
@media (min-width: 981px) {
	.et_pb_row.gelijke-hoogte {
		display: flex;
	}

	.et_pb_row.gelijke-hoogte > .et_pb_column {
		display: flex;
		flex-direction: column;
	}

	.et_pb_row.gelijke-hoogte > .et_pb_column > .et_pb_module {
		flex: 1;
	}
}