/*
Theme Name: Scouting PPD Apeldoorn
Theme URI: https://scoutingppd.nl
Author: Scouting PPD Apeldoorn
Description: Eigen blok-thema voor Scouting PPD Apeldoorn. Schoon opgebouwd, geen externe afhankelijkheden (geen Timber, geen ACF, geen externe update-checker). Kleuren en opzet geinspireerd op scouting.nl (Scouting-groen). Draait op PHP 8.3+.
Version: 1.2.3
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: scoutingppd-apeldoorn
Tags: block-theme, full-site-editing, custom-colors, custom-menu, blog, one-column, two-columns
*/

/*
 * Het meeste ontwerp zit in theme.json. Dit bestand bevat alleen
 * aanvullingen die theme.json niet dekt: header-balk, kaart-schaduwen,
 * hover-animaties en de footer.
 */

/* --- Header-balk --- */
.wp-block-template-part.site-header,
header.wp-block-group.site-header {
	box-shadow: 0 1px 0 var(--wp--preset--color--rand);
	position: relative;
	z-index: 100;
}
/* Uitklapmenu boven alles (ook boven de hero-banner) */
.site-header .wp-block-navigation__submenu-container {
	z-index: 120;
}

.ppd-headerbar {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}
.ppd-logo-link {
	display: inline-flex;
	margin-right: auto;
}
.ppd-logo-link img {
	height: auto;
	max-height: 64px;
	width: auto;
}

/* --- Navigatie: alles groen (links én submenu-knoppen) --- */
.site-header .wp-block-navigation .wp-block-navigation-item__content,
.site-header .wp-block-navigation button.wp-block-navigation-item__content,
.site-header .wp-block-navigation a {
	color: var(--wp--preset--color--groen);
}
.site-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--groen-donker);
}
/* Submenu-uitklap: witte achtergrond, groene items */
.site-header .wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: 8px;
}
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.site-header .wp-block-navigation__submenu-container a,
.site-header .wp-block-navigation__submenu-container button {
	color: var(--wp--preset--color--blauw) !important;
	font-weight: 200 !important;
}
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: #005799 !important;
}

/* --- Navigatie: actieve pagina onderstrepen --- */
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	box-shadow: inset 0 -3px 0 var(--wp--preset--color--groen);
}

/* --- Knoppen: zachte lift bij hover --- */
.wp-block-button__link {
	transition: transform 0.12s ease, background-color 0.12s ease;
}
.wp-block-button__link:hover {
	transform: translateY(-1px);
}

/* --- Kaarten: elke groep met achtergrond 'wit' wordt een kaart --- */
.wp-block-group.is-kaart,
.wp-block-group.has-wit-background-color {
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(0, 122, 61, 0.08);
}

/* Afbeeldingen binnen kaarten netjes afronden bovenaan */
.wp-block-group.is-kaart > figure.wp-block-image:first-child img {
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}

/* --- Afbeeldingen algemeen: zachte hoeken --- */
.entry-content figure.wp-block-image img {
	border-radius: 10px;
}

/* --- Zwevende afbeeldingen: tekst loopt er netjes omheen --- */
main .wp-block-image.alignleft {
	float: left;
	width: 38% !important;
	max-width: 340px;
	/* linkermarge = afstand van de volle-breedte-rand tot de tekstkolom,
	 * zodat de foto op de linkerrand van de 840px-kolom uitlijnt */
	margin: 0.3em 1.75rem 1rem max(0px, calc(50% - 420px));
}
main .wp-block-image.alignright {
	float: right;
	width: 38% !important;
	max-width: 340px;
	margin: 0.3em max(0px, calc(50% - 420px)) 1rem 1.75rem;
}
/* Inline pixelbreedte uit de oude import overrulen, zodat de foto
 * nooit buiten zijn zwevende kader steekt */
main .wp-block-image.alignleft img,
main .wp-block-image.alignright img {
	width: 100% !important;
	height: auto !important;
}
/* Zwevende foto mag niet doorlopen tot in de volgende sectie */
.entry-content::after {
	content: "";
	display: table;
	clear: both;
}
/* Op smalle schermen niet zweven, maar vol boven de tekst */
@media (max-width: 600px) {
	main .wp-block-image.alignleft,
	main .wp-block-image.alignright {
		float: none;
		width: 100% !important;
		max-width: 100%;
		margin: 1rem 0;
	}
}

/* --- Hero --- */
.ppd-hero {
	border-radius: 0;
}
.ppd-hero h1,
.ppd-hero h2 {
	color: var(--wp--preset--color--wit);
}
/* Geen kleurwaas over de foto; leesbaarheid via zachte tekstschaduw
 * plus een neutrale (niet-groene) verloop-scrim onderaan de banner. */
.ppd-hero .wp-block-cover__inner-container {
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45);
}
/* Knoppen in de hero hebben hun eigen vlak; geen tekstschaduw daar */
.ppd-hero .wp-block-button__link {
	text-shadow: none;
}
.ppd-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 55%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
	pointer-events: none;
	z-index: 1;
}
.ppd-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

/* --- Gras boven de footer --- */
.ppd-grass {
	margin: 0 !important;
	line-height: 0;
}
.ppd-grass img {
	display: block;
	width: 100%;
	margin: 0;
	margin-bottom: -2px;
}

/* --- Footer --- */
.site-footer {
	margin-top: 0;
}
.site-footer a {
	color: inherit;
}

/* --- Focus-zichtbaarheid (toegankelijkheid) --- */
a:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation-item__content:focus-visible {
	outline: 3px solid var(--wp--preset--color--groen);
	outline-offset: 2px;
}

/* --- Skip-link --- */
.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	background: var(--wp--preset--color--groen-donker);
	color: #fff;
	padding: 0.6rem 1rem;
	border-radius: 0 0 8px 0;
}
.skip-link:focus {
	left: 0;
	top: 0;
}