/* ==========================================================================
   OU-AAUP theme CSS: only what theme.json can't express.
   Tokens: theme.json presets (--wp--preset--*) and custom (--wp--custom--*).
   ========================================================================== */

:root {
	--ouaaup-focus: var(--wp--custom--focus-ring);
	--ouaaup-ease: var(--wp--custom--ease--standard);
	--ouaaup-fast: var(--wp--custom--duration--fast);
	--ouaaup-base: var(--wp--custom--duration--base);
	--ouaaup-radius-md: var(--wp--custom--radius--md);
	--ouaaup-radius-lg: var(--wp--custom--radius--lg);
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

::selection { background: #F6D2DD; color: var(--wp--preset--color--ink-900); }

/* --- Focus: always visible, same ring everywhere ------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: none;
	box-shadow: var(--ouaaup-focus);
	border-radius: var(--wp--custom--radius--xs);
}
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	box-shadow: var(--ouaaup-focus);
	border-radius: var(--ouaaup-radius-md);
}

/* --- Buttons: 44px min target, 1px press nudge --------------------------- */
.wp-element-button,
.wp-block-button__link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: background-color var(--ouaaup-fast) var(--ouaaup-ease),
		color var(--ouaaup-fast) var(--ouaaup-ease),
		transform var(--ouaaup-fast) var(--ouaaup-ease);
}
.wp-element-button:active,
.wp-block-button__link:active { transform: translateY(1px); }

/* Button style: inverse (white on red bands) */
.wp-block-button.is-style-inverse .wp-block-button__link {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--union-red);
	font-weight: 700;
	min-height: 52px;
	padding-inline: var(--wp--preset--spacing--6);
}
.wp-block-button.is-style-inverse .wp-block-button__link:hover {
	background: var(--wp--preset--color--union-red-050);
	color: var(--wp--preset--color--union-red-700);
}

/* Trailing arrow for any button with .has-arrow (keeps button text plain for editors) */
.wp-block-button.has-arrow .wp-block-button__link::after {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Editorial utilities -------------------------------------------------- */
.ouaaup-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	/* ou-gold-text (#86683A) passes AA at 12px on cream/warm/paper; decorative OU Gold never carries text. */
	color: var(--wp--preset--color--ou-gold-text);
}
.ouaaup-eyebrow.is-blue { color: var(--wp--preset--color--ou-blue-700); }
.ouaaup-lead {
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--ink-700);
}
.ouaaup-body-lg {
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.7;
	color: var(--wp--preset--color--ink-700);
}

/* Template parts sit flush (sections carry their own spacing). */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* Section header: eyebrow over H2, optional action on the right */
.ouaaup-sechead h2 { margin: 0; }
.ouaaup-sechead p { margin: 0; }

/* Card: white, hairline border, soft shadow */
.ouaaup-card {
	border: 1px solid var(--wp--preset--color--warm-100);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--sm);
}

/* Badge (paragraph): pill label */
.ouaaup-badge {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	padding: 4px 10px;
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
	background: var(--wp--preset--color--union-red-050);
	color: var(--wp--preset--color--union-red-700);
}
.ouaaup-badge.is-gold { background: var(--wp--preset--color--ou-gold-050); color: #7A5A2E; }
.ouaaup-badge.is-blue { background: var(--wp--preset--color--ou-blue-050); color: var(--wp--preset--color--ou-blue-700); }

/* Inline text links: semibold blue, underline on hover; optional trailing arrow */
.ouaaup-text-link,
.ouaaup-arrow-link { margin: 0; font-weight: 600; }
.ouaaup-text-link a,
.ouaaup-arrow-link a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	font-weight: 600;
}
.ouaaup-arrow-link a::after {
	content: "";
	width: 15px;
	height: 15px;
	background: currentColor;
	-webkit-mask: var(--ouaaup-arrow) center / contain no-repeat;
	mask: var(--ouaaup-arrow) center / contain no-repeat;
}
:root {
	--ouaaup-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
}

/* Large button (hero CTA): 52px tall */
.wp-block-button.is-size-lg .wp-block-button__link {
	min-height: 52px;
	padding-inline: var(--wp--preset--spacing--6);
}

/* --- Icon tiles ------------------------------------------------------------
   Any block with .ouaaup-ico--{name} sets --ouaaup-ico (see ouaaup-core
   ouaaup_icon_css()). Components below draw it with a CSS mask. */
.ouaaup-tile-icon,
.ouaaup-note::after,
.ouaaup-row-label::before {
	-webkit-mask: var(--ouaaup-ico) center / contain no-repeat;
	mask: var(--ouaaup-ico) center / contain no-repeat;
	background: currentColor;
}

/* Note card: 40px blue tile on the left of its text */
.ouaaup-note {
	position: relative;
	padding-left: calc(var(--wp--preset--spacing--5) + 40px + var(--wp--preset--spacing--3)) !important;
}
.ouaaup-note::before,
.ouaaup-note::after {
	content: "";
	position: absolute;
	left: var(--wp--preset--spacing--5);
	top: var(--wp--preset--spacing--5);
}
.ouaaup-note::before {
	width: 40px;
	height: 40px;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--ou-blue-050);
}
.ouaaup-note::after {
	width: 20px;
	height: 20px;
	margin: 10px;
	color: var(--wp--preset--color--ou-blue);
}
.ouaaup-note p { margin: 0; color: var(--wp--preset--color--ink-700); line-height: 1.55; }
.ouaaup-note .ouaaup-note__title {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	color: var(--wp--preset--color--ink-900);
}

/* Row label: small icon + Inter 600 label (used as an h3) */
.ouaaup-row-label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.4;
	color: var(--wp--preset--color--ink-700);
}
.ouaaup-row-label::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
}

/* Separator style: gold rule (56×3 pill) */
.wp-block-separator.is-style-gold-rule {
	width: 56px;
	height: 3px;
	max-width: none;
	margin: var(--wp--preset--spacing--4) auto var(--wp--preset--spacing--4) 0;
	border: none;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--ou-gold);
	opacity: 1;
}

.ouaaup-link-list { padding-left: 1.25em; }

/* --- Header ---------------------------------------------------------------- */
.ouaaup-header { position: relative; z-index: 10; }
.ouaaup-header__logo { margin: 0; }
.ouaaup-header__logo img { display: block; }
.ouaaup-nav { flex: 1 1 auto; }

/* Top-level items: 44px hit area, warm hover, red active section */
.ouaaup-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--3);
	border-radius: var(--ouaaup-radius-md);
	color: var(--wp--preset--color--ink-700);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--ouaaup-fast) var(--ouaaup-ease), color var(--ouaaup-fast) var(--ouaaup-ease);
}
.ouaaup-nav .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--warm-100);
	color: var(--wp--preset--color--ink-900);
	text-decoration: none;
}
.ouaaup-nav .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
.ouaaup-nav .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content,
.ouaaup-nav .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation__submenu-icon {
	color: var(--wp--preset--color--union-red);
}
.ouaaup-nav .wp-block-navigation__submenu-icon {
	width: 24px;
	height: 44px;
	margin-left: 0; /* no overlap with the link: separate 24px targets (WCAG 2.5.8) */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--ouaaup-radius-md);
}
.ouaaup-nav .wp-block-navigation__submenu-icon svg { width: 12px; height: 12px; stroke-width: 2; }
.ouaaup-nav .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content { padding-right: 2px; }

/* Dropdown panel. Sizing only in open states: core collapses closed panels to width:0,
   and forcing min-width/padding there makes hidden panels overflow the viewport. */
.ouaaup-nav .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--paper) !important;
	border-color: var(--wp--preset--color--warm-100) !important;
	border-radius: var(--ouaaup-radius-lg);
	box-shadow: var(--wp--preset--shadow--lg);
	z-index: 20;
}
.ouaaup-nav .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
.ouaaup-nav .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
.ouaaup-nav .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	min-width: 260px;
	padding: var(--wp--preset--spacing--2);
}
.ouaaup-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 10px var(--wp--preset--spacing--3) !important;
	border-radius: var(--ouaaup-radius-md);
	font-weight: 400;
	color: var(--wp--preset--color--ink-700);
	text-decoration: none;
}
.ouaaup-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--warm-100);
	color: var(--wp--preset--color--ink-900);
	text-decoration: none;
}
.ouaaup-nav .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--union-red);
	font-weight: 600;
}

/* Mobile overlay: keep the dropdown panel flat inside the overlay */
.ouaaup-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--6);
}
.ouaaup-nav .is-menu-open .wp-block-navigation__submenu-container {
	border: 0 !important;
	box-shadow: none;
	background: transparent !important;
	padding-top: 0 !important;
}
/* 44px targets for the overlay toggles; core still controls their display */
.ouaaup-nav .wp-block-navigation__responsive-container-open,
.ouaaup-nav .wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
}
/* Tablet: smaller logo and header row */
@media (max-width: 959px) {
	.ouaaup-header__row { min-height: 96px !important; }
	.ouaaup-header__logo img { height: 72px !important; }
}
/* Below 600px core swaps the nav for its overlay toggle: logo left, Join + toggle right */
@media (max-width: 599px) {
	.ouaaup-header__row { flex-wrap: nowrap !important; gap: var(--wp--preset--spacing--3) !important; }
	.ouaaup-header__row > .ouaaup-header__logo { margin-right: auto !important; }
	.ouaaup-header__logo img { height: 60px !important; }
	.ouaaup-nav { flex: none; order: 3; }
	.ouaaup-header__cta .wp-block-button__link {
		padding: 0 var(--wp--preset--spacing--4);
		font-size: var(--wp--preset--font-size--sm);
	}
}

.ouaaup-header__cta { flex: none; }

/* --- Footer ---------------------------------------------------------------- */
.ouaaup-join-band__eyebrow { color: rgba(255, 255, 255, 0.88); margin: 0; }
.ouaaup-join-band__title {
	font-weight: 800;
	line-height: 1.1;
	margin: 0;
}

.ouaaup-footer__logo { margin: 0 0 var(--wp--preset--spacing--3); }
.ouaaup-footer__about {
	color: var(--wp--preset--color--ink-500);
	max-width: 32ch;
	line-height: 1.6;
	margin: 0;
}
.ouaaup-footer__heading {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.4;
	margin: 0 0 var(--wp--preset--spacing--3);
}
.ouaaup-footer__links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--sm);
}
.ouaaup-footer__links a { color: var(--wp--preset--color--ink-700); text-decoration: none; }
.ouaaup-footer__links a:hover { color: var(--wp--preset--color--ou-blue-700); text-decoration: underline; }

.ouaaup-social.is-inline { margin: 0 -10px 0 0; }
.ouaaup-social.is-inline a { color: var(--wp--preset--color--ink-700); }
.ouaaup-social {
	list-style: none;
	padding: 0;
	margin: var(--wp--preset--spacing--3) 0 0 -13px;
	display: flex;
	gap: 0;
}
.ouaaup-social a {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--ouaaup-radius-md);
	color: var(--wp--preset--color--ink-500);
	transition: color var(--ouaaup-fast) var(--ouaaup-ease), background-color var(--ouaaup-fast) var(--ouaaup-ease);
}
.ouaaup-social a:hover { color: var(--wp--preset--color--ou-blue-700); background: var(--wp--preset--color--warm-100); }

/* Bottom row: ink-500 (not ink-400) so 12px text passes AA on warm-050 */
.ouaaup-footer__bottom { color: var(--wp--preset--color--ink-500); }
.ouaaup-footer__bottom p { margin: 0; }
.ouaaup-footer__bottom a { color: inherit; }

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

/* --- Quick links ---------------------------------------------------------- */
.ouaaup-quicklinks {
	border: 1px solid var(--wp--preset--color--warm-100);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--sm);
}
.ouaaup-qlink { margin: 0; }
.ouaaup-qlink a {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	min-height: 72px;
	padding: var(--wp--preset--spacing--4);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--ink-900);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	transition: background-color var(--wp--custom--duration--fast) var(--wp--custom--ease--standard);
}
.ouaaup-qlink a:hover {
	background: var(--wp--preset--color--warm-050);
	color: var(--wp--preset--color--ink-900);
	text-decoration: none;
}
/* 40px blue tile (::before) with the icon masked on top (::after) */
.ouaaup-qlink a::before {
	content: "";
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--ou-blue-050);
}
.ouaaup-qlink a::after {
	content: "";
	position: absolute;
	left: calc(var(--wp--preset--spacing--4) + 10px);
	top: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: var(--wp--preset--color--ou-blue);
	-webkit-mask: var(--ouaaup-ico) center / contain no-repeat;
	mask: var(--ouaaup-ico) center / contain no-repeat;
}

.ouaaup-quicklinks.is-layout-grid { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)) !important; }