/*
Theme Name: NIYMC
Description: Block theme for the Northern Ireland Young Musician Competition, hosted by the Rotary Club of Comber. Backstage pass design.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: niymc
*/

/* ==========================================================================
   Tokens per direction. Colours and fonts come from theme.json and the style
   variation; these are the few values CSS needs that theme.json cannot hold.
   ========================================================================== */

body {
	--niymc-heading-font: var(--wp--preset--font-family--fraunces);
	--niymc-focus: var(--wp--preset--color--contrast);
	--niymc-radius: var(--wp--custom--radius, 0.75rem);
	--niymc-rule: color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent);
}

body.is-direction-backstage {
	--niymc-heading-font: var(--wp--preset--font-family--bricolage);
}

/* Dark surfaces: the focus ring flips to the pop colour so it stays visible. */
.niymc-cta,
.niymc-footer,
.niymc-page-hero,
.niymc-hero__body,
.niymc-section--brand,
.wp-block-navigation__responsive-container.is-menu-open {
	--niymc-focus: var(--wp--preset--color--pop);
}

/* ==========================================================================
   Base
   ========================================================================== */

body { overflow-x: clip; }

.wp-site-blocks > * + * { margin-block-start: 0; }

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

:where(a, button, input, select, textarea, summary, iframe, [tabindex]):focus-visible {
	outline: 3px solid var(--niymc-focus);
	outline-offset: 3px;
	border-radius: 2px;
}

.niymc-main { padding-block-end: var(--wp--preset--spacing--50); }
.niymc-main--landing { padding-block-end: 0; }

.niymc-page-body { padding-block-start: var(--wp--preset--spacing--40); }

.niymc-eyebrow {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 750;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-block-end: 0.5rem;
}

.niymc-lead { font-size: var(--wp--preset--font-size--large); line-height: 1.5; }

.niymc-quiet { color: var(--wp--preset--color--contrast-2); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Placeholders for facts the club has not yet given. Loud on purpose. */
.club-todo {
	background: #FFF1A8;
	color: #3A2E00;
	outline: 2px dashed #A87F00;
	outline-offset: 1px;
	border-radius: 3px;
	padding: 0 0.3em;
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 0.82em;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.photo-needed {
	display: grid;
	place-items: center;
	min-height: 12rem;
	padding: 1rem;
	border: 2px dashed currentColor;
	border-radius: var(--niymc-radius);
	text-align: center;
	font-weight: 600;
}

/* ==========================================================================
   Header
   ========================================================================== */

.niymc-header {
	padding-block: 0.75rem;
	border-bottom: 1px solid var(--niymc-rule);
	background: var(--wp--preset--color--base);
	position: relative;
	z-index: 20;
}

.niymc-header__inner { gap: 1rem; }

.niymc-wordmark {
	display: flex;
	flex-direction: column;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	line-height: 1;
	flex-shrink: 0;
}

.niymc-wordmark__small {
	font-size: 0.625rem;
	font-weight: 750;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.niymc-wordmark__main {
	font-family: var(--niymc-heading-font);
	font-size: 1.3rem;
	font-weight: 750;
	margin-block: 0.15rem;
	letter-spacing: -0.01em;
}

.niymc-header__actions { gap: 0.75rem; }

.niymc-header__cta .wp-block-button__link {
	padding: 0.55rem 1rem;
	font-size: 0.9375rem;
	white-space: nowrap;
}

.niymc-nav .wp-block-navigation-item__content { padding-block: 0.35rem; text-decoration: none; }
.niymc-nav .wp-block-navigation-item__content:hover { text-decoration: underline; text-underline-offset: 0.3em; }

/* The hamburger stays up to 1080px: seven links and a button do not fit on one
   line any narrower, and two-line navigation reads as broken. */
@media (min-width: 600px) and (max-width: 1079px) {
	.niymc-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.niymc-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

@media (max-width: 1079px) {
	.niymc-header__cta { order: -1; }
}

.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--brand) !important;
	color: var(--wp--preset--color--on-brand) !important;
	padding: 1.25rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 3.5rem;
	gap: 0.25rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--niymc-heading-font);
	font-size: 1.75rem;
	font-weight: 700;
	padding-block: 0.3rem;
}

.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; }

/* ==========================================================================
   Page hero (inner pages)
   ========================================================================== */

.niymc-page-hero {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--on-brand);
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.niymc-page-hero :where(h1, .wp-block-post-title, a) { color: var(--wp--preset--color--on-brand); }
.niymc-page-hero h1 { margin-block: 0; }
.niymc-page-hero .niymc-eyebrow { margin: 0 0 0.75rem; }
.niymc-post-date { margin-top: 0.75rem; opacity: 0.85; }

/* ==========================================================================
   Sections
   ========================================================================== */

.niymc-section { padding-block: var(--wp--preset--spacing--50); }
.niymc-section--alt { background: var(--wp--preset--color--base-2); }
.niymc-section--brand { background: var(--wp--preset--color--brand); color: var(--wp--preset--color--on-brand); }
.niymc-section--brand :where(h2, h3, a:not(.wp-block-button__link)) { color: var(--wp--preset--color--on-brand); }

.niymc-section > .wp-block-heading:first-child { margin-top: 0; }

/* ==========================================================================
   Home hero
   ========================================================================== */

.niymc-hero { padding: 0 !important; display: grid; }
.niymc-hero > * { margin: 0 !important; max-width: none !important; }

.niymc-hero__media { margin: 0; }
.niymc-hero__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 50% 40%;
}

.niymc-hero__media figcaption {
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
	padding: 0.4rem 1rem;
	color: var(--wp--preset--color--contrast-2);
	text-align: left;
}

.niymc-hero__body {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--on-brand);
	padding: var(--wp--preset--spacing--40) max(1rem, calc((100vw - 74rem) / 2)) !important;
}

.niymc-hero__body h1 { color: var(--wp--preset--color--on-brand); margin-block: 0.25rem 1rem; }
.niymc-hero__body .niymc-eyebrow { color: var(--wp--preset--color--pop); margin: 0; }
.niymc-hero__body .niymc-lead { max-width: 36rem; }

.niymc-deadline { font-weight: 650; margin-top: 1rem; }

/* The countdown is a Backstage component; Spotlight shows the plain date. */
.niymc-countdown { display: none; }

/* ==========================================================================
   Facts
   ========================================================================== */

.niymc-facts {
	list-style: none;
	margin-block: 0 !important;
	padding: 0.85rem max(1rem, calc((100vw - 74rem) / 2)) !important;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	font-weight: 650;
	font-size: var(--wp--preset--font-size--small);
}

.niymc-facts li { margin: 0; }

/* ==========================================================================
   Steps
   ========================================================================== */

.niymc-steps {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 1rem;
	counter-reset: step;
}

@media (min-width: 782px) {
	.niymc-steps { grid-template-columns: repeat(3, 1fr); }
}

.niymc-step {
	margin: 0 !important;
	padding: 1.25rem 1.25rem 1.5rem;
	border-radius: var(--niymc-radius);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--niymc-rule);
}

.niymc-step h3 { margin-block: 0.5rem 0.5rem; }
.niymc-step p { margin-block: 0.25rem; }

.niymc-step__num {
	font-family: var(--niymc-heading-font);
	font-weight: 800;
	font-size: 1.25rem;
	line-height: 1;
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	margin: 0 !important;
}

/* ==========================================================================
   Quotes
   ========================================================================== */

.niymc-quotes {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 782px) {
	.niymc-quotes { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1080px) {
	.niymc-quotes { grid-template-columns: repeat(3, 1fr); }
}

.niymc-quote {
	margin: 0 !important;
	padding: 1.5rem 1.5rem 1.25rem !important;
	border-radius: var(--niymc-radius);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	position: relative;
}

.niymc-quote p { font-size: 1.125rem; line-height: 1.5; margin: 0; }

.niymc-quote cite {
	display: block;
	margin-top: 0.85rem;
	font-style: normal;
	font-weight: 750;
	font-size: var(--wp--preset--font-size--small);
}

/* ==========================================================================
   Past winners grid
   ========================================================================== */

.niymc-winners {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
}

@media (min-width: 782px) {
	.niymc-winners { grid-template-columns: repeat(4, 1fr); }
}

.niymc-winner {
	margin: 0 !important;
	padding: 1rem 1rem 1.1rem;
	border-radius: var(--niymc-radius);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--niymc-rule);
}

.niymc-winner__year {
	font-family: var(--niymc-heading-font);
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1;
	margin: 0 0 0.4rem !important;
}

.niymc-winner h3 { font-family: inherit; font-size: 1rem; font-weight: 750; margin: 0; letter-spacing: 0; line-height: 1.3; }
.niymc-winner p { margin: 0.2rem 0 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--contrast-2); }

/* ==========================================================================
   Cards, video, FAQs, rules, pay box
   ========================================================================== */

.niymc-card {
	padding: var(--wp--preset--spacing--30) !important;
	border-radius: var(--niymc-radius);
	background: var(--wp--preset--color--base-2);
}

.niymc-card > :first-child { margin-top: 0; }

.niymc-video { margin: 0; }
.niymc-video iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: var(--niymc-radius);
	background: #000;
}

.niymc-faq {
	border-top: 1px solid var(--niymc-rule);
	padding-block: 0.25rem;
	margin-block: 0 !important;
}

.niymc-faq:last-of-type { border-bottom: 1px solid var(--niymc-rule); }

.niymc-faq summary {
	cursor: pointer;
	font-weight: 750;
	font-size: var(--wp--preset--font-size--large);
	padding: 0.85rem 2rem 0.85rem 0;
	list-style: none;
	position: relative;
}

.niymc-faq summary::-webkit-details-marker { display: none; }

.niymc-faq summary::after {
	content: "+";
	position: absolute;
	right: 0.25rem;
	top: 0.6rem;
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.2;
}

.niymc-faq[open] summary::after { content: "–"; }
.niymc-faq > :not(summary) { margin-block: 0 1rem; }

.niymc-rules { padding-left: 0; list-style: none; counter-reset: rule; }
.niymc-rules > li {
	counter-increment: rule;
	position: relative;
	padding: 1rem 0 1rem 3.25rem;
	border-top: 1px solid var(--niymc-rule);
	margin: 0;
}

.niymc-rules > li::before {
	content: counter(rule);
	position: absolute;
	left: 0;
	top: 0.85rem;
	width: 2.25rem;
	height: 2.25rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-family: var(--niymc-heading-font);
	font-weight: 800;
	background: var(--wp--preset--color--base-2);
}

.niymc-pay {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 1rem;
	align-items: center;
}

@media (min-width: 600px) {
	.niymc-pay { grid-template-columns: 1fr 9rem; }
}

.niymc-pay figure { margin: 0; }
.niymc-pay img { border-radius: 0.5rem; background: #fff; padding: 0.4rem; }





.niymc-figure-row {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 1rem;
	align-items: start;
}

@media (min-width: 782px) {
	.niymc-figure-row { grid-template-columns: 2fr 3fr; }
}

.niymc-figure-row figure { margin: 0; }
.niymc-figure-row img { border-radius: var(--niymc-radius); }

.niymc-year { scroll-margin-top: 1rem; }

/* WPForms: let the theme's type and colours through. */
.wpforms-container .wpforms-field-label { font-weight: 700; }
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container textarea {
	border-radius: 0.5rem !important;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--contrast) 45%, transparent) !important;
	font: inherit !important;
}

.wpforms-container .wpforms-field-description { color: var(--wp--preset--color--contrast-2); }

.wpforms-container button[type="button"][disabled],
.wpforms-container button[type="submit"] {
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--on-accent) !important;
	border-radius: var(--wp--custom--radius-button) !important;
	font-weight: 750 !important;
	padding: 0.8rem 1.6rem !important;
	height: auto !important;
}

.wpforms-container button[disabled] { opacity: 0.6; cursor: not-allowed; }

/* ==========================================================================
   Call to action band and footer
   ========================================================================== */

.niymc-cta {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--on-brand);
	padding-block: var(--wp--preset--spacing--50);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--on-brand) 15%, transparent);
}

.niymc-cta h2 { color: var(--wp--preset--color--on-brand); margin-top: 0; }

.niymc-footer {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--on-brand);
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--on-brand) 18%, transparent);
	font-size: var(--wp--preset--font-size--small);
}

.niymc-footer a { color: var(--wp--preset--color--on-brand); }

.niymc-footer__title {
	font-family: var(--wp--preset--font-family--figtree) !important;
	font-size: 0.75rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase;
	color: var(--wp--preset--color--pop);
	margin-bottom: 0.75rem;
}

.niymc-footer__links { list-style: none; padding: 0; margin: 0; }
.niymc-footer__links li { margin: 0 0 0.4rem; }

.niymc-hosted {
	margin-top: var(--wp--preset--spacing--40) !important;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--on-brand) 18%, transparent);
	gap: 1.25rem;
}

/* The club's logo is shown as supplied, on a white tile so it reads on a dark
   footer without altering the mark itself. */
.niymc-hosted__logo { margin: 0; background: #fff; padding: 0.6rem 0.8rem; border-radius: 0.5rem; }
.niymc-hosted__logo img { display: block; }
.niymc-hosted__text { max-width: 34rem; margin: 0; }

.niymc-footer__legal { margin-top: var(--wp--preset--spacing--30) !important; opacity: 0.85; }


/* ==========================================================================
   SPOTLIGHT
   The competition as a concert: deep green, stage-light amber, Fraunces.
   ========================================================================== */

@media (min-width: 782px) {
	.is-direction-spotlight .niymc-hero__media img { aspect-ratio: 21 / 9; }
}

.is-direction-spotlight .niymc-hero__body h1 { font-size: var(--wp--preset--font-size--xx-large); max-width: 16ch; }

.is-direction-spotlight .niymc-hero__body h1 mark {
	background: none;
	color: var(--wp--preset--color--pop);
	font-style: italic;
	font-weight: 500;
}

.is-direction-spotlight .niymc-facts {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

.is-direction-spotlight .niymc-facts li + li::before {
	content: "•";
	margin-right: 1.5rem;
	margin-left: -0.75rem;
	opacity: 0.6;
}

@media (max-width: 599px) {
	.is-direction-spotlight .niymc-facts { flex-direction: column; gap: 0.3rem; }
	.is-direction-spotlight .niymc-facts li + li::before { content: none; }
}

.is-direction-spotlight .niymc-page-hero { border-bottom: 6px solid var(--wp--preset--color--accent); }

.is-direction-spotlight .niymc-quote { box-shadow: 0 1px 0 var(--niymc-rule); }
.is-direction-spotlight .niymc-quote::before {
	content: "“";
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 4.5rem;
	line-height: 0.6;
	display: block;
	color: var(--wp--preset--color--brand);
	height: 2rem;
}

.is-direction-spotlight .niymc-quote p { font-family: var(--wp--preset--font-family--fraunces); font-style: normal; font-weight: 400; }

.is-direction-spotlight .niymc-winner__year { color: var(--wp--preset--color--brand); }

.is-direction-spotlight .niymc-section--brand .niymc-quote,
.is-direction-spotlight .niymc-section--brand .niymc-winner { border: 0; }

/* ==========================================================================
   BACKSTAGE PASS
   Off-black, electric violet, coral, acid yellow on dark only. Bricolage.
   ========================================================================== */

.is-direction-backstage .niymc-header { border-bottom: 3px solid var(--wp--preset--color--contrast); }
.is-direction-backstage .niymc-wordmark__main { font-weight: 800; font-size: 1.45rem; letter-spacing: -0.03em; }

/* The ticket. Notches cut by a mask; the mask would also clip a focus ring,
   so the ring is drawn on the wrapper instead. */
.is-direction-backstage .niymc-enter-button .wp-block-button__link {
	--notch: 0.55rem;
	position: relative;
	padding-inline: 1.5rem 2.1rem;
	-webkit-mask:
		radial-gradient(circle var(--notch) at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat,
		radial-gradient(circle var(--notch) at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
	mask:
		radial-gradient(circle var(--notch) at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat,
		radial-gradient(circle var(--notch) at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
}

.is-direction-backstage .niymc-enter-button .wp-block-button__link::after {
	content: "";
	position: absolute;
	top: 0.4rem;
	bottom: 0.4rem;
	right: 1.1rem;
	border-left: 2px dashed currentColor;
	opacity: 0.55;
}

.is-direction-backstage .niymc-enter-button .wp-block-button__link:focus-visible { outline: none; }
.is-direction-backstage .niymc-enter-button:has(.wp-block-button__link:focus-visible) {
	outline: 3px solid var(--niymc-focus);
	outline-offset: 3px;
	border-radius: 0.5rem;
}

.is-direction-backstage .niymc-header__cta .wp-block-button__link { padding-inline: 1rem 1.7rem; }
.is-direction-backstage .niymc-header__cta .wp-block-button__link::after { right: 0.85rem; }

/* Hero: big type on black, the photo framed on a colour block. */
.is-direction-backstage .niymc-hero {
	background: var(--wp--preset--color--brand);
	grid-template-columns: 1fr;
	padding-bottom: 2.5rem !important;
}

.is-direction-backstage .niymc-hero__body { order: -1; padding-bottom: 1.5rem !important; }

.is-direction-backstage .niymc-hero__body h1 {
	font-size: var(--wp--preset--font-size--huge);
	text-transform: uppercase;
	line-height: 0.92;
	max-width: 11ch;
}

.is-direction-backstage .niymc-hero__body h1 mark { background: none; color: var(--wp--preset--color--pop); }

.is-direction-backstage .niymc-hero__media {
	margin-inline: 1rem !important;
	padding: 0.6rem;
	background: var(--wp--preset--color--accent);
	box-shadow: 0.6rem 0.6rem 0 var(--wp--preset--color--highlight);
	transform: rotate(-1.5deg);
}

.is-direction-backstage .niymc-hero__media img { aspect-ratio: 4 / 3; }
.is-direction-backstage .niymc-hero__media figcaption { color: var(--wp--preset--color--on-accent); padding: 0.5rem 0.25rem 0.1rem; }

@media (min-width: 900px) {
	.is-direction-backstage .niymc-hero {
		grid-template-columns: 1.1fr 1fr;
		align-items: center;
		padding: var(--wp--preset--spacing--40) max(1rem, calc((100vw - 74rem) / 2)) var(--wp--preset--spacing--50) !important;
		column-gap: var(--wp--preset--spacing--40);
	}
	.is-direction-backstage .niymc-hero__body { order: 0; padding: 0 !important; background: none; }
	.is-direction-backstage .niymc-hero__media { order: 1; margin: 0 !important; }
}

.is-direction-backstage .niymc-hero__body .niymc-eyebrow { color: var(--wp--preset--color--highlight); }
.is-direction-backstage .niymc-deadline { display: none; }

.is-direction-backstage .niymc-countdown {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.75rem;
	margin-top: 1.25rem;
	font-weight: 700;
}

.is-direction-backstage .niymc-countdown__days {
	font-family: var(--wp--preset--font-family--bricolage);
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--pop);
}

.is-direction-backstage .niymc-countdown:not(.is-counting) .niymc-countdown__days,
.is-direction-backstage .niymc-countdown:not(.is-counting) .niymc-countdown__label { display: none; }

/* Facts become stickers. */
.is-direction-backstage .niymc-facts {
	background: var(--wp--preset--color--brand);
	padding-block: 0 2rem !important;
	gap: 0.6rem;
	font-size: 0.9375rem;
}

.is-direction-backstage .niymc-facts li {
	padding: 0.45rem 0.85rem;
	border-radius: 999px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	background: var(--wp--preset--color--pop);
	color: var(--wp--preset--color--contrast);
	transform: rotate(-2deg);
}

.is-direction-backstage .niymc-facts li:nth-child(3n + 2) { background: var(--wp--preset--color--highlight); color: var(--wp--preset--color--on-highlight); transform: rotate(1.5deg); }
.is-direction-backstage .niymc-facts li:nth-child(3n + 3) { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); transform: rotate(-1deg); }

.is-direction-backstage .niymc-page-hero h1 {
	font-size: var(--wp--preset--font-size--xx-large);
	text-transform: uppercase;
	line-height: 0.95;
}

.is-direction-backstage .niymc-page-hero { border-bottom: 8px solid var(--wp--preset--color--accent); box-shadow: 0 8px 0 var(--wp--preset--color--highlight); margin-bottom: 8px; }

/* The three-step strip: one colour block per step. */
.is-direction-backstage .niymc-step { border: 0; border-radius: var(--niymc-radius); }
.is-direction-backstage .niymc-step:nth-child(1) { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); }
.is-direction-backstage .niymc-step:nth-child(2) { background: var(--wp--preset--color--highlight); color: var(--wp--preset--color--on-highlight); }
.is-direction-backstage .niymc-step:nth-child(3) { background: var(--wp--preset--color--brand); color: var(--wp--preset--color--on-brand); }
.is-direction-backstage .niymc-step h3 { color: inherit; font-size: 1.6rem; text-transform: uppercase; }
.is-direction-backstage .niymc-step a { color: inherit; }

.is-direction-backstage .niymc-step__num {
	background: none;
	color: inherit;
	width: auto;
	height: auto;
	font-size: 3.25rem;
	place-items: start;
}

.is-direction-backstage .niymc-step:nth-child(3) .niymc-step__num { color: var(--wp--preset--color--pop); }

.is-direction-backstage .niymc-quote {
	border-radius: 1.25rem 1.25rem 1.25rem 0.25rem;
	background: var(--wp--preset--color--base);
}

.is-direction-backstage .niymc-quote:nth-child(3n + 2) { background: var(--wp--preset--color--highlight); color: var(--wp--preset--color--on-highlight); }
.is-direction-backstage .niymc-quote:nth-child(3n + 3) { background: var(--wp--preset--color--pop); color: var(--wp--preset--color--contrast); }
.is-direction-backstage .niymc-quote p { font-weight: 600; }

.is-direction-backstage .niymc-winner { border: 2px solid var(--wp--preset--color--contrast); border-radius: var(--niymc-radius); }
.is-direction-backstage .niymc-winner__year { color: var(--wp--preset--color--accent); font-size: 2.1rem; }
.is-direction-backstage .niymc-section--brand .niymc-winner { border-color: var(--wp--preset--color--base); }

.is-direction-backstage .niymc-cta { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); border: 0; }
.is-direction-backstage .niymc-cta h2 { color: var(--wp--preset--color--on-accent); text-transform: uppercase; }
.is-direction-backstage .niymc-cta .wp-block-button__link { background: var(--wp--preset--color--pop); color: var(--wp--preset--color--contrast); }

.is-direction-backstage .niymc-footer { border-top: 0; }

.is-direction-backstage .niymc-rules > li::before { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); border-radius: 0.3rem; }

.is-direction-backstage .niymc-card { border-left: 6px solid var(--wp--preset--color--highlight); border-radius: var(--niymc-radius); }

.niymc-rounded img { border-radius: var(--niymc-radius); }

/* Small phones: the wordmark, the ticket and the menu button share 343px. */
@media (max-width: 420px) {
	.niymc-header__inner { gap: 0.5rem; }
	.niymc-header__actions { gap: 0.4rem; }
	.niymc-wordmark__main { font-size: 1.15rem; }
	.is-direction-backstage .niymc-wordmark__main { font-size: 1.2rem; }
	.niymc-wordmark__small { font-size: 0.5625rem; letter-spacing: 0.12em; }
	.niymc-header__cta .wp-block-button__link { padding: 0.5rem 0.8rem; font-size: 0.875rem; }
	.is-direction-backstage .niymc-header__cta .wp-block-button__link { padding-inline: 0.8rem 1.45rem; }
	.is-direction-backstage .niymc-header__cta .wp-block-button__link::after { right: 0.7rem; }
}

/* Spotlight's amber is 1.9:1 against the warm-white page, under the 3:1 a
   button edge needs (WCAG 1.4.11). On light surfaces the button carries an ink
   outline; on the green surfaces amber alone is 6:1, so the outline goes. */
.is-direction-spotlight .wp-element-button,
.is-direction-spotlight .wpforms-container button[type="button"][disabled],
.is-direction-spotlight .wpforms-container button[type="submit"] {
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--contrast) !important;
}

.is-direction-spotlight :is(.niymc-hero__body, .niymc-cta, .niymc-section--brand, .niymc-footer) .wp-element-button {
	box-shadow: none !important;
}

/* Portrait photos on the results and patrons pages: cap the height so one
   picture does not fill a laptop screen. Shown whole, never cropped. */
.niymc-page-body .niymc-rounded img { max-height: 34rem; width: auto; }

/* Logos supplied white on transparent: they need the dark brand ground. */
.niymc-logos {
	background: var(--wp--preset--color--brand);
	border-radius: var(--niymc-radius);
	padding: var(--wp--preset--spacing--30) !important;
	display: grid;
	place-items: center;
}
.niymc-logos figure { margin: 0; }
.niymc-logos img { max-height: 18rem; width: auto; border-radius: 0 !important; }

/* Backstage: display-size type belongs to heroes and the home page. On long
   pages the section headings step down so the text leads. */
.is-direction-backstage .niymc-page-body h2 { font-size: var(--wp--preset--font-size--x-large); line-height: 1.08; margin-top: 2.25rem; }
.is-direction-backstage .niymc-page-body .niymc-card h2 { margin-top: 0; }
.is-direction-backstage .niymc-page-body .niymc-year {
	font-size: var(--wp--preset--font-size--xx-large);
	color: var(--wp--preset--color--accent);
	margin-top: 3rem;
	padding-top: 0.75rem;
	border-top: 4px solid var(--wp--preset--color--contrast);
}
.is-direction-spotlight .niymc-page-body .niymc-year { color: var(--wp--preset--color--brand); margin-top: 2.5rem; }