/*
 * Judith Nijland — aanvullende CSS.
 *
 * Kleuren, typografie en spacing komen uit theme.json. Hier staat alleen wat
 * daar niet in past: de concertenlijst, het aanmeldblok, de projectdetail-
 * pagina's en een paar losse patronen.
 *
 * Variabelen die hier gebruikt worden komen uit theme.json:
 *   --wp--preset--color--ink | ink-soft | paper | paper-deep | gold | gold-lit | sage
 *   --wp--preset--font-family--display | body
 *   --wp--custom--line | --wp--custom--line-soft
 */

:root {
	--line: var(--wp--custom--line, rgba(43, 32, 24, .18));
	--line-soft: var(--wp--custom--line-soft, rgba(43, 32, 24, .09));
}

/* ---------- toegankelijkheid ---------- */

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---------- header ---------- */

/* De achtergrond en de blur staan op een pseudo-element, niet op .masthead
   zelf. Reden: backdrop-filter maakt van een element een containing block
   voor position:fixed-nakomelingen. De mobiele menu-overlay staat op
   inset:0 en werd daardoor even hoog als de balk zelf (36px) in plaats van
   schermvullend. Op het pseudo-element blijft de blur werken zonder dat de
   overlay eraan vastzit. Sticky staat op de template-part-wrapper, zie
   verderop in dit bestand. */
.masthead {
	position: relative;
	border-bottom: 1px solid var(--line-soft);
}

.masthead::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: color-mix(in srgb, var(--wp--preset--color--paper) 92%, transparent);
	backdrop-filter: blur(8px);
}

.masthead > * {
	position: relative;
	z-index: 1;
}

.masthead .wordmark a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.3rem;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.nav a {
	font-family: var(--wp--preset--font-family--display);
	text-decoration: none;
	padding-bottom: .3rem;
	border-bottom: 2px solid transparent;
	transition: border-color .18s ease, color .18s ease;
}

.nav a:hover,
.nav .current-menu-item > a {
	color: var(--wp--preset--color--gold);
	border-bottom-color: var(--wp--preset--color--gold);
	text-decoration: none;
}

/* ---------- hero ---------- */

.splash .hero-name {
	color: #F8F1E6;
	font-size: clamp(2.9rem, 7.6vw, 5.6rem);
	line-height: .94;
	letter-spacing: -.025em;
	margin-bottom: 1.4rem;
}

.splash .hero-line {
	color: #EBDECC;
	font-size: 1.2rem;
	max-width: 34ch;
	margin-bottom: 1.4rem;
}

.splash .tongues {
	color: var(--wp--preset--color--gold-lit);
	font-size: 1rem;
}

/* Verloop van links naar rechts, zodat de tekstkolom altijd contrast heeft
   en de zon rechts in beeld vrij blijft. */
.splash .wp-block-cover__background {
	background: linear-gradient(to right,
			rgba(34, 23, 15, .70) 0%,
			rgba(34, 23, 15, .46) 30%,
			rgba(34, 23, 15, .10) 54%,
			rgba(34, 23, 15, 0) 68%),
		linear-gradient(to top, rgba(34, 23, 15, .42), rgba(34, 23, 15, 0) 42%) !important;
}

.tongues {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem 1.4rem;
	font-family: var(--wp--preset--font-family--display);
}

.tongues span {
	position: relative;
}

.tongues span + span::before {
	content: "";
	position: absolute;
	left: -.75rem;
	top: .55em;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: rgba(248, 241, 230, .6);
}

/* ---------- concertenlijst ---------- */

.ledger {
	border-top: 1px solid var(--wp--preset--color--ink);
}

.gig {
	display: grid;
	grid-template-columns: 5.5rem 9rem minmax(0, 13rem) minmax(0, 1fr) auto;
	gap: .3rem 1.5rem;
	align-items: baseline;
	padding: .95rem 0;
	border-bottom: 1px solid var(--line-soft);
}

.gig .when {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--gold);
	white-space: nowrap;
}

.gig .city {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1rem;
}

.gig .venue {
	font-size: .96rem;
	color: var(--wp--preset--color--ink-soft);
}

.gig .project {
	font-size: .96rem;
	font-style: italic;
	color: var(--wp--preset--color--ink-soft);
}

.gig .project a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--line-soft);
}

.gig .project a:hover {
	color: var(--wp--preset--color--gold);
	border-color: currentColor;
	text-decoration: none;
}

.gig .ticket {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--gold);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--gold-lit);
	white-space: nowrap;
}

.gig .ticket:hover {
	color: var(--wp--preset--color--ink);
	border-color: currentColor;
	text-decoration: none;
}

.archive-head {
	margin: 4rem 0 0;
	padding-bottom: .6rem;
}

.archive .gig {
	padding-block: .75rem;
}

.archive .gig .when {
	color: var(--wp--preset--color--sage);
}

.archive .gig .city {
	font-size: 1rem;
	color: var(--wp--preset--color--ink-soft);
}

.archive .gig .venue,
.archive .gig .project {
	color: var(--wp--preset--color--sage);
}

/* ---------- projectenlijst op de homepage ---------- */

.home-head {
	margin: clamp(3rem, 6vw, 4.5rem) 0 1.25rem;
}

.repertoire .repertoire-row {
	gap: 1.25rem;
	padding: .85rem 0;
	border-bottom: 1px solid var(--line-soft);
}

.repertoire .thumb img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 2px;
}

.repertoire .title a {
	text-decoration: none;
	color: inherit;
}

.repertoire .repertoire-row:hover .title a {
	color: var(--wp--preset--color--gold);
}

/* ---------- projectdetailpagina ---------- */

.backlink {
	font-family: var(--wp--preset--font-family--display);
	font-size: .95rem;
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--gold-lit);
}

.detail .frame img {
	width: 100%;
	border-radius: 2px;
}

.detail .prose h3 {
	color: var(--wp--preset--color--gold);
	margin-top: 2.1rem;
}

.credits {
	font-size: .92rem;
	color: var(--wp--preset--color--ink-soft);
	margin-top: 1.6rem;
	line-height: 1.55;
}

.credits span {
	display: block;
}

/* ---------- aanmeldblok ---------- */

.signup {
	margin: clamp(3rem, 6vw, 4.5rem) 0 0;
	padding: clamp(1.6rem, 4vw, 2.4rem);
	background: var(--wp--preset--color--paper-deep);
	border-top: 2px solid var(--wp--preset--color--gold);
	border-radius: 2px;
}

.signup h2 {
	font-family: var(--wp--preset--font-family--display);
	margin: 0 0 .5rem;
}

.signup p {
	margin: 0;
	max-width: 46ch;
	color: var(--wp--preset--color--ink-soft);
}

.signup-row {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	margin-top: 1.15rem;
	max-width: 34rem;
}

.signup input[type="email"] {
	flex: 1 1 15rem;
	min-width: 0;
	padding: .72rem 1rem;
	border: 1px solid var(--line);
	border-radius: 2px;
	background: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
}

.signup button {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	cursor: pointer;
	background: var(--wp--preset--color--gold);
	color: #FBF3E8;
	border: 0;
	padding: .72rem 1.7rem;
	border-radius: 2rem;
	transition: background .18s ease;
}

.signup button:hover {
	background: var(--wp--preset--color--ink);
}

.signup .fineprint {
	font-size: .85rem;
	margin-top: .9rem;
}

/* ---------- shop ---------- */

/* Stond op margin-top:-.5rem, uit het ontwerp waar dit bijschrift direct
   onder een kop hoorde. In WordPress staat het onder de afbeelding, en dan
   schuift het er met een negatieve marge overheen. */
.ai-note {
	font-size: .8rem;
	color: var(--wp--preset--color--sage);
	margin: .55rem 0;
}

.credit {
	font-size: .85rem;
	color: var(--wp--preset--color--sage);
}

/* ---------- footer ---------- */

.foot {
	color: #CBB69E;
	position: relative;
}

.foot::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), var(--wp--preset--color--sage) 55%, transparent);
}

.foot .foot-name a {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.6rem;
	color: var(--wp--preset--color--paper);
	text-decoration: none;
}

.foot-links a {
	color: var(--wp--preset--color--gold-lit);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.foot-links a:hover {
	border-bottom-color: currentColor;
	text-decoration: none;
}

.foot-note {
	margin-top: .6rem;
	font-size: .9rem;
	color: #9C8467;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
	.gig {
		grid-template-columns: 5rem minmax(0, 1fr);
		gap: .2rem 1rem;
	}

	.gig .city,
	.gig .venue,
	.gig .project,
	.gig .ticket {
		grid-column: 2;
	}

	.gig .ticket {
		justify-self: start;
		margin-top: .3rem;
	}

	.gig .when {
		grid-row: span 4;
	}
}

/* Het ontwerp schakelt de hero om op 900px, niet op 720px. */
@media (max-width: 900px) {
	.splash.wp-block-cover {
		min-height: min(66vh, 460px) !important;
	}

	/* Op smalle schermen staat de tekst onderin, dus daar hoort het verloop.
	   Iets sterker en hoger doorlopend dan in het ontwerp: de hero is in
	   WordPress hoger dan in de losse HTML, waardoor de lead en de talenrij
	   over het lichtste deel van de foto vielen en wegvielen. */
	.splash .wp-block-cover__background {
		background: linear-gradient(to top,
				rgba(34, 23, 15, .88),
				rgba(34, 23, 15, .62) 45%,
				rgba(34, 23, 15, .15) 78%,
				rgba(34, 23, 15, 0) 100%) !important;
	}
}

@media (max-width: 720px) {
	.repertoire .thumb img {
		width: 56px;
		height: 56px;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}
}

/* ------------------------------------------------------------------
 * Correcties na de eerste stagingtest
 * ------------------------------------------------------------------ */

/* Het cover-blok zet has-background-dim-0 op de achtergrondlaag, en die
   klasse betekent opacity:0. Daardoor was het verloop onzichtbaar en stond
   de titel onleesbaar over de foto. */
.splash .wp-block-cover__background {
	opacity: 1 !important;
}

/* Lopende tekst blijft op leesbare breedte, de agenda en de projectenlijst
   mogen de volle 1180px pakken via alignwide. */
.ledger.alignwide,
.repertoire.alignwide {
	max-width: var(--wp--style--global--wide-size);
}

/* Terugkoppeling naar Projecten hoort dicht op de titel te staan. */
.backlink-wrap {
	margin-bottom: 0.4rem;
}

/* De credits en de linklijst in de linkerkolom van een projectpagina. */
.detail .wp-block-column .links {
	list-style: none;
	padding-left: 0;
}

/* ------------------------------------------------------------------
 * Leesbreedte
 *
 * WordPress centreert elk kind van een constrained layout. Lopende tekst
 * moet juist links uitlijnen op de contentkolom, op een leesbare
 * regellengte. Eerder stond hier margin-left:0, maar dat lijnt uit op de
 * paginarand in plaats van op de kolom: op brede schermen sprong de tekst
 * daardoor 120px naar links ten opzichte van de koppen.
 *
 * De marge hieronder is precies de ruimte links van de contentkolom, en
 * valt terug op 0 zodra het venster smaller is dan die kolom.
 * ------------------------------------------------------------------ */

.entry-content > p,
.entry-content > ul:not(.wp-block-post-template),
.entry-content > ol,
.entry-content > blockquote {
	max-width: var(--wp--custom--measure, 38rem);
	margin-left: max(0px, (100% - var(--wp--style--global--content-size)) / 2) !important;
	margin-right: auto !important;
}

/* Het aanmeldblok krijgt dezelfde breedte en uitlijning als de lopende
   tekst erboven en eronder. Twee dingen waren mis: zonder !important won de
   layoutregel van WordPress met margin-left:auto, waardoor het blok
   gecentreerd stond in plaats van links; en .signup is een eigen <section>
   zonder border-box, waardoor de padding bij de breedte werd opgeteld. */
.entry-content > .signup {
	box-sizing: border-box;
	max-width: var(--wp--custom--measure, 38rem);
	margin-left: max(0px, (100% - var(--wp--style--global--content-size)) / 2) !important;
	margin-right: auto !important;
}

/* Standfirst iets groter dan de rest van de lopende tekst. */
.standfirst {
	font-size: 1.15rem;
}

/* Op de projectpagina's staat de tekst in een kolom; die is al smal genoeg. */
.detail .prose > p,
.detail .prose > ul,
.detail .prose > blockquote {
	max-width: none;
}

/* De agenda volgt gewoon de contentkolom. Eerder stond hier max-width:none
   met margin:0, uit de tijd dat de contentkolom nog 68ch was; daardoor liep
   de agenda tot de paginarand terwijl de paginatitel op de kolom stond. Nu
   contentSize gelijk is aan de kolom uit het ontwerp is dat niet meer nodig. */

/* Discografie en citaat op de Over-pagina. */
.discog{list-style:none;padding:0;max-width:26rem}
.discog li{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;border-bottom:1px solid var(--line-soft)}
.discog li span:last-child{color:var(--wp--preset--color--ink-soft)}
.wp-block-quote.pull{
	background:var(--wp--preset--color--ink);color:var(--wp--preset--color--paper);
	border:0;border-radius:2px;padding:2rem clamp(1.5rem,4vw,2.75rem);margin-top:2.5rem;
}
.wp-block-quote.pull p{font-family:var(--wp--preset--font-family--display);font-size:1.25rem;line-height:1.4;color:inherit}
.wp-block-quote.pull cite{display:block;margin-top:1rem;color:var(--wp--preset--color--gold-lit);font-style:normal;font-size:.95rem}
.todo{font-size:.92rem;color:var(--wp--preset--color--sage);border-left:2px solid var(--line);padding-left:.9rem}

/* Beeld op Over en Shop. */
.about .portrait img{width:100%;border-radius:2px}
.shop-grid .item .cover img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2px}
.shop-grid .item h3{margin-top:.9rem;font-size:1.25rem}
.shop-grid .item .form{color:var(--wp--preset--color--ink-soft);font-size:.95rem;margin:.15rem 0 .5rem}
.wp-block-image.frame img{border-radius:2px}
@media (max-width:781px){
	.shop-grid.wp-block-columns{gap:2rem}
}

/* ------------------------------------------------------------------
 * Gelijktrekken met het HTML-ontwerp, derde ronde
 *
 * Alles hieronder komt letterlijk uit judith-nijland-splash.html. Waar het
 * om een ontwerpbeslissing gaat (kleur, formaat, spatiëring) staat de bron
 * in theme.json; hier staat alleen wat WordPress zelf niet kent.
 * ------------------------------------------------------------------ */

/* --- beeldvullende hero ---------------------------------------------
 * De hero breekt nu uit via het eigen mechanisme van WordPress:
 * .has-global-padding > .alignfull. Daarvoor moest de constrained layout
 * van de main-groep naar het post-content-blok zelf verhuizen; zie
 * templates/front-page.html. Zolang de groep eromheen de globale padding
 * had, stond .entry-content ertussen en greep die kernregel niet aan.
 *
 * Hier dus geen 100vw-truc en geen container queries: die telden de
 * scrollbar mee of gaven renderfouten met de plakkende header.
 */

/* Het cover-blok krijgt min-height:80vh via een blokattribuut in de
   paginainhoud. Het ontwerp begrenst dat op 660px. Een blokattribuut kan
   geen min() bevatten, vandaar hier en met !important. */
.splash.wp-block-cover {
	padding-left: 0;
	padding-right: 0;
}

/* Boven de omschakeling van 900px; hieronder geldt de regel in de
   media query verderop. Expliciet op min-width, zodat de volgorde in dit
   bestand niet uitmaakt. */
@media (min-width: 901px) {
	.splash.wp-block-cover {
		min-height: min(80vh, 660px) !important;
	}
}

/* De herotekst lijnt uit op dezelfde kolom als de rest van de pagina: een
   band van 1180px met de gutter erbinnen, precies zoals .wrap in het
   ontwerp. Op smalle schermen blijft de gutter zo staan.
   Het cover-blok zet met has-custom-content-position zelf margin:0 en
   width:auto op de binnencontainer, vandaar !important. */
.splash.wp-block-cover.has-custom-content-position > .wp-block-cover__inner-container {
	box-sizing: border-box; /* het cover-blok zet hier geen border-box, dus telt de gutter anders bij de 1180 op */
	width: 100% !important;
	max-width: calc(var(--wp--style--global--content-size) + 2 * var(--wp--custom--gutter));
	padding-inline: var(--wp--custom--gutter);
	margin-inline: auto !important;
}

/* --- plakkende masthead ---------------------------------------------
 * position:sticky werkt alleen binnen de eigen ouder. De masthead is een
 * div binnen de template-part-wrapper, en die wrapper is precies zo hoog
 * als de masthead zelf — dus schoof de balk gewoon mee weg. De wrapper
 * moet plakken, niet de div erin.
 */

header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 40;
}

/* --- kopformaten uit het ontwerp ------------------------------------
 * Deze koppen wijken bewust af van de h1/h2/h3-schaal in theme.json.
 */

.page-title {
	font-size: clamp(2.1rem, 5.2vw, 3.4rem);
	letter-spacing: -.012em;
	margin-bottom: .5rem;
}

.page-lede {
	max-width: var(--wp--custom--measure, 38rem);
	color: var(--wp--preset--color--ink-soft);
	font-size: 1.1rem;
	margin: 0 0 3rem;
}

.home-head {
	font-size: clamp(1.5rem, 3vw, 2rem);
}

.archive-head {
	font-size: 1.4rem;
}

/* Tussenkoppen in lopende tekst: klein, in de displayletter, roest. */
.sub {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
	color: var(--wp--preset--color--gold);
	margin: 1.9rem 0 .5rem;
}

/* --- projectenlijst op de homepage ---------------------------------- */

.repertoire {
	border-top: 1px solid var(--line);
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.repertoire .title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.35rem, 3vw, 1.9rem);
}

.repertoire .note {
	color: var(--wp--preset--color--ink-soft);
	font-size: .96rem;
	text-align: right;
	margin-left: auto;
}

.repertoire .repertoire-row:hover .note {
	color: var(--wp--preset--color--gold);
}

/* --- citaat op de Over-pagina --------------------------------------- */

.wp-block-quote.pull p {
	font-size: clamp(1.2rem, 2.6vw, 1.6rem);
	line-height: 1.35;
}

/* --- responsive ------------------------------------------------------ */

@media (max-width: 720px) {
	.repertoire .note {
		text-align: left;
		margin-left: 0;
	}
}

/* ---------- projectenoverzicht ---------------------------------------
 * De rijen wisselen om en om van kant. Het ontwerp doet dat met
 * :nth-child(even), maar in WordPress staan de rijen tussen de titel en de
 * lede in, dus telt nth-child verkeerd. Vandaar een expliciete klasse op de
 * rijen die gespiegeld moeten staan (de tweede en de vierde).
 */

.project-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
	padding-block: clamp(2rem, 5vw, 3.5rem);
	border-bottom: 1px solid var(--line-soft);
}

.project-row.is-flipped .panel {
	order: 2;
}

.project-row .panel {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 2px;
	background: var(--wp--preset--color--paper-deep);
	margin: 0;
}

.project-row .panel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 2px;
}

.project-row h2,
.project-row h3 {
	font-size: clamp(1.5rem, 3.2vw, 2.1rem);
	margin-bottom: .35rem;
}

.project-row h2 a,
.project-row h3 a {
	color: inherit;
	text-decoration: none;
}

.project-row h2 a:hover,
.project-row h3 a:hover {
	color: var(--wp--preset--color--gold);
}

.project-row .year {
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--display);
	font-size: .95rem;
	margin-bottom: .9rem;
}

.project-row p {
	margin: 0 0 1rem;
	max-width: 46ch;
}

.textlink {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--gold);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--gold-lit);
}

.textlink:hover {
	color: var(--wp--preset--color--ink);
	border-color: currentColor;
	text-decoration: none;
}

@media (max-width: 900px) {
	.project-row {
		grid-template-columns: 1fr;
	}

	.project-row.is-flipped .panel {
		order: -1;
	}
}

/* Het ontwerp zette de panelen op smalle schermen op 16/10. Dat ging uit van
   liggende projectfoto's, maar het zijn albumhoezen: vierkant of vrijwel
   vierkant (1.00, 1.00, 1.10 en 0.95). Op 16/10 werd daar de boven- en
   onderkant af gesneden. De verhouding blijft daarom 1/1, ook op mobiel. */

/* ---------- mobiel menu ----------------------------------------------
 * De navigatie gebruikt de overlay van WordPress. Die staat standaard op wit
 * met zwarte tekst zolang het navigatieblok zelf geen kleur heeft, en die
 * standaardregels hebben een hoge specificiteit. Daarom spiegelen we hier
 * dezelfde selectors; ze winnen dan op volgorde in plaats van met
 * !important.
 *
 * De overlay is pas schermvullend sinds de blur van .masthead naar het
 * pseudo-element is verhuisd, zie boven in dit bestand.
 */

.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}

.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.05rem var(--wp--custom--gutter) 2rem;
}

/* Het menu staat op desktop rechts; in de overlay hoort het links, op de
   gutter, als kolom onder elkaar. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	justify-content: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	width: 100%;
	align-items: flex-start;
	gap: .9rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.35rem;
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--ink);
	background: transparent;
}

/* ---------- songteksten -----------------------------------------------
 * Het verse-blok van WordPress is bedoeld voor gedichten en songteksten en
 * behoudt de regelafbreking. Standaard staat het in een monospace-letter;
 * hier in de lopende letter van de site.
 */

.wp-block-verse {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	line-height: 1.62;
	white-space: pre-wrap;
	padding: 0;
	margin: 0 0 1.6rem;
	color: var(--wp--preset--color--ink);
}

/* De Nederlandse vertaling staat een toon lichter onder het origineel. */
.vertaling {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	color: var(--wp--preset--color--sage);
	margin: 0 0 .4rem;
}

.vertaling + .wp-block-verse {
	color: var(--wp--preset--color--ink-soft);
	border-left: 2px solid var(--line-soft);
	padding-left: 1rem;
}

/* ---------- video zonder verzoeken naar derden -------------------------
 * De privacyverklaring stelt dat er geen verzoeken naar derden gaan en dat
 * er daarom geen cookiemelding nodig is. Een gewone YouTube-embed breekt
 * dat: die laadt bij het openen van de pagina al scripts van Google.
 *
 * Daarom een facade: een lokale poster met een afspeelknop. Pas als de
 * bezoeker klikt, wordt de iframe geplaatst. Tot dat moment gaat er niets
 * naar Google. Zie assets/video.js.
 */

.video-facade {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 2px;
	background: var(--wp--preset--color--paper-deep);
	margin: 0 0 .6rem;
}

.video-facade img,
.video-facade iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.video-facade button {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	background: linear-gradient(to top, rgba(34, 23, 15, .55), rgba(34, 23, 15, .1));
	border: 0;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.05rem;
	color: #F8F1E6;
	transition: background .18s ease;
}

.video-facade button:hover {
	background: linear-gradient(to top, rgba(34, 23, 15, .7), rgba(34, 23, 15, .25));
}

.video-facade button::before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: .55rem 0 .55rem .95rem;
	border-color: transparent transparent transparent #F8F1E6;
}

.video-note {
	font-size: .85rem;
	color: var(--wp--preset--color--sage);
	margin: 0 0 1.6rem;
}

/* ---------- fotogalerij ------------------------------------------------ */

.tourgalerij.wp-block-gallery {
	margin-bottom: 1.6rem;
}

.tourgalerij.wp-block-gallery img {
	border-radius: 2px;
}

/* ---------- recensies -------------------------------------------------- */

.wp-block-quote.recensie {
	border-left: 2px solid var(--wp--preset--color--gold-lit);
	padding: 0 0 0 1.2rem;
	margin: 0 0 1.6rem;
	background: none;
}

.wp-block-quote.recensie p {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 .4rem;
	color: var(--wp--preset--color--ink);
}

.wp-block-quote.recensie cite {
	display: block;
	font-style: normal;
	font-family: var(--wp--preset--font-family--display);
	font-size: .9rem;
	color: var(--wp--preset--color--sage);
}

/* Op de Over-pagina is de pull-quote een korte eenregelige uitspraak. Op een
   projectpagina is het een langer citaat over de volle breedte; in de grote
   displaymaat wordt dat een zwaar blok. Daar dus een maat kleiner, en met een
   leesbare regellengte binnen het donkere vlak. */
.projectpagina .wp-block-quote.pull p {
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	line-height: 1.5;
	max-width: 46rem;
}

/* ---------- projectpagina ---------------------------------------------
 * De projectpagina stond eerst in twee kolommen: beeld links, alle tekst in
 * een kolom van 62% rechts. Met de songteksten erbij werd dat een kolom van
 * 631px en een pagina van ruim 8000px lang. Op judithnijland.nl staat de
 * tekst over de volle breedte en staan de songteksten naast elkaar; die
 * verhouding houden we hier aan.
 */

/* Bovenaan staat het beeld links met de introductie ernaast. Alles daaronder
   loopt over de volle contentkolom. */
.projectkop.wp-block-columns {
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: flex-start;
	margin-bottom: 2.4rem;
}

.projectkop .projectbeeld {
	margin: 0;
}

.projectkop .projectbeeld img {
	width: 100%;
	border-radius: 2px;
}

.projectkop p:first-child {
	margin-top: 0;
}

/* Het donkere citaatblok en de video lopen allebei over de volle
   contentkolom. Zonder deze regel zou het citaat de leesbreedte van de
   lopende tekst pakken, want dat is ook een blockquote. */
.entry-content > .wp-block-quote.pull {
	max-width: var(--wp--style--global--content-size);
}

/* Songtekst en vertaling naast elkaar, zoals op judithnijland.nl. */
.songtekst.wp-block-columns {
	gap: clamp(1.5rem, 4vw, 3rem);
	margin-bottom: 2.4rem;
}

.songtekst h4 {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
	color: var(--wp--preset--color--gold);
	margin: 0 0 .5rem;
}

.songtekst .vertaling {
	color: var(--wp--preset--color--sage);
}

/* De vertaling staat in een eigen kolom, dus daar hoort geen streep meer. */
.songtekst .vertaling + .wp-block-verse {
	border-left: 0;
	padding-left: 0;
	color: var(--wp--preset--color--ink-soft);
}

@media (max-width: 781px) {
	.songtekst.wp-block-columns {
		gap: 1rem;
	}

	.songtekst .vertaling {
		margin-top: .8rem;
	}
}

/* ---------- projectpagina: tekstbreedte ------------------------------
 * Op de projectpagina's loopt de lopende tekst over de volle contentkolom,
 * net als op judithnijland.nl. Met de leesbreedte van 38rem oogde het alsof
 * de tekst in een smalle kolom stond en te vroeg afbrak, terwijl de galerij
 * en de songteksten eronder wel de volle breedte pakken.
 */

.projectpagina .entry-content > p,
.projectpagina .entry-content > ul,
.projectpagina .entry-content > ol {
	max-width: none;
}

/* ---------- taalwissel ------------------------------------------------
 * Kleine knop rechts in de masthead, opmaak uit het ontwerp. Wordt gevuld
 * door de shortcode [taalwissel] uit functions.php.
 */

.masthead .wp-block-shortcode {
	margin: 0;
}

.lang {
	display: inline-block;
	font-family: var(--wp--preset--font-family--display);
	font-size: .9rem;
	line-height: 1.2;
	border: 1px solid var(--line);
	border-radius: 2rem;
	padding: .25rem .8rem;
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .18s ease, color .18s ease;
}

.lang:hover {
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
	text-decoration: none;
}

/* In de mobiele menu-overlay staat de taalwissel onder de menu-items. */
.wp-block-navigation__responsive-container.is-menu-open .lang {
	margin-top: 1rem;
}