/*
Theme Name: Hoeve Strobol
Theme URI: https://www.hoevestrobol.nl/
Author: Securebit B.V.
Author URI: https://www.securebit.nl/
Description: Blokthema voor Museum Hoeve Strobol in Nijnsel, in de vertrouwde stijl van de website: een houten kop met fotolijst, groene menuborden en een crèmekleurige pagina. Zonder paginabouwer of betaalde plugins, met de lettertypes op de eigen server en zonder verzoeken naar Google.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.1.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hoevestrobol
Tags: block-theme, full-site-editing, two-columns, custom-colors, custom-menu, editor-style, style-variations
*/

/* ==========================================================================
   Basis
   ========================================================================== */

body {
	/* Gewone (hoge) cijfers: tijden, data en prijzen lezen makkelijker */
	font-variant-numeric: lining-nums;
}

/* Voet altijd onderaan, ook bij korte pagina's */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > main,
.wp-site-blocks > .hs-hoofdinhoud {
	flex: 1 0 auto;
}

html[data-lettergrootte="groot"] {
	font-size: 112.5%;
}

html[data-lettergrootte="grootst"] {
	font-size: 125%;
}

img {
	height: auto;
	max-width: 100%;
}

/* Telefoonnummers niet over twee regels breken */
a[href^="tel:"] {
	white-space: nowrap;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

/* Op het hout en de groene borden: een gele focusrand die altijd opvalt */
.hs-kop :focus-visible,
.hs-voet :focus-visible,
.is-style-hs-bord :focus-visible {
	outline: 3px solid #ffd447;
	outline-offset: 3px;
}

/* ==========================================================================
   Kop: houten balk met naam, fotolijst en menuborden
   ========================================================================== */

.hs-kop {
	background: #8d8780 url("assets/images/hout.webp") center / cover no-repeat;
	color: #fff;
	padding-block: clamp(1rem, 2.5vw, 1.6rem) clamp(1.25rem, 3vw, 2.1rem);
}

.hs-kop .hs-kop__binnen {
	align-items: flex-start;
	flex-wrap: nowrap;
	gap: 1.25rem 2.5rem;
}

.hs-kop .hs-kop__merk {
	align-items: center;
	flex: 0 0 auto;
	gap: 0.8rem;
	width: min(100%, 19.5rem);
}

.hs-kop .hs-kop__menu {
	align-items: flex-end;
	flex: 1 1 auto;
	gap: 1.1rem;
}

/* De naam van het museum, zoals de oude Impact-letter in de kop */
.hs-kop .hs-woordmerk {
	font-size: clamp(2.5rem, 4.6vw, 3.35rem);
	letter-spacing: 0.01em;
	line-height: 1.05;
	margin: 0;
	text-align: center;
}

.hs-kop .hs-woordmerk a {
	color: #fff;
	text-decoration: underline;
	text-decoration-thickness: 0.06em;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
	text-underline-offset: 0.12em;
}

.hs-kop .hs-woordmerk a:hover {
	text-decoration-thickness: 0.1em;
}

/* Fotolijst met de boerderij */
.hs-kop .hs-kop-foto {
	background: #000;
	border: 2px solid #000;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
	margin: 0;
	width: 100%;
}

/* Lettergrootte-knoppen (worden door het script gevuld) */
.hs-lettergrootte {
	align-items: center;
	display: flex;
	font-family: var(--wp--preset--font-family--aladin);
	font-size: 1rem;
	gap: 0.35rem;
}

.hs-lettergrootte:empty {
	display: none;
}

.hs-lettergrootte__label {
	margin-right: 0.3rem;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.hs-lettergrootte button {
	background: var(--wp--preset--color--groen);
	border: 2px solid #fff;
	color: #fff;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--vollkorn);
	font-weight: 700;
	line-height: 1;
	min-height: 2.2rem;
	min-width: 2.2rem;
	padding: 0 0.35rem;
}

.hs-lettergrootte button:nth-of-type(1) { font-size: 0.85rem; }
.hs-lettergrootte button:nth-of-type(2) { font-size: 1.05rem; }
.hs-lettergrootte button:nth-of-type(3) { font-size: 1.3rem; }

.hs-lettergrootte button:hover {
	background: var(--wp--preset--color--groen-donker);
}

.hs-lettergrootte button[aria-pressed="true"] {
	background: #fff;
	color: var(--wp--preset--color--groen);
}

/* Menuborden: groen met een witte rand */
.hs-kop .hs-hoofdmenu {
	font-family: var(--wp--preset--font-family--aladin);
	font-size: 1.0625rem;
}

.hs-kop .hs-hoofdmenu .wp-block-navigation__container {
	gap: 0.4rem;
	justify-content: flex-end;
}

@media (min-width: 600px) {
	.hs-kop .hs-hoofdmenu .wp-block-navigation__container > .wp-block-navigation-item {
		background: var(--wp--preset--color--groen);
		border: 3px solid #fff;
		color: #fff;
	}

	.hs-kop .hs-hoofdmenu .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding: 0.62em 1.1em;
	}

	.hs-kop .hs-hoofdmenu .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content {
		padding-right: 0.35em;
	}

	/* Uitklappijltje: groot genoeg om aan te tikken (minimaal 24 × 24 px) */
	.hs-kop .hs-hoofdmenu .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon {
		align-items: center;
		display: inline-flex;
		height: 1.5rem;
		justify-content: center;
		margin: 0 0.6em 0 0;
		width: 1.5rem;
	}

	.hs-kop .hs-hoofdmenu .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon svg {
		height: 0.75em;
		width: 0.75em;
	}

	.hs-kop .hs-hoofdmenu .wp-block-navigation__container > .wp-block-navigation-item:hover,
	.hs-kop .hs-hoofdmenu .wp-block-navigation__container > .wp-block-navigation-item:focus-within {
		background: var(--wp--preset--color--groen-donker);
	}

	.hs-kop .hs-hoofdmenu .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
	.hs-kop .hs-hoofdmenu .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 0.25em;
	}

	/* Uitklapmenu */
	.hs-kop .hs-hoofdmenu .has-child .wp-block-navigation__submenu-container {
		background: var(--wp--preset--color--groen);
		border: 3px solid #fff;
		color: #fff;
		left: -3px;
		min-width: 15rem;
		padding: 0.25rem 0;
	}

	.hs-kop .hs-hoofdmenu .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 0.55em 1.1em;
	}

	.hs-kop .hs-hoofdmenu .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item:hover,
	.hs-kop .hs-hoofdmenu .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within {
		background: var(--wp--preset--color--groen-donker);
	}
}

/* Menuknop en uitklapscherm op de telefoon */
.hs-kop .hs-hoofdmenu .wp-block-navigation__responsive-container-open {
	align-items: center;
	background: var(--wp--preset--color--groen);
	border: 3px solid #fff;
	color: #fff;
	display: none;
	font-family: var(--wp--preset--font-family--aladin);
	font-size: 1.2rem;
	gap: 0.4rem;
	padding: 0.35rem 0.8rem 0.35rem 0.6rem;
}

.hs-kop .hs-hoofdmenu .wp-block-navigation__responsive-container-open::after {
	content: "Menu";
}

@media (max-width: 599px) {
	.hs-kop .hs-hoofdmenu .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

.hs-kop .hs-hoofdmenu .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: stretch;
	padding: 1.25rem;
	text-align: left;
}

.hs-kop .hs-hoofdmenu .is-menu-open .wp-block-navigation__container {
	--navigation-layout-justification-setting: stretch;
	gap: 0.6rem;
}

.hs-kop .hs-hoofdmenu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	border: 3px solid #fff;
	box-sizing: border-box;
	font-size: 1.4rem;
	padding: 0.5rem 1rem;
}

.hs-kop .hs-hoofdmenu .is-menu-open .wp-block-navigation__submenu-container {
	gap: 0.3rem;
	padding: 0.3rem 0 0.15rem 1.1rem;
}

.hs-kop .hs-hoofdmenu .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	font-size: 1.2rem;
}

.hs-kop .hs-hoofdmenu .wp-block-navigation__responsive-container-close {
	color: #fff;
}

/* Kop op tablet en telefoon */
@media (max-width: 1180px) {
	.hs-kop .hs-kop__binnen {
		align-items: center;
		flex-direction: column;
	}

	.hs-kop .hs-kop__menu {
		align-items: center;
		width: 100%;
	}

	.hs-kop .hs-hoofdmenu .wp-block-navigation__container {
		justify-content: center;
	}
}

@media (max-width: 599px) {
	.hs-kop .hs-kop__merk {
		width: min(100%, 17rem);
	}

	.hs-kop .hs-kop__menu {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}

	.hs-kop .hs-hoofdmenu {
		order: -1;
	}

	.hs-lettergrootte__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* ==========================================================================
   Inhoud
   ========================================================================== */

.hs-hoofdinhoud {
	padding-block: clamp(1.75rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4.5rem);
}

.hs-paginatitel {
	margin-block: 0 0.25rem;
}

.hs-homepagina .wp-block-post-content > :first-child {
	margin-block-start: 0;
}

.hs-home .hs-home__kolommen,
.hs-pagina-kolommen {
	gap: clamp(1.75rem, 4vw, 3.5rem);
}

.hs-home h1 {
	margin-block: 0 1.25rem;
}

p.is-style-hs-intro {
	font-size: var(--wp--preset--font-size--groot);
	line-height: 1.55;
}

.hs-ondertekening {
	color: var(--wp--preset--color--groen);
	font-family: var(--wp--preset--font-family--aladin);
	font-size: 1.6rem;
	margin-block-start: 1.75rem;
}

/* Fotokaart: witte lijst zoals een oude afdruk */
.wp-block-group.is-style-hs-fotokaart {
	background: #fff;
	border-radius: 4px;
	box-shadow: var(--wp--preset--shadow--foto);
	padding: 0.5rem 0.5rem 1.6rem;
}

.wp-block-group.is-style-hs-fotokaart > .wp-block-gallery {
	margin: 0;
}

/* Groen bord, in dezelfde vorm als de menuborden */
.wp-block-group.is-style-hs-bord {
	background: var(--wp--preset--color--groen);
	border: 3px solid #fff;
	box-shadow: 0 0 0 2px var(--wp--preset--color--groen);
	color: #fff;
	font-size: 1.0625rem;
	line-height: 1.55;
	padding: clamp(1.1rem, 2.5vw, 1.5rem);
}

.wp-block-group.is-style-hs-bord :where(h2, h3, h4) {
	color: #fff;
}

.wp-block-group.is-style-hs-bord h2 {
	font-size: 1.75rem;
	margin-block: 0 0.4rem;
}

.wp-block-group.is-style-hs-bord h3 {
	border-top: 1px solid rgba(255, 255, 255, 0.35);
	font-size: 1.3rem;
	margin-block: 1rem 0.3rem;
	padding-top: 0.85rem;
}

.wp-block-group.is-style-hs-bord :where(p, ul) {
	margin-block: 0.3rem;
}

.wp-block-group.is-style-hs-bord a:where(:not(.wp-element-button)) {
	color: #fff;
}

.wp-block-group.is-style-hs-bord .wp-block-buttons {
	margin-block-start: 1.25rem;
}

ul.hs-prijzen {
	list-style: none;
	padding-left: 0;
}

ul.hs-prijzen li {
	border-bottom: 1px dotted color-mix(in srgb, currentColor 45%, transparent);
	display: flex;
	gap: 1rem;
	padding-block: 0.15rem;
}

/* Data van de stoomdagen */
ul.hs-data {
	list-style: none;
	padding-left: 0;
}

ul.hs-data li {
	border-bottom: 1px dotted color-mix(in srgb, currentColor 45%, transparent);
	padding-block: 0.15rem;
}

/* Grote tekst op een groen bord (bijvoorbeeld op de pagina over de stoommachine) */
.wp-block-group.is-style-hs-bord .hs-bord-groot {
	font-family: var(--wp--preset--font-family--aladin);
	font-size: 1.45rem;
	line-height: 1.35;
}

.wp-block-post-content > .wp-block-group.is-style-hs-bord {
	margin-block: 2rem;
}

/* Foto's met een witte rand, zoals een afdruk */
.wp-block-image.hs-foto img,
.wp-block-gallery.hs-fotoalbum .wp-block-image img {
	border: 5px solid #fff;
	box-shadow: var(--wp--preset--shadow--foto);
}

/* Fotoalbum: gelijke vakjes, ook als de laatste rij niet vol is */
.wp-block-gallery.has-nested-images.hs-fotoalbum figure.wp-block-image:not(#individual-image) {
	flex-grow: 0;
}

.wp-block-gallery.has-nested-images.hs-fotoalbum figure.wp-block-image:not(#individual-image) img {
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
}

.wp-block-image.hs-foto figcaption {
	color: #5a5a5a;
	font-style: italic;
}

/* Tijdlijn (historie van de stoommachine) */
ul.hs-tijdlijn {
	border-left: 3px solid var(--wp--preset--color--groen);
	list-style: none;
	padding-left: 1.5rem;
}

ul.hs-tijdlijn li {
	margin-block-end: 1.25rem;
	position: relative;
}

ul.hs-tijdlijn li::before {
	background: var(--wp--preset--color--creme);
	border: 3px solid var(--wp--preset--color--groen);
	border-radius: 50%;
	content: "";
	height: 0.8rem;
	left: calc(-1.5rem - 0.4rem - 1.5px);
	position: absolute;
	top: 0.45rem;
	width: 0.8rem;
	box-sizing: border-box;
}

ul.hs-tijdlijn li > strong:first-child {
	color: var(--wp--preset--color--groen);
	display: block;
	font-family: var(--wp--preset--font-family--aladin);
	font-size: 1.25rem;
	font-weight: 400;
}

/* Video die pas na een klik van YouTube wordt geladen */
.hs-video {
	align-items: center;
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--groen);
	border: 3px solid #fff;
	box-shadow: 0 0 0 2px var(--wp--preset--color--groen);
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	justify-content: center;
	padding: 1.5rem;
	text-align: center;
}

.hs-video > * {
	margin: 0;
}

.hs-video .hs-video__titel {
	font-family: var(--wp--preset--font-family--aladin);
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	line-height: 1.2;
}

.hs-video .hs-video__noot {
	font-size: var(--wp--preset--font-size--klein);
	max-width: 32rem;
}

.hs-video .wp-block-buttons {
	justify-content: center;
}

.hs-video .hs-video__knop .wp-block-button__link::before {
	border-bottom: 0.45em solid transparent;
	border-left: 0.75em solid currentColor;
	border-top: 0.45em solid transparent;
	content: "";
	display: inline-block;
	margin-right: 0.6em;
	vertical-align: -0.05em;
}

.hs-video.is-afspelend {
	background: #000;
	padding: 0;
}

.hs-video iframe {
	border: 0;
	display: block;
	height: 100%;
	width: 100%;
}

/* Sponsorlogo naast de gegevens */
.hs-sponsor {
	align-items: center;
}

ul.hs-prijzen li strong {
	font-variant-numeric: lining-nums tabular-nums;
	margin-left: auto;
	white-space: nowrap;
}

/* Lichte knop op een groen bord */
.wp-block-button.is-style-hs-licht .wp-block-button__link {
	background: #fff;
	border-color: var(--wp--preset--color--groen);
	box-shadow: 0 0 0 2px #fff;
	color: var(--wp--preset--color--groen);
}

.wp-block-button.is-style-hs-licht .wp-block-button__link:hover {
	background: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--groen-donker);
}

/* Berichtenoverzicht */
.hs-berichten .wp-block-post {
	border-bottom: 1px solid rgba(26, 74, 60, 0.25);
	padding-bottom: 1.5rem;
}

/* ==========================================================================
   Voet
   ========================================================================== */

.hs-voet {
	font-size: 1.0625rem;
	line-height: 1.6;
	padding-block: clamp(2rem, 4vw, 2.75rem) 1.25rem;
}

.hs-voet a:where(:not(.wp-element-button)) {
	color: #fff;
}

.hs-voet a:where(:not(.wp-element-button)):hover {
	color: #fff;
	text-decoration-thickness: 2px;
}

.hs-voet .hs-voet__kop {
	color: #fff;
	font-size: 1.4rem;
	margin-block: 0 0.5rem;
}

.hs-voet p {
	margin-block: 0 0.5rem;
}

.hs-voet .hs-voet__copyright {
	border-top: 1px solid rgba(255, 255, 255, 0.3);
	font-size: var(--wp--preset--font-size--klein);
	margin-block-start: 1.75rem;
	padding-top: 1rem;
}

/* ==========================================================================
   Afdrukken (bijvoorbeeld de openingstijden)
   ========================================================================== */

@media print {
	.hs-kop {
		background: none;
		color: #000;
		padding-block: 0;
	}

	.hs-kop .hs-woordmerk a {
		color: #000;
		text-shadow: none;
	}

	.hs-kop-foto,
	.hs-hoofdmenu,
	.hs-lettergrootte,
	.hs-diashow__knop {
		display: none !important;
	}

	.wp-block-group.is-style-hs-bord {
		background: none;
		box-shadow: none;
		color: #000;
	}

	.wp-block-group.is-style-hs-bord :where(h2, h3, h4) {
		color: #000;
	}
}