/* ==========================================================================
   De Nordman — WordPress-aanpassingen
   styles.css blijft identiek aan de statische site; alles wat WordPress
   anders maakt aan de opbouw van de pagina, wordt hier opgevangen.
   ========================================================================== */

/* ---------- Paginaopbouw ---------- */

/* WordPress zet de kop en voettekst in een eigen <header>/<footer>-omhulsel.
   Daarbinnen kan .nav (position: sticky) alleen plakken zolang dat omhulsel in
   beeld is — dus vrijwel niet. Met display: contents verdwijnt het omhulsel uit
   de opbouw en plakt het menu weer aan de hele pagina, zoals op de statische site. */
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > footer.wp-block-template-part {
	display: contents;
}

/* Geen automatische ruimte tussen blokken: de secties regelen hun eigen
   witruimte al in styles.css. */
.wp-site-blocks > * + *,
.site-main > * + *,
.wp-block-post-content > * + * {
	margin-block-start: 0;
}

/* ---------- Bestand tegen lange teksten ----------
   Jurian kan meer tekst typen dan het ontwerp voorziet. De hero groeit dan mee
   in plaats van tekst weg te knippen, en een extreem lang woord breekt af in
   plaats van buiten beeld te vallen. Bij normale tekst verandert er niets. */

.hero {
	height: auto;
	min-height: max(640px, 100dvh);
}

/* De hero blijft een gewoon blok, ook als de indeling in de editor op "rij"
   (flex) is gezet. Anders zet WordPress de marges op 0 en staat de inhoud
   links tegen de rand in plaats van in lijn met het menu. */
body .hero.hero {
	display: block;
}

.hero > .hero__content {
	width: 100%;
	margin-inline: auto;
}

.hero__content {
	height: auto;
	min-height: calc(max(640px, 100dvh) - 76px);
	padding-block: 3rem;
}

.site-main :is(h1, h2, h3, h4, p, li, summary, .wp-block-button__link) {
	overflow-wrap: anywhere;
	hyphens: auto;
}

.site-main .wp-block-button__link {
	white-space: normal;
}

/* ---------- WordPress-adminbalk (alleen zichtbaar als je bent ingelogd) ---------- */

.admin-bar .nav {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.admin-bar .nav__mobile {
	padding-top: calc(76px + var(--wp-admin--admin-bar--height, 32px));
}

/* Op smalle schermen scrolt de WordPress-balk mee weg; dan hoort het menu
   weer tegen de bovenrand. */
@media screen and (max-width: 600px) {
	.admin-bar .nav {
		top: 0;
	}
	.admin-bar .nav__mobile {
		padding-top: 76px;
	}
}

/* ---------- Knoppen ----------
   In de statische site staat .btn op de link zelf. WordPress zet de klasse
   op een omhullende <div class="wp-block-button"> en de link krijgt
   .wp-block-button__link. Deze regels geven die link exact het .btn-uiterlijk. */

.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.82rem;
	line-height: 1.7;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 14px 32px;
	border-radius: var(--radius-sm);
	border: 1.5px solid transparent;
	white-space: nowrap;
	box-shadow: none;
	transition: transform var(--transition), background-color var(--transition), color var(--transition), border-color var(--transition);
}

.wp-block-button .wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-button .wp-block-button__link:active { transform: translateY(1px) scale(0.98); }

.wp-block-button.btn--primary .wp-block-button__link {
	background: var(--color-terracotta);
	color: var(--color-white);
}
.wp-block-button.btn--primary .wp-block-button__link:hover {
	background: var(--color-terracotta-dark);
}

.wp-block-button.btn--ghost .wp-block-button__link {
	border-color: var(--color-forest);
	color: var(--color-forest);
	background: transparent;
}
.wp-block-button.btn--ghost .wp-block-button__link:hover {
	background: var(--color-forest);
	color: var(--color-white);
}

.wp-block-button.btn--ghost-light .wp-block-button__link {
	border-color: var(--color-cream);
	color: var(--color-cream);
	background: transparent;
}
.wp-block-button.btn--ghost-light .wp-block-button__link:hover {
	background: var(--color-cream);
	color: var(--color-forest);
}

.wp-block-button.btn--ghost-white .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.8);
	color: var(--color-white);
	background: transparent;
}
.wp-block-button.btn--ghost-white .wp-block-button__link:hover {
	background: var(--color-white);
	color: var(--color-forest);
}

/* Knop in het FAQ-blok had in de statische site een eigen inline stijl. */
.faq__cta .wp-block-button .wp-block-button__link {
	letter-spacing: 3.1px;
	border-width: 1px 6px 1px 1px;
}

/* ---------- Foto's ----------
   In de statische site zijn foto's achtergrondafbeeldingen. Als WordPress-
   afbeeldingsblok kan Jurian ze vervangen; deze regels laten ze hun kader
   vullen zoals de achtergrond dat deed. */

.site-main figure.wp-block-image {
	margin: 0;
}

.wp-block-image.species-card__img,
.wp-block-image.species-row__img {
	overflow: hidden;
}

.wp-block-image.species-card__img img,
.wp-block-image.species-row__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.easyfix__img .wp-block-image,
.easyfix__img .wp-block-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.easyfix__badge {
	z-index: 1;
}

/* ---------- Veelgestelde vragen ----------
   Het WordPress-uitklapblok heeft geen plek voor het rondje met plusteken,
   dus dat wordt hier in CSS getekend: een cirkel met twee streepjes, waarvan
   het verticale verdwijnt als de vraag openstaat. */

.faq-item summary::after {
	content: "";
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	background:
		linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;
	transition: background-size 0.3s, color 0.2s;
}

.faq-item[open] summary::after {
	background-size: 12px 1.5px, 1.5px 0;
}

/* ---------- Vervangers voor inline stijlen uit de statische site ---------- */

.u-mt-half { margin-top: 0.5rem; }
.u-mt-1 { margin-top: 1rem; }
.u-mt-125 { margin-top: 1.25rem; }
.u-color-forest { color: var(--color-forest); }
.u-color-charcoal { color: var(--color-charcoal); }
.u-bg-cream { background: var(--color-cream); }
.u-bg-white { background: var(--color-white); }
.u-pt-0 { padding-top: 0; }

.band__status-sub a { color: var(--color-sage); }
.band__status-value a { color: var(--color-cream); }

/* ---------- Paginakop op binnenpagina's ----------
   De foto is een afbeeldingsblok (vervangbaar) dat het hele kader vult. */

.wp-block-image.page-hero__img {
	position: absolute;
	inset: 0;
	margin: 0;
}

.wp-block-image.page-hero__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.u-objpos-30 img { object-position: center 30%; }

/* ---------- Soorten ---------- */

.soorten-intro {
	font-size: 1.15rem;
	max-width: 62ch;
}

/* ---------- Easy-Fix ---------- */

.easyfix-steps-head {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	max-width: 60ch;
}

.easyfix-stappen {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	margin-top: 3rem;
}

.easyfix-stappen img {
	width: 100%;
	background: var(--color-cream-warm);
}

/* ---------- Openingstijden ---------- */

.opening-section {
	padding-top: calc(var(--section-padding) * 0.7);
}

.opening-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

@media (max-width: 980px) {
	.opening-grid { grid-template-columns: 1fr; }
}

.opening-aside {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.opening-visit {
	background: var(--color-forest);
	color: var(--color-cream);
	padding: 2rem;
}

.opening-visit h3 {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--color-cream);
	font-size: 1.6rem;
	margin: 0.75rem 0;
}

.opening-visit__addr { color: rgba(245, 241, 232, 0.85); }
.opening-visit .wp-block-buttons { margin-top: 1.5rem; }

.opening-map { border: 1px solid rgba(27, 77, 46, 0.15); }

.opening-direct {
	padding: 1.75rem;
	border: 1px solid rgba(27, 77, 46, 0.15);
}

.opening-direct__tel { margin-top: 1rem; }
.opening-direct__tel strong { font-family: var(--font-display); color: var(--color-forest); }
.opening-direct__tel a { color: var(--color-charcoal); }

.opening-direct__note {
	color: var(--color-muted);
	font-size: 0.9rem;
	margin-top: 0.75rem;
}

/* De knop in het terracotta belkader is wit, zoals .callout .btn. */
.callout .wp-block-button .wp-block-button__link {
	background: var(--color-white);
	color: var(--color-terracotta);
	border-color: var(--color-white);
}

.callout .wp-block-button .wp-block-button__link:hover {
	background: var(--color-forest);
	color: var(--color-white);
	border-color: var(--color-forest);
}

/* ---------- Contact ---------- */

.contact-page {
	padding-top: calc(var(--section-padding) * 0.8);
}

.contact-page__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2.5rem, 5vw, 4rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--color-charcoal);
}

.contact__map--tall { min-height: 520px; }

/* ---------- Seizoensstatus: groen zodra de kwekerij open is ----------
   De schakelaar Open / Gesloten in Kwekerij-gegevens bepaalt de klasse (inc/hours.php). */

.season-badge--open {
	background: rgba(168, 213, 186, 0.3);
	color: var(--color-forest);
}

.season-badge--open::before {
	background: var(--color-forest);
}

.band__status--open .band__status-label::before {
	background: var(--color-sage);
	box-shadow: 0 0 0 3px rgba(168, 213, 186, 0.25);
}

/* ---------- Tijdentabel: dag links, tijd rechts (geen labels meer per dag) ---------- */

.hours-row {
	grid-template-columns: 1fr auto;
}

.hours-time {
	grid-column: auto;
	text-align: right;
}