/*
 * The logo's grammar as a reusable device.
 *
 *   BRITISH CHAPTER          <- eyebrow: letterspaced, small, ROSE (4.76:1 —
 *                               orange is 3.88:1 and fails AA at this size)
 *   ANTIFASCIST              <- line 1: orange, the subject (large text, 3.88:1 passes)
 *   INTERNATIONAL            <- line 2: navy, the frame
 *   ------------             <- hairline rule
 *
 * Applied via the "Lockup" heading style. Wrap the second visual line in
 * <span class="afi-frame"> to take navy.
 */

.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rose);
	margin-block-end: var(--wp--preset--spacing--10);
}

.is-style-lockup {
	color: var(--wp--preset--color--orange);
	text-wrap: balance;
}

.is-style-lockup .afi-frame {
	display: block;
	color: var(--wp--preset--color--navy);
}

.is-style-rule-top {
	border-block-start: 1px solid var(--wp--preset--color--navy);
	padding-block-start: var(--wp--preset--spacing--30);
}

/*
 * Masthead: wordmark left, navigation on the page's TRUE centre-line, call to
 * action right. Equal 1fr outer columns are what make the centre true — with
 * `auto 1fr auto` the menu would centre in the leftover space and drift as the
 * wordmark and button changed width.
 */
.afi-masthead {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.afi-masthead__brand { justify-self: start; }
.afi-masthead__nav   { justify-self: center; }
.afi-masthead__cta   { justify-self: end; }

/*
 * Below the tablet breakpoint the nav simply becomes grid row 2 — no overlay,
 * no hamburger. The call to action is hidden rather than stacked; it reappears
 * in the footer and on the front page.
 */
@media (max-width: 781px) {
	.afi-masthead {
		grid-template-columns: 1fr;
		justify-items: start;
		gap: var(--wp--preset--spacing--20);
	}

	.afi-masthead__nav { justify-self: start; }

	.afi-masthead__cta { display: none; }
}

/* Footer link list: navigation, not prose — no bullets, no indent. */
.afi-footer-links {
	list-style: none;
	padding-inline-start: 0;
	margin-block: 0;
}

.afi-footer-links a {
	color: var(--wp--preset--color--paper);
}

.afi-footer-links a:hover,
.afi-footer-links a:focus-visible {
	color: var(--wp--preset--color--mist);
}

/*
 * Sticky footer.
 *
 * Short pages — 404, Contact, the empty Events page — left the navy footer
 * floating mid-screen with blank paper below it. A flex column on the block
 * wrapper, with main absorbing the slack, pins it to the bottom without
 * committing to a fixed height anywhere. The footer's own top margin is part
 * of flex layout, so this does not introduce a scrollbar on short pages.
 */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh; /* dvh discounts mobile browser chrome; vh is the fallback */
}

.wp-site-blocks > main {
	flex-grow: 1;
}

/*
 * Small-screen typography.
 *
 * The display faces are set in uppercase Archivo 900, where a single word can
 * be wider than a phone. "INTERNATIONAL" is thirteen capitals: at the old 3rem
 * fluid minimum that is roughly 360px of text inside 264px of usable width.
 * The minimums in theme.json are now set to fit; the rules below are the
 * safety net for any word those minimums do not anticipate.
 */
:where(h1, h2, h3, h4, h5, h6, .wp-block-site-title, .is-style-lockup) {
	overflow-wrap: break-word;
}

/*
 * Narrow screens need the gutter back more than they need generous padding.
 * Overriding the root padding custom properties is the supported hook when
 * useRootPaddingAwareAlignments is on — it reaches every .has-global-padding
 * container at once, rather than chasing them individually.
 */
@media (max-width: 400px) {
	body {
		--wp--style--root--padding-left: 1rem;
		--wp--style--root--padding-right: 1rem;
	}
}

/* Quality floor: never hide focus, never animate for those who opt out. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--rose);
	outline-offset: 2px;
}

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