/**
 * Theme Name:     Spectra One Child
 * Author:         Wizarts
 * Template:       spectra-one
 * Text Domain:	   spectra-one-child
 * Description:    Custom child theme
 */

/* ==========================================================================
   BREE SERIF (SIL Open Font License, zie assets/fonts/OFL.txt)
   Zelf gehost als woff2, gesplitst in latin en latin-ext. Door de
   unicode-range haalt de browser het latin-ext-bestand alleen op wanneer een
   titel echt zo'n teken bevat. font-display: swap toont de tekst meteen in
   de terugvalfont in plaats van ze onzichtbaar te laten.
   ========================================================================== */

@font-face {
	font-family: "Bree Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/bree-serif-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Bree Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/bree-serif-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


video{
	border-radius: 20px;
}

.team figure{
	margin-bottom: 0;
}
.team figure img{
	border-radius: 20px;
	max-height: 300px;
	object-fit: cover;
}
.regular-nav { display: flex !important; }
.mobile-nav  { display: none !important; }

@media (max-width: 768px) {
	.regular-nav { display: none !important; }
	.mobile-nav  { display: grid !important; } /* uagb-layout-grid */
}

/* Iconen: bij gesloten menu open-icoon tonen, close verbergen */
.mobile-nav .mobile-icon-open  { display: block !important; }
.mobile-nav .mobile-icon-close { display: none !important; }

/* Bij geopend menu omdraaien */
.mobile-nav.is-open .mobile-icon-open  { display: none !important; }
.mobile-nav.is-open .mobile-icon-close { display: block !important; }

/* Het uitklapbare menu zelf: altijd in DOM, verborgen via transform */
.mobile-nav .mobile-div {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 85% !important;
	flex-wrap: nowrap;
	max-width: 360px !important;
	z-index: 100000 !important;

	display: flex !important;
	flex-direction: column !important;

	/* Verborgen toestand: buiten beeld geschoven */
	transform: translateX(100%);
	transition: transform 0.3s ease;

	/* Scroll binnen het menu indien nodig */
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch;

	background: var(--wp--preset--color--transparent); /* of een vaste kleur */
	padding: 2rem 1.5rem !important;
}

/* Geopend: in beeld schuiven */
.mobile-nav.is-open .mobile-div {
	width: 100% !important;
    left: 0;
    margin: unset;
    top: 77px !important;
	transform: translateX(0);
}
body:has(.mobile-nav.is-open){
	overflow: hidden !important;
	
}

.gform_required_legend{
	display: none;
}
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: var(--wp--preset--color--quaternary);
}
h1, h2, h3, h4, h5, h6 {
    color: var(--wp--preset--color--current-color);
}

/* Font en gewicht van alle titels. De descendant-selectors nemen ook <strong>,
   <em>, <a> en <span> binnen een titel mee, zodat een vetgezet stuk niet
   zwaarder wordt dan de rest. !important omdat Spectra per blok een eigen
   lettertype en gewicht inline kan meegeven.
   IBM Plex Serif blijft de terugval zolang Bree Serif laadt. */
h1, h2, h3, h4, h5, h6,
h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {
	font-family: "Bree Serif", var(--wp--preset--font-family--ibm-plex-serif) !important;
	font-weight: 600 !important;
}
form *{
	font-family: "Alan Sans", sans-serif !important;
}
/* ==========================================================================
   VERSTUURKNOP VAN FORMULIEREN
   Zelfde opmaak als de gewone knoppen op de site (.wp-block-button__link):
   blauwe vulling, 2px rand in dezelfde kleur, ronde hoeken en dezelfde
   padding en letter. Gravity Forms rendert de knop nu eens als
   <input type="submit">, dan weer als <button class="gform_button">, dus
   beide vormen staan in de selector. De .gform_wrapper-varianten zitten
   erbij om de eigen stijlen van Gravity Forms te overstemmen.
   ========================================================================== */
form input[type='submit'],
form button[type='submit'],
.gform_wrapper .gform_footer input[type='submit'],
.gform_wrapper .gform_footer button.gform_button,
.gform_wrapper .gform_page_footer input[type='submit'],
.gform_wrapper .gform_page_footer button.gform_button {
	background-color: var(--wp--preset--color--inherit);
	color: #ffffff;
	border: 2px solid var(--wp--preset--color--inherit);
	border-radius: 30px;
	padding: 14px 28px;
	font-family: var(--wp--preset--font-family--alan-sans), "Alan Sans", sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: 0.2s transform, 0.2s box-shadow;
}
.gform_wrapper.gravity-theme input[type=color], .gform_wrapper.gravity-theme input[type=date], .gform_wrapper.gravity-theme input[type=datetime-local], .gform_wrapper.gravity-theme input[type=datetime], .gform_wrapper.gravity-theme input[type=email], .gform_wrapper.gravity-theme input[type=month], .gform_wrapper.gravity-theme input[type=number], .gform_wrapper.gravity-theme input[type=password], .gform_wrapper.gravity-theme input[type=search], .gform_wrapper.gravity-theme input[type=tel], .gform_wrapper.gravity-theme input[type=text], .gform_wrapper.gravity-theme input[type=time], .gform_wrapper.gravity-theme input[type=url], .gform_wrapper.gravity-theme input[type=week], .gform_wrapper.gravity-theme select, .gform_wrapper.gravity-theme textarea {
    border: 1px solid var(--wp--preset--color--neutral);
    border-radius: 7px;
}
.wp-block-accordion{
	display: flex;
    flex-direction: column;
    gap: 20px;
}
.wp-block-accordion-heading__toggle-title{
	text-decoration: unset !important;
}
.wp-block-accordion-item{
	transition: .2s;
	padding: 10px;
}
.wp-block-accordion-item.is-open,
.wp-block-accordion-item:hover{
	background-color: var(--wp--preset--color--transparent);
}
.yoast-breadcrumbs *{
	font-size: 14px;
}
.wp-block-uagb-advanced-heading > h3.uagb-heading-text,
.wp-block-uagb-advanced-heading > h2.uagb-heading-text,
.wp-block-uagb-advanced-heading > h1.uagb-heading-text{
	margin-bottom: 0.25em;
}

.wp-block-buttons {
	margin-top: 1.5em;
}

.wp-block-uagb-loop-wrapper{
	width: 100%;
}
.wp-block-button__link{
	transition: 0.2s transform;
}
form input[type='submit']:hover,
form button[type='submit']:hover,
.gform_wrapper .gform_footer input[type='submit']:hover,
.gform_wrapper .gform_footer button.gform_button:hover,
.gform_wrapper .gform_page_footer input[type='submit']:hover,
.gform_wrapper .gform_page_footer button.gform_button:hover,
.wp-block-button__link:hover{
	box-shadow: 0px 2px 5px -3px black;
	transform: translatey(-6px);
}

div:not(.is-style-outline) > .wp-block-button__link:hover{
	background-color: var(--wp--preset--color--inherit);	
}

.uagb-buttons__outer-wrap.uagb-btn__small-btn .uagb-buttons-repeater.wp-block-button__link:not(.is-style-outline), 
.uagb-buttons__outer-wrap.uagb-btn__small-btn .uagb-buttons-repeater.ast-outline-button {
    font-size: 13px;
    padding: 8px 12px;
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container{
	padding: 0px;
    border-radius: 8px;
	min-width: 300px !important;
	width: 100%;
    border-color: var(--wp--preset--color--neutral);
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item{
	background-color: unset;
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item:hover>.wp-block-navigation-item__content{
	text-decoration: underline;
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content{
	padding: 5px 20px;
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item:last-child >.wp-block-navigation-item__content{
	padding-bottom: 10px;
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item:first-child >.wp-block-navigation-item__content{
	padding-top: 10px;
}

header .regular-nav .wp-block-navigation .current-menu-item > a,
.current-menu-item > a{
	color: var(--wp--preset--color--body) !important;
    font-weight: 500;
}

@media screen and (max-width: 768px){
	table *{
		font-size: 13px !important;
	}
}

/* ==========================================================================
   HEADER-NAVIGATIE: gekleurde pillen, wisselende kleuren per page load
   De rotatie wordt gezet door het script in functions.php, dat een attribuut
   data-nav-shift (0 t/m 4) op het <html>-element plaatst.
   ========================================================================== */

header .regular-nav .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item {
	padding: 6px 1rem 8px;
	display: flex;

	/* Kaartvorm zoals in de footer: witte achtergrond, een 5px gekleurde
	   rand bovenaan en een lichte schaduw. */
	background-color: #ffffff;
	border-radius: 8px;
	border-top: 5px solid transparent;
	transition: transform 0.2s, box-shadow 0.2s;
	box-shadow: 0px 2px 5px -3px #00000040;

	/* Ankerpunt voor de overlay hieronder. */
	position: relative;
}

/* De padding zit op de <li>, niet op de link of de knop erin. Daardoor deed
   een klik op die padding niets. Deze overlay rekt de link/knop over de hele
   pil, zonder de opmaak te veranderen. Het pijltje van een dropdown heeft
   pointer-events: none, dus dat blijft gewoon werken. */
header .regular-nav .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;

	/* -5px omdat een absolute overlay tot de padding-box reikt en niet tot
	   de border-box; zo valt de gekleurde rand bovenaan er ook onder. */
	top: -5px;
	right: 0;
	bottom: 0;
	left: 0;
}

header .regular-nav .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item:hover {
	box-shadow: 0px 2px 5px -3px black;
	transform: translateY(-2px);
}

/* Kleurenreeks: body, background, primary, secondary, heading.
   Elke shift schuift de hele reeks een plaats op.
   :root dient als terugval wanneer JavaScript uitstaat. */
:root,
html[data-nav-shift="0"] {
	--vbs-nav-1: var(--wp--preset--color--body);
	--vbs-nav-2: var(--wp--preset--color--background);
	--vbs-nav-3: var(--wp--preset--color--primary);
	--vbs-nav-4: var(--wp--preset--color--secondary);
	--vbs-nav-5: var(--wp--preset--color--heading);
}

html[data-nav-shift="1"] {
	--vbs-nav-1: var(--wp--preset--color--background);
	--vbs-nav-2: var(--wp--preset--color--primary);
	--vbs-nav-3: var(--wp--preset--color--secondary);
	--vbs-nav-4: var(--wp--preset--color--heading);
	--vbs-nav-5: var(--wp--preset--color--body);
}

html[data-nav-shift="2"] {
	--vbs-nav-1: var(--wp--preset--color--primary);
	--vbs-nav-2: var(--wp--preset--color--secondary);
	--vbs-nav-3: var(--wp--preset--color--heading);
	--vbs-nav-4: var(--wp--preset--color--body);
	--vbs-nav-5: var(--wp--preset--color--background);
}

html[data-nav-shift="3"] {
	--vbs-nav-1: var(--wp--preset--color--secondary);
	--vbs-nav-2: var(--wp--preset--color--heading);
	--vbs-nav-3: var(--wp--preset--color--body);
	--vbs-nav-4: var(--wp--preset--color--background);
	--vbs-nav-5: var(--wp--preset--color--primary);
}

html[data-nav-shift="4"] {
	--vbs-nav-1: var(--wp--preset--color--heading);
	--vbs-nav-2: var(--wp--preset--color--body);
	--vbs-nav-3: var(--wp--preset--color--background);
	--vbs-nav-4: var(--wp--preset--color--primary);
	--vbs-nav-5: var(--wp--preset--color--secondary);
}

/* Enkel vanaf 769px: onder die breedte staat .regular-nav toch op display:none
   en neemt het mobiele menu over. Zie de media query bovenaan dit bestand. */
@media (min-width: 769px) {
	header .regular-nav .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item:nth-child(1) {
		border-top-color: var(--vbs-nav-1);
	}
	header .regular-nav .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) {
		border-top-color: var(--vbs-nav-2);
	}
	header .regular-nav .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) {
		border-top-color: var(--vbs-nav-3);
	}
	header .regular-nav .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) {
		border-top-color: var(--vbs-nav-4);
	}
	header .regular-nav .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) {
		border-top-color: var(--vbs-nav-5);
	}
}

/* Actief item in het hoofdmenu: onderlijnen in plaats van inkleuren.
   De gele kleur botste met de gekleurde pillen hierboven. Buiten de header
   blijft de regel .current-menu-item > a onveranderd gelden. */



/* Items met een dropdown gebruiken een <button> in plaats van een <a>. Die
   heeft uit de core-stijlen 1px padding boven en onder, waardoor de pil 2px
   hoger werd dan die van de items zonder dropdown. De rechterpadding blijft,
   want die houdt de ruimte vrij voor het pijltje. */

header .regular-nav .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle {
	padding-top: 0;
	padding-bottom: 0;
}

/* 8px lucht tussen het menu-item en het uitklapmenu.
   De ::before overbrugt die ruimte onzichtbaar, zodat de muis het submenu
   nooit verlaat en er geen dode zone ontstaat tussen pil en dropdown. */

header .regular-nav .wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
	margin-top: 8px;
}

header .regular-nav .wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 0;
	right: 0;
	height: 8px;
}

/* ==========================================================================
   VASTE HEADER OP PC/TABLET
   Enkel vanaf 769px; daaronder neemt het mobiele menu het over en moet de
   header gewoon mee scrollen. Het script in functions.php zet
   html.is-scrolled zodra er meer dan 20px gescrold is, en schrijft de echte
   headerhoogte naar --vbs-header-h.
   ========================================================================== */

@media (min-width: 769px) {

	.wp-site-blocks > header.wp-block-template-part {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		background-color: var(--wp--preset--color--transparent);
		transition: box-shadow 0.25s ease;
	}

	/* De header valt uit de flow, dus deze ruimte houdt de pagina op zijn
	   plaats. De waarde wordt door het script gezet; 103px is de terugval. */
	.wp-site-blocks {
		padding-top: var(--vbs-header-h, 103px);
	}

	/* Bij het scrollen krimpen logo en padding. De container van de header
	   heeft 20px padding uit Spectra; die halveert mee. */
	.wp-site-blocks > header.wp-block-template-part .regular-nav {
		transition: padding-top 0.25s ease, padding-bottom 0.25s ease;
	}

	html.is-scrolled .wp-site-blocks > header.wp-block-template-part .regular-nav {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}

	/* max-width overschrijft het width-attribuut op de <img>;
	   height:auto houdt de verhouding correct. */
	header .wp-block-site-logo img.custom-logo {
		transition: max-width 0.25s ease;
		max-width: 298px;
		height: auto;
	}

	html.is-scrolled header .wp-block-site-logo img.custom-logo {
		max-width: 200px;
	}

	/* Ankerlinks springen anders onder de vaste header. */
	:target {
		scroll-margin-top: calc(var(--vbs-header-h, 103px) + 1rem);
	}
}