/* ==========================================================================
   Blossom Authors
   ========================================================================== */

/* A-Z navigatie
   ------------------------------------------------------------------------- */
.author-navigation {
	display: grid;
	grid-template-columns: repeat(4, 32px);
	justify-content: space-around;
	gap: 4px 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.author-navigation .wp-block-navigation-item {
	display: flex;
	justify-content: center;
}

.author-navigation .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 50%;
	font-family: "Bungee", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 16px;
	line-height: 32px;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	color: #68707A;
	transition: color .2s ease, background-color .2s ease;
}

.author-navigation .wp-block-navigation-item__content:hover,
.author-navigation .wp-block-navigation-item__content:focus-visible {
	color: #B46A55;
	background-color: #ECDAD580;
	outline: none;
}

.author-navigation .wp-block-navigation-item__label {
	line-height: inherit;
}

/* Letterkoppen in de Query Loop
   ------------------------------------------------------------------------- */
.author-letter-loop .author-letter-row {
	grid-column: 1 / -1;
	width: 100%;
	flex-basis: 100%;
	list-style: none;
	margin: 0;
	scroll-margin-top: 120px; /* hoogte sticky header */
}

.author-letter-loop .author-letter-row:not(:first-child) {
	margin-top: 48px; /* ruimte tussen groepen */
}

.author-letter {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #ECDAD580;
	color: #B46A55;
	font-family: "Bungee", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1;
}

/* Mobiele A-Z filterknop (Greyd Popover)
   ------------------------------------------------------------------------- */
.author-filter .wp-block-greyd-popover-button {
	display: inline-flex !important;
	align-items: center;
	gap: 20px;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #0B1829 !important;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none !important;
	cursor: pointer;
}

.author-filter .wp-block-greyd-popover-button:hover,
.author-filter .wp-block-greyd-popover-button:focus-visible {
	background: transparent !important;
	color: #B46A55 !important;
}

.author-filter .author-filter__icon,
.author-filter .author-filter__icon svg {
	display: block;
	line-height: 0;
}

/* Mobiel: filterknop op dezelfde regel als de eerste letterkop
   De group om de popover wordt even hoog als de letter-cirkel (40px) en
   trekt de content eronder met een negatieve marge omhoog. Het blok direct
   erna (de Query Loop) krijgt geen bovenmarge, zodat de "A" en de knop
   precies op één lijn liggen.
   575px = Greyd's xs-breakpoint, waarop de popover zichtbaar is.
   ------------------------------------------------------------------------- */
@media (max-width: 575px) {
	.wp-block-group:has(> .author-filter) {
		position: relative;
		z-index: 3;
		display: flex !important;
		align-items: center;
		justify-content: flex-end;
		height: 40px;
		margin-bottom: -40px !important;
		pointer-events: none; /* lege ruimte van de group blokkeert niets */
	}

	.wp-block-group:has(> .author-filter) .author-filter {
		pointer-events: auto;
	}

	.wp-block-group:has(> .author-filter) + * {
		margin-top: 0 !important;
	}
}

/* Popup: sluitknop direct boven de letters
   De popup wordt een kolom die verticaal centreert; de sluitknop staat niet
   meer absoluut bovenaan het scherm maar in de flow, net boven de letters.
   ------------------------------------------------------------------------- */
.author-filter [role="dialog"] {
	display: flex !important;
	flex-direction: column;
	justify-content: center;
}

/* Greyd zet min-height: 100% inline op de group; daardoor staan de letters
   los van de knop in het midden van het scherm. */
.author-filter [role="dialog"] > .wp-block-group {
	min-height: 0 !important;
	flex: 0 0 auto;
}

/* Sluitknop: zelfde stijl als .facetwp-flyout-close (FacetWP-plugin) */
.author-filter .popover-close-button {
	position: static !important;
	inset: auto !important;
	transform: none !important;
	order: 0;
	display: flex !important;
	align-items: center;
	width: 100% !important;
	height: 60px !important;
	margin: 0 0 24px !important;
	padding: 0 0 0 20px !important;
	box-sizing: border-box;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background-color: #DDE4E2 !important;
	background-image: url('/wp-content/uploads/2026/07/flyout-close-icon.svg') !important;
	background-repeat: no-repeat !important;
	background-position: right center !important;
	cursor: pointer;
}

/* Greyd's eigen kruisje (pseudo-elementen) verbergen */
.author-filter .popover-close-button::before,
.author-filter .popover-close-button::after {
	display: none !important;
}

.author-filter .author-filter__close-label {
	font-family: "Bungee", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	color: #3D6459;
}

/* Zoekfunctie: link "Toon alle auteurs" bij een actieve zoekopdracht
   ------------------------------------------------------------------------- */
.author-search-reset {
	margin: 12px 0 0 20px;
	font-size: 14px;
}

.author-search-reset a {
	color: #B46A55;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.author-search-reset a:hover {
	color: #0B1829;
}

/* ==========================================================================
   Auteur single – hero
   Class "hero-single-autor" op de buitenste Group van de hero.
   ========================================================================== */
.hero-single-autor {
	position: relative;
	isolation: isolate;
	/* ruimte tussen de groene rand en de inhoud (vooral zichtbaar 576–1115px) */
	padding-left: clamp(20px, 4vw, 48px) !important;
	padding-right: clamp(20px, 4vw, 48px) !important;
}

/* Groen vlak achter de bovenkant */
.hero-single-autor::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 215px;
	background-color: #3D6459;
	border-radius: 24px;
	z-index: -1;
}

/* Foto en titel 48px onder de bovenkant van het groen */
.hero-single-autor .wp-block-columns {
	padding-top: 48px;
}

/* Bio verder onder het groen (was 80px) */
.hero-single-autor .wp-block-group:has(> .wp-block-post-content) {
	margin-top: 105px !important;
}

/* --------------------------------------------------------------------------
   Mobiel (Greyd xs, ≤ 575px): foto bovenaan, groen achter de titel
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {

	/* Geen extra zijpadding: het groen zit hier op de titelkolom */
	.hero-single-autor {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Groen bovenaan uit, kolommen zonder ruimte erboven */
	.hero-single-autor::before {
		display: none;
	}

	.hero-single-autor .wp-block-columns {
		padding-top: 0;
	}

	/* Fotokolom volle breedte */
	.hero-single-autor .wp-block-column:first-child {
		width: 100% !important;
		flex-basis: 100% !important;
	}

	/* Fotokaart gecentreerd, smaller dan het groen: links en rechts blijft groen zichtbaar */
	.hero-single-autor .wp-block-column:first-child > :first-child {
		width: 80% !important;
		max-width: 365px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Foto vult de kaart, altijd vierkant (staat inline vast op 345px) */
	.hero-single-autor .wp-block-column:first-child picture {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 1 / 1;
	}

	/* Groen vlak op de kolom met de titel, 70px achter de foto */
	.hero-single-autor .wp-block-column:last-child {
		position: relative;
	}

	.hero-single-autor .wp-block-column:last-child::before {
		content: "";
		position: absolute;
		top: -70px;
		left: 0;
		right: 0;
		height: 230px;
		background-color: #3D6459;
		border-radius: 24px;
		z-index: -1;
	}

	/* Titel binnen het groen: wat ruimte boven en opzij */
	.hero-single-autor .wp-block-column:last-child > .wp-block-group {
		padding-top: 30px !important;
	}

	.hero-single-autor h2,
	.hero-single-autor .has-caveat-font-family {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Bio onder het groen */
	.hero-single-autor .wp-block-group:has(> .wp-block-post-content) {
		margin-top: 130px !important;
	}
}