/**
 * HUMC theme — front-end + editor CSS.
 *
 * Only styles that theme.json cannot express live here: accessible focus
 * rings, 44px minimum tap targets, the red GIVE button style, the mobile
 * drawer polish, embed/map wrappers, and reduced-motion handling.
 * Design tokens (colors, type, spacing) come from theme.json presets.
 */

/* -------------------------------------------------------------------------
 * Accessibility: visible focus. Never outline:none. WCAG 2.4.7 / 2.2 AA.
 * ---------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex], .wp-block-navigation-item__content):focus-visible {
	outline: 3px solid var(--wp--preset--color--navy);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Give buttons/links a clearly branded focus ring on dark surfaces. */
.wp-block-navigation.has-text-color .wp-block-navigation-item__content:focus-visible,
.has-navy-background-color a:focus-visible,
.has-navy-700-background-color a:focus-visible {
	outline-color: var(--wp--preset--color--gold);
}

/* -------------------------------------------------------------------------
 * Touch targets: minimum 44x44px for interactive controls. WCAG 2.5.8.
 * ---------------------------------------------------------------------- */
.wp-block-button__link,
.wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-submenu__toggle,
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 44px;
	justify-content: center;
}

/* -------------------------------------------------------------------------
 * Red GIVE button style — stewardship CTA, visually distinct.
 * ---------------------------------------------------------------------- */
.wp-block-button.is-style-give .wp-block-button__link {
	background-color: var(--wp--preset--color--red);
	color: var(--wp--preset--color--white);
	font-weight: 700;
	letter-spacing: 0.02em;
	border-radius: 6px;
	border: 2px solid transparent;
}

.wp-block-button.is-style-give .wp-block-button__link:hover,
.wp-block-button.is-style-give .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--red-700);
	color: var(--wp--preset--color--white);
}

/* GIVE nav item rendered as a compact button in the header nav. */
.humc-nav-give .wp-block-button__link {
	padding-top: 0.6rem;
	padding-bottom: 0.6rem;
}

/* -------------------------------------------------------------------------
 * Header: sticky, subtle shadow on scroll surface.
 * ---------------------------------------------------------------------- */
.humc-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* -------------------------------------------------------------------------
 * Mobile drawer nav — larger tap targets + comfortable spacing.
 * core/navigation supplies the focus-trap, ESC-to-close and ARIA.
 * ---------------------------------------------------------------------- */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--navy);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--white);
	padding: 0.75rem 0;
	font-size: 1.25rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--gold);
}

/* -------------------------------------------------------------------------
 * Accessible embed / video wrapper — responsive, no layout shift.
 * ---------------------------------------------------------------------- */
.humc-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: var(--wp--preset--color--navy-100);
	overflow: hidden;
}

.humc-embed iframe,
.humc-embed video,
.humc-embed object,
.humc-embed embed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Map wrapper shares the responsive behaviour. */
.humc-map {
	aspect-ratio: 21 / 9;
}

@media (max-width: 600px) {
	.humc-map {
		aspect-ratio: 4 / 3;
	}
}

/* -------------------------------------------------------------------------
 * Card pattern — consistent hover affordance and equal-height layout.
 * ---------------------------------------------------------------------- */
.humc-card {
	height: 100%;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.humc-card:hover,
.humc-card:focus-within {
	box-shadow: 0 6px 20px rgba(23, 50, 77, 0.12);
	transform: translateY(-2px);
}

.humc-card img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* -------------------------------------------------------------------------
 * Eyebrow label (hero / section headers).
 * ---------------------------------------------------------------------- */
.humc-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
	font-size: 0.85rem;
}

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

	.humc-card:hover,
	.humc-card:focus-within {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * Footer — links legible on the navy surface.
 * ---------------------------------------------------------------------- */
.humc-footer a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.humc-footer a:hover,
.humc-footer a:focus {
	color: var(--wp--preset--color--gold);
	text-decoration: underline;
}

.humc-footer .humc-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.humc-footer .humc-footer-list li {
	margin-bottom: 0.5rem;
}

.humc-footer .wp-block-social-links .wp-social-link:focus-within {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* Skip link visible on focus (parent theme prints the link markup). */
.skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 200;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	border-radius: 4px;
}


/* =========================================================================
 * HUM-31 landing + community pages: sub-nav, notices, forms, FAQ, steps.
 * ====================================================================== */

/* In-page section sub-navigation (landing pages, spec §3). */
.humc-subnav .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--navy);
	background: transparent;
	padding: 0.4rem 0.9rem;
}
.humc-subnav .wp-block-button.is-style-outline .wp-block-button__link:hover,
.humc-subnav .wp-block-button.is-style-outline .wp-block-button__link:focus {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

/* Notice / callout boxes (verification flags, standing notices). */
.humc-notice {
	border-left: 4px solid var(--wp--preset--color--red);
	background: var(--wp--preset--color--navy-100);
	padding: var(--wp--preset--spacing--30, 1.25rem);
	border-radius: 6px;
	margin: 0 auto;
}
.humc-notice.humc-notice-info {
	border-left-color: var(--wp--preset--color--navy);
}
.humc-notice > *:last-child { margin-bottom: 0; }
.humc-notice h3 { margin-top: 0; }

/* -------------------------------------------------------------------------
 * Accessible form designs (steelpan interest, event-space request).
 * ---------------------------------------------------------------------- */
.humc-form { max-width: 760px; margin: 0 auto; }
.humc-form .req { color: var(--wp--preset--color--red); font-weight: 700; }
.humc-form .humc-form-status { font-size: 0.9rem; color: var(--wp--preset--color--charcoal, #333); }
.humc-form fieldset {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	padding: 1.1rem 1.25rem 1.4rem;
	margin: 0 0 1.5rem;
}
.humc-form legend {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.05rem;
	padding: 0 0.5rem;
	color: var(--wp--preset--color--navy);
}
.humc-form .humc-subfieldset { margin-top: 0.5rem; }
.humc-form .humc-field { margin-bottom: 1rem; }
.humc-form .humc-field:last-child { margin-bottom: 0; }
.humc-form label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.humc-form .humc-field-inline { display: flex; gap: 0.6rem; align-items: flex-start; }
.humc-form .humc-field-inline label { font-weight: 400; margin-bottom: 0; }
.humc-form .humc-field-inline input { width: auto; min-height: auto; margin-top: 0.3rem; }
.humc-form input:not([type=checkbox]):not([type=radio]),
.humc-form select,
.humc-form textarea {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	font: inherit;
	background: #fff;
	min-height: 44px;
	color: var(--wp--preset--color--charcoal, #222);
}
.humc-form textarea { min-height: 120px; resize: vertical; }
.humc-form .humc-help {
	display: block;
	font-size: 0.85rem;
	color: var(--wp--preset--color--charcoal, #444);
	margin-top: 0.3rem;
}
.humc-form .humc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .humc-form .humc-row { grid-template-columns: 1fr; } }
.humc-form .humc-form-notice {
	border-left: 4px solid var(--wp--preset--color--red);
	background: var(--wp--preset--color--navy-100);
	padding: 0.9rem 1rem;
	border-radius: 6px;
	margin-bottom: 1.25rem;
}
.humc-form button[type=submit] {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: 6px;
	padding: 0.7rem 1.5rem;
	font-weight: 700;
	cursor: pointer;
}
.humc-form button[disabled] { opacity: 0.55; cursor: not-allowed; }
.humc-form .humc-form-wiring { margin-top: 0.75rem; }

/* FAQ disclosure + process steps. */
.humc-faq { max-width: 760px; margin: 0 auto; }
.humc-faq details {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	padding: 0.75rem 1rem;
	margin-bottom: 0.75rem;
	background: #fff;
}
.humc-faq summary {
	font-weight: 600;
	cursor: pointer;
	min-height: 44px;
	display: flex;
	align-items: center;
}
.humc-faq summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--navy);
	outline-offset: 2px;
}
.humc-faq details[open] summary { margin-bottom: 0.5rem; }
.humc-steps { max-width: 760px; margin: 0 auto; padding-left: 1.25rem; }
.humc-steps li { margin-bottom: 0.75rem; }

/* =========================================================================
 * HUM-32 final-gate a11y fixes — WCAG 2.1/2.2 AA text contrast (SC 1.4.3).
 * Verified with axe-core against all staging pages; see HUM-32 results doc.
 * ====================================================================== */

/* 1. Gold eyebrow labels render on dark navy heroes / navy-overlay covers.
 *    Warm Gold (#B8862F) only reaches ~3.0–4.1:1 there (fails AA for the
 *    small bold text). Brighten the eyebrow-on-dark gold to #DCAE55:
 *    4.75:1 on the lightest cover overlay, 6.4:1 on solid navy. Gold
 *    eyebrows never sit on light surfaces, so this is safe everywhere. */
.humc-eyebrow.has-gold-color { color: #DCAE55 !important; }

/* 2. Dark text on a Warm Gold surface (homepage FEATURED EVENT card,
 *    badges). Navy #17324D (4.06:1) and Charcoal #292929 (4.50:1, borderline)
 *    fail/skirt AA; use Navy Deep #0F2439 (4.87:1) for text on gold. */
.has-gold-background-color .has-navy-color,
.has-gold-background-color .has-charcoal-color,
.has-gold-background-color .humc-eyebrow { color: #0F2439 !important; }

/* 3. Fluent Forms ships its submit button in a default blue (#1A7EFB,
 *    3.87:1 with white — fails AA). Restyle to UMC Red (#C41230 = 6.04:1),
 *    darker red on hover/focus. Applies to EN + ES membership/contact forms. */
.fluentform .ff-btn-submit,
.fluentform .ff_btn_style,
.frm-fluent-form .ff-btn-submit {
	background-color: #C41230 !important;
	border-color: #C41230 !important;
	color: #FFFFFF !important;
}
.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn-submit:focus,
.frm-fluent-form .ff-btn-submit:hover,
.frm-fluent-form .ff-btn-submit:focus {
	background-color: #9E0F27 !important;
	border-color: #9E0F27 !important;
	color: #FFFFFF !important;
}