/*
Theme Name: Dorpshuis Peize
Theme URI: https://www.dorpshuispeize.nl/
Author: Dorpshuis Peize
Description: Blokthema voor het dorpshuis van Peize. Diepgroen, rustig en overzichtelijk, met Lexend voor de koppen en Open Sans voor de tekst. Alle lettertypen worden lokaal geleverd, dus er gaat geen enkel verzoek naar een externe partij.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 7.1
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: dorpshuis-peize
Tags: full-site-editing, block-patterns, blog, news, custom-colors, custom-menu
*/

/* -------------------------------------------------------------------------
 * Alleen wat blokken en theme.json zelf niet kunnen uitdrukken.
 * Kleuren en maten komen uit theme.json; hieronder staan geen losse waarden
 * die daar al gedefinieerd zijn.
 * ---------------------------------------------------------------------- */

/* Kop blijft meelopen bij het scrollen. */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--wit);
	border-bottom: 1px solid var(--wp--preset--color--lijn);
}

/* "Zaal reserveren" staat op brede schermen als knop in de kop en op smalle
   schermen als laatste item in het hamburgermenu. De grens ligt op 600 px,
   dezelfde maat waarop het navigatieblok zelf naar het overlaymenu omschakelt.
   Elk van de twee is op de andere maat verborgen, dus nooit allebei zichtbaar. */
@media (max-width: 599.98px) {
	.dhp-alleen-breed { display: none !important; }
}
@media (min-width: 600px) {
	.dhp-alleen-smal { display: none !important; }
}

/* In het opengeklapte menu blijft het een knop en geen gewone menuregel.
   Het navigatieblok zet zelf 'padding: 0' op items in het overlaymenu, met een
   selector die dieper genest is dan een losse klasse — vandaar deze lengte. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container .dhp-alleen-smal .wp-block-navigation-item__content {
	display: inline-flex;
	margin-block-start: .75rem;
	padding: .7rem 1.4rem;
	border-radius: 6px;
	border-bottom: 0;
	background: var(--wp--preset--color--hoofdkleur);
	color: var(--wp--preset--color--wit);
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	white-space: nowrap;
}
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container .dhp-alleen-smal .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--hoofdkleur-donker);
	border-bottom: 0;
	text-decoration: none;
}

/* Het logobestand is 35x56 en wordt op die maat getoond. WordPress legt er
   zonder breedte-instelling zelf 'width: 120px' op (.is-default-size), wat een
   bestand van 35 px zou opblazen. Deze regel legt geen maat op, maar haalt die
   van WordPress weg, zodat de eigen afmeting van de afbeelding overblijft. */
.wp-site-blocks .wp-block-site-logo.is-default-size img {
	width: auto;
}

/* Navigatie: rustige onderstreping in plaats van kleurwissel. */
.wp-block-navigation .wp-block-navigation-item__content {
	padding-block: .35rem;
	border-bottom: 2px solid transparent;
	transition: border-color .15s ease;
}
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--accentgroen);
	text-decoration: none;
}

/* Submenu's iets zachter dan de standaard harde rand. */
.wp-block-navigation .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: 8px;
	box-shadow: var(--wp--preset--shadow--zwevend);
	padding-block: .35rem;
	overflow: hidden;
}

/* De foto in de kop wordt bijgesneden om de band te vullen. Bij een liggende
   panoramafoto blijft er op een telefoon anders maar een smalle verticale
   strook van het gebouw over; een lagere band laat meer breedte zien en scheelt
   schermruimte. Het omslagblok zet min-height als inline stijl, dus dit kan
   alleen met !important. */
@media (max-width: 600px) {
	.dhp-hero-beeld {
		min-height: 220px !important;
	}
}

/* De introkaart schuift met een negatieve marge over de foto heen. Het
   verduisteringsvlak van het omslagblok is absoluut gepositioneerd met z-index 1
   en zou anders óver de kaart vallen; vandaar deze laag erboven. */
.dhp-hero-kaart {
	position: relative;
	z-index: 2;
}

/* Kaarten in de wegwijzer en het nieuwsoverzicht.
   Alleen de schaduw reageert op hover; de kaart zelf blijft staan waar hij
   staat. Meebewegende tekst leest onrustig in een lijst met berichten. */
.dhp-kaart {
	transition: box-shadow .18s ease;
}
.dhp-kaart:hover {
	box-shadow: var(--wp--preset--shadow--zwevend);
}

/* Pijltjeslink: "Bekijken →". De pijl schuift mee bij hover.
   Twee gevallen: de link zit ín het element, of het element ís de link. */
.dhp-pijl > a::after,
a.dhp-pijl::after {
	content: " \2192";
	display: inline-block;
	transition: transform .18s ease;
}
.dhp-pijl:hover > a::after,
a.dhp-pijl:hover::after {
	transform: translateX(4px);
}

/* Lijst zonder opsommingstekens — voor de kolommen in de voettekst. */
.wp-block-list.is-style-none {
	list-style: none;
	padding-inline-start: 0;
	margin-inline-start: 0;
}

/* Lijst met vinkjes — voor het groene vlak op de voorpagina. */
.wp-block-list.is-style-checked {
	list-style: none;
	padding-inline-start: 0;
	margin-inline-start: 0;
}
.wp-block-list.is-style-checked > li {
	position: relative;
	padding-inline-start: 1.9rem;
}
.wp-block-list.is-style-checked > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: .35em;
	inline-size: 1.05rem;
	block-size: 1.05rem;
	background-color: currentColor;
	opacity: .9;
	-webkit-mask: var(--dhp-vinkje) center / contain no-repeat;
	mask: var(--dhp-vinkje) center / contain no-repeat;
}
:root {
	--dhp-vinkje: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Datumregel boven nieuwsberichten. */
.dhp-datum {
	font-style: italic;
	font-weight: 600;
	color: var(--wp--preset--color--accentrood);
}

/* Ronde icoonvlakken in de wegwijzer. */
.dhp-icoon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 3rem;
	block-size: 3rem;
	border-radius: 50%;
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--lijn);
	color: var(--wp--preset--color--hoofdkleur);
}
.dhp-icoon svg { inline-size: 1.5rem; block-size: 1.5rem; }

/* Uitgelichte afbeeldingen in het nieuwsraster even hoog houden. */
.dhp-nieuws .wp-block-post-featured-image img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	inline-size: 100%;
}

/* Het beeld boven een artikel: breed, niet torenhoog. */
.dhp-artikelbeeld img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	inline-size: 100%;
}

/* Voettekst: links iets gedempt, wit bij hover. */
.wp-site-blocks > footer a { color: inherit; opacity: .85; }
.wp-site-blocks > footer a:hover { opacity: 1; }

/* Zichtbare focus voor toetsenbordgebruikers — nergens weghalen. */
:where(a, button, input, select, textarea, .wp-block-navigation-item__content):focus-visible {
	outline: 3px solid var(--wp--preset--color--accentgroen);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Overslaan-naar-inhoud link. */
.dhp-skip:not(:focus) {
	position: absolute !important;
	inline-size: 1px; block-size: 1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap;
}
.dhp-skip:focus {
	position: fixed;
	inset-block-start: .5rem;
	inset-inline-start: .5rem;
	z-index: 1000;
	padding: .6rem 1rem;
	background: var(--wp--preset--color--hoofdkleur);
	color: var(--wp--preset--color--wit);
	border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
	.dhp-kaart, .dhp-pijl > a::after, a.dhp-pijl::after,
	.wp-block-navigation .wp-block-navigation-item__content {
		transition: none;
	}
}