/*
 * MUNISH theme — only what theme.json cannot express:
 * header scroll states, hero helpers, utility classes.
 */

/* ---------------------------------------------------------------------------
 * Header: transparent over the hero, solid UN blue once the page scrolls.
 * The .is-scrolled class is toggled by assets/js/header.js.
 * ------------------------------------------------------------------------- */

/* Kill the default root block gap between template-level sections (header /
   main / footer) — the transparent fixed header made it show as a white strip
   above the hero. Section spacing is owned by each section's own padding. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Every in-page link target (#school-registration, jump lists, committee
   groups) lands below the fixed header instead of underneath it. Sections
   that need a different offset override this further down. */
[id] {
	scroll-margin-top: calc(var(--wp--custom--header-height) + 1.5rem);
}

.munish-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent;
	transition: background-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

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

.munish-header.is-scrolled {
	background-color: var(--wp--preset--color--un-blue-dark);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

/* Full conference name beside the crest: two fixed lines, never re-wrapped,
   so the nav (not the name) gives way on narrow screens. */
.munish-header__title,
.munish-header .wp-block-image {
	flex-shrink: 0;
	white-space: nowrap;
}

.munish-header__title a {
	text-decoration: none;
}

/* Legibility gradient behind the transparent header, painted by the hero */
.munish-hero {
	position: relative;
}

.munish-hero::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 10rem;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(0, 30, 45, 0.55), transparent);
}

/* The hero fills the first screen (100svh in the pattern). On short screens
 * (small laptops, phones) its text would run past the bottom edge, so the
 * padding and gaps tighten. !important because the block sets them inline. */
@media (max-height: 760px) {
	.munish-hero {
		padding-top: calc(var(--wp--custom--header-height) + 1rem) !important;
		padding-bottom: var(--wp--preset--spacing--40) !important;
	}

	.munish-hero .wp-block-cover__inner-container > .wp-block-group > * + * {
		margin-top: 1rem !important;
	}

	.munish-hero .wp-block-cover__inner-container > .wp-block-group > .wp-block-buttons,
	.munish-hero .wp-block-cover__inner-container > .wp-block-group > .wp-block-buttons + p {
		margin-top: 1.5rem !important;
	}
}

/* Footer column labels are real h2s (the page outline must not jump from
   h2 to h6) but keep the small uppercase look of theme.json's h6 */
.munish-footer-label {
	font-family: var(--wp--preset--font-family--open-sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Pages that opt out of a banner still need to clear the fixed header */
.munish-no-banner {
	padding-top: calc(var(--wp--custom--header-height) + 2rem);
}

/* ---------------------------------------------------------------------------
 * Page banners: gradient depth + crest watermark + title accent.
 * The gradient paints the cover element itself, so it shows through the
 * overlay on pages without a featured image and disappears behind one.
 * ------------------------------------------------------------------------- */

/* Person and committee banners put their taxonomy term in the eyebrow, and
 * post-terms renders it as a link: the block's white applies to the wrapper,
 * while the <a> inside keeps the global link blue and all but disappears on
 * the blue band. Links in a banner take the banner's colour. */
.munish-page-banner .munish-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.munish-page-banner .munish-eyebrow a:hover,
.munish-page-banner .munish-eyebrow a:focus-visible {
	text-decoration: underline;
}

.munish-page-banner {
	background: linear-gradient(135deg, #009edb 0%, #007eaf 45%, #006a94 100%);
	/* Core gives every cover block a 430px floor. None of these banners hold
	 * more than a title and an eyebrow, so the floor only produced a tall
	 * empty band; let the padding decide the height instead. */
	min-height: 0;
}

.munish-page-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Sized to the band, not to the old tall one: a 24rem crest in a header
	 * this short showed only a slice of the globe. */
	background: url(../img/crest-white.svg) no-repeat right -2.5rem center / auto 190%;
	opacity: 0.07;
	z-index: 1;
	pointer-events: none;
}


/* ---------------------------------------------------------------------------
 * Content rhythm: section headings and in-content spacing.
 * Carries the old site's blue heading rules forward, subtler.
 * ------------------------------------------------------------------------- */

.munish-section-heading,
.wp-block-post-content > h2 {
	margin-top: 2.2rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(0, 102, 153, 0.25);
}

.wp-block-post-content > h3 {
	margin-top: 1.8rem;
	color: var(--wp--preset--color--primary);
}

.wp-block-post-content > p,
.wp-block-post-content li {
	line-height: 1.75;
}

/* ---------------------------------------------------------------------------
 * Accordion rows. Committees: archive-committee template, each a <details>
 * built in functions.php, name + topic count always visible, numbered topics
 * open into the right column. Also .munish-accordion (a group of core Details
 * blocks in page content, e.g. Workshops), which shares the same look.
 * Thin rules between rows instead of card borders.
 * ------------------------------------------------------------------------- */

.munish-committee-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid rgba(0, 102, 153, 0.2);
}

.munish-committee-list > li {
	margin: 0;
	border-top: 1px solid rgba(0, 102, 153, 0.2);
}

/* The section heading's own underline already sits above the first row */
.munish-committee-list > li:first-child {
	border-top: 0;
}

.munish-committee-summary,
.munish-accordion summary {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 1.6rem 0;
	cursor: pointer;
	list-style: none;
}

/* Hide the browser's default triangle; the +/− below replaces it */
.munish-committee-summary::-webkit-details-marker,
.munish-accordion summary::-webkit-details-marker {
	display: none;
}

.munish-committee-summary h3 {
	flex: 1;
	margin: 0;
	transition: color var(--wp--custom--transition);
}

.munish-committee-summary:hover h3,
.munish-committee-row[open] .munish-committee-summary h3,
.munish-accordion summary:hover,
.munish-accordion details[open] summary {
	color: var(--wp--preset--color--primary);
}

.munish-committee-summary:focus-visible,
.munish-accordion summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--un-blue-dark);
	outline-offset: 4px;
}

.munish-committee-count {
	flex-shrink: 0;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--steel);
}

/* +/− drawn with two bars; the vertical one folds away when open */
.munish-committee-summary::after,
.munish-accordion summary::after {
	content: "";
	flex-shrink: 0;
	width: 0.9rem;
	height: 0.9rem;
	background:
		linear-gradient(var(--wp--preset--color--un-blue-dark), var(--wp--preset--color--un-blue-dark)) center / 100% 2px no-repeat,
		linear-gradient(var(--wp--preset--color--un-blue-dark), var(--wp--preset--color--un-blue-dark)) center / 2px 100% no-repeat;
	transition: background-size var(--wp--custom--transition);
}

.munish-committee-row[open] .munish-committee-summary::after,
.munish-accordion details[open] summary::after {
	background-size: 100% 2px, 2px 0;
}

/* Topics sit in the right-hand column, numbered 1 / 2 / 3. Counters instead
 * of changing each committee's list to <ol>, so new entries just work.
 * .munish-issue-list is the same numbering on a list block inside an
 * accordion (Archive year pages: one committee per row, its issues inside). */
.munish-committee-topics {
	margin-top: -0.6rem !important; /* beats the flow layout's block gap */
	padding: 0 0 2rem 40%;
}

.munish-committee-topics ul,
.munish-committee-topics ol,
.munish-issue-list {
	counter-reset: munish-topic;
	margin: 0;
	padding: 0;
	list-style: none;
}

.munish-committee-topics li,
.munish-issue-list li {
	counter-increment: munish-topic;
	display: grid;
	grid-template-columns: 2rem 1fr;
	margin: 0;
	padding: 0.7rem 0;
	line-height: 1.6;
}

.munish-committee-topics li + li,
.munish-issue-list li + li {
	border-top: 1px solid var(--wp--preset--color--surface);
}

.munish-committee-topics li::before,
.munish-issue-list li::before {
	content: counter(munish-topic);
	font-family: var(--wp--preset--font-family--eb-garamond);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.15;
	color: var(--wp--preset--color--un-blue-dark);
}

@media (max-width: 781px) {
	.munish-committee-topics {
		padding-left: 0;
	}

	.munish-committee-summary {
		gap: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.munish-committee-summary h3,
	.munish-committee-summary::after,
	.munish-accordion summary,
	.munish-accordion summary::after {
		transition: none;
	}
}

/* Details-block accordion in page content: the summary is plain text, so it
 * gets the heading look the committee rows get from their <h3> */
.munish-accordion {
	border-bottom: 1px solid rgba(0, 102, 153, 0.2);
}

.munish-accordion > .wp-block-details {
	margin: 0;
	border-top: 1px solid rgba(0, 102, 153, 0.2);
}

.munish-accordion summary {
	justify-content: space-between;
	font-family: var(--wp--preset--font-family--eb-garamond);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: #1f2b30; /* theme.json heading colour */
	transition: color var(--wp--custom--transition);
}

.munish-accordion .wp-block-details > :not(summary) {
	margin: 0;
	padding-bottom: 1.75rem;
	line-height: 1.75;
}

/* ---------------------------------------------------------------------------
 * Person cards (Board of Directors, Heads of Admin)
 * Framed like mounted photographs; images keep their natural aspect ratio
 * because most are wide group shots that a portrait crop would decapitate.
 * ------------------------------------------------------------------------- */

.munish-person-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--surface);
	border-bottom: 3px solid var(--wp--preset--color--primary);
	border-radius: 2px;
	padding: 0.9rem 0.9rem 1.1rem;
	height: 100%;
	box-shadow: 0 1px 4px rgba(0, 126, 175, 0.08);
}

.munish-person-card .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	border-radius: 2px;
	display: block;
}

.munish-person-card h3 {
	margin: 0.9rem 0 0.25rem;
}

.munish-person-card p {
	margin: 0;
	line-height: 1.55;
}

/* Single wide card (Heads of Admin: one group photo) */
.munish-person-card-wide {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------------------------------------------------------------------------
 * Homepage Letter from the Secretary-General: the crest as a watermark,
 * drawn the same way as on Key Dates (white SVG as a mask, palette colour).
 * It bleeds off the left edge because the SG portrait on the right is opaque
 * and would hide it.
 * ------------------------------------------------------------------------- */

.munish-letter {
	position: relative;
	isolation: isolate; /* keeps the crest's z-index: -1 above the white background */
	overflow: clip;
}

/* Paler than on Key Dates because a whole letter is read on top of it: 30%
 * pale blue on white is about #E8F4F8, which keeps body text at 8.7:1 */
.munish-letter::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	left: -15%;
	width: min(52rem, 85vw);
	aspect-ratio: 1;
	transform: translateY(-50%);
	background-color: var(--wp--preset--color--pale-blue);
	opacity: 0.3;
	-webkit-mask: url(../img/crest-white.svg) center / contain no-repeat;
	mask: url(../img/crest-white.svg) center / contain no-repeat;
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Homepage About band. Sits its text in a column on the left rather than
 * centred, so the General Assembly photo behind it is not permanently hidden
 * under a block of centred copy, and so the three bands down the page do not
 * all resolve to the same centred heading-sentence-button shape.
 * ------------------------------------------------------------------------- */

/* Constrained children are centred by WordPress's layout; this one is pinned
 * to the left edge of the same 1080px column the other bands use, so the text
 * lines up with the page rather than with the browser window. */
.munish-band-about__text {
	margin-left: 0;
	margin-right: auto;
}

/* ---------------------------------------------------------------------------
 * Homepage committees band. The other two bands on the front page are a
 * heading, a sentence and a button over a photo; this one carries the actual
 * committee list, so it is built as two columns (the pitch on the left, the
 * committees on the right) and reads as a different kind of section rather
 * than a third copy of the same one.
 * ------------------------------------------------------------------------- */

.munish-committees-band {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	color: var(--wp--preset--color--white);
	text-align: left;
}

@media (min-width: 900px) {
	.munish-committees-band {
		/* Deliberately uneven: the list needs the room, the pitch does not */
		grid-template-columns: 5fr 7fr;
		align-items: start;
	}
}

.munish-committees-band h2 {
	margin: 0 0 0.75rem;
	color: inherit;
	font-size: clamp(2rem, 3.4vw, 2.75rem);
}

.munish-committees-band p {
	margin: 0 0 0.75rem;
	font-size: 0.95rem;
	line-height: 1.7;
}

.munish-committees-band .munish-arrow-link {
	color: var(--wp--preset--color--white);
	white-space: normal;
}

/* The committee short names. Widths follow the names (APQ next to COPUOS),
 * so the rows break unevenly on purpose: this is a real list, not a grid. */
.munish-committees-band__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.munish-committees-band__list a {
	display: block;
	padding: 0.4rem 0.7rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 2px;
	color: var(--wp--preset--color--white);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}

.munish-committees-band__list a:hover,
.munish-committees-band__list a:focus-visible {
	background-color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--un-blue-deep);
}

@media (prefers-reduced-motion: reduce) {
	.munish-committees-band__list a {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Mission statement (About page). Set as type, not as a box: the old boxed
 * treatment made the sentence the conference is built on look like a sidebar
 * note. Display serif at reading size, indented on the left only, so the
 * ragged right edge of the paragraph stays visible.
 * ------------------------------------------------------------------------- */

.munish-mission {
	margin: var(--wp--preset--spacing--40) 0;
	padding: 0 0 0 clamp(0rem, 4vw, 2.5rem);
	border: 0;
	color: var(--wp--preset--color--primary-dark);
	font-family: var(--wp--preset--font-family--eb-garamond);
	font-size: clamp(1.15rem, 1.1rem + 0.7vw, 1.5rem);
	font-style: italic;
	line-height: 1.5;
}

.munish-mission p {
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Feature row (About page: International / The Hague / Students)
 * Wide three-up with no boxes. The icons are black PNGs, so a filter turns
 * them white to sit inside a blue circle.
 * ------------------------------------------------------------------------- */

.munish-features .munish-feature-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	margin: 0 0 1.25rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--un-blue-dark);
}

.munish-features .munish-feature-icon img {
	filter: brightness(0) invert(1);
}

.munish-features h3 {
	margin: 0 0 0.75rem;
}

/* Short accent rule under each title */
.munish-features h3::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 2px;
	margin-top: 0.6rem;
	background-color: var(--wp--preset--color--un-blue);
}

.munish-features p {
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Registration page: notice box, application cards, price cards, steps.
 * .munish-steps / .munish-step are generic: reuse them for any numbered
 * "how it works" process (e.g. Student Officer or ICJ applications).
 * ------------------------------------------------------------------------- */

/* A quiet status line, not an alert: nothing is wrong, it just isn't open yet */
.munish-notice {
	background-color: var(--wp--preset--color--surface-cool);
	border-radius: 2px;
	padding: 1rem 1.25rem;
}

/* :where() keeps this at zero extra specificity, so the spacing rule below wins */
.munish-notice :where(p, ul) {
	margin: 0;
	line-height: 1.7;
}

.munish-notice > * + * {
	margin-top: 0.75rem;
}

/* Caution: same shape as the blue notice, in amber, for safety information
 * that must not read as routine (Party page after-parties warning).
 * Caution #8A4B00 on its tint is 6.25:1. */
.munish-caution {
	background-color: var(--wp--preset--color--caution-tint);
	border: 1px solid rgba(138, 75, 0, 0.35);
	border-radius: 2px;
	padding: 1.1rem 1.25rem;
}

.munish-caution :where(p) {
	margin: 0;
	line-height: 1.7;
}

.munish-caution > * + * {
	margin-top: 0.4rem;
}

.munish-caution .munish-eyebrow {
	color: var(--wp--preset--color--caution);
}

/* Secondary actions as text links with an arrow (notice box, school steps).
 * The arrow is drawn here rather than typed into the link text: in the copy
 * it ends up inside the accessible name, so a screen reader announces
 * "Apply right arrow". As a pseudo-element it stays decoration, and it can
 * move on hover, which a character in the label cannot. Buttons get no
 * arrow at all: they already read as actions. */
.munish-arrow-link {
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.munish-arrow-link::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.4em;
	transition: transform 0.15s ease-out;
}

.munish-arrow-link:hover::after,
.munish-arrow-link:focus-visible::after {
	transform: translateX(0.2em);
}

@media (prefers-reduced-motion: reduce) {
	.munish-arrow-link::after {
		transition: none;
	}
}

.munish-arrow-link:hover,
.munish-arrow-link:focus-visible {
	text-decoration: underline;
}

/* Fee cards: boxed with the blue top rule, because they're a comparison.
 * Fact cards (Party page: date / time / venue) use the same box, so key
 * facts look the same wherever they appear. */
.munish-price-card,
.munish-fact-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--surface);
	border-top: 3px solid var(--wp--preset--color--primary);
	border-radius: 2px;
	box-shadow: 0 1px 4px rgba(0, 126, 175, 0.08);
}

/* Application tiles: a choice, not pricing, so a plain all-round border and
 * a tint on hover instead of the fee cards' top rule.
 * Column flex so the button sits on the bottom edge whatever the text length.
 * The link's ::after stretches over the card, so the whole card is clickable
 * (a bigger tap target on phones) without wrapping block content in an <a>. */
.munish-apply-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.4rem 1.5rem 1.5rem;
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(0, 102, 153, 0.25);
	border-radius: 2px;
	transition: background-color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

.munish-apply-card:hover,
.munish-apply-card:focus-within {
	background-color: var(--wp--preset--color--surface-cool);
	border-color: var(--wp--preset--color--primary);
}

@media (prefers-reduced-motion: reduce) {
	.munish-apply-card {
		transition: none;
	}
}

.munish-apply-card a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* The global outline style is for dark bands (inherits white, hovers to
 * white). On a light tile it needs its own blue outline and a solid hover.
 * Set here rather than with a palette colour class, whose !important would
 * beat the hover rule (see CLAUDE.md). Hover follows the whole card. */
.munish-apply-card .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.munish-apply-card:hover .wp-block-button.is-style-outline .wp-block-button__link,
.munish-apply-card:focus-within .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.munish-apply-card h3 {
	margin: 0 0 0.6rem;
}

.munish-apply-card p {
	margin: 0 0 1.25rem;
	font-size: 0.95rem;
	line-height: 1.6;
}

.munish-apply-card > :last-child {
	margin: auto 0 0;
}

.munish-price-card,
.munish-fact-card {
	padding: 1.5rem 1.25rem;
	text-align: center;
}

.munish-price-card p,
.munish-fact-card p {
	margin: 0;
}

/* Fact values are words and time ranges, longer than a price, so smaller */
.munish-fact {
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--wp--preset--color--primary);
}

.munish-price {
	font-family: var(--wp--preset--font-family--open-sans);
	font-size: 2.4rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--wp--preset--color--primary);
}

.munish-price-label,
.munish-fact-label {
	margin-top: 0.75rem !important;
	font-size: 0.9rem;
	line-height: 1.5;
}

/* Numbered timeline: counter circles on a thin vertical rule.
 * White on un-blue-dark is 4.6:1, so the small numbers pass AA. */
.munish-steps {
	counter-reset: munish-step;
	margin-top: var(--wp--preset--spacing--30);
}

.munish-step {
	counter-increment: munish-step;
	position: relative;
	padding: 0 0 var(--wp--preset--spacing--30) 3.75rem;
	margin: 0 !important;
}

.munish-step::before {
	content: counter(munish-step);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--un-blue-dark);
	color: var(--wp--preset--color--white);
	font-weight: 700;
}

.munish-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 2.5rem;
	bottom: 0;
	left: calc(1.25rem - 1px);
	width: 2px;
	background-color: var(--wp--preset--color--pale-blue);
}

/* h4 when the steps sit under an h3 option heading (Directions: "By tram"),
   sized like an h3 step so every step title reads the same. The clamp() is
   the fluid h3 size WordPress generates from theme.json's 1.25rem. */
.munish-step h3,
.munish-step h4 {
	margin: 0.3rem 0 0.6rem;
}

.munish-step h4 {
	font-size: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.682), 1.25rem);
}

.munish-step p {
	margin: 0 0 0.9rem;
	line-height: 1.75;
}

.munish-step > :last-child {
	margin-bottom: 0;
}

/* Which mailing a step belongs to, as a small tag beside the step title */
.munish-step-mailing {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 0.2rem 0.55rem;
	border-radius: 2px;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--steel);
	font-family: var(--wp--preset--font-family--open-sans);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	vertical-align: middle;
}

/* ---------------------------------------------------------------------------
 * Agenda page: day tabs + two-column timetables
 * (Places to Visit reuses the tabs and panels for its city tabs.)
 * tabs.js turns the links into tabs; without it they're jump links and all
 * three days show. In a timetable, **bold** marks a key event (ceremonies,
 * party) and *italic* a break (lunch), so editors set them with B / I.
 * ------------------------------------------------------------------------- */

/* Sticks under the fixed header so you can switch days mid-scroll.
 * Underline tabs, like the resolution panel's tab bar. */
.munish-day-tabs {
	position: sticky;
	top: var(--munish-header-bottom, var(--wp--custom--header-height));
	z-index: 10;
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.75rem;
	margin-top: var(--wp--preset--spacing--40) !important;
	padding-top: 0.25rem;
	border-bottom: 1px solid rgba(0, 102, 153, 0.2);
	background-color: var(--wp--preset--color--background);
}

/* No side padding, so the first label lines up with the text below and each
 * underline is exactly as wide as its label */
.munish-day-tabs a {
	margin-bottom: -1px; /* the active tab's rule sits on the bar's rule */
	padding: 0.8rem 0;
	border-bottom: 3px solid transparent;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--steel);
	transition: border-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

.munish-day-tabs a:hover {
	border-bottom-color: rgba(0, 102, 153, 0.35);
	color: var(--wp--preset--color--primary);
}

/* primary on the page background is 6.0:1; un-blue-dark would be 4.4:1 */
.munish-day-tabs a[aria-selected="true"] {
	border-bottom-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.munish-day-tabs a:focus-visible {
	outline: 2px solid var(--wp--preset--color--un-blue-dark);
	outline-offset: 3px;
}

.munish-day[hidden] {
	display: none;
}

/* Jump links (no-JS or shared #saturday links) land below the fixed header
 * and the sticky tabs instead of underneath them */
.munish-day {
	scroll-margin-top: calc(var(--wp--custom--header-height) + 4rem);
}

.munish-day > h2 {
	margin-top: var(--wp--preset--spacing--30);
}

.munish-timetable {
	margin: 0;
}

.munish-timetable table {
	width: 100%;
	border-collapse: collapse;
}

/* Header row stays for screen readers ("Time", "Event") but isn't shown */
.munish-timetable thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.munish-timetable td {
	padding: 1rem 0;
	border: 0;
	border-top: 1px solid rgba(0, 102, 153, 0.2);
	vertical-align: baseline;
	line-height: 1.6;
}

/* The day heading's underline already sits above the first row */
.munish-timetable tbody tr:first-child td {
	border-top: 0;
}

.munish-timetable td:first-child {
	width: 9rem;
	padding-right: 1.5rem;
	white-space: nowrap;
	font-size: 0.9rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--steel);
}

/* Key events: serif, larger, in blue, time included */
.munish-timetable strong {
	font-family: var(--wp--preset--font-family--eb-garamond);
	font-size: 1.3rem;
	color: var(--wp--preset--color--primary);
}

.munish-timetable tr:has(strong) td:first-child {
	color: var(--wp--preset--color--primary);
}

/* Breaks recede */
.munish-timetable tr:has(em) td {
	color: var(--wp--preset--color--steel);
}

@media (max-width: 781px) {
	.munish-timetable td:first-child {
		width: 7rem;
		padding-right: 1rem;
		font-size: 0.85rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.munish-day-tabs a {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Embedded maps: an <iframe> is inline, so the text column's auto margins
 * can't centre it; the wrapper is a block that can.
 * ------------------------------------------------------------------------- */

.munish-map iframe {
	display: block;
	width: 100%;
	border: 0;
	border-radius: 2px;
}

/* Click-to-load placeholder (functions.php + map-consent.js). Same footprint
 * as a map so the page doesn't jump much when it loads. Steel on
 * surface-cool is 5.3:1, so the small note passes AA. */
.munish-map-consent {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	min-height: 300px;
	padding: 2rem 1.5rem;
	border-radius: 2px;
	background-color: var(--wp--preset--color--surface-cool);
	text-align: center;
}

.munish-map-consent p {
	max-width: 32rem;
	margin: 0;
}

.munish-map-consent__title {
	font-family: var(--wp--preset--font-family--eb-garamond);
	font-size: 1.25rem;
	font-weight: 700;
	color: #1F2B30;
}

.munish-map-consent__note {
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--wp--preset--color--steel);
}

.munish-map-consent .wp-element-button {
	margin-top: 0.5rem;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * Hotels page. Two card types on purpose: partner hotels (negotiated rate)
 * get the full-width photo card with a blue left rule and a rate badge;
 * other hotels are compact tiles in a grid, plain border, no photo.
 * ------------------------------------------------------------------------- */

.munish-hotel-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--surface);
	border-radius: 2px;
	padding: 1.5rem 1.75rem;
	margin-top: 1.5rem;
	box-shadow: 0 1px 4px rgba(0, 126, 175, 0.08);
}

.munish-hotel-card h3 {
	margin-bottom: 0.15rem;
}

.munish-hotel-card img {
	width: 100%;
	height: auto;
	border-radius: 2px;
	display: block;
}

.munish-hotel-stars {
	color: var(--wp--preset--color--accent);
	margin: 0 0 0.75rem;
	line-height: 1;
}

/* functions.php swaps the rating number for this SVG. Sized in em so the row
 * tracks the surrounding text, and it takes the accent colour above through
 * currentColor. */
.munish-stars {
	display: block;
	height: 0.85rem;
	width: auto;
}

/* The negotiated rate, readable before the hotel name.
 * White on un-blue-dark is 4.6:1, enough for small bold text. */
.munish-rate-badge {
	display: inline-block;
	margin: 0 0 0.75rem;
	padding: 0.3rem 0.65rem;
	border-radius: 2px;
	background-color: var(--wp--preset--color--un-blue-dark);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--open-sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.munish-hotel-terms {
	margin: 0 0 1.25rem;
	padding-left: 1.1rem;
	font-size: 0.95rem;
	line-height: 1.6;
}

.munish-hotel-terms li::marker {
	color: var(--wp--preset--color--primary);
}

.munish-hotel-grid {
	margin-top: var(--wp--preset--spacing--30);
}

/* Column flex so the button sits on the bottom edge whatever the address length */
.munish-hotel-tile,
.munish-place-card {
	display: flex;
	flex-direction: column;
	padding: 1.25rem 1.25rem 1.4rem;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--surface);
	border-radius: 2px;
}

.munish-hotel-tile h3,
.munish-place-card h3 {
	margin: 0 0 0.15rem;
}

.munish-hotel-tile .munish-hotel-stars {
	margin-bottom: 0.5rem;
}

.munish-hotel-address,
.munish-hotel-route {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.55;
}

/* Distance/time and transport: the same two short lines on every tile */
.munish-hotel-route {
	margin: 0.6rem 0 1.25rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--wp--preset--color--surface);
}

.munish-hotel-distance {
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

.munish-hotel-tile > .wp-block-buttons,
.munish-place-card > .wp-block-buttons {
	margin-top: auto;
}

/* The global outline button inherits white for dark bands and hovers to
 * white, which vanishes on these white cards: give it a blue outline and a
 * solid blue hover instead (same treatment as the application tiles). */
:is(.munish-hotel-card, .munish-hotel-tile, .munish-place-card) .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	padding: calc(0.6em - 1px) calc(1.4em - 1px);
	font-size: 0.9rem;
}

:is(.munish-hotel-card, .munish-hotel-tile, .munish-place-card) .wp-block-button.is-style-outline .wp-block-button__link:hover,
:is(.munish-hotel-card, .munish-hotel-tile, .munish-place-card) .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

/* ---------------------------------------------------------------------------
 * Places to Visit: city tabs (see Agenda) over a grid of attraction cards.
 * Cards share the Hotels tile frame, with the photo bled to the top edge.
 * Free public areas (beaches, squares) have no hours, price or website, so
 * they're a borderless photo strip instead: a third, lighter treatment.
 * ------------------------------------------------------------------------- */

.munish-place-grid {
	margin-top: var(--wp--preset--spacing--30);
}

/* Old-site photos are small 4:3 crops; a fixed ratio keeps the rows even */
.munish-place-card > .wp-block-image {
	margin: -1.25rem -1.25rem 1rem;
}

.munish-place-card > .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 2px 2px 0 0;
}

/* Hours and price: the same two short lines on every card, like the hotel route */
.munish-place-facts {
	margin: 0.6rem 0 0;
	padding-top: 0.6rem;
	border-top: 1px solid var(--wp--preset--color--surface);
	font-size: 0.9rem;
	line-height: 1.55;
}

.munish-place-hours {
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

/* Only where a visit needs booking or a tip */
.munish-place-note {
	margin: 0.6rem 0 0;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--wp--preset--color--steel);
}

.munish-place-card > .wp-block-buttons {
	padding-top: 1.25rem;
}

.munish-scenery-heading {
	margin-top: var(--wp--preset--spacing--50);
}

.munish-scenery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 1.5rem;
	margin-top: var(--wp--preset--spacing--30);
}

.munish-scenery .wp-block-image {
	margin: 0;
}

.munish-scenery img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 2px;
}

/* A lone photo (Amsterdam, Rotterdam) spans the column at its own shape */
.munish-scenery .wp-block-image:only-child img {
	aspect-ratio: auto;
}

.munish-scenery figcaption {
	margin-top: 0.6rem;
	font-size: 0.9rem;
	line-height: 1.55;
	text-align: left;
}

/* A photo beside the text: Align left / Align right in the image toolbar.
 * 42% of the text column leaves about 40 characters a line next to it, and
 * clear keeps two photos from ever wedging a paragraph between them. */
.wp-block-image:is(.alignleft, .alignright) {
	display: block;
	width: calc(0.42 * min(100%, var(--wp--style--global--content-size)));
	clear: both;
	margin-bottom: 0.75rem;
}

.wp-block-image.alignleft {
	margin-right: 1.75rem;
}

.wp-block-image.alignright {
	margin-left: 1.75rem;
}

/* Core floats these to the edges of a constrained layout's full width, out
 * past the text column; this pulls them back to the column's edge. It comes
 * to 0 by itself once the screen is narrower than the column. */
.is-layout-constrained > .wp-block-image.alignleft {
	margin-left: max(0px, (100% - var(--wp--style--global--content-size)) / 2);
}

.is-layout-constrained > .wp-block-image.alignright {
	margin-right: max(0px, (100% - var(--wp--style--global--content-size)) / 2);
}

.wp-block-image:is(.alignleft, .alignright) img,
.munish-photo-row img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
}

/* A row of whole, uncropped photos at one shared height that fills the
 * column (Charity page portraits). Each figure grows by its photo's
 * width / height, which functions.php passes in as --ratio; from a zero
 * basis that makes every height come out equal, whatever photos the editor
 * puts in the group. */
.munish-photo-row {
	display: flex;
	gap: 1rem;
	clear: both;
}

.munish-photo-row > .wp-block-image {
	flex: var(--ratio, 1) 1 0;
	min-width: 0;
	margin: 0;
}

/* Phones: one photo per line, full width, in reading order. 600px rather than
 * the usual 781px because a landscape stretched across a tablet outgrows
 * smaller files (the Charity page's 800px evacuation photo), while the text
 * beside it still has room there. */
@media (max-width: 599px) {
	.wp-block-image:is(.alignleft, .alignright) {
		float: none;
		width: auto;
		margin-inline: 0;
	}

	.munish-photo-row {
		flex-direction: column;
	}

	.munish-photo-row > .wp-block-image {
		flex: none;
	}
}

.munish-scenery figcaption strong {
	display: block;
	font-family: var(--wp--preset--font-family--eb-garamond);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--wp--preset--color--primary);
}

/* ---------------------------------------------------------------------------
 * Rules & Procedures: jump list, Responsibilities overview, then rule rows.
 * Rows follow the committee list (thin rules, no boxes) with a small icon in
 * place of a code. Health-and-safety rows use the amber .munish-caution look
 * so a scanning parent lands on them, not on Dress Code.
 * The icons are black line PNGs; filters recolour them per row type.
 * ------------------------------------------------------------------------- */

.munish-jump-list {
	margin-top: var(--wp--preset--spacing--30);
	padding: 1rem 1.25rem;
	border-radius: 2px;
	background-color: var(--wp--preset--color--surface-cool);
}

.munish-jump-list p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 2;
}

.munish-jump-list p + p {
	margin-top: 0.4rem;
}

/* Links read as a dotted list, wrapping cleanly without leading dots */
.munish-jump-list a {
	margin-right: 0.35rem;
	font-weight: 600;
	white-space: nowrap;
}

.munish-jump-list a:not(:last-child)::after {
	content: "·";
	display: inline-block;
	text-indent: 0; /* inline-blocks inherit the hanging indent */
	margin-left: 0.6rem;
	font-weight: 400;
	color: var(--wp--preset--color--steel);
}

/* Hanging indent: links that wrap line up under the first link, not under
   the label (label 9.5rem + 0.5rem gap). Phones stack the label instead. */
.munish-jump-list p:has(.munish-jump-label) {
	padding-left: 10rem;
	text-indent: -10rem;
}

.munish-jump-label {
	display: inline-block;
	min-width: 9.5rem;
	margin-right: 0.5rem;
	text-indent: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--steel);
}

.munish-jump-safety .munish-jump-label,
.munish-jump-safety a {
	color: var(--wp--preset--color--caution);
}

/* Overview: a deliberate section break, not a rule, so no icon or box */
.munish-overview {
	margin-top: var(--wp--preset--spacing--50);
}

.munish-overview-columns {
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--30);
}

.munish-overview-columns h3 {
	margin: 0 0 0.6rem;
	padding-top: 0.75rem;
	border-top: 3px solid var(--wp--preset--color--primary);
}

.munish-overview-columns p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.7;
}

.munish-rules {
	margin-top: var(--wp--preset--spacing--30);
}

/* Icon absolutely placed so a rule can have any number of paragraphs */
.munish-rule {
	position: relative;
	padding: 1.5rem 0 1.5rem 4.25rem;
	border-top: 1px solid rgba(0, 102, 153, 0.2);
}

.munish-rule:first-child {
	border-top: 0;
}

/* Rows are separated by their padding and rule, not the flow layout's gap */
.munish-rules > .munish-rule {
	margin-top: 0;
}

.munish-rule > * {
	margin: 0;
}

.munish-rule > * + * {
	margin-top: 0.5rem;
}

.munish-rule h3,
.munish-overview-columns h3 {
	font-size: 1.3rem;
}

.munish-rule p {
	font-size: 1rem;
	line-height: 1.7;
}

.munish-rule .munish-rule-icon {
	position: absolute;
	top: 1.5rem;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	border-radius: 50%;
	background-color: var(--wp--preset--color--surface-cool);
}

.munish-rule .munish-rule-icon img {
	width: 1.5rem;
	height: 1.5rem;
	/* Black PNG to roughly un-blue-dark */
	filter: invert(31%) sepia(89%) saturate(1400%) hue-rotate(172deg) brightness(88%);
}

/* Safety rows: separate amber boxes, like the Party page caution callout */
.munish-rules-safety .munish-rule-safety {
	padding: 1.25rem 1.25rem 1.35rem 5.25rem;
	border: 1px solid rgba(138, 75, 0, 0.35);
	border-radius: 2px;
	background-color: var(--wp--preset--color--caution-tint);
}

.munish-rules-safety .munish-rule-safety + .munish-rule-safety {
	margin-top: 0.75rem;
}

.munish-rule-safety .munish-rule-icon {
	top: 1.25rem;
	left: 1.25rem;
	background-color: var(--wp--preset--color--caution);
}

.munish-rule-safety .munish-rule-icon img {
	filter: brightness(0) invert(1);
}

.munish-rule-safety h3 {
	color: var(--wp--preset--color--caution);
}

/* Rows without an icon (Participant Info research links) */
.munish-rules-plain .munish-rule {
	padding-left: 0;
}

@media (max-width: 781px) {
	.munish-jump-list p:has(.munish-jump-label) {
		padding-left: 0;
		text-indent: 0;
	}

	.munish-jump-label {
		display: block;
	}

	/* Only the heading sits beside the icon, so paragraphs get the full width */
	.munish-rule {
		padding-left: 0;
	}

	.munish-rules-safety .munish-rule-safety {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.munish-rule h3 {
		display: flex;
		align-items: center;
		min-height: 2.25rem;
		padding-left: 3rem;
	}

	.munish-rule .munish-rule-icon {
		width: 2.25rem;
		height: 2.25rem;
	}

	.munish-rule-safety .munish-rule-icon {
		left: 1rem;
	}

	.munish-rule .munish-rule-icon img {
		width: 1.25rem;
		height: 1.25rem;
	}
}

/* ---------------------------------------------------------------------------
 * Student Officers (patterns/student-officers.php): the Committees page's
 * rows on the same 1200px measure, with committee, chair and deputy chairs
 * in three columns. Text only; the names come from the committee entries. The first row's top rule
 * doubles as the section heading's underline, so a group with a President
 * line and one without both get exactly one rule above their first row.
 * ------------------------------------------------------------------------- */

/* Same space between groups as the Committees page */
.munish-officer-group + .munish-officer-group {
	margin-top: var(--wp--preset--spacing--50);
}

.munish-officer-group h2 {
	margin-bottom: 0;
}

/* "President" is the label, the name is the fact */
.munish-officer-president {
	margin: 0.6rem 0 0;
	font-weight: 600;
}

.munish-officer-label,
.munish-officers dt {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--steel);
}

.munish-officer-label {
	margin-right: 0.5rem;
}

.munish-officer-list {
	margin-top: 1.25rem;
	border-bottom: 1px solid rgba(0, 102, 153, 0.2);
}

/* No flow-layout margin between rows: it would open a gap above each rule */
.munish-officer-list > .munish-officer-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem 2rem;
	margin: 0;
	padding: 1.25rem 0;
	border-top: 1px solid rgba(0, 102, 153, 0.2);
}

.munish-officer-row > * {
	margin: 0;
}

/* The committee leads the row: the Committees page's title size, since the
 * theme's h3 is no bigger than body text */
.munish-officer-row h3 {
	font-size: var(--wp--preset--font-size--large);
}

/* Chair and deputies are the row's second and third columns. Placed by
 * class, so deputies stay in their column while a chair is still missing. */
.munish-officers {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem 2rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
}

.munish-officer-chair {
	grid-column: 1;
}

.munish-officer-deputies {
	grid-column: 2;
}

.munish-officers dd {
	margin: 0;
}

.munish-officer-chair dd {
	font-weight: 600;
}

.munish-officer-tba {
	color: var(--wp--preset--color--steel);
}

/* Tablets and phones: three columns get too narrow for long names, so the
 * officers drop under the committee name, still side by side */
@media (max-width: 899px) {
	.munish-officer-list > .munish-officer-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.munish-officers {
		column-gap: 1rem;
	}
}

/* ---------------------------------------------------------------------------
 * Key Dates page (templates/page-key-dates.html)
 * One chronological list flowing down two wide columns, with the crest
 * printed large and pale behind it, cropped by the right edge of the page.
 * ------------------------------------------------------------------------- */

.munish-dates-page {
	position: relative;
	/* New stacking context, so the crest's z-index: -1 stays above the body
	 * background instead of disappearing behind it */
	isolation: isolate;
	overflow: clip;
	padding-top: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--50));
}

/* The crest is a white SVG, so it's used as a mask and painted with a
 * palette colour. At 45% the pale blue blends to about #E3F0F6, light enough
 * that the steel date labels on top of it still pass 4.5:1. */
.munish-dates-page::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 3rem;
	right: -14rem;
	width: min(60rem, 80vw);
	aspect-ratio: 1;
	background-color: var(--wp--preset--color--pale-blue);
	opacity: 0.45;
	-webkit-mask: url(../img/crest-white.svg) center / contain no-repeat;
	mask: url(../img/crest-white.svg) center / contain no-repeat;
	pointer-events: none;
}

.munish-dates-title {
	color: var(--wp--preset--color--primary-dark);
}

.munish-dates-title::after {
	content: "";
	display: block;
	width: 4rem;
	height: 3px;
	margin-top: 2rem;
	background-color: var(--wp--preset--color--un-blue);
}

/* CSS columns fill top to bottom, then across, so the list reads in date
 * order down the left column and continues in the right one */
.munish-timeline {
	columns: 2;
	column-gap: clamp(3rem, 8vw, 7rem);
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	list-style: none;
}

.munish-timeline li {
	break-inside: avoid;
	margin: 0 0 2.5rem;
}

.munish-timeline span {
	display: block;
}

.munish-when {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--steel);
}

.munish-what {
	margin-top: 0.35rem;
	font-family: var(--wp--preset--font-family--eb-garamond);
	font-size: clamp(1.35rem, 2vw, 1.65rem);
	line-height: 1.25;
	color: var(--wp--preset--color--primary-dark);
}

.munish-note {
	margin-top: 0.3rem;
	font-size: 0.9rem;
	line-height: 1.5;
}

/* The conference itself: the date the whole list builds up to.
 * un-blue-deep, not un-blue-dark: over the crest (#DAECF2) un-blue-dark is
 * only 3.75:1 and blends in; un-blue-deep is 6.85:1. The bar keeps it
 * distinct from the navy titles now that the colours are close. */
.munish-timeline-highlight .munish-when,
.munish-timeline-highlight .munish-what {
	color: var(--wp--preset--color--un-blue-deep);
}

.munish-timeline-highlight .munish-what {
	font-weight: 700;
}

.munish-timeline-highlight .munish-what::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	margin-top: 0.6rem;
	background-color: var(--wp--preset--color--un-blue);
}

@media (max-width: 781px) {
	.munish-timeline {
		columns: 1;
	}

	.munish-dates-page::before {
		top: 1rem;
		right: -40vw;
		width: 110vw;
	}
}

/* ---------------------------------------------------------------------------
 * Typography utilities
 * ------------------------------------------------------------------------- */

.munish-eyebrow {
	font-family: var(--wp--preset--font-family--open-sans);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Photographer credit pinned to a cover's bottom-right corner. Core makes the
 * inner container position: relative, which would pin the credit to the
 * vertically centred content instead; un-positioning it lets the cover be the
 * anchor. Its z-index still lifts it above the overlay because it's a flex item. */
.wp-block-cover__inner-container:has(> .munish-photo-credit) {
	position: static;
}

.wp-block-cover .munish-photo-credit {
	position: absolute;
	right: 1rem;
	bottom: 0.75rem;
	margin: 0;
	font-size: 0.72rem;
	opacity: 0.85;
}

/* ---------------------------------------------------------------------------
 * Buttons: ghost variant for dark photo/blue surfaces.
 * Core's "outline" button style inherits the surrounding text colour, so on
 * a dark band it renders as the HMUN-style white ghost button.
 * ------------------------------------------------------------------------- */

.wp-block-button.is-style-outline .wp-block-button__link {
	border-width: 1px;
	padding: calc(0.9em - 1px) calc(2em - 1px);
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--un-blue-dark);
	border-color: var(--wp--preset--color--white);
}

/* ---------------------------------------------------------------------------
 * Tables (deadlines, fees): steel-blue header rows.
 * ------------------------------------------------------------------------- */

.wp-block-table th {
	/* White on steel #426B7B is 5.8:1 (WCAG AA). */
	background-color: var(--wp--preset--color--steel);
	color: var(--wp--preset--color--white);
	font-weight: 600;
	text-align: left;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--wp--preset--color--surface);
}

/* ---------------------------------------------------------------------------
 * Navigation: dropdown panels on the UN-blue header
 * ------------------------------------------------------------------------- */

.munish-header .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--un-blue-dark) !important;
	border: none;
	border-radius: 0 0 2px 2px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.munish-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--un-blue-deep);
}