/*
 * USNA Parents Club theme.css
 * Everything theme.json cannot express: the rope rule, brass rule, hard card
 * shadow, button style variants, WooCommerce overrides, form fields, chips,
 * the quantity stepper, and notice/success boxes.
 * Enqueued by functions.php after theme.json's generated stylesheet.
 */

:root {
	--usna-navy: #1B2A4A;
	--usna-night-watch: #14203A;
	--usna-navy-panel: #223351;
	--usna-gold: #C9A54A;
	--usna-gold-hover: #D6B45F;
	--usna-gold-shadow: #A8863A;
	--usna-orange: #E87722;
	/* Orange is retired everywhere except the notice left bar, per the round
	   2 design system ("USNA is navy and gold. Orange is a very minor
	   accent."): no more orange eyebrows, link text, "Details" arrows,
	   chips or badges anywhere in this theme. Eyebrows and labels use
	   --usna-gold on navy backgrounds, --usna-muted-label (brass) on light
	   backgrounds; links use navy text with a gold underline. This variable
	   (formerly --usna-orange-text, an AA-safe darkened orange used for
	   text) is kept only for old CSS custom-property references that may
	   still exist in cached HTML during rollout; nothing in this file uses
	   it as of this pass. */
	--usna-orange-text: #A24F11;
	--usna-sand: #EFE6D6;
	--usna-white: #FDFCF9;
	--usna-ink: #22262E;
	--usna-body-text: #3A4152;
	--usna-slate: #5A6070;
	--usna-sand-line: #DCCFB6;
	--usna-card-border: #C9C0AC;
	--usna-muted-label: #63552B;
	--usna-success: #2E6B4F;
	--usna-success-tint: #ECF3EE;
	--usna-alert: #A8321F;
	--usna-notice-tint: #FBF1E6;
	--usna-nav-muted: #C6CEDD;
	--usna-disabled: #B6BDCB;

	--usna-rope-rule: repeating-linear-gradient(115deg, var(--usna-gold) 0 5px, var(--usna-gold-shadow) 5px 8px, var(--usna-gold) 8px 13px, #E0C377 13px 15px);
	--usna-hard-shadow: 6px 0 0 var(--usna-card-border);
	--usna-radius-control: 2px;
}

/* ------------------------------------------------------------------ */
/* Base */
/* ------------------------------------------------------------------ */

/* Kills the theme's default 1.5rem block-gap where WordPress applies it
   between the top-level blocks of the page itself (header template part,
   the main content group, footer template part). Verified live: that gap
   showed as a sand-colored strip between the navy header and whatever
   section followed on every template, because .wp-site-blocks is exactly
   the kind of flow container the theme's global blockGap reaches. Section
   spacing belongs to each section's own padding, not this root gap. */
.wp-site-blocks > * {
	margin-block-start: 0 !important;
}

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	background: var(--usna-sand);
	/* Belt and suspenders with html's overflow-x above: a fixed-position
	   off-canvas element (the WooCommerce mini-cart drawer, closed but
	   still occupying its full 480px box just past the right edge) and
	   the split page-hero's photo half bleeding to the viewport edge both
	   extend the document's scrollable width without ever painting
	   anything visible past the edge. Clipping here removes the phantom
	   horizontal scrollbar without touching either component's own CSS. */
	overflow-x: hidden;
}

a {
	text-decoration: none;
}

a:not(.wp-block-button__link):not(.usna-btn) {
	font-weight: 700;
	text-decoration-line: underline;
	text-decoration-color: var(--usna-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

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

/* Skip link */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: var(--usna-navy);
	color: var(--usna-white);
	padding: 14px 22px;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.skip-link:focus {
	left: 8px;
	top: 8px;
}

/* Focus states, everywhere */
a:focus-visible,
button:focus-visible,
.usna-btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--usna-gold);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Rope rule / brass rule */
/* ------------------------------------------------------------------ */

/* Full-bleed override: .usna-rope-rule sits inside .usna-header, a
   "constrained" layout group. WordPress's own generated rule
   (:where(.is-layout-constrained) > *) caps every plain child at
   contentSize (1180px) and centers it, which is exactly right for
   .usna-header-inner (which wants that) but wrong for this rule, which
   must span the full navy bar edge to edge. Verified live: without this,
   the gold rope rule stopped at 1180px on anything wider, showing the
   page's sand background on both sides. */
.usna-rope-rule {
	height: 6px;
	width: 100%;
	max-width: none;
	background: var(--usna-rope-rule);
}

.usna-rope-rule.is-thin {
	height: 5px;
}

.usna-brass-rule {
	height: 4px;
	background: var(--usna-gold-shadow);
	border-top: 3px solid var(--usna-gold);
}

/* ------------------------------------------------------------------ */
/* Hard-shadow cards (canvas cards) */
/* ------------------------------------------------------------------ */

.usna-card,
.usna-hard-card {
	background: var(--usna-white);
	border: 1px solid var(--usna-sand-line);
	box-shadow: 0 6px 0 var(--usna-card-border);
}

/* ------------------------------------------------------------------ */
/* Header */
/* ------------------------------------------------------------------ */

.usna-header {
	background: var(--usna-navy);
	/* .usna-header itself picks up "has-global-padding" (theme.json's
	   root spacing.padding, 20px inline) since useRootPaddingAwareAlignments
	   applies that to every constrained-layout group, not just the site
	   root. .usna-header-inner already owns its own responsive padding
	   (20px/40px) and .usna-rope-rule needs zero padding context to reach
	   the true viewport edge, so the redundant padding on the wrapper
	   itself has to go. Verified live: width:100% on the rope rule alone
	   was not enough, it still measured 20px short on each side at 390,
	   1280 and 1600, exactly this padding value, before this rule. */
	padding-inline: 0 !important;
}

/* .usna-header is a "constrained" (block-flow, not flex) layout group, so
   its block-gap is WordPress's own margin-based rule
   (:where(.wp-block-group.is-layout-constrained) > * + *), not the CSS
   `gap` property; a plain `gap: 0` on .usna-header has no effect on it
   at all. The blockGap:"0" style attribute on the group in
   parts/header.html did not take effect either (measured, not assumed:
   verified via Playwright that .usna-rope-rule still carried
   margin-top: 24px from the theme's default 1.5rem blockGap after that
   change was live). This is the one rule that actually removed it,
   confirmed by height measurement below. */
.usna-header .usna-rope-rule {
	margin-top: 0 !important;
}

.usna-header .usna-header-inner {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	height: 64px;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: 20px;
	min-width: 0;
}

@media (min-width: 782px) {
	.usna-header .usna-header-inner {
		height: 76px;
		gap: 24px;
		padding-inline: 40px;
	}
}

.usna-logo {
	flex: 0 0 auto;
	order: 2;
}

@media (min-width: 782px) {
	.usna-logo {
		order: 1;
	}
}

.usna-header .usna-logo a {
	display: block;
	line-height: 0;
	text-decoration: none;
}

.usna-header .usna-logo img {
	height: 40px;
	width: auto;
	background: var(--usna-white);
	padding: 3px;
	border-radius: 2px;
	display: block;
}

@media (min-width: 782px) {
	.usna-header .usna-logo img {
		height: 56px;
	}
}

/* The Primary navigation block supplies its own responsive collapse
   (overlayMenu: "mobile" in parts/header.html, WordPress core's own
   782px breakpoint) and its own toggle button and full-screen overlay.
   This theme does not set display:none/flex on it and does not ship a
   second, competing mobile-nav toggle; both of those are exactly what
   caused the seven links to render inline and overflow at narrow
   widths. The only thing owned here is layout position: on mobile the
   block naturally renders just its small toggle button, so it is left
   in normal document order after the actions group (logo, actions,
   toggle: logo left, Join and toggle right); on desktop, where it
   renders the full inline list, order swaps it back to the middle so
   it can flex to fill the space between the logo and the actions. */
.usna-header-nav {
	order: 1;
	flex-shrink: 0;
	min-width: 0;
}

/* Core's nav container defaults to flex-wrap: wrap, which is what let
   About and Sign out drop to a second line under the rope rule once the
   signed-in state widened the bar (members submenu + Sign out inline,
   plus the wider account pill). Forced to one row here; the signed-in
   item list is also trimmed to match the signed-out count (see
   .usna-nav-desktop-hide below) so a nowrap row still has room to fit. */
.usna-header-nav .wp-block-navigation__container {
	flex-wrap: nowrap;
	min-width: 0;
}

/* Compact desktop tier: 1024px is the narrowest width the signed-in bar
   (six items, cart icon, MY ACCOUNT pill) has to fit on one row without
   dropping a font size below 14px. A gap and letter-spacing trim, not a
   font-size cut, buys back the width "Parent Resources" needed once its
   label was forced to one line (white-space: nowrap above; it was
   wrapping to two lines and pushing the header bar taller than its fixed
   height at 1024 before this). */
@media (min-width: 782px) and (max-width: 1279px) {
	.usna-header-nav .wp-block-navigation__container {
		gap: 14px;
	}

	.usna-header-nav .wp-block-navigation-item__content,
	.usna-header-nav a {
		letter-spacing: 0.04em;
	}
}

.usna-header-actions {
	order: 4;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.usna-header-actions .wp-block-button__link,
.usna-header-actions .usna-signin-link {
	white-space: nowrap;
}

/* WooCommerce's own Customer Account and Mini Cart blocks: not authored
   in parts/header.html (this theme has no dependency on exactly which
   plugin adds them; usnapccfl-core is the expected source),
   but rendered as siblings of the logo/nav/actions inside
   .usna-header-inner whenever they are present, targeted here by
   WooCommerce's own stable block classnames. Verified via Playwright:
   without an explicit order, flex's default order:0 sorted them ahead
   of the order:1 logo, which is what actually produced the "icons
   before the logo" layout in the reported screenshot; giving them an
   order value here is the fix, not editing whatever added them. */
.usna-header-inner .wp-block-woocommerce-customer-account,
.usna-header-inner .wc-block-mini-cart {
	order: 2;
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.usna-header-inner .wc-block-customer-account__link,
.usna-header-inner .wc-block-mini-cart__button {
	color: var(--usna-white);
	min-width: 48px;
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.usna-header-inner .wc-block-customer-account__account-icon,
.usna-header-inner .wc-block-mini-cart__icon {
	width: 22px;
	height: 22px;
}

/* The account pill already covers "go to my account" once signed in, so
   WooCommerce's own account icon next to the cart is a duplicate at that
   point; the mini cart icon stays, only the account icon is hidden. */
body.logged-in .usna-header-inner .wp-block-woocommerce-customer-account {
	display: none !important;
}

@media (min-width: 782px) {
	.usna-header-nav {
		order: 2;
		flex: 1;
	}

	.usna-header-inner .wp-block-woocommerce-customer-account,
	.usna-header-inner .wc-block-mini-cart {
		order: 3;
	}

	.usna-header-actions {
		order: 4;
	}
}

/* "Home" is only a menu item inside the mobile sheet; on desktop the
   logo already goes home, matching Navigation.dc.html (the desktop bar
   lists Parent Resources, Membership, Crest Flags, Events, Donate,
   About, never Home). */
@media (min-width: 782px) {
	.usna-nav-home-only-mobile {
		display: none !important;
	}
}

/* Signed-in / signed-out swap, all driven by WordPress core's own
   body.logged-in class, no plugin required for the visibility itself
   (see the account-pill note further down for what still needs one).
   Both states ship in the markup; only one is ever visible. */
.usna-nav-signed-in-only {
	display: none !important;
}

body.logged-in .usna-nav-signed-in-only {
	display: flex !important;
}

body.logged-in .usna-nav-signed-out-only {
	display: none !important;
}

/* Same body.logged-in swap, generic block version (display:block instead
   of the nav's display:flex) for page content that has a locked,
   logged-out state and a members-only logged-in state, e.g. Our
   Midshipmen: both states ship in the markup, only one is ever visible. */
.usna-signed-in-only {
	display: none !important;
}

body.logged-in .usna-signed-in-only {
	display: block !important;
}

body.logged-in .usna-signed-out-only {
	display: none !important;
}

/* Signed-in nav trim: the Members submenu (Our Midshipmen, Member
   Resources, My Account, Orders) and Sign out stay in the mobile overlay
   (below the 782px width where core's navigation block switches to the
   toggle) but drop out of the inline desktop bar, where they now live in
   the account dropdown instead (see .usna-account-menu). This keeps the
   signed-in desktop item count equal to signed-out (six items) so the row
   fits without wrapping. Specificity has to beat the signed-in-only
   display:flex rule above (body.logged-in + one class), so this selector
   carries two classes plus body.logged-in. */
@media (min-width: 782px) {
	body.logged-in .usna-nav-signed-in-only.usna-nav-desktop-hide {
		display: none !important;
	}
}

/* "Coming soon" guides inside the Parent Resources dropdown: not links at
   all (rendered as wp:html spans, not wp:navigation-link, so there is no
   href and no tap target), a muted label plus a small brass chip instead
   of the old ", soon" text suffix. Shared .usna-chip-soon styles the chip
   here and in the matching footer list. */
.usna-nav-soon-item {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 18px;
	color: #6E7C95;
	font-family: Cabin, Georgia, serif;
	font-weight: 600;
	font-size: 16px;
	cursor: default;
}

.usna-chip-soon {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--usna-muted-label);
	background: var(--usna-sand);
	border: 1px solid var(--usna-sand-line);
	border-radius: 2px;
	padding: 2px 8px;
	white-space: nowrap;
}

/* Inside the mobile overlay the "Coming soon" row sits on navy, not
   white, so it needs the lighter nav-muted text color to stay legible;
   the chip itself keeps its own sand background regardless of what it
   sits on. */
.wp-block-navigation__responsive-container.is-menu-open .usna-nav-soon-item {
	color: var(--usna-nav-muted);
}

/* Reference links pinned to the foot of the mobile sheet ("About",
   "Links", "Contact", "Sign out"), styled as the small-caps row
   Navigation.dc.html shows at the bottom of the open menu, matching the
   footer's own treatment rather than the regular nav item look. */
.usna-nav-mobile-foot .wp-block-navigation-item__content {
	font-size: 15px !important;
	color: #9FAAC0 !important;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* Link color and the gold active-item underline. Targets both the plain
   <a> (static fallback content) and core's own rendered
   .wp-block-navigation-item__content, and is intentionally !important:
   theme.json's global link color (see the "Text-safe orange" note in
   README.md) is a valid default for body copy, but must never leak into
   nav links on the navy header, which is a distinct, always-on-dark
   context with its own token (--usna-nav-muted, #C6CEDD). */
.usna-header-nav .wp-block-navigation-item__content,
.usna-header-nav a {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 17px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--usna-nav-muted) !important;
	text-decoration: none !important;
	padding-bottom: 3px;
	border-bottom: 3px solid transparent;
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	white-space: nowrap;
}

.usna-header-nav .wp-block-navigation-item__content:hover,
.usna-header-nav a:hover,
.usna-header-nav .current-menu-item > .wp-block-navigation-item__content,
.usna-header-nav a.is-active {
	color: var(--usna-white) !important;
	border-bottom-color: var(--usna-gold);
}

/* Desktop dropdowns (Parent Resources, Members, About): core's own
   core/navigation-submenu block handles the open/close mechanics
   (hover and click, keyboard accessible) and automatically becomes an
   expandable item inside the mobile overlay instead of a hover menu, so
   no separate mobile accordion markup is needed. This just themes the
   panel to match the design system's cards instead of WordPress's
   default white-on-shadow menu. */
.usna-header-nav .wp-block-navigation-submenu .wp-block-navigation__submenu-container {
	background: var(--usna-white);
	border: 1px solid var(--usna-sand-line);
	border-radius: 0;
	min-width: 260px;
	padding: 8px 0;
}

.usna-header-nav .wp-block-navigation-submenu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--usna-navy) !important;
	text-transform: none;
	letter-spacing: normal;
	font-family: Cabin, Georgia, serif;
	font-weight: 600;
	font-size: 16px;
	padding: 10px 18px;
	min-height: 44px;
}

.usna-header-nav .wp-block-navigation-submenu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--usna-navy) !important;
	background: var(--usna-sand);
	border-bottom-color: transparent;
}

/* Inside the mobile overlay the submenu panel is on the same navy
   ground as everything else, not a white card. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu .wp-block-navigation__submenu-container {
	background: transparent;
	border: 0;
	border-left: 2px solid var(--usna-gold);
	margin-left: 2px;
	padding: 4px 0 4px 14px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--usna-nav-muted) !important;
	font-size: 16px;
	min-height: 44px;
}

/* Core's own mobile toggle, close button and full-screen overlay,
   restyled to the theme's navy/gold palette instead of WordPress's
   default admin-grey look. Class names are core/navigation's own,
   unchanged by this theme. */
.usna-header-nav .wp-block-navigation__responsive-container-open,
.usna-header-nav .wp-block-navigation__responsive-container-close {
	background: transparent;
	border: 0;
	color: var(--usna-white);
	min-width: 48px;
	min-height: 48px;
	padding: 12px;
	cursor: pointer;
}

.usna-header-nav .wp-block-navigation__responsive-container-open svg,
.usna-header-nav .wp-block-navigation__responsive-container-close svg {
	fill: currentColor;
	width: 24px;
	height: 24px;
}

/* !important on background-color is required here: core's own navigation
   block CSS ships a higher-specificity default,
   .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay)
   (five class-level selectors versus this rule's three), which paints the
   overlay white and otherwise wins on specificity regardless of stylesheet
   load order. Confirmed live via computed style and CSSOM rule matching. */
.usna-header-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--usna-night-watch) !important;
	padding: 20px;
}

.usna-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 20px;
	min-height: 56px;
}

.usna-signin-link {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 17px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--usna-gold);
	text-decoration: none;
	display: none;
}

@media (min-width: 640px) {
	.usna-signin-link {
		display: inline-flex;
	}
}

/* Signed-in account pill and its dropdown. The pill is a button, not a
   link, because it now toggles the menu (assets/js/header-account-menu.js)
   instead of navigating straight to /my-account/; My Account is the first
   item in the dropdown for that link. .usna-account-menu carries
   usna-nav-signed-in-only so the whole trigger-plus-panel is hidden
   signed out. */
.usna-account-menu {
	position: relative;
	min-width: 0;
}

.usna-account-pill {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--usna-navy-panel);
	padding: 8px 14px;
	border: 0;
	border-radius: 2px;
	text-decoration: none;
	min-height: 48px;
	font: inherit;
	cursor: pointer;
}

.usna-account-menu[data-open="true"] .usna-account-pill,
.usna-account-pill:hover,
.usna-account-pill:focus-visible {
	outline: 2px solid var(--usna-gold);
	outline-offset: 2px;
}

.usna-account-pill .usna-initials {
	width: 32px;
	height: 32px;
	background: var(--usna-gold);
	color: var(--usna-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 15px;
	border-radius: 2px;
	flex: 0 0 auto;
}

.usna-account-pill .usna-account-label {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--usna-white);
	white-space: nowrap;
}

/* Dropdown panel: hidden by default, shown on hover, on focus-within (Tab
   into it), and via data-open (the JS click/keyboard toggle), so it works
   for mouse, touch and keyboard alike. Styled to match the existing nav
   submenu card (white panel, sand-line border, Cabin body font) rather
   than inventing a second look. */
.usna-account-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 100;
	min-width: 220px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var(--usna-white);
	border: 1px solid var(--usna-sand-line);
	box-shadow: 0 12px 24px rgba(20, 32, 58, 0.18);
	/* !important + pointer-events:none: a closed dropdown was reported
	   painting a pale box over the hero on a real device even though
	   opacity/visibility alone should have hidden it here and matched
	   what this session's own renders showed; same defensive posture as
	   the mobile overlay background fix elsewhere in this file (assume a
	   higher-specificity or stale-cache rule can win, and armor the
	   closed state so it can never paint or intercept clicks either way). */
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none;
	transform: translateY(-4px);
	transition: opacity 120ms ease, transform 120ms ease;
}

.usna-account-menu:hover .usna-account-dropdown,
.usna-account-menu:focus-within .usna-account-dropdown,
.usna-account-menu[data-open="true"] .usna-account-dropdown {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto;
	transform: translateY(0);
}

.usna-account-dropdown a {
	display: block;
	padding: 10px 18px;
	min-height: 44px;
	line-height: 24px;
	font-family: Cabin, Georgia, serif;
	font-weight: 600;
	font-size: 16px;
	color: var(--usna-navy);
	/* !important because the site-wide body-copy link underline
	   (a:not(.wp-block-button__link):not(.usna-btn), two :not() classes)
	   out-specifies a plain .usna-account-dropdown a otherwise; the
	   primary nav rule above has the same override for the same reason. */
	text-decoration: none !important;
	white-space: nowrap;
}

.usna-account-dropdown a:hover,
.usna-account-dropdown a:focus-visible {
	color: var(--usna-navy);
	background: var(--usna-sand);
}

.usna-account-dropdown-divider {
	height: 1px;
	margin: 6px 0;
	background: var(--usna-sand-line);
}

/* ------------------------------------------------------------------ */
/* Footer */
/* ------------------------------------------------------------------ */

.usna-footer {
	background: var(--usna-night-watch);
	color: var(--usna-nav-muted);
	padding: 48px 20px;
	font-size: 15px;
	line-height: 1.65;
}

@media (min-width: 782px) {
	.usna-footer {
		padding: 56px 40px;
	}
}

.usna-footer a {
	color: var(--usna-nav-muted);
	text-decoration: none;
	font-weight: 400;
}

.usna-footer a:hover {
	color: var(--usna-gold);
}

.usna-footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	max-width: 1180px;
	margin-inline: auto;
}

@media (min-width: 900px) {
	.usna-footer-grid {
		grid-template-columns: 1.5fr 1fr 1fr 1fr;
	}
}

.usna-footer-logo {
	height: 64px;
	width: auto;
	background: var(--usna-white);
	padding: 4px;
	border-radius: 2px;
	display: block;
	margin-bottom: 16px;
}

.usna-footer-brand .usna-footer-name {
	font-family: Bevan, Georgia, serif;
	font-size: 17px;
	color: var(--usna-white);
	text-transform: uppercase;
	line-height: 1.3;
}

.usna-footer-col-title {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--usna-gold);
	margin-bottom: 10px;
}

.usna-footer-col ul,
.usna-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.usna-footer-list-soon {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #6E7C95;
}

.usna-footer-social {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}

.usna-footer-social a {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--usna-white);
	border: 2px solid var(--usna-white);
	border-radius: 2px;
	padding: 11px 18px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.usna-footer-legal {
	max-width: 1180px;
	margin: 32px auto 0;
	padding-top: 24px;
	border-top: 1px solid var(--usna-navy-panel);
	font-size: 14px;
	line-height: 1.6;
	color: #9FAAC0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

@media (min-width: 900px) {
	.usna-footer-legal {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 24px;
	}
}

/* ------------------------------------------------------------------ */
/* Buttons */
/* ------------------------------------------------------------------ */

.wp-block-button__link,
.usna-btn {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 2px;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 28px;
	cursor: pointer;
	border: 0;
	line-height: 1;
	text-decoration: none !important;
	/* Without this, width:100% + this padding is content-box math: total
	   rendered width becomes 100% of the parent PLUS 56px of padding,
	   which is exactly what overflowed the Events page CTA slot at
	   390px (measured live: buttons rendered 372px wide inside a 350px
	   available column, pushing the whole page to a 409px scrollWidth).
	   Every width:100% .usna-btn anywhere in the theme was silently
	   exposed to the same bug; this is the one place to fix it. */
	box-sizing: border-box;
}

/* Plain .usna-btn (no .usna-btn-gold / .usna-btn-outline / .usna-btn-outline-inverse
   modifier) is the primary variant: navy fill, white text, same as
   theme.json's wp:button default. Found missing here: bare .usna-btn
   markup (used outside the wp:button block, e.g. the featured tier
   card's CTA, the RSVP and hero CTA rows) inherited none of theme.json's
   button element color because that styling only targets
   .wp-block-button__link, so every plain-.usna-btn instance sitewide was
   rendering as unstyled text, not just the one card that surfaced it. */
.usna-btn {
	background: var(--usna-navy);
	color: var(--usna-white);
}

.usna-btn:hover {
	background: var(--usna-night-watch);
	color: var(--usna-white);
}

/* Primary: navy bg (theme.json default), hover darkens */
.wp-block-button:not(.is-style-gold):not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--usna-night-watch);
}

/* Secondary / gold */
.is-style-gold .wp-block-button__link,
.usna-btn.usna-btn-gold {
	background: var(--usna-gold);
	color: var(--usna-navy);
	border-bottom: 3px solid var(--usna-gold-shadow);
}

.is-style-gold .wp-block-button__link:hover,
.usna-btn.usna-btn-gold:hover {
	background: var(--usna-gold-hover);
	color: var(--usna-navy);
}

/* Outline */
.is-style-outline .wp-block-button__link,
.usna-btn.usna-btn-outline {
	background: transparent;
	color: var(--usna-navy);
	border: 2px solid var(--usna-navy);
	padding: 13px 26px;
}

.is-style-outline .wp-block-button__link:hover,
.usna-btn.usna-btn-outline:hover {
	background: var(--usna-navy);
	color: var(--usna-white);
}

/* Outline on navy background (e.g. members-only band) */
.usna-btn.usna-btn-outline-inverse {
	background: transparent;
	color: var(--usna-white);
	border: 2px solid var(--usna-white);
	padding: 13px 26px;
}

.usna-btn.usna-btn-outline-inverse:hover {
	background: var(--usna-white);
	color: var(--usna-navy);
}

/* Disabled */
.wp-block-button__link:disabled,
.usna-btn[disabled],
.usna-btn.is-disabled {
	background: var(--usna-disabled);
	color: var(--usna-white);
	cursor: not-allowed;
}

/* Small button */
.usna-btn.usna-btn-small {
	min-height: 44px;
	padding: 11px 18px;
	font-size: 0.9375rem;
}

/* Text link button */
.usna-text-link {
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 1rem;
	color: var(--usna-navy);
	text-decoration: underline;
	text-decoration-color: var(--usna-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* Form fields */
/* ------------------------------------------------------------------ */

.usna-field-label,
label.usna-field-label {
	display: block;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--usna-navy);
	margin-bottom: 6px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
select,
textarea,
.select2-container .select2-selection--single,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: Cabin, Georgia, serif;
	font-size: 1rem;
	color: var(--usna-ink);
	background: #FFFFFF;
	border: 2px solid var(--usna-disabled);
	border-radius: 2px;
	padding: 13px 12px;
	min-height: 48px;
}

textarea {
	min-height: 110px;
	resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--usna-navy);
	outline: none;
}

.usna-field-help {
	font-size: 13px;
	color: var(--usna-slate);
	margin-top: 5px;
}

input[type="checkbox"],
input[type="radio"] {
	width: 20px;
	height: 20px;
	accent-color: var(--usna-navy);
}

/* Progress step bar (join flow) */
.usna-step-bar {
	display: flex;
	gap: 8px;
	margin: 16px 0 24px;
}

.usna-step-bar span {
	flex: 1;
	height: 5px;
	background: var(--usna-sand-line);
}

.usna-step-bar span.is-done {
	background: var(--usna-navy);
}

.usna-step-bar span.is-current {
	background: var(--usna-gold);
}

/* ------------------------------------------------------------------ */
/* Chips */
/* ------------------------------------------------------------------ */

.usna-chip {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--usna-sand);
	color: var(--usna-navy);
	border: 1px solid var(--usna-sand-line);
	border-radius: 2px;
	padding: 9px 12px;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	cursor: pointer;
	text-decoration: none;
}

.usna-chip.is-selected {
	background: var(--usna-navy);
	color: var(--usna-white);
	border-color: var(--usna-navy);
	font-weight: 700;
}

/* Class-year picker tile (bigger than a chip, used on the flags product page) */
.usna-year-tile {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 17px;
	text-align: center;
	background: var(--usna-white);
	color: var(--usna-navy);
	border: 2px solid var(--usna-disabled);
	border-radius: 2px;
	padding: 13px 18px;
	min-height: 48px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-decoration: none;
}

.usna-year-tile.is-selected {
	background: var(--usna-navy);
	color: var(--usna-white);
	border-color: var(--usna-navy);
}

/* ------------------------------------------------------------------ */
/* Give panel (Donate page) */
/* ------------------------------------------------------------------ */

.usna-give-panel {
	background: var(--usna-white);
	border: 1px solid var(--usna-sand-line);
	box-shadow: 0 6px 0 var(--usna-card-border);
	padding: 24px 20px;
	max-width: 480px;
	box-sizing: border-box;
}

/* Donate page two-column layout: Give panel plus the "where it goes"
   list, stacked on mobile, side by side from 900px up. */
.usna-donate-columns {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}

@media (min-width: 900px) {
	.usna-donate-columns {
		flex-direction: row;
	}

	.usna-donate-columns .usna-give-panel {
		flex: 0 0 480px;
	}

	.usna-donate-where {
		flex: 1;
	}
}

.usna-donate-where {
	background: var(--usna-sand);
	border: 1px solid var(--usna-sand-line);
	padding: 24px;
	width: 100%;
	box-sizing: border-box;
}

.usna-donate-where-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-top: 1px solid var(--usna-sand-line);
	font-family: Cabin, Georgia, serif;
	font-size: 1.0625rem;
	color: var(--usna-ink);
}

.usna-donate-where-row:first-of-type {
	border-top: 0;
	padding-top: 18px;
}

.usna-donate-where-amount {
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	color: var(--usna-navy);
	white-space: nowrap;
}

.usna-give-lead {
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 19px;
	line-height: 1.45;
	color: var(--usna-navy);
	margin: 0;
}

.usna-give-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 10px;
}

/* Positioning context for the visually-hidden radio; keeps the input
   focusable for keyboard and screen-reader use without it becoming a
   grid item of its own (it is taken out of flow, so the 3-column grid
   only ever lays out the 6 tile labels, not 12 boxes). */
.usna-amount-option {
	position: relative;
}

.usna-give-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.usna-amount-tile {
	font-family: Bevan, Georgia, serif;
	font-size: 20px;
	text-align: center;
	color: var(--usna-navy);
	background: var(--usna-white);
	border: 2px solid var(--usna-disabled);
	border-radius: 2px;
	padding: 14px 0;
	min-height: 52px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	user-select: none;
}

.usna-give-radio:checked + .usna-amount-tile {
	background: var(--usna-navy);
	color: var(--usna-white);
	border-color: var(--usna-navy);
}

.usna-give-radio:focus-visible + .usna-amount-tile {
	outline: 2px solid var(--usna-navy);
	outline-offset: 2px;
}

.usna-give-form .usna-btn {
	width: 100%;
	margin-top: 16px;
}

.usna-give-methods {
	font-size: 13px;
	color: var(--usna-slate);
	text-align: center;
	margin-top: 8px;
}

/* "Or enter your own amount", below the preset tiles in the same panel */
.usna-give-other {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--usna-sand-line);
}

.usna-other-amount-row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 8px;
	margin-top: 10px;
}

.usna-other-amount-field {
	position: relative;
	flex: 1 1 140px;
	min-width: 0;
}

.usna-other-amount-prefix {
	position: absolute;
	left: 12px;
	top: 0;
	bottom: 0;
	width: 20px;
	display: flex;
	align-items: center;
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 1rem;
	color: var(--usna-navy);
	pointer-events: none;
}

.usna-other-amount-field .usna-other-amount-input {
	width: 100%;
	padding-left: 32px;
}

.usna-give-other-form .usna-btn {
	flex: 0 0 auto;
	margin-top: 0;
}

.usna-field-error {
	color: var(--usna-alert);
	font-size: 14px;
	line-height: 1.5;
	margin: 8px 0 0;
}

/* ------------------------------------------------------------------ */
/* Quantity stepper */
/* ------------------------------------------------------------------ */

.usna-qty-stepper {
	display: inline-flex;
	border: 2px solid var(--usna-navy);
	border-radius: 2px;
}

.usna-qty-stepper button {
	background: transparent;
	border: 0;
	width: 48px;
	height: 48px;
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 22px;
	color: var(--usna-navy);
	cursor: pointer;
}

.usna-qty-stepper input {
	width: 52px;
	height: 48px;
	min-height: 48px;
	text-align: center;
	border: 0;
	border-left: 2px solid var(--usna-navy);
	border-right: 2px solid var(--usna-navy);
	border-radius: 0;
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 18px;
	color: var(--usna-navy);
	padding: 0;
}

/* WooCommerce native quantity input, restyled to match */
.woocommerce .quantity .qty,
.woocommerce div.product form.cart .quantity .qty {
	width: 64px;
	min-height: 48px;
	text-align: center;
	border: 2px solid var(--usna-navy);
	border-radius: 2px;
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 18px;
	color: var(--usna-navy);
}

/* ------------------------------------------------------------------ */
/* Notice / success boxes */
/* ------------------------------------------------------------------ */

.usna-notice,
.woocommerce-info,
.woocommerce-message,
.woocommerce-error li {
	background: var(--usna-notice-tint);
	border-left: 5px solid var(--usna-orange);
	padding: 16px 18px;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--usna-body-text);
}

.usna-notice-title,
.usna-success-title {
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 17px;
	color: var(--usna-navy);
	margin-bottom: 4px;
}

.usna-success,
.woocommerce-message {
	background: var(--usna-success-tint);
	border-left-color: var(--usna-success);
}

.usna-alert,
.woocommerce-error {
	background: #FBEDEA;
	border-left: 5px solid var(--usna-alert);
	color: var(--usna-body-text);
	padding: 16px 18px;
}

/* ------------------------------------------------------------------ */
/* Membership term table (design v2). One table (desktop) or stacked
   cards (mobile). The average-value figure lives once on the page, in
   the "Where your dues go" band further down - not repeated here. */
/* ------------------------------------------------------------------ */

.usna-mem-term-grid {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 24px;
}

/* Desktop table, hidden below 900px */
.usna-mem-table {
	display: none;
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--usna-sand-line);
	background: var(--usna-white);
}

.usna-mem-table th {
	background: var(--usna-navy);
	color: var(--usna-white);
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: left;
	padding: 12px 16px;
}

.usna-mem-table td {
	padding: 16px;
	border-top: 1px solid var(--usna-sand-line);
	vertical-align: middle;
}

.usna-mem-table tr.is-featured td {
	background: var(--usna-sand);
	border-top: 2px solid var(--usna-navy);
	font-weight: 600;
}

.usna-mem-cell-name {
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 19px;
	color: var(--usna-navy);
	white-space: nowrap;
}

.usna-mem-cell-total {
	font-family: Bevan, Georgia, serif;
	font-size: 24px;
	color: var(--usna-navy);
}

tr.is-featured .usna-mem-cell-total {
	font-size: 28px;
}

.usna-mem-cell-annual {
	font-weight: 600;
	color: var(--usna-body-text);
	white-space: nowrap;
}

.usna-mem-cell-fit {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--usna-body-text);
}

.usna-mem-cell-cta {
	text-align: right;
}

/* Mobile stacked cards, four years first (the term most families pick),
   one year last, right above the "start with one year" notice - shown
   below 900px, hidden at 900px and up where the table takes over. */
.usna-mem-cards {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.usna-mem-card {
	border: 1px solid var(--usna-sand-line);
	background: var(--usna-white);
	padding: 16px;
}

.usna-mem-card.is-featured {
	border: 2px solid var(--usna-navy);
	background: var(--usna-sand);
}

.usna-mem-card-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.usna-mem-card-name {
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 18px;
	color: var(--usna-navy);
}

.usna-mem-card-total {
	font-family: Bevan, Georgia, serif;
	font-size: 22px;
	color: var(--usna-navy);
}

.usna-mem-card.is-featured .usna-mem-card-total {
	font-size: 26px;
}

.usna-mem-card-annual {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--usna-muted-label);
	margin-top: 4px;
}

.usna-mem-card-fit {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--usna-body-text);
	margin: 8px 0 12px;
}

.usna-mem-notice {
	order: 3;
}

@media (min-width: 900px) {
	.usna-mem-table {
		display: table;
	}

	.usna-mem-cards {
		display: none;
	}
}

/* "What membership includes" three columns: For your Mid, For your
   family, At graduation. Stacked below 900px to match the term table's
   own breakpoint. */
.usna-mem-includes {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	margin-top: 20px;
}

@media (min-width: 900px) {
	.usna-mem-includes {
		grid-template-columns: repeat(3, 1fr);
		gap: 30px;
	}
}

.usna-mem-includes-col p {
	font-size: 1rem;
	line-height: 1.55;
	color: var(--usna-body-text);
	margin-top: 10px;
}

/* The one place in "What membership includes" the ~$250 estimate is
   restated - a plain value box, not a Bevan display number, so it never
   competes with the tier prices for attention. */
.usna-mem-value-box {
	margin-top: 12px;
	padding: 12px 14px;
	background: var(--usna-sand);
	border: 1px solid var(--usna-sand-line);
	font-size: 1rem;
	line-height: 1.55;
	color: var(--usna-navy);
	font-weight: 700;
}

.usna-mem-value-box a {
	color: var(--usna-navy);
	text-decoration: none;
}

/* Generic two-column band used twice on this page: the renewal-window
   explainer and the badge/questions line. Also used for the Affiliate
   and NAPS cards. Stacks below 900px. */
.usna-mem-two-col {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-top: 24px;
}

@media (min-width: 900px) {
	.usna-mem-two-col {
		grid-template-columns: 1fr 1fr;
		gap: 30px;
	}
}

.usna-mem-two-col.usna-card-pair > div {
	border: 1px solid var(--usna-sand-line);
	background: var(--usna-white);
	padding: 22px 24px;
}

/* Single sand box wrapping both columns (the renewal-window explainer),
   as opposed to the card pair above, where each column gets its own
   bordered card. */
.usna-mem-two-col.usna-band {
	background: var(--usna-sand);
	border: 1px solid var(--usna-sand-line);
	padding: 24px;
	margin-top: 22px;
}

.usna-mem-term-price {
	font-family: Bevan, Georgia, serif;
	font-size: 24px;
	color: var(--usna-navy);
	margin-top: 8px;
}

.usna-mem-term-price span {
	font-size: 17px;
	color: var(--usna-muted-label);
}

/* "Where your dues go": the one full statement of the $250 estimate plus
   the footnote it belongs to. */
.usna-mem-dues-band {
	margin-top: 34px;
	padding: 26px;
	background: #FBF8F1;
	border: 1px solid var(--usna-sand-line);
}

.usna-mem-dues-label {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--usna-navy);
	margin-top: 14px;
}

.usna-mem-dues-band p {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--usna-body-text);
	margin-top: 8px;
	max-width: 56em;
}

/* Closing CTA band. */
.usna-mem-cta-band {
	margin-top: 34px;
	background: var(--usna-navy);
	padding: 34px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	flex-wrap: wrap;
}

.usna-mem-cta-band .usna-mem-cta-lead {
	max-width: 40em;
}

.usna-mem-cta-band .usna-mem-cta-lead p {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--usna-nav-muted);
	margin-top: 8px;
}

/* ------------------------------------------------------------------ */
/* Product card (crest flags) */
/* ------------------------------------------------------------------ */

.usna-product-card {
	border: 1px solid var(--usna-sand-line);
	background: var(--usna-white);
	display: flex;
	flex-direction: column;
}

.usna-product-card .usna-product-media {
	aspect-ratio: 5 / 3;
	background: repeating-linear-gradient(45deg, var(--usna-sand) 0 8px, #E5D9C2 8px 16px);
	border: 1px solid var(--usna-sand-line);
	margin: 12px 12px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--usna-muted-label);
	font-family: ui-monospace, monospace;
	font-size: 12px;
	text-transform: uppercase;
}

.usna-product-card .usna-product-body {
	padding: 16px 20px 20px;
}

.usna-product-card .usna-product-price-row {
	display: flex;
	align-items: flex-end;
	gap: 20px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 2px solid var(--usna-navy);
	flex-wrap: wrap;
}

/* ------------------------------------------------------------------ */
/* Event row */
/* ------------------------------------------------------------------ */

.usna-event-row {
	background: var(--usna-white);
	border: 1px solid var(--usna-sand-line);
	display: flex;
	align-items: stretch;
}

.usna-event-row + .usna-event-row {
	border-top: 0;
}

.usna-event-date {
	background: var(--usna-navy);
	color: var(--usna-white);
	width: 74px;
	flex: 0 0 74px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 14px 0;
	text-align: center;
}

.usna-event-date .usna-event-month {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--usna-gold);
}

.usna-event-date .usna-event-day {
	font-family: Bevan, Georgia, serif;
	font-size: 26px;
	line-height: 1;
}

.usna-event-date .usna-event-weekday {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.usna-event-date.is-highlight {
	background: var(--usna-gold);
	color: var(--usna-navy);
}

.usna-event-date.is-highlight .usna-event-month {
	color: var(--usna-navy);
	font-weight: 700;
}

.usna-event-body {
	padding: 14px 18px;
	flex: 1;
}

.usna-event-type {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--usna-muted-label);
}

.usna-event-title {
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 17px;
	color: var(--usna-navy);
	margin-top: 3px;
}

.usna-event-meta {
	font-size: 14px;
	color: var(--usna-slate);
	margin-top: 2px;
}

.usna-event-link {
	align-self: center;
	padding-right: 20px;
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 15px;
	color: var(--usna-navy);
	text-decoration: none;
	border-bottom: 2px solid var(--usna-gold);
	display: flex;
	align-items: center;
	width: fit-content;
}

.usna-event-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.usna-event-group-label {
	background: var(--usna-sand);
	padding: 11px 20px;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--usna-navy);
	border-top: 1px solid var(--usna-sand-line);
	border-bottom: 1px solid var(--usna-sand-line);
}

/* ------------------------------------------------------------------ */
/* Roster group */
/* ------------------------------------------------------------------ */

.usna-roster-group + .usna-roster-group {
	margin-top: 22px;
}

.usna-roster-group-header {
	display: flex;
	align-items: baseline;
	gap: 8px;
	border-bottom: 2px solid var(--usna-gold);
	padding-bottom: 7px;
}

.usna-roster-class {
	font-family: Bevan, Georgia, serif;
	font-size: 20px;
	color: var(--usna-navy);
	text-transform: uppercase;
}

.usna-roster-nickname {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--usna-muted-label);
}

.usna-roster-names {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 7px 14px;
	margin-top: 10px;
	font-size: 1rem;
	color: var(--usna-ink);
}

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

.usna-roster-filters {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 14px;
}

/* ------------------------------------------------------------------ */
/* Account status card */
/* ------------------------------------------------------------------ */

.usna-account-card {
	background: var(--usna-navy);
	color: var(--usna-white);
	padding: 26px;
}

.usna-account-card .usna-account-eyebrow {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--usna-gold);
}

.usna-account-card .usna-account-level {
	font-family: Bevan, Georgia, serif;
	font-size: 24px;
	text-transform: uppercase;
	margin-top: 8px;
	line-height: 1.15;
}

.usna-account-status-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
}

.usna-status-chip {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 5px 9px;
	border-radius: 2px;
	color: var(--usna-white);
	background: var(--usna-success);
}

.usna-status-chip.is-lapsed {
	background: var(--usna-alert);
}

.usna-status-chip.is-not-good-standing {
	background: #6B6455;
}

.usna-account-progress {
	height: 6px;
	background: var(--usna-navy-panel);
	margin-top: 16px;
}

.usna-account-progress-fill {
	height: 6px;
	background: var(--usna-gold);
}

.usna-account-progress-label {
	font-size: 13px;
	color: #9FAAC0;
	margin-top: 6px;
}

.usna-account-card .usna-btn {
	margin-top: 16px;
	width: 100%;
}

/* Order history table */
.usna-order-table {
	border: 1px solid var(--usna-sand-line);
	width: 100%;
	border-collapse: collapse;
}

.usna-order-table thead tr {
	background: var(--usna-navy);
	color: var(--usna-white);
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.usna-order-table th,
.usna-order-table td {
	padding: 14px 18px;
	text-align: left;
	border-top: 1px solid #EFE6D6;
	font-size: 1rem;
}

.usna-order-table tbody tr:first-child td {
	border-top: 0;
}

.usna-order-status {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--usna-success);
}

/* ------------------------------------------------------------------ */
/* Locked content */
/* ------------------------------------------------------------------ */

.usna-locked {
	background: var(--usna-night-watch);
	padding: 28px 22px;
	text-align: center;
}

.usna-locked .usna-lock-glyph {
	width: 44px;
	height: 44px;
	margin: 0 auto;
	border: 2px solid var(--usna-gold);
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.usna-locked .usna-lock-glyph span {
	width: 14px;
	height: 12px;
	background: var(--usna-gold);
	border-radius: 1px;
	display: block;
}

.usna-locked .usna-locked-title {
	font-family: Bevan, Georgia, serif;
	font-size: 22px;
	color: var(--usna-white);
	text-transform: uppercase;
	margin-top: 14px;
}

.usna-locked p {
	font-size: 1rem;
	line-height: 1.55;
	color: var(--usna-nav-muted);
	margin: 8px 0 18px;
}

.usna-locked .usna-locked-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

@media (min-width: 560px) {
	.usna-locked .usna-locked-actions {
		flex-direction: row;
		justify-content: center;
	}

	.usna-locked .usna-locked-actions .usna-btn {
		flex: 0 0 auto;
	}
}

/* ------------------------------------------------------------------ */
/* Photo frames */
/* ------------------------------------------------------------------ */

.usna-photo-frame {
	background: var(--usna-white);
	border: 1px solid var(--usna-sand-line);
	padding: 10px 10px 0;
}

.usna-photo-frame img {
	display: block;
	width: 100%;
}

.usna-photo-frame .usna-photo-caption-bar {
	background: var(--usna-navy);
	color: var(--usna-white);
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 10px 12px;
	margin-top: 10px;
}

.usna-photo-frame .usna-photo-caption {
	font-size: 14px;
	color: var(--usna-slate);
	padding: 10px 4px 14px;
}

/* Placeholder slot for a photo that has not been sourced yet (Design System
   "04 -- Photo frames for phone photos"): a hatched sand block standing in
   for the real photo, so nobody reuses an unrelated image (like the hero
   photo) to fill the gap. Aspect ratio is set by the caller per slot (see
   .usna-home-band-flag-media, .usna-news-card-media and
   .usna-flags-hero-media below); this class only owns the hatch, border and
   centered label. */
.usna-photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(45deg, var(--usna-sand) 0 8px, #E5D9C2 8px 16px);
	border: 1px solid var(--usna-sand-line);
}

.usna-photo-placeholder-label {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--usna-muted-label);
}

/* Hero, rebuilt for Home v2: a full-bleed photo (1:1 on mobile, wide on
   desktop) in normal document flow, no position:absolute on the section
   itself and no negative margin, so it can never overlap the header
   above it; it simply starts wherever the header's rope rule ends. The
   scrim and text ARE positioned absolutely, but only inside this
   section's own box, per the design system's photo-frame rule ("navy
   scrim bottom third, gold eyebrow, text never over faces").

   The header itself is not CSS-fixed (confirmed live: position:relative,
   normal flow), so it cannot literally overlap the hero below it. What
   was actually happening at 390px: the eyebrow/H1/lead/CTA stack inside
   .usna-hero-scrim is bottom-anchored (align-items:flex-end) inside a
   strict 1:1 box that is only 390px tall there, but that stack plus the
   scrim's own 20px top/bottom padding measures ~421px (measured:
   .usna-hero-scrim-inner top computed at 57.6px against the photo box's
   own top at 69px). Bottom-anchoring pushed the overflow
   upward, off the top of the box, and .usna-hero-photo's overflow:hidden
   clipped it there -- which reads exactly like "clipped under the fixed
   header" even though no element is actually fixed or overlapping.
   min-height below gives that stack the room it needs; aspect-ratio still
   governs the box on anything wider than 460px, where 1:1 alone already
   clears 460px. width:100% is required alongside min-height: without it,
   Chromium was observed growing the box's WIDTH to the min-height value
   (via aspect-ratio) instead of leaving width at the container's 390px,
   causing horizontal overflow at 390px.

   min-height raised from 480px to 720px for the club photo: the text
   stack alone needs about 433px (its own height plus the scrim's 20px
   top and bottom padding), which already used up 90 percent of a 480px
   box, leaving no clear band for a face. 720px opens a real gap above
   the text for the photo's subject to sit in without being crossed by
   type. */
.usna-hero-photo {
	position: relative;
	width: 100%;
	background: var(--usna-night-watch);
	aspect-ratio: 1 / 1;
	min-height: 720px;
	overflow: hidden;
}

.usna-hero-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 18%;
}

.usna-hero-scrim {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	background: linear-gradient(to top, rgba(20,32,58,0.97) 42%, rgba(20,32,58,0));
	padding: 20px;
}

.usna-hero-scrim-inner {
	max-width: 620px;
}

.usna-hero-cta-row {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 18px;
}

.usna-hero-cta-row .usna-btn {
	width: 100%;
}

.usna-hero-credit {
	position: absolute;
	right: 10px;
	bottom: 10px;
	font-family: Cabin, Georgia, serif;
	font-size: 11px;
	color: rgba(253,252,249,0.55);
	text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

@media (min-width: 900px) {
	/* Desktop: the photo does not cover the band. It is scaled so the
	   subject (cap brim to backpack handle, the middle 82 percent of the
	   frame) fills the band's height, pinned to the right edge; the navy
	   background and the left gradient own the rest of the width, so the
	   text never competes with the photo. */
	.usna-hero-photo {
		aspect-ratio: auto;
		height: clamp(520px, 40vw, 720px);
		min-height: 520px;
	}

	.usna-hero-photo img {
		position: absolute;
		top: -20%;
		right: 0;
		height: 124%;
		width: auto;
		max-width: none;
		object-fit: contain;
		object-position: right top;
		-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%);
		mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%);
	}

	.usna-hero-scrim {
		align-items: center;
		background: linear-gradient(to right, rgba(20,32,58,0.97) 0%, rgba(20,32,58,0.88) 46%, rgba(20,32,58,0) 80%);
		padding: 0 56px;
	}

	.usna-hero-cta-row {
		flex-direction: row;
	}

	.usna-hero-cta-row .usna-btn {
		width: auto;
	}
}

/* ------------------------------------------------------------------ */
/* Home v2 sections */
/* ------------------------------------------------------------------ */

/* Links page: grouped rows with a title, one-line description and an
   outbound arrow, a sand group-label band above each group. */
.usna-link-group-label {
	background: var(--usna-sand);
	padding: 10px 16px;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--usna-muted-label);
	margin-top: 28px;
}

.usna-link-group-label:first-child {
	margin-top: 0;
}

.usna-link-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px;
	border-bottom: 1px solid var(--usna-sand-line);
	text-decoration: none !important;
	color: inherit;
}

a.usna-link-row:hover {
	background: var(--usna-sand);
}

.usna-link-row-title {
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--usna-navy);
}

.usna-link-row-desc {
	font-size: 0.9375rem;
	color: var(--usna-slate);
	margin-top: 2px;
}

.usna-link-row-arrow {
	flex: 0 0 auto;
	color: var(--usna-orange-text);
	font-size: 20px;
	line-height: 1;
}

/* Guide pages: sticky "On this page" list beside the content, desktop
   only (a sticky column fighting a single content column on mobile just
   adds noise there). Built by assets/js/guide-toc.js from the content's
   own H2s so it can never drift out of sync with a guide's real
   sections; hidden entirely by that script if a guide has no H2s yet
   (the three not-yet-written guides). */
.usna-guide-layout {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.usna-guide-toc {
	display: none;
}

.usna-guide-content {
	width: 100%;
	min-width: 0;
}

/* Post-content tables (the Application Guide's season-by-season timeline
   and any future wp:table block) scroll inside themselves instead of
   pushing the page wide on narrow screens. */
.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	min-width: 480px;
}

@media (min-width: 1000px) {
	.usna-guide-layout {
		flex-direction: row;
		align-items: flex-start;
	}

	.usna-guide-toc {
		display: block;
		flex: 0 0 220px;
		position: sticky;
		top: 24px;
	}

	.usna-guide-content {
		flex: 1;
	}
}

.usna-guide-toc-label {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--usna-muted-label);
}

.usna-guide-toc-list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	border-left: 2px solid var(--usna-sand-line);
}

.usna-guide-toc-list li {
	margin: 0;
}

.usna-guide-toc-list a {
	display: block;
	padding: 8px 0 8px 16px;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--usna-slate);
	text-decoration: none;
}

.usna-guide-toc-list a:hover {
	color: var(--usna-navy);
}

/* "More guides" strip, bottom of every guide page. */
.usna-guide-more {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 2px solid var(--usna-navy);
}

.usna-guide-more-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-top: 16px;
}

.usna-guide-more-card {
	display: block;
	background: var(--usna-white);
	border: 1px solid var(--usna-sand-line);
	padding: 16px 18px;
	text-decoration: none !important;
}

.usna-guide-more-card .usna-guide-more-title {
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 1.0625rem;
	color: #1B2A4A;
}

.usna-guide-more-card .usna-guide-more-desc {
	font-size: 0.9375rem;
	color: var(--usna-slate);
	margin-top: 4px;
}

@media (min-width: 700px) {
	.usna-guide-more-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Contact page: form column plus a contact card, stacked on mobile, side
   by side from 900px up. */
.usna-contact-columns {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}

@media (min-width: 900px) {
	.usna-contact-columns {
		flex-direction: row;
	}

	.usna-contact-form-col {
		flex: 1 1 60%;
	}

	.usna-contact-card-col {
		flex: 0 0 360px;
	}
}

.usna-contact-form-col,
.usna-contact-card-col {
	width: 100%;
	box-sizing: border-box;
}

.usna-contact-board-list {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.usna-contact-board-list li {
	font-size: 0.9375rem;
	color: var(--usna-ink);
}

.usna-contact-board-list li strong {
	display: inline-block;
	min-width: 130px;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--usna-muted-label);
}

/* Checklist: benefits lists rendered as icon rows, not plain prose lists
   (Membership "What Your Membership Includes"). The gold square with a
   navy checkmark reuses the button/chip color language; aria-hidden since
   the row's own text already carries the meaning. */
.usna-checklist {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.usna-checklist-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--usna-ink);
}

.usna-checklist-icon {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--usna-gold);
	color: var(--usna-navy);
	font-weight: 700;
	font-size: 14px;
	border-radius: 2px;
	margin-top: 2px;
}

/* Stat band, directly under the hero. Three evergreen/verified stats, a
   single row at every width: no 2x2/4-across grid or nth-child
   bottom-border logic, just a border-right on every cell but the last. */
.usna-stat-band {
	background: var(--usna-navy);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--usna-navy-panel);
}

/* Benefit cards: sentence-led tiles for "what your Mid gets back"
   (Membership). Deliberately plain body text, no Bevan display number,
   so this never reads as a price the way the navy stat band or the tier
   cards do; a glance should land on the tier prices, not here. */
.usna-benefit-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-top: 14px;
}

.usna-benefit-card {
	padding: 20px;
}

.usna-benefit-card p {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--usna-ink);
}

@media (min-width: 900px) {
	.usna-benefit-cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

.usna-stat-cell {
	padding: 18px 12px;
	border-right: 1px solid var(--usna-navy-panel);
}

.usna-stat-cell:last-child {
	border-right: 0;
}

.usna-stat-value {
	font-family: Bevan, Georgia, serif;
	font-size: 30px;
	color: var(--usna-gold);
	line-height: 1;
}

.usna-stat-label {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #DCE2EC;
	margin-top: 6px;
}

@media (min-width: 900px) {
	.usna-stat-cell {
		padding: 28px 32px;
	}

	.usna-stat-value {
		font-size: 44px;
	}

	.usna-stat-label {
		font-size: 15px;
	}
}

/* Home band: the stat-band grid repurposed as three unequal cells (since
   year, award, crest flag) instead of three equal numbers. Single column,
   flag cell last, below 900px; the three-cell row with unequal widths
   from 900px up. Border between cells switches from a right rule to a
   bottom rule while stacked, since a right-hand hairline on a full-width
   stacked cell reads as a stray mark rather than a divider. */
.usna-home-band {
	grid-template-columns: 1fr;
}

.usna-home-band .usna-stat-cell {
	border-right: 0;
	border-bottom: 1px solid var(--usna-navy-panel);
}

.usna-home-band .usna-stat-cell:last-child {
	border-bottom: 0;
}

@media (min-width: 900px) {
	.usna-home-band {
		grid-template-columns: 0.72fr 0.92fr 1.6fr;
	}

	.usna-home-band .usna-stat-cell {
		border-right: 1px solid var(--usna-navy-panel);
		border-bottom: 0;
	}

	.usna-home-band .usna-stat-cell:last-child {
		border-right: 0;
	}
}

/* Left cell: the founding year is context, not a headline, so it is set
   well below the old giant stat numeral rather than reusing
   .usna-stat-value. */
.usna-home-band-year {
	font-family: Bevan, Georgia, serif;
	font-size: 26px;
	line-height: 1;
	color: var(--usna-white);
	margin-top: 8px;
}

@media (min-width: 900px) {
	.usna-home-band-year {
		font-size: 30px;
	}
}

/* Middle cell: the award name carries the weight; the year is a caption
   below it (.usna-stat-label), not a numeral. */
.usna-home-band-award-name {
	font-family: Bevan, Georgia, serif;
	font-size: 21px;
	line-height: 1.15;
	color: var(--usna-gold);
	text-transform: uppercase;
}

@media (min-width: 900px) {
	.usna-home-band-award-name {
		font-size: 25px;
	}
}

.usna-home-band-award .usna-stat-label {
	margin-top: 10px;
}

/* Right cell: crest photo, authorization line, price line, Buy now
   button - the band's only button. */
.usna-home-band-flag {
	display: flex;
	align-items: center;
	gap: 18px;
}

.usna-home-band-flag-media {
	flex: 0 0 112px;
	height: 76px;
	border: 1px solid var(--usna-navy-panel);
	overflow: hidden;
}

.usna-home-band-flag-media img,
.usna-home-band-flag-media .usna-photo-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The source photo is wider than the box and the flag sits left of center,
   so a plain cover crop shows mostly sky on the right. Scaling the image up
   and anchoring the origin near the flag keeps the flag filling the box at
   both breakpoints. */
.usna-home-band-flag-media img {
	transform: scale(1.9);
	transform-origin: 34% 48%;
}

.usna-home-band-flag-copy {
	flex: 1;
	min-width: 0;
}

.usna-home-band-flag-auth {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--usna-gold);
}

.usna-home-band-flag-title {
	font-family: Bevan, Georgia, serif;
	font-size: 21px;
	line-height: 1.1;
	color: var(--usna-white);
	text-transform: uppercase;
	margin-top: 6px;
}

.usna-home-band-flag .usna-btn {
	margin-top: 12px;
}

@media (min-width: 900px) {
	.usna-home-band-flag-media {
		flex: 0 0 160px;
		height: 104px;
	}

	.usna-home-band-flag-title {
		font-size: 25px;
	}
}

/* "What we do" three-column strip. Desktop wants a vertical rule between
   columns (border-right, plus horizontal padding to keep text off it);
   below WordPress's own 782px column-stacking breakpoint the columns
   render as a single-track stack, but that desktop border-right and
   padding-left/right were previously authored as per-column inline styles
   in patterns/what-we-do.php, which stacking does not clear. That left
   every stacked column still indented under a stray vertical rule that no
   longer meant anything once there was nothing beside it to divide. All
   horizontal spacing now lives here instead, mobile-first: flush-left,
   full width, plain top hairlines between stacked items; the desktop rule
   is added back only at 782px and up. */
.usna-what-we-do .wp-block-column {
	padding-right: 0;
	padding-left: 0;
	border-right: 0;
}

.usna-what-we-do .wp-block-column + .wp-block-column {
	border-top: 1px solid var(--usna-sand-line);
	margin-top: 20px;
	padding-top: 20px;
}

@media (min-width: 782px) {
	.usna-what-we-do .wp-block-column + .wp-block-column {
		border-top: 0;
		margin-top: 0;
	}

	.usna-what-we-do .wp-block-column:not(:last-child) {
		border-right: 1px solid var(--usna-sand-line);
		padding-right: 28px;
	}

	.usna-what-we-do .wp-block-column:not(:first-child) {
		padding-left: 28px;
	}
}

/* "Just finding us?" four starting points. */
.usna-start-here-grid {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 16px;
}

.usna-start-here-card {
	border: 1px solid var(--usna-sand-line);
	padding: 16px;
	background: var(--usna-white);
}

.usna-start-here-card .usna-start-here-title {
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 18px;
	color: var(--usna-navy);
}

.usna-start-here-card .usna-start-here-desc {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--usna-body-text);
	margin-top: 4px;
}

.usna-start-here-card .usna-text-link {
	display: inline-block;
	margin-top: 8px;
	font-size: 0.9375rem;
}

@media (min-width: 900px) {
	.usna-start-here-grid {
		flex-direction: row;
		gap: 20px;
	}

	.usna-start-here-card {
		flex: 1;
		border-top: 4px solid var(--usna-gold);
		padding: 24px;
		display: flex;
		flex-direction: column;
	}

	.usna-start-here-card .usna-start-here-desc {
		flex: 1;
	}
}

/* "Free to read" guide list. */
.usna-guide-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 14px;
}

.usna-guide-card {
	background: var(--usna-white);
	border: 1px solid var(--usna-sand-line);
	border-left: 5px solid var(--usna-gold);
	padding: 14px 16px;
	text-decoration: none !important;
	display: block;
}

.usna-guide-card .usna-guide-title {
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 17px;
	color: var(--usna-navy);
}

.usna-guide-card .usna-guide-meta {
	font-size: 0.9375rem;
	color: var(--usna-slate);
	margin-top: 2px;
}

.usna-guide-progress {
	border: 1px solid var(--usna-sand-line);
	padding: 14px 16px;
	color: var(--usna-slate);
}

.usna-guide-progress .usna-guide-title {
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 17px;
	color: var(--usna-body-text);
}

.usna-guide-progress .usna-guide-meta {
	font-size: 0.9375rem;
	margin-top: 2px;
}

/* Crest flag feature band. */
.usna-crest-feature {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.usna-crest-feature-media {
	margin: 0;
	background: var(--usna-navy);
	aspect-ratio: 5 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
}

.usna-crest-feature-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (min-width: 900px) {
	.usna-crest-feature {
		flex-direction: row;
		align-items: center;
		gap: 48px;
	}

	.usna-crest-feature-media,
	.usna-crest-feature-copy {
		flex: 1;
	}
}

/* Club news list/grid. */
.usna-news-list {
	display: flex;
	flex-direction: column;
	margin-top: 12px;
}

.usna-news-list a {
	border-top: 1px solid var(--usna-sand-line);
	padding: 14px 0;
	text-decoration: none !important;
	display: block;
}

.usna-news-list a:last-child {
	border-bottom: 1px solid var(--usna-sand-line);
}

.usna-news-date {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--usna-muted-label);
}

.usna-news-title {
	font-family: Cabin, Georgia, serif;
	font-weight: 600;
	font-size: 17px;
	line-height: 1.35;
	color: var(--usna-navy);
	margin-top: 2px;
}

.usna-news-list-mobile {
	display: flex;
}

.usna-news-grid {
	display: none;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-top: 24px;
}

@media (min-width: 900px) {
	.usna-news-list-mobile {
		display: none;
	}

	.usna-news-grid {
		display: grid;
	}
}

.usna-news-grid .usna-news-card {
	border: 1px solid var(--usna-sand-line);
	padding: 10px 10px 0;
	text-decoration: none !important;
	display: block;
}

.usna-news-grid .usna-news-card img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.usna-news-grid .usna-news-card-media {
	margin: 0;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.usna-news-grid .usna-news-card-media .usna-photo-placeholder {
	width: 100%;
	height: 100%;
}

.usna-news-grid .usna-news-card .usna-news-body {
	padding: 16px 10px 20px;
}

.usna-news-grid .usna-news-card .usna-news-title {
	font-size: 20px;
}

@media (min-width: 900px) {
	.usna-news-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.usna-home-split {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.usna-home-split-col {
	flex: 1;
}

@media (min-width: 900px) {
	.usna-home-split {
		flex-direction: row;
	}
}

/* ------------------------------------------------------------------ */
/* Events v2 */
/* ------------------------------------------------------------------ */

.usna-event-row.is-full {
	flex-direction: column;
}

.usna-event-row.is-full .usna-event-date {
	width: auto;
	flex: 0 0 auto;
	flex-direction: row;
	gap: 8px;
	padding: 12px 16px;
}

.usna-event-row.is-full .usna-event-date .usna-event-day {
	font-size: 22px;
}

.usna-event-row.is-full .usna-event-body {
	padding: 16px;
}

.usna-event-desc {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--usna-body-text);
	margin-top: 8px;
}

.usna-event-cta-slot {
	padding: 0 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.usna-event-cta-slot .usna-btn {
	width: 100%;
}

.usna-event-cta-row {
	display: flex;
	gap: 8px;
}

.usna-event-cta-row .usna-btn {
	flex: 1;
}

.usna-event-cta-slot .usna-event-link {
	align-self: center;
	padding-right: 0;
}

.usna-event-rsvp-later {
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: #E8E4DA;
	color: #8A8578;
	border-radius: 2px;
	padding: 14px;
	min-height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (min-width: 900px) {
	.usna-event-row.is-full {
		flex-direction: row;
	}

	.usna-event-row.is-full .usna-event-date {
		width: 96px;
		flex: 0 0 96px;
		flex-direction: column;
		padding: 20px 0;
	}

	.usna-event-row.is-full .usna-event-date .usna-event-day {
		font-size: 36px;
	}

	.usna-event-row.is-full .usna-event-body {
		padding: 22px 28px;
	}

	.usna-event-row.is-full .usna-event-type {
		font-size: 14px;
	}

	.usna-event-row.is-full .usna-event-title {
		font-size: 23px;
	}

	.usna-event-cta-slot {
		width: 250px;
		flex: 0 0 250px;
		border-left: 1px solid var(--usna-sand-line);
		padding: 22px;
		justify-content: center;
	}
}

.usna-event-filter-bar {
	background: var(--usna-sand);
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	border-bottom: 1px solid var(--usna-sand-line);
}

.usna-event-filter-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.usna-event-filter-chip {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 2px solid var(--usna-navy);
	color: var(--usna-navy);
	border-radius: 2px;
	padding: 11px 18px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	text-decoration: none !important;
}

.usna-event-filter-chip.is-active {
	background: var(--usna-navy);
	color: var(--usna-white);
}

@media (min-width: 900px) {
	.usna-event-filter-bar {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 20px 56px;
	}
}

.usna-event-legend {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--usna-navy-panel);
}

.usna-event-legend-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.usna-event-legend-swatch {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.usna-event-legend-swatch.is-navy {
	background: var(--usna-navy);
	border: 2px solid var(--usna-white);
}

.usna-event-legend-swatch.is-gold {
	background: var(--usna-gold);
}

.usna-event-legend-text {
	font-size: 0.9375rem;
	color: #DCE2EC;
}

.usna-event-rsvp-preview {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	max-width: 1180px;
	margin-inline: auto;
}

@media (min-width: 900px) {
	.usna-event-rsvp-preview {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}
}

/* ------------------------------------------------------------------ */
/* WooCommerce overrides */
/* ------------------------------------------------------------------ */

.woocommerce-breadcrumb {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--usna-muted-label);
	padding: 20px 0;
}

.woocommerce-breadcrumb a {
	color: var(--usna-muted-label);
}

.woocommerce div.product {
	max-width: 1180px;
	margin-inline: auto;
	padding: 0 20px 48px;
}

@media (min-width: 782px) {
	.woocommerce div.product {
		padding: 0 40px 56px;
	}
}

/* WooCommerce's own gallery thumbnail strip (.flex-control-thumbs) ships
   with no theme rules at all, because this theme dequeues WooCommerce's
   default stylesheet and restyles everything itself. Each thumbnail <img>
   carries WooCommerce core's own onload attribute (sets the element's
   width/height to its natural pixel size once the file finishes loading),
   which is meant to be overridden by WooCommerce's default CSS. Without
   that CSS, an unstyled thumbnail pops from whatever size it started at up
   to its full natural size - up to several hundred pixels - the moment it
   loads, which reads as the photo growing while scrolling past it. These
   rules give the strip a fixed row layout so a real CSS width always wins
   over the attribute the onload handler sets. */
.woocommerce-product-gallery {
	max-width: 100%;
}

/* WooCommerce's gallery zoom lens (img.zoomImg) is a hover-only feature:
   it shows a full-resolution copy of the image, positioned under the
   cursor, on mouseenter/mousemove, and hides it again on mouseleave.
   Touch has no mouseleave, so a tap that synthesizes the enter/move
   events leaves the full-size image showing, off-center, with no way for
   the visitor to dismiss it short of navigating away - on a small photo
   that reads as the image suddenly filling the screen with no way back.
   Disabling the theme's zoom support did not stop WooCommerce's script
   from initializing it, so the lens is hidden outright here instead. */
img.zoomImg,
.zoomImg {
	display: none !important;
}

.flex-control-nav.flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}

.flex-control-nav.flex-control-thumbs li {
	flex: 0 0 auto;
	width: calc(25% - 6px);
}

.flex-control-nav.flex-control-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 1px solid var(--usna-sand-line);
	cursor: pointer;
}

.flex-control-nav.flex-control-thumbs img.flex-active {
	border-color: var(--usna-navy);
	border-width: 2px;
}

/* Buy box above the fold at 390px: image first, then title/price/CTA, no
   sidebar competing for space. */
.woocommerce div.product .product_title {
	font-family: Bevan, Georgia, serif;
	color: var(--usna-navy);
	text-transform: uppercase;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: Bevan, Georgia, serif;
	font-size: 34px;
	color: var(--usna-navy);
}

.woocommerce div.product form.cart {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 16px;
}

.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--usna-gold);
	color: var(--usna-navy);
	border: 0;
	border-bottom: 4px solid var(--usna-gold-shadow);
	border-radius: 2px;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 19px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 17px 28px;
	min-height: 56px;
}

.woocommerce div.product form.cart .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--usna-gold-hover);
	color: var(--usna-navy);
}

/* Remove WooCommerce's default sidebar and boxy defaults that fight the
   theme's flat, hard-edge look. */
.woocommerce-page.left-sidebar #secondary,
.woocommerce-page.right-sidebar #secondary {
	display: none;
}

/* The [products] shortcode wraps its own ul.products in a
   "woocommerce columns-N" div (N from the shortcode's columns attribute,
   default 4), and WooCommerce's core layout CSS styles the grid with
   compound selectors like ".woocommerce.columns-4 ul.products li.product"
   (four classes deep). A plain ".woocommerce ul.products li.product" here
   loses that specificity fight and the card falls back to WooCommerce's
   float layout at a 22% width, which is the narrow one-word-per-line card
   bug. Matching the compound selector, and loading after WooCommerce's own
   stylesheet, is what actually wins. */
.woocommerce.columns-4 ul.products,
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	list-style: none;
	clear: none;
	margin: 0;
	padding: 0;
}

/* WooCommerce's own clearfix ("content:' '; display:table" on ::before and
   ::after) is meant for the old float layout. Inside a CSS Grid container
   those pseudo-elements become real grid items with content, so the
   ::before claims the first cell and pushes the first product card into
   the second column, one row up from the rest. content:none removes the
   pseudo-element from the render tree entirely. */
.woocommerce.columns-4 ul.products::before,
.woocommerce.columns-4 ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
	display: none;
}

@media (min-width: 700px) {
	.woocommerce.columns-4 ul.products,
	.woocommerce ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1200px) {
	.woocommerce.columns-4 ul.products,
	.woocommerce ul.products {
		/* Four across, not five: matches the design's card proportions
		   (3:2 photo, roomier body) for the seven real crest flags, and
		   splits evenly into a 4-then-3 second row instead of 5-then-2. */
		grid-template-columns: repeat(4, 1fr);
	}
}

.woocommerce.columns-4 ul.products li.product,
.woocommerce ul.products li.product {
	float: none;
	width: auto;
	background: var(--usna-white);
	border: 1px solid var(--usna-sand-line);
	box-shadow: 0 6px 0 var(--usna-card-border);
	margin: 0 0 6px;
	padding: 0;
	display: flex;
	flex-direction: column;
}

/* woocommerce-smallscreen.css (loaded under 768px only) floats every other
   card right at a higher specificity than the reset above
   (".woocommerce ul.products[class*=columns-] li.product:nth-child(2n)"),
   which is what put a stray offset row into the mobile grid: a floated
   item breaks out of the CSS Grid flow WooCommerce's own float layout
   assumes, but our grid keeps assigning it a track, so the next item
   collides with it. Match that selector exactly to cancel the float. */
.woocommerce ul.products[class*="columns-"] li.product:nth-child(2n),
.woocommerce-page ul.products[class*="columns-"] li.product:nth-child(2n) {
	float: none;
	clear: none;
}

/* Product image: the shortcode wraps image + title in one link
   (".woocommerce-loop-product__link"). WordPress's block-library CSS
   underlines any link that isn't a button, which is what put an underline
   under the card title; text-decoration:none here clears it for the whole
   link, image included. */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
	display: block;
	text-decoration: none;
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	height: auto;
	max-width: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3;
	color: var(--usna-navy);
	text-decoration: none;
	text-transform: none;
	margin: 16px 16px 0;
}

.woocommerce ul.products li.product .price {
	display: block;
	font-family: Bevan, Georgia, serif;
	font-size: 24px;
	color: var(--usna-navy);
	margin: 8px 16px 0;
}

/* Add to cart / Select options button on the archive grid card. The single
   product page's button (see ".woocommerce div.product form.cart .button"
   above) is sized for the full-width buy box; that same size wrapped to 2-3
   lines and clipped inside the much narrower grid card. This scales the
   button down to fit the card at both 390px and 1440px and keeps the label
   on one line. margin-top:auto pins it to the bottom of the flex column so
   every card in a row ends at the same height regardless of title length. */
.woocommerce ul.products li.product .button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	box-sizing: border-box;
	white-space: nowrap;
	min-width: auto;
	font-size: 14px;
	letter-spacing: 0.04em;
	padding: 12px 10px;
	min-height: 44px;
	margin: auto 16px 16px;
}

.woocommerce span.onsale {
	background: var(--usna-gold);
	color: var(--usna-navy);
	border-radius: 2px;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
}

.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	gap: 8px;
	display: flex;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 1px solid var(--usna-sand-line);
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	padding: 10px 16px;
	min-width: 48px;
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Logged-out My Account: WooCommerce's own login and register forms
   (myaccount/form-login.php), themed to match the rest of the site's form
   fields (see the Form fields section above for the shared input styling
   this inherits) rather than left in WooCommerce's stock look. */
.woocommerce-account #customer_login.u-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	max-width: 760px;
}

@media (min-width: 700px) {
	.woocommerce-account #customer_login.u-columns {
		grid-template-columns: 1fr 1fr;
	}
}

.woocommerce-account #customer_login h2 {
	font-family: Bevan, Georgia, serif;
	color: var(--usna-navy);
	text-transform: uppercase;
	font-size: 1.375rem;
	margin-bottom: 16px;
}

.woocommerce-account .woocommerce-form-login label,
.woocommerce-account .woocommerce-form-register label {
	display: block;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--usna-navy);
	margin-bottom: 6px;
}

.woocommerce-account .woocommerce-form-login .form-row,
.woocommerce-account .woocommerce-form-register .form-row {
	margin-bottom: 18px;
}

.woocommerce-account .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: Cabin, Georgia, serif;
	color: var(--usna-body-text);
	text-transform: none;
	letter-spacing: normal;
	margin-bottom: 0;
}

/* Primary navy submit button, distinct from the gold add-to-cart /
   checkout buttons elsewhere in WooCommerce: signing in or registering is
   not a purchase action. */
/* Specificity note: WooCommerce's generic ".woocommerce button.button" gold
   rule (see the Add to Cart button rules above) is one class more specific
   than a plain ".woocommerce-account .woocommerce-form-login__submit"
   selector would be, so it would win and leave these gold. The extra
   "button" element selector here matches that specificity so this navy
   rule (later in the file) takes it. */
.woocommerce-account button.woocommerce-form-login__submit,
.woocommerce-account button.woocommerce-form-register__submit {
	background: var(--usna-navy);
	color: var(--usna-white);
	border: 0;
	border-radius: 2px;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 15px 28px;
	min-height: 48px;
}

.woocommerce-account button.woocommerce-form-login__submit:hover,
.woocommerce-account button.woocommerce-form-register__submit:hover {
	background: var(--usna-night-watch);
	color: var(--usna-white);
}

.woocommerce-account .woocommerce-LostPassword {
	margin-top: 14px;
}

.woocommerce-account .woocommerce-LostPassword a {
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	color: var(--usna-navy);
	text-decoration: underline;
	text-decoration-color: var(--usna-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* My Account */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--usna-sand-line);
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-top: 1px solid var(--usna-sand-line);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:first-child {
	border-top: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 12px 16px;
	font-family: Cabin, Georgia, serif;
	font-weight: 600;
	color: var(--usna-navy);
	text-decoration: none;
	background: var(--usna-white);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--usna-navy);
	color: var(--usna-white);
}

.woocommerce-MyAccount-content table.shop_table {
	border: 1px solid var(--usna-sand-line);
	border-collapse: collapse;
	width: 100%;
}

.woocommerce-MyAccount-content table.shop_table th {
	background: var(--usna-navy);
	color: var(--usna-white);
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 14px;
	padding: 12px 16px;
	text-align: left;
}

.woocommerce-MyAccount-content table.shop_table td {
	padding: 14px 16px;
	border-top: 1px solid var(--usna-sand-line);
}

/* Confirmation shown to a renewing family above the checkout block in
   place of retyping their Midshipman's details (see
   usnapccfl_checkout_family_confirmation_shortcode() in usnapccfl-core). */
.usna-checkout-family-confirmation {
	max-width: 1180px;
	margin: 0 auto 24px;
}

.usna-checkout-family-confirmation p {
	margin: 0;
}

.usna-checkout-family-confirmation a {
	font-weight: 600;
	color: var(--usna-navy);
}

/* Cart and checkout tables */
.woocommerce table.shop_table,
.woocommerce-cart table.cart,
.woocommerce-checkout table.shop_table {
	border: 1px solid var(--usna-sand-line);
	border-radius: 0;
}

/* The cart block renders an empty skeleton until it hydrates client side,
   which can take a second or more; with no signal the page reads as an
   empty cart rather than a loading one. WooCommerce keeps the is-loading
   class on the wrapper only until hydration finishes, so a label scoped to
   that class shows and hides itself with no script needed. */
.wp-block-woocommerce-cart.is-loading {
	position: relative;
	min-height: 80px;
}

.wp-block-woocommerce-cart.is-loading::before {
	content: "Loading your cart";
	display: block;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--usna-navy);
	text-align: center;
	padding: 32px 0;
}

.woocommerce #payment,
.woocommerce-checkout #payment {
	background: var(--usna-sand);
	border: 1px solid var(--usna-sand-line);
	border-radius: 0;
}

.woocommerce #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
	background: #FBF7EE;
	border-radius: 0;
}

/* PayPal / card / Apple Pay / Google Pay method chips on the product and
   checkout pages. */
.usna-pay-methods {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	margin-top: 10px;
}

@media (min-width: 640px) {
	.usna-pay-methods {
		display: flex;
		flex-wrap: wrap;
	}
}

.usna-pay-chip {
	background: var(--usna-white);
	border: 1px solid var(--usna-sand-line);
	padding: 12px 18px;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--usna-navy);
	text-align: center;
}

.usna-pay-check {
	border: 1px solid var(--usna-sand-line);
	margin-top: 8px;
}

.usna-pay-check summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px;
	min-height: 48px;
	box-sizing: border-box;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--usna-navy);
	cursor: pointer;
	background: var(--usna-white);
	list-style: none;
}

.usna-pay-check summary::-webkit-details-marker {
	display: none;
}

.usna-pay-check .usna-pay-check-body {
	border-top: 1px solid var(--usna-sand-line);
	padding: 16px 18px;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--usna-body-text);
	background: #FBF7EE;
}

/* ------------------------------------------------------------------ */
/* Paid Memberships Pro overrides (light touch; PMPro ships its own CSS
   which gets loaded before this file so these rules win on specificity) */
/* ------------------------------------------------------------------ */

.pmpro_level,
.pmpro_content_message,
.pmpro_box {
	border: 1px solid var(--usna-sand-line);
	border-radius: 0;
	background: var(--usna-white);
}

.pmpro_btn,
.pmpro_btn-submit {
	background: var(--usna-navy);
	color: var(--usna-white);
	border-radius: 2px;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* ------------------------------------------------------------------ */
/* Utility */
/* ------------------------------------------------------------------ */

.usna-eyebrow {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--usna-muted-label);
}

/* Same eyebrow, set on a navy or night-watch background (hero, cta-pair,
   any navy band). Checked against the design source (docs/design/*.dc.html):
   every navy-background eyebrow there ("Members only", the hero's
   "Est. 2011" / "Established 2011..." kicker, "Or give your time" on
   Donate) is gold #C9A54A, not orange; orange in that source is reserved
   for eyebrows on light backgrounds. Orange also clears 4.5:1 on navy
   (4.80:1) and night-watch (5.47:1), but gold clears both by a wider
   margin (6.07:1 / 6.91:1, computed) and is what the design actually
   shows. */
.usna-eyebrow.on-dark {
	color: var(--usna-gold);
}

.usna-section-label {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--usna-muted-label);
}

.usna-band-navy {
	background: var(--usna-navy);
	color: var(--usna-white);
}

.usna-band-night {
	background: var(--usna-night-watch);
	color: var(--usna-white);
}

.usna-band-sand {
	background: var(--usna-sand);
}

.usna-band-navy a,
.usna-band-night a {
	color: var(--usna-nav-muted);
}

.usna-band-navy a:hover,
.usna-band-night a:hover {
	color: var(--usna-gold);
}

@media (min-width: 900px) {
	.usna-band-navy {
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		padding: 48px 56px !important;
	}
}

/* ------------------------------------------------------------------ */
/* Page hero: shared band for every inner page */
/* ------------------------------------------------------------------ */

/* Split variant (a featured image is set on the page): photo and text
   never share the same pixels, so a face can never land under a
   headline. Mobile stacks the photo (4:3, full width) above a solid
   navy text block; desktop splits 50/50, photo bleeding to the right,
   top and bottom edges, with a short mask-image fade at its own left
   edge (the same technique the Home hero uses) so navy visually melts
   into the photo instead of a hard seam. Rebuilt twice from earlier
   attempts (a boxed side-frame, then a full-bleed photo behind a text
   gradient): both put a face somewhere under text or wasted the visible
   half on dead background, because a gradient overlay cannot guarantee
   the photo's actual subject lands in the readable zone. A hard split
   can, since each half only ever holds one thing. */
.usna-page-hero {
	width: 100%;
	background: var(--usna-night-watch);
}

.usna-page-hero-photo-col {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.usna-page-hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.usna-page-hero-scrim {
	padding: 32px 20px;
}

.usna-page-hero-text {
	max-width: 560px;
}

.usna-page-hero-title {
	font-family: Bevan, Georgia, serif;
	color: var(--usna-white);
	text-transform: uppercase;
	font-size: clamp(2rem, 1.63rem + 1.52vw, 2.75rem);
	line-height: 1.05;
	margin: 10px 0 0;
}

.usna-page-hero-lead {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: #DCE2EC;
	margin: 14px 0 0;
	max-width: 46em;
}

.usna-page-hero-lead a {
	color: inherit;
}

@media (min-width: 900px) {
	/* Scoped to the split (photo) variant only. Applying this to
	   .is-plain as well turned the plain band into a flex row, which put
	   the trailing rope-rule div (meant to sit full-width below the
	   scrim, closing out the band) beside the scrim instead of under it
	   — a left-third-wide rope rule sharing the row with a right-shifted
	   text column, and the outer band locked to the split variant's
	   taller height regardless of the plain scrim's own shorter height. */
	.usna-page-hero:not(.is-plain) {
		display: flex;
		align-items: stretch;
		height: clamp(380px, 32vw, 520px);
	}

	.usna-page-hero-scrim {
		flex: 0 0 50%;
		display: flex;
		align-items: center;
		padding: 0 56px;
		order: 1;
	}

	.usna-page-hero-photo-col {
		flex: 0 0 50%;
		height: 100%;
		aspect-ratio: auto;
		order: 2;
	}

	.usna-page-hero-bg {
		-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 18%);
		mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 18%);
	}

	/* Crest Flags only: the product grid is the club's biggest
	   fundraiser and has to clear the fold, so this page's hero runs
	   shorter than the shared split-variant height above. Scoped to
	   page-id-13 (core's own body class) rather than a new pattern
	   variant, since every other split-hero page keeps the taller band. */
	.page-id-13 .usna-page-hero:not(.is-plain) {
		height: clamp(240px, 20.8vw, 320px);
	}
}

/* Plain variant (no usna_hero_image set): a flat Night Watch band, no
   photo column, 60 percent the split variant's height, closed out with
   the same rope rule that runs under the header. Used on pages with no
   fitting photo (Links, Contact, Privacy, Events keeps its own band)
   rather than forcing an unrelated image in. */
.usna-page-hero.is-plain .usna-page-hero-scrim {
	padding: 40px 20px 24px;
}

@media (min-width: 900px) {
	.usna-page-hero.is-plain .usna-page-hero-scrim {
		height: clamp(228px, 19.2vw, 312px);
		display: flex;
		align-items: center;
		padding: 0 56px;
	}
}

/* ------------------------------------------------------------------ */
/* Real photo strips (page content) */
/* ------------------------------------------------------------------ */

/* A row of matted .usna-photo-frame photos, used for the Crest Flags
   three-photo strip and the About page group pair/trio. One column on
   mobile, an even grid from 700px up. */
.usna-photo-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin: 32px 0;
}

@media (min-width: 700px) {
	.usna-photo-row {
		grid-template-columns: repeat(var(--usna-photo-row-cols, 3), 1fr);
	}
}

.usna-photo-row .usna-photo-frame img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Compact modifier: a small strip that sits above a page's main content
   (the Crest Flags product grid) instead of competing with it. Square
   photos in a tight 3-up row on mobile (about 110px each), 4:3 mats from
   700px up capped near 200px tall including the caption bar. Add this
   class alongside .usna-photo-row; it does not change the base rule so
   other pages using .usna-photo-row are unaffected. */
.usna-photo-row-compact {
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 24px 0;
	max-width: 400px;
}

.usna-photo-row-compact .usna-photo-frame {
	padding: 5px 5px 0;
}

.usna-photo-row-compact .usna-photo-frame img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.usna-photo-row-compact .usna-photo-frame .usna-photo-caption-bar {
	font-size: 10px;
	line-height: 1.3;
	letter-spacing: 0.04em;
	padding: 5px 6px;
	margin-top: 5px;
}

@media (min-width: 700px) {
	.usna-photo-row-compact {
		grid-template-columns: repeat(3, 1fr);
		max-width: 560px;
		gap: 12px;
	}

	.usna-photo-row-compact .usna-photo-frame {
		padding: 6px 6px 0;
	}

	.usna-photo-row-compact .usna-photo-frame img {
		aspect-ratio: 4 / 3;
	}

	.usna-photo-row-compact .usna-photo-frame .usna-photo-caption-bar {
		font-size: 11px;
		line-height: 1.3;
		letter-spacing: 0.06em;
		padding: 6px 8px;
		margin-top: 6px;
	}
}

/* Small square thumbnail dropped into an event list item, keeping the row
   a row rather than turning the list into a photo grid. */
.usna-event-photo-item {
	display: flex;
	align-items: center;
	gap: 14px;
	list-style: none;
}

.usna-event-photo-item .usna-event-thumb {
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	object-fit: cover;
	border: 1px solid var(--usna-sand-line);
}

.usna-event-photo-item p {
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* Members area */
/* ------------------------------------------------------------------ */

.usna-account-hero-lead {
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--usna-body-text);
	max-width: 42em;
	margin-top: 12px;
}

/* Sign in: two-column shell (form left, "not a member" panel right),
   replacing WooCommerce's stock Login/Register columns. Markup comes from
   the theme's woocommerce/myaccount/form-login.php override; open
   registration is disabled in WooCommerce settings so the Register column
   never renders. */
.usna-signin-shell {
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: flex-start;
}

@media (min-width: 900px) {
	.usna-signin-shell {
		flex-direction: row;
	}

	.usna-signin-form-panel {
		flex: 1.35;
	}

	.usna-signin-aside {
		flex: 1;
	}
}

.usna-signin-form-panel {
	width: 100%;
	border: 1px solid var(--usna-sand-line);
	background: var(--usna-white);
	padding: 28px;
	box-sizing: border-box;
}

.usna-signin-form-panel h2 {
	display: none;
}

.usna-signin-aside {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 20px;
	box-sizing: border-box;
}

.usna-signin-notmember {
	background: var(--usna-navy);
	color: var(--usna-nav-muted);
	padding: 24px;
}

.usna-signin-notmember .usna-eyebrow.on-dark {
	margin-bottom: 8px;
}

.usna-signin-notmember p {
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 16px;
}

.usna-signin-secondary {
	border: 1px solid var(--usna-sand-line);
	background: #FBF8F1;
	padding: 20px 22px;
}

.usna-signin-secondary p {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--usna-body-text);
	margin: 8px 0 0;
}

.usna-signin-secondary p:first-child {
	margin-top: 0;
}

.usna-signin-secondary strong {
	font-family: Cabin, Georgia, serif;
	font-size: 1.0625rem;
	color: var(--usna-navy);
}

.usna-signin-guest-note {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--usna-muted-label);
}

/* Members home (screen 04) */
/* ------------------------------------------------------------------ */

/* Sub-nav bar: replaces the left WooCommerce account sidebar on the
   dashboard only (body.usna-account-home, set by
   usnapccfl_account_dashboard_body_class()). Every other account screen
   (Orders, Addresses, Account details, Your Midshipman) keeps the
   sidebar as built. */
.usna-account-home .woocommerce-MyAccount-navigation {
	display: none;
}

.usna-account-home .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
}

/* WooCommerce's own block-theme stylesheet caps .woocommerce to 1000px
   and centers it inside main on every account, cart and checkout page
   (.woocommerce-account main .woocommerce), which is narrower than the
   site's own container and puts the dashboard out of line with the
   "Welcome back" heading above it. Match the site's container instead
   of the plugin default, scoped to the dashboard only; the extra class
   plus element in the selector below outweighs the plugin rule's own
   specificity so this wins without !important. */
body.usna-account-home main .woocommerce {
	max-width: 100%;
	margin: 0;
}

/* Bottom spacing before the footer on the account dashboard, matching
   the rest of the site's pages. The wrapping group already carries an
   inline padding-bottom (preset spacing 80, 64px) which stands at every
   width; this brings mobile down to the smaller spacing other pages use
   there. Beats the inline style, which needs !important either way. */
@media (max-width: 781px) {
	body.usna-account-home main > .wp-block-group:has(.wp-block-post-content) {
		padding-bottom: 40px !important;
	}
}

.usna-members-subnav {
	background: var(--usna-sand);
	border-bottom: 1px solid var(--usna-sand-line);
}

.usna-members-subnav-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	gap: 24px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

@media (min-width: 782px) {
	.usna-members-subnav-inner {
		padding-inline: 40px;
	}
}

.usna-members-subnav-link {
	color: var(--usna-muted-label);
	white-space: nowrap;
	text-decoration: none !important;
	padding-bottom: 6px;
}

.usna-members-subnav-link.is-active {
	color: var(--usna-navy);
	border-bottom: 3px solid var(--usna-navy);
	font-weight: 700;
}

.usna-members-subnav-signout {
	margin-left: auto;
}

/* Hero row: eyebrow + H1 on the left, the Paid-through / Expired chip on
   the right. Empty on every account screen but the dashboard (the
   status-chip shortcode returns '' elsewhere), so the row still lays out
   fine with just the titles. */
.usna-account-hero-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	flex-wrap: wrap;
}

.usna-account-hero-titles {
	min-width: 0;
}

.usna-account-status-chip {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--usna-success);
	background: var(--usna-success-tint);
	padding: 10px 16px;
	border-radius: 2px;
}

.usna-account-status-chip.is-expired {
	border-color: var(--usna-alert);
	background: var(--usna-notice-tint);
}

.usna-account-status-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--usna-success);
	flex: 0 0 auto;
}

.usna-account-status-chip.is-expired .usna-account-status-dot {
	background: var(--usna-alert);
}

.usna-account-status-text {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--usna-success);
}

.usna-account-status-chip.is-expired .usna-account-status-text {
	color: var(--usna-alert);
}

.usna-account-status-renew {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--usna-navy) !important;
	text-decoration: underline !important;
	text-decoration-color: var(--usna-alert) !important;
}

/* Dashboard body: six named grid areas so mobile can stack in the
   design's own order (Your Midshipman first) while desktop lays the
   same six blocks into two columns (Your next event / Members only /
   Recent orders left, Your Midshipman / Your account / Help the club
   right) - one set of markup, two arrangements, no duplicated cards. */
.usna-dashboard-grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"mid"
		"event"
		"members"
		"orders"
		"account"
		"help";
	gap: 24px;
}

@media (min-width: 900px) {
	.usna-dashboard-grid {
		grid-template-columns: 1.5fr 1fr;
		grid-template-areas:
			"event mid"
			"members account"
			"orders help";
		align-items: start;
	}
}

.usna-dash-area-mid { grid-area: mid; }
.usna-dash-area-event { grid-area: event; }
.usna-dash-area-members { grid-area: members; }
.usna-dash-area-orders { grid-area: orders; }
.usna-dash-area-account { grid-area: account; }
.usna-dash-area-help { grid-area: help; }

/* Customer dashboard (screen 04, customer state): recent orders and a
   short join invitation, no member furniture. */
.usna-dashboard-grid-customer {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"orders"
		"invite";
	gap: 24px;
}

@media (min-width: 900px) {
	.usna-dashboard-grid-customer {
		grid-template-columns: 1.5fr 1fr;
		grid-template-areas: "orders invite";
		align-items: start;
	}
}

.usna-dash-area-invite { grid-area: invite; }

.usna-customer-invite {
	background: var(--usna-navy);
	padding: 24px;
}

.usna-customer-invite .usna-quicklinks-title {
	color: var(--usna-gold);
}

.usna-customer-invite p {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--usna-nav-muted);
	margin: 10px 0 0;
}

.usna-customer-invite .usna-btn {
	margin-top: 16px;
}

.usna-dash-card {
	border: 1px solid var(--usna-sand-line);
	background: var(--usna-white);
}

.usna-dash-card-head {
	background: var(--usna-sand);
	padding: 12px 20px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	border-bottom: 1px solid var(--usna-sand-line);
}

.usna-dash-card-title {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--usna-navy);
}

.usna-dash-card-link {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--usna-navy) !important;
	text-decoration: none !important;
	white-space: nowrap;
}

.usna-dash-empty {
	padding: 20px;
	font-size: 1rem;
	color: var(--usna-body-text);
	margin: 0;
}

/* Your next event */
.usna-dash-event {
	padding: 20px;
	display: flex;
	gap: 18px;
	align-items: flex-start;
	flex-wrap: wrap;
}

.usna-dash-event-date {
	flex: 0 0 auto;
	background: var(--usna-navy);
	color: var(--usna-white);
	text-align: center;
	padding: 10px 16px;
	border-radius: 2px;
}

.usna-dash-event-month {
	display: block;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--usna-gold);
}

.usna-dash-event-day {
	display: block;
	font-family: Bevan, Georgia, serif;
	font-size: 1.75rem;
	line-height: 1;
}

.usna-dash-event-info {
	flex: 1;
	min-width: 200px;
}

.usna-dash-event-type {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--usna-muted-label);
}

.usna-dash-event-title {
	display: block;
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--usna-navy) !important;
	text-decoration: none !important;
	margin-top: 4px;
}

.usna-dash-event-desc {
	font-size: 1rem;
	line-height: 1.55;
	color: var(--usna-body-text);
	margin: 6px 0 0;
}

.usna-dash-rsvp-chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--usna-success);
	border: 1px solid var(--usna-success);
	padding: 8px 12px;
	border-radius: 2px;
}

/* Members only list */
.usna-dash-list {
	padding: 4px 20px 12px;
}

.usna-dash-list-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--usna-sand);
	text-decoration: none !important;
}

.usna-dash-list-row:last-child {
	border-bottom: 0;
}

.usna-dash-list-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.usna-dash-list-title {
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--usna-navy);
}

.usna-dash-list-desc {
	font-size: 0.9375rem;
	color: var(--usna-body-text);
}

.usna-dash-list-arrow {
	flex: 0 0 auto;
	color: var(--usna-muted-label);
	font-size: 1.25rem;
}

/* Recent orders */
.usna-dash-orders {
	padding: 4px 20px 12px;
}

.usna-dash-order-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 13px 0;
	border-bottom: 1px solid var(--usna-sand);
	text-decoration: none !important;
}

.usna-dash-order-row:last-child {
	border-bottom: 0;
}

.usna-dash-order-title {
	font-size: 1rem;
	color: var(--usna-body-text);
}

.usna-dash-order-title strong {
	color: var(--usna-navy);
}

.usna-dash-order-meta {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
}

.usna-order-status.is-good {
	color: var(--usna-success);
}

.usna-order-status.is-neutral {
	color: var(--usna-muted-label);
}

.usna-order-status.is-bad {
	color: var(--usna-alert);
}

.usna-dash-order-total {
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 1rem;
	color: var(--usna-navy);
}

/* Help the club: orange left rule notice, same tint as the site's other
   notice boxes. */
.usna-help-club-notice {
	border-left: 5px solid var(--usna-orange);
	background: var(--usna-notice-tint);
	padding: 18px 20px;
}

.usna-help-club-title {
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--usna-navy);
}

.usna-help-club-notice p {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--usna-body-text);
	margin: 6px 0 0;
}

.usna-help-club-link {
	display: inline-block;
	margin-top: 12px;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--usna-navy) !important;
	text-decoration: none !important;
}

/* "Finish your family profile" navy notice: verb + segmented bar +
   Continue, deliberately no percentage figure. */
.usna-profile-notice {
	background: var(--usna-navy);
	padding: 20px 24px;
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.usna-profile-notice-copy {
	flex: 1;
	min-width: 260px;
}

.usna-profile-notice-title {
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--usna-white);
}

.usna-profile-notice-sub {
	font-size: 1rem;
	line-height: 1.55;
	color: var(--usna-nav-muted);
	margin: 4px 0 0;
}

.usna-profile-notice-bar {
	display: flex;
	gap: 5px;
	margin-top: 12px;
	max-width: 320px;
}

.usna-profile-notice-bar span {
	height: 5px;
	flex: 1;
	background: var(--usna-navy-panel);
}

.usna-profile-notice-bar span.is-done {
	background: var(--usna-gold);
}

/* Your Midshipman summary card, navy fill, matching the design's
   dashboard sidebar block. */
.usna-mid-summary-card {
	background: var(--usna-navy);
	border: 0;
	padding: 22px 24px;
}

.usna-mid-summary-eyebrow {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--usna-gold);
}

.usna-mid-summary-name {
	font-family: Bevan, Georgia, serif;
	font-size: 1.25rem;
	line-height: 1.15;
	color: var(--usna-white);
	text-transform: uppercase;
	margin-top: 8px;
}

.usna-mid-summary-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 12px;
}

.usna-mid-summary-chip {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 2px;
	color: var(--usna-nav-muted);
	border: 1px solid var(--usna-navy-panel);
}

.usna-mid-summary-chip.is-year {
	color: var(--usna-navy);
	background: var(--usna-gold);
	border-color: var(--usna-gold);
}

.usna-mid-summary-edit {
	display: inline-block;
	margin-top: 16px;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--usna-gold) !important;
	text-decoration: none !important;
}

.usna-quicklinks-title {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--usna-muted-label);
	margin-bottom: 12px;
}

.usna-quicklinks-card {
	background: #FBF8F1;
	border: 1px solid var(--usna-sand-line);
	padding: 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.usna-quicklinks-card a {
	font-size: 1rem;
	color: var(--usna-navy);
}

/* Your Midshipman wizard: heading, tab strip, stacked fields. */
.usna-wizard-heading {
	font-family: Bevan, Georgia, serif;
	font-size: 1.875rem;
	line-height: 1.1;
	color: var(--usna-navy);
	text-transform: uppercase;
	margin: 6px 0 0;
}

.usna-wizard-intro {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--usna-body-text);
	max-width: 46em;
	margin: 10px 0 0;
}

.usna-wizard-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 24px 0 0;
	border-bottom: 2px solid var(--usna-sand-line);
}

.usna-wizard-tab {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--usna-muted-label);
	text-decoration: none !important;
}

.usna-wizard-tab.is-done {
	color: var(--usna-navy);
}

.usna-wizard-tab-check {
	color: var(--usna-success);
	font-weight: 700;
}

.usna-wizard-tab.is-current {
	background: var(--usna-navy);
	color: var(--usna-white);
	font-weight: 700;
	border-radius: 2px 2px 0 0;
}

.usna-wizard-field-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	margin-top: 26px;
}

@media (min-width: 700px) {
	.usna-wizard-field-grid {
		grid-template-columns: 1fr 1fr;
		gap: 18px 24px;
	}

	.usna-wizard-field.is-wide {
		grid-column: 1 / -1;
	}
}

.usna-wizard-field {
	display: flex;
	flex-direction: column;
}

.usna-wizard-actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--usna-sand-line);
}

.usna-wizard-back {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--usna-navy);
}

.usna-wizard-finish-later {
	background: none;
	border: 0;
	padding: 0;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--usna-navy);
	text-decoration: underline;
	text-decoration-color: var(--usna-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* Account sidebar: 46px rows, current page navy fill with a brass left
   rule, Log out set off below a divider - matching the design's explicit
   note that these are nav rows, not cards. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	border: 1px solid var(--usna-sand-line);
	background: #FBF8F1;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	min-height: 46px;
	padding: 10px 18px;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-left: 4px solid transparent;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	border-left-color: var(--usna-gold);
	font-weight: 700;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
	border-top: 2px solid var(--usna-sand-line);
	margin-top: 6px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
	background: #FBF8F1;
	color: var(--usna-muted-label);
	border-left-color: transparent;
}

/* Mobile: the vertical sidebar becomes a horizontal, scrollable chip row
   above the content, so the page does not open on a full screen of nav
   links before any account content. */
@media (max-width: 780px) {
	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-direction: row;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		border: 0;
		background: none;
		gap: 8px;
		padding-bottom: 4px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li {
		border-top: 0;
		flex: 0 0 auto;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation a {
		border: 1px solid var(--usna-sand-line);
		border-left: 1px solid var(--usna-sand-line);
		border-radius: 2px;
		background: var(--usna-white);
		white-space: nowrap;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
		background: var(--usna-navy);
		color: var(--usna-white);
		border-color: var(--usna-navy);
		border-left-color: var(--usna-gold);
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
		border-top: 0;
		margin-top: 0;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
		background: var(--usna-white);
	}
}

/* Header account pill: class year under the label, desktop only (mobile
   keeps the plain initials square the design shows at 390). */
.usna-account-pill .usna-account-year {
	display: none;
}

@media (min-width: 640px) {
	.usna-account-pill-text {
		display: flex;
		flex-direction: column;
		line-height: 1.2;
	}

	.usna-account-pill .usna-account-year {
		display: block;
		font-family: "Barlow Condensed", Arial Narrow, sans-serif;
		font-weight: 600;
		font-size: 13px;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--usna-gold);
	}

	.usna-account-pill .usna-account-year:empty {
		display: none;
	}
}

/* wp-login.php: brand the fallback core login screen (password reset,
   "set your password" after checkout, and any direct wp-login.php visit)
   to match the themed My Account sign-in rather than leaving WordPress's
   stock look. */
body.login {
	background: var(--usna-sand);
	font-family: Cabin, Georgia, serif;
}

body.login #login h1 a {
	background-image: url("../images/logo-400.png");
	background-size: contain;
	width: 260px;
	height: 90px;
}

body.login #loginform,
body.login #lostpasswordform,
body.login #resetpassform,
body.login #registerform {
	border: 1px solid var(--usna-sand-line);
	border-radius: 2px;
	box-shadow: none;
}

body.login label {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--usna-muted-label);
}

body.login .button-primary {
	background: var(--usna-navy);
	border-color: var(--usna-navy);
	color: var(--usna-white);
	text-shadow: none;
	box-shadow: none;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	height: auto;
	padding: 10px 20px;
	border-radius: 2px;
}

body.login .button-primary:hover,
body.login .button-primary:focus {
	background: var(--usna-night-watch);
	border-color: var(--usna-night-watch);
}

body.login #nav a,
body.login #backtoblog a {
	color: var(--usna-navy);
}

/* ------------------------------------------------------------------ */
/* Signed-out notice */
/* ------------------------------------------------------------------ */

.usna-signed-out-notice {
	position: relative;
	max-width: 1180px;
	margin: 0 auto;
	padding-inline: 20px;
	border-radius: 0;
}

.usna-signed-out-notice p {
	margin: 0;
	padding-right: 28px;
}

.usna-notice-dismiss {
	position: absolute;
	top: 10px;
	right: 16px;
	width: 24px;
	height: 24px;
	line-height: 1;
	border: none;
	background: transparent;
	color: var(--usna-muted-label);
	font-size: 20px;
	cursor: pointer;
}

.usna-notice-dismiss:hover,
.usna-notice-dismiss:focus {
	color: var(--usna-navy);
}

@media (min-width: 782px) {
	.usna-signed-out-notice {
		padding-inline: 40px;
	}
}

/* ------------------------------------------------------------------ */
/* Events: editable events */
/* ------------------------------------------------------------------ */

.usna-event-row.is-past {
	opacity: 0.6;
}

.usna-event-row.is-past .usna-event-cta-slot {
	padding-top: 16px;
}

.usna-event-photo-item.usna-event-row.is-full {
	align-items: flex-start;
}

@media (min-width: 900px) {
	.usna-event-photo-item.usna-event-row.is-full {
		align-items: stretch;
	}

	.usna-event-photo-item.usna-event-row.is-full .usna-event-thumb {
		align-self: center;
	}
}

.usna-rsvp-card .usna-field-row {
	margin-bottom: 14px;
}

.usna-rsvp-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Event RSVP panel (Event RSVP.dc.html): the navy "ask one question"
   card for a signed-in member, the green confirmed state it replaces
   itself with, and the plain white/tan cards for Details to come, RSVP
   closed and Event has passed. Members-only gating reuses .usna-locked. */
/* ------------------------------------------------------------------ */

.usna-rsvp-panel {
	background: var(--usna-navy);
	padding: 22px;
}

.usna-rsvp-panel-sub {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--usna-nav-muted);
	margin-top: 8px;
}

.usna-rsvp-inner {
	background: var(--usna-white);
	padding: 20px;
	margin-top: 18px;
}

.usna-rsvp-identity {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--usna-sand);
}

.usna-rsvp-identity-name {
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 17px;
	color: var(--usna-navy);
}

.usna-rsvp-identity-email {
	font-size: 1rem;
	color: var(--usna-muted-label);
}

.usna-rsvp-change {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--usna-navy);
	white-space: nowrap;
}

.usna-rsvp-field {
	margin-top: 16px;
}

.usna-rsvp-field .usna-field-help {
	margin-top: 8px;
}

.usna-rsvp-note {
	width: 100%;
	border: 1px solid var(--usna-card-border);
	background: var(--usna-white);
	padding: 12px 14px;
	font-size: 1rem;
	font-family: Cabin, Georgia, serif;
	border-radius: var(--usna-radius-control);
	min-height: 72px;
	box-sizing: border-box;
	color: var(--usna-ink);
	margin-top: 8px;
}

.usna-rsvp-confirmed {
	border: 2px solid var(--usna-success);
	background: var(--usna-white);
	padding: 22px;
}

.usna-rsvp-confirmed-badge {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--usna-success);
}

.usna-rsvp-confirmed-badge span {
	width: 26px;
	height: 26px;
	background: var(--usna-success);
	color: var(--usna-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 700;
	border-radius: var(--usna-radius-control);
}

.usna-rsvp-confirmed h3 {
	font-family: Bevan, Georgia, serif;
	font-size: 22px;
	line-height: 1.12;
	color: var(--usna-navy);
	text-transform: uppercase;
	margin: 14px 0 0;
}

.usna-rsvp-confirmed-actions {
	display: flex;
	gap: 10px;
	margin-top: 18px;
	flex-wrap: wrap;
}

.usna-rsvp-cancel {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--usna-alert);
	background: none;
	border: 0;
	padding: 11px 0;
	min-height: 44px;
	cursor: pointer;
}

.usna-rsvp-state-card {
	background: var(--usna-white);
	border: 1px solid var(--usna-sand-line);
	padding: 22px;
}

.usna-rsvp-state-card.is-tbd {
	border-left: 5px solid var(--usna-orange);
}

.usna-rsvp-state-card.is-past {
	background: #F4EFE4;
}

.usna-rsvp-state-card h3 {
	font-family: Bevan, Georgia, serif;
	font-size: 21px;
	line-height: 1.15;
	color: var(--usna-navy);
	text-transform: uppercase;
	margin: 10px 0 0;
}

.usna-rsvp-state-card p {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--usna-body-text);
	margin-top: 8px;
}

.usna-rsvp-state-actions {
	display: flex;
	gap: 10px;
	margin-top: 16px;
	flex-wrap: wrap;
}

/* Event detail hero facts (time, where, cost, who): each fact gets its own
   label, on the navy hero band. */
.usna-event-facts {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.usna-event-fact {
	display: flex;
	gap: 14px;
	align-items: baseline;
	flex-wrap: wrap;
}

.usna-event-fact-label {
	flex: 0 0 72px;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--usna-muted-label);
}

.usna-event-fact-label.on-dark {
	color: var(--usna-gold);
}

.usna-event-fact-value {
	font-size: 1.0625rem;
	color: var(--usna-body-text);
}

.usna-event-fact-value.on-dark {
	color: var(--usna-nav-muted);
}

.usna-event-fact-value.is-strong {
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 19px;
}

.usna-event-fact-value.is-strong.on-dark {
	color: var(--usna-white);
}

/* Event detail: content and the RSVP side sit in one shared layout so the
   side can move ahead of the content in source order (mobile: facts, RSVP,
   then the description and photo) while desktop places them side by side
   without re-ordering anything. */
.usna-event-detail-layout {
	padding: 32px 20px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 1180px;
	margin: 0 auto;
}

@media (min-width: 900px) {
	.usna-event-detail-layout {
		display: grid;
		grid-template-columns: 1fr 400px;
		grid-template-areas: "content side";
		gap: 40px;
		align-items: start;
		padding: 48px 40px;
	}

	.usna-event-detail-content {
		grid-area: content;
	}

	.usna-event-detail-side {
		grid-area: side;
	}
}

.usna-event-hero-meta .usna-event-date {
	width: 74px;
}

/* Photo albums, /photos and the event detail gallery: same matted frame
   treatment as the Crest Flags and About photo strips. */
.usna-photo-album h2 {
	font-family: Bevan, Georgia, serif;
	text-transform: uppercase;
	color: var(--usna-navy);
	font-size: clamp(1.375rem, 1.19rem + 0.25vw, 1.75rem);
}

/* ------------------------------------------------------------------ */
/* Mobile nav drawer (tail item): full-screen drawer, matching
   Navigation.dc.html: inset 0, Night Watch background (already set
   above), scrollable, closes on the X and Escape (core's own behavior),
   body scroll locked while open via .usna-menu-open on <html>
   (assets/js/header-account-menu.js). !important is required because
   core's own navigation block CSS ships a higher-specificity default
   that would otherwise win regardless of load order, and without this
   fix the open menu rendered in normal document flow, pushing page
   content down instead of covering it. */
.usna-header-nav .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed !important;
	inset: 0 !important;
	z-index: 100000;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

html.usna-menu-open,
html.usna-menu-open body {
	overflow: hidden !important;
	height: 100%;
}

/* News archive (templates/home.html, templates/archive.html): core's
   Query/Post Template blocks, restyled to match the site's card language
   instead of default WordPress list markup. */
.usna-news-archive-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 700px) {
	.usna-news-archive-grid .wp-block-post-template {
		grid-template-columns: repeat(3, 1fr);
	}
}

.usna-news-archive-grid .wp-block-post-template > li {
	background: var(--usna-white);
	border: 1px solid var(--usna-sand-line);
}

.usna-news-archive-grid .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.usna-news-archive-grid .wp-block-post-title,
.usna-news-archive-grid .wp-block-post-date,
.usna-news-archive-grid .wp-block-post-excerpt {
	margin: 8px 16px;
}

.usna-news-archive-grid .wp-block-post-title a {
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	color: var(--usna-navy);
	text-decoration: none;
}

.usna-news-archive-grid .wp-block-post-title:last-child,
.usna-news-archive-grid .wp-block-post-excerpt:last-child {
	margin-bottom: 20px;
}

.usna-news-archive-grid .wp-block-query-pagination {
	margin-top: 32px;
}

/* WPForms: Contact Us form, themed to match the card inputs. WPForms Lite
   ships its own base CSS with matching selector weight, so the field rules
   below repeat the selector once with the plugin's own field-size wrapper
   classes to win on source order without needing !important. */
.wpforms-container {
	margin: 0;
}

.wpforms-container .wpforms-field {
	padding: 0 0 20px;
}

.wpforms-container .wpforms-field-label {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--usna-navy);
	margin-bottom: 6px;
}

.wpforms-container .wpforms-field-required {
	color: var(--usna-alert);
}

.wpforms-container .wpforms-field input[type="text"],
.wpforms-container .wpforms-field input[type="email"],
.wpforms-container .wpforms-field-medium input[type="text"],
.wpforms-container .wpforms-field-medium input[type="email"],
.wpforms-container .wpforms-field select,
.wpforms-container .wpforms-field-medium select,
.wpforms-container .wpforms-field textarea,
.wpforms-container .wpforms-field-medium textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	font-family: Cabin, Georgia, serif;
	font-size: 1rem;
	color: var(--usna-ink);
	background: #FFFFFF;
	border: 2px solid var(--usna-disabled);
	border-radius: 2px;
	padding: 13px 12px;
	min-height: 48px;
}

.wpforms-container .wpforms-field textarea {
	min-height: 110px;
	resize: vertical;
}

.wpforms-container .wpforms-field input[type="text"]:focus,
.wpforms-container .wpforms-field input[type="email"]:focus,
.wpforms-container .wpforms-field select:focus,
.wpforms-container .wpforms-field textarea:focus {
	border-color: var(--usna-navy);
	outline: none;
}

.wpforms-container .wpforms-field-select-style-classic .wpforms-field-medium {
	max-width: 100%;
}

/* WPForms' own frontend CSS sets this button's background/color through
   div.wpforms-container-full button[type="submit"]:not(:hover):not(:active),
   at specificity (0,4,2), which outranks a plain .wpforms-container
   button[type="submit"].wpforms-submit rule at (0,3,1) — the border and
   min-height above still won because WPForms' matching rule for those
   properties carries lower specificity, but background and color lost
   silently. Matching WPForms' own :not(:hover):not(:active) qualifier
   and adding .wpforms-container-full brings this rule to (0,6,1), which
   wins outright without !important. */
.wpforms-container.wpforms-container-full button[type="submit"].wpforms-submit:not(:hover):not(:active) {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 2px;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 28px;
	cursor: pointer;
	line-height: 1;
	box-sizing: border-box;
	background: var(--usna-gold);
	color: var(--usna-navy);
	border: 0;
	border-bottom: 3px solid var(--usna-gold-shadow);
	margin-top: 4px;
}

.wpforms-container.wpforms-container-full button[type="submit"].wpforms-submit:hover,
.wpforms-container.wpforms-container-full button[type="submit"].wpforms-submit:active {
	background: var(--usna-gold-hover);
	color: var(--usna-navy);
	border: 0;
	border-bottom: 3px solid var(--usna-gold-shadow);
}

.wpforms-container .wpforms-confirmation-container-full,
.wpforms-confirmation-container-full {
	font-family: Cabin, Georgia, serif;
	color: var(--usna-ink);
	background: #FFFFFF;
	border: 1px solid var(--usna-sand-line, #DCCFB6);
	border-radius: 2px;
	padding: 16px;
}

/* ------------------------------------------------------------------ */
/* Crest Flags page: hero, facts strip, filter chips, class-year grid and
   rows, mini cart, photo row, FAQ, closing band, mobile sticky checkout
   bar. Rendered by [usnapccfl_crest_flags_full] in
   usnapccfl-core/inc/flags.php; behavior in
   usnapccfl-core/assets/js/crest-flags.js. */
/* ------------------------------------------------------------------ */

/* Hero */
.usna-flags-hero {
	background: var(--usna-night-watch);
	display: flex;
	flex-direction: column;
}

.usna-flags-hero-text {
	padding: 40px 20px;
}

.usna-flags-hero-h1 {
	font-family: Bevan, Georgia, serif;
	color: var(--usna-white);
	text-transform: uppercase;
	font-size: clamp(2.125rem, 1.8rem + 1.4vw, 3.375rem);
	line-height: 1.05;
	margin: 10px 0 0;
}

.usna-flags-hero-lead {
	font-size: 20px;
	line-height: 1.5;
	color: var(--usna-white);
	margin: 16px 0 0;
	max-width: 26em;
}

.usna-flags-hero-body {
	font-size: 17px;
	line-height: 1.6;
	color: var(--usna-nav-muted);
	margin: 14px 0 0;
	max-width: 30em;
}

.usna-flags-hero-price-row {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-top: 22px;
	flex-wrap: wrap;
}

.usna-flags-hero-price {
	font-family: Bevan, Georgia, serif;
	font-size: 34px;
	color: var(--usna-gold);
	line-height: 1;
}

.usna-flags-hero-price-label {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--usna-white);
}

.usna-flags-hero-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px;
}

.usna-flags-hero-auth {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid #2A3A5A;
	font-size: 17px;
	line-height: 1.6;
	color: var(--usna-white);
	max-width: 27em;
}

.usna-flags-hero-media {
	background: #0F1A2E;
	aspect-ratio: 3 / 2;
}

.usna-flags-hero-media img,
.usna-flags-hero-media .usna-flags-hero-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.usna-flags-hero-media .usna-photo-placeholder {
	width: 100%;
	height: 100%;
}

@media (min-width: 900px) {
	.usna-flags-hero {
		flex-direction: row;
		align-items: stretch;
	}

	.usna-flags-hero-text {
		flex: 1.02;
		padding: 48px 40px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.usna-flags-hero-media {
		flex: 1;
		aspect-ratio: auto;
	}
}

/* Facts strip */
.usna-flags-facts {
	background: var(--usna-sand);
	border-bottom: 1px solid var(--usna-sand-line);
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	padding: 22px 20px;
}

.usna-flags-facts p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--usna-body-text);
	margin: 6px 0 0;
}

@media (min-width: 700px) {
	.usna-flags-facts {
		grid-template-columns: 1fr 1fr 1fr;
		padding: 22px 40px;
	}
}

/* Step one of one / picker head */
.usna-flags-picker-head {
	padding: 32px 20px 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.usna-flags-h2 {
	font-family: Bevan, Georgia, serif;
	color: var(--usna-navy);
	text-transform: uppercase;
	font-size: clamp(1.5rem, 1.35rem + 0.5vw, 2rem);
	line-height: 1.1;
	margin: 6px 0 0;
}

.usna-flags-picker-note {
	font-size: 16px;
	line-height: 1.6;
	color: var(--usna-body-text);
	max-width: 30em;
	margin: 0;
}

@media (min-width: 900px) {
	.usna-flags-picker-head {
		padding: 34px 40px 0;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		gap: 20px;
	}
}

/* Filter chips row */
.usna-flags-chips-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 20px 20px 0;
}

.usna-flags-chips-row .usna-chip {
	flex: 0 0 auto;
	white-space: nowrap;
}

@media (min-width: 900px) {
	.usna-flags-chips-row {
		padding: 20px 40px 0;
	}
}

/* Section head, shared by the academy grid, graduated list, photo row and FAQ */
.usna-flags-section {
	padding: 26px 20px 8px;
}

.usna-flags-section-head {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--usna-gold);
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--usna-navy);
}

.usna-flags-section-note {
	font-family: Cabin, Georgia, serif;
	font-weight: 400;
	font-size: 15px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--usna-muted-label);
}

.usna-flags-section-intro {
	font-size: 16px;
	line-height: 1.6;
	color: var(--usna-body-text);
	max-width: 48em;
	margin: 12px 0 0;
}

@media (min-width: 900px) {
	.usna-flags-section {
		padding: 26px 40px 8px;
	}

	.usna-flags-section-head {
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;
	}
}

/* The filter chips toggle each card/row's native `hidden` attribute
   (see crest-flags.js). Both card types set their own `display` below,
   which is author-origin CSS and otherwise wins over the browser's
   default `[hidden] { display: none }` user-agent rule - without this,
   a filtered-out card keeps its layout box and stays visible. */
[data-usna-flag-card][hidden] {
	display: none !important;
}

/* "Currently at the Academy" grid */
.usna-flags-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-top: 18px;
}

@media (min-width: 560px) {
	.usna-flags-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1080px) {
	.usna-flags-grid {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}

.usna-flags-card {
	border: 1px solid var(--usna-sand-line);
	background: var(--usna-white);
	display: flex;
	flex-direction: column;
}

.usna-flags-card.is-newest {
	border: 2px solid var(--usna-navy);
}

.usna-flags-card-tag {
	background: var(--usna-sand);
	padding: 7px 14px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--usna-muted-label);
}

.usna-flags-card.is-newest .usna-flags-card-tag {
	background: var(--usna-navy);
	justify-content: space-between;
	color: var(--usna-white);
}

.usna-flags-card.is-newest .usna-flags-card-tag-label {
	color: var(--usna-gold);
}

.usna-flags-card .usna-product-media {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	aspect-ratio: 3 / 2;
	border-radius: 0;
	background: var(--usna-navy);
}

.usna-flags-card .usna-product-media img,
.usna-flags-card .usna-product-media .usna-product-photo {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.usna-flags-card-body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.usna-flags-card-year-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.usna-flags-card-year {
	font-family: Bevan, Georgia, serif;
	font-size: 24px;
	line-height: 1;
	color: var(--usna-navy);
}

.usna-flags-card-label {
	font-family: Cabin, Georgia, serif;
	font-weight: 600;
	font-size: 15px;
	color: var(--usna-body-text);
	margin-top: 4px;
}

.usna-flags-card-price {
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 19px;
	color: var(--usna-navy);
}

/* Stock status dot, shared by the grid cards and the graduated rows */
.usna-flags-status {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.usna-flags-status-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.usna-flags-status-instock,
.usna-flags-status-lowstock {
	color: var(--usna-success);
}

.usna-flags-status-instock .usna-flags-status-dot {
	background: var(--usna-success);
}

.usna-flags-status-lowstock {
	color: var(--usna-alert);
}

.usna-flags-status-lowstock .usna-flags-status-dot {
	background: var(--usna-orange);
}

.usna-flags-status-soldout,
.usna-flags-status-arrives {
	color: var(--usna-muted-label);
}

.usna-flags-status-soldout .usna-flags-status-dot,
.usna-flags-status-arrives .usna-flags-status-dot {
	background: var(--usna-disabled);
}

/* Quantity stepper: 48px squares, 2px navy borders (design tokens) */
.usna-flags-stepper {
	display: flex;
	align-items: center;
	border: 1px solid #B9AC93;
	border-radius: var(--usna-radius-control);
	background: var(--usna-white);
	width: fit-content;
}

.usna-flags-stepper-btn {
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	color: var(--usna-navy);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.usna-flags-stepper-input {
	width: 32px;
	height: 44px;
	border: 0;
	border-left: 1px solid #B9AC93;
	border-right: 1px solid #B9AC93;
	text-align: center;
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 16px;
	color: var(--usna-navy);
	-moz-appearance: textfield;
}

.usna-flags-stepper-input::-webkit-outer-spin-button,
.usna-flags-stepper-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.usna-flags-add-form {
	display: flex;
	gap: 8px;
	margin-top: auto;
}

.usna-flags-add-btn {
	flex: 1;
	min-height: 44px;
	padding: 0 14px;
}

/* Notify me capture, used on a not-yet-released or sold-out card */
.usna-flags-notify-form {
	margin-top: auto;
}

.usna-flags-notify-row {
	display: flex;
	gap: 8px;
}

.usna-flags-notify-input {
	flex: 1;
	min-height: 44px;
	border: 1px solid #B9AC93;
	border-radius: var(--usna-radius-control);
	padding: 0 12px;
	font-family: Cabin, Georgia, serif;
	font-size: 15px;
	color: var(--usna-ink);
	box-sizing: border-box;
}

.usna-flags-notify-btn {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 16px;
	background: transparent;
	color: var(--usna-navy);
	border: 2px solid var(--usna-navy);
	border-radius: var(--usna-radius-control);
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.usna-flags-notify-btn:hover {
	background: var(--usna-navy);
	color: var(--usna-white);
}

.usna-flags-notify-msg {
	font-size: 14px;
	margin-top: 6px;
	min-height: 1.4em;
}

.usna-flags-notify-msg.is-success {
	color: var(--usna-success);
}

.usna-flags-notify-msg.is-error {
	color: var(--usna-alert);
}

.usna-flags-notify-form.is-submitted .usna-flags-notify-row {
	opacity: 0.5;
	pointer-events: none;
}

.usna-hp-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* Top block: the newest crest's full card beside a compact list of every
   other year that can actually be bought right now. Single column, hero
   card first, on narrow widths; two columns from 900px. */
.usna-flags-top-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	margin-top: 18px;
}

@media (min-width: 900px) {
	.usna-flags-top-grid {
		grid-template-columns: 1.35fr 1fr;
		align-items: stretch;
	}
}

.usna-flags-top-empty {
	border: 1px solid var(--usna-sand-line);
	background: var(--usna-white);
	padding: 22px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--usna-body-text);
}

.usna-flags-top-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.usna-flags-top-list-head {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--usna-navy);
	padding-bottom: 6px;
	border-bottom: 2px solid var(--usna-gold);
}

.usna-flags-top-list-head:not(:first-child) {
	margin-top: 6px;
}

.usna-flags-top-list-note {
	font-size: 15px;
	color: var(--usna-muted-label);
}

/* "Not available yet": every current class with no crest finalized,
   collapsed into one row with a year picker instead of one card each. */
.usna-flags-notify-band {
	margin: 22px 20px 0;
	border: 1px solid var(--usna-sand-line);
	background: var(--usna-sand);
	padding: 20px 22px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

@media (min-width: 900px) {
	.usna-flags-notify-band {
		margin: 22px 40px 0;
	}
}

.usna-flags-notify-band-copy {
	flex: 1 1 360px;
}

.usna-flags-notify-band-label {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--usna-muted-label);
}

.usna-flags-notify-band-copy p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--usna-body-text);
	margin: 6px 0 0;
}

.usna-flags-notify-band-form {
	flex: 0 0 auto;
	margin-top: 0;
}

.usna-flags-notify-band-form .usna-flags-notify-row {
	flex-wrap: wrap;
	align-items: center;
}

.usna-flags-notify-year-select {
	min-height: 46px;
	border: 1px solid #B9AC93;
	border-radius: var(--usna-radius-control);
	padding: 0 12px;
	font-family: Cabin, Georgia, serif;
	font-size: 16px;
	color: var(--usna-navy);
	background: var(--usna-white);
}

/* Compact row: the graduated list below, and (reused) a buyable
   current-class year shown beside the top block's hero card. */
.usna-flags-graduated-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-top: 18px;
}

@media (min-width: 700px) {
	.usna-flags-graduated-list {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1080px) {
	.usna-flags-graduated-list {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}

.usna-flags-row {
	border: 1px solid var(--usna-sand-line);
	background: var(--usna-white);
	padding: 12px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.usna-flags-row-media {
	flex: 0 0 auto;
	width: 62px;
	height: 42px;
	background: var(--usna-sand);
	border: 1px solid var(--usna-sand-line);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--usna-muted-label);
	text-decoration: none;
}

.usna-flags-row-media:has(img) {
	background: var(--usna-navy);
}

.usna-flags-row-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.usna-flags-row-body {
	flex: 1;
	min-width: 0;
}

.usna-flags-row-year {
	display: block;
	font-family: Bevan, Georgia, serif;
	font-size: 19px;
	line-height: 1;
	color: var(--usna-navy);
	text-decoration: none;
}

.usna-flags-row-status {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--usna-success);
	margin-top: 4px;
}

.usna-flags-row[data-status="soldout"] .usna-flags-row-status,
.usna-flags-row[data-status="arrives"] .usna-flags-row-status {
	color: var(--usna-muted-label);
}

.usna-flags-row-action {
	flex: 0 0 auto;
}

.usna-flags-row-action .usna-flags-add-form {
	margin-top: 0;
}

.usna-flags-row-action .usna-flags-add-btn {
	background: transparent;
	color: var(--usna-navy);
	border: 2px solid var(--usna-navy);
	padding: 0 14px;
}

.usna-flags-row-action .usna-flags-add-btn:hover {
	background: var(--usna-navy);
	color: var(--usna-white);
}

.usna-flags-row-action .usna-flags-stepper {
	display: none;
}

.usna-flags-row-action .usna-flags-notify-row {
	flex-direction: column;
	align-items: flex-end;
}

.usna-flags-empty-msg {
	padding: 0 20px;
	font-size: 15px;
	color: var(--usna-muted-label);
}

@media (min-width: 900px) {
	.usna-flags-empty-msg {
		padding: 0 40px;
	}
}

/* Buying more than one */
.usna-flags-buy-more {
	margin: 30px 20px 0;
	background: var(--usna-sand);
	border: 1px solid var(--usna-sand-line);
	padding: 22px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.usna-flags-buy-more-copy p {
	font-size: 16px;
	line-height: 1.65;
	color: var(--usna-body-text);
	margin-top: 8px;
}

@media (min-width: 900px) {
	.usna-flags-buy-more {
		margin: 30px 40px 0;
		grid-template-columns: 1.3fr 1fr;
		align-items: center;
	}
}

.usna-mini-cart-summary {
	background: var(--usna-white);
	border: 1px solid var(--usna-sand-line);
	padding: 18px;
}

.usna-mini-cart-title {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--usna-muted-label);
}

.usna-mini-cart-empty {
	font-size: 15px;
	color: var(--usna-slate);
	margin-top: 10px;
}

.usna-mini-cart-line {
	display: flex;
	justify-content: space-between;
	font-size: 16px;
	color: var(--usna-body-text);
	margin-top: 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--usna-sand);
}

.usna-mini-cart-line-price {
	font-weight: 700;
	color: var(--usna-navy);
}

.usna-mini-cart-included {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--usna-success);
}

.usna-mini-cart-total {
	display: flex;
	justify-content: space-between;
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 19px;
	color: var(--usna-navy);
	margin-top: 10px;
}

.usna-mini-cart-summary .usna-btn {
	display: flex;
	width: 100%;
	margin-top: 14px;
}

/* FAQ */
.usna-flags-faq {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	margin-top: 20px;
}

.usna-flags-faq-col {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.usna-flags-faq-q {
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 17px;
	color: var(--usna-navy);
}

.usna-flags-faq-a {
	font-size: 16px;
	line-height: 1.6;
	color: var(--usna-body-text);
	margin-top: 4px;
}

@media (min-width: 900px) {
	.usna-flags-faq {
		grid-template-columns: 1fr 1fr;
		gap: 26px;
	}
}

/* Closing band, reuses .usna-band-navy */
.usna-flags-closing {
	margin-top: 34px;
	padding: 30px 20px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: flex-start;
}

.usna-flags-closing-title {
	font-family: Bevan, Georgia, serif;
	font-size: clamp(1.375rem, 1.15rem + 0.94vw, 1.75rem);
	line-height: 1.15;
	color: var(--usna-white);
	text-transform: uppercase;
}

.usna-flags-closing p {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--usna-nav-muted);
	margin-top: 8px;
	max-width: 44em;
}

@media (min-width: 900px) {
	.usna-flags-closing {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 34px 40px;
	}
}

/* Mobile sticky checkout bar: flag count, shipping included, total, Check
   out. Hidden by default (both the [hidden] attribute the PHP renders and
   this display rule); shown only once the cart has something in it, and
   only below the desktop breakpoint - the "Ordering more than one" band's
   own mini cart already covers this at desktop widths. */
.usna-flags-sticky-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	background: var(--usna-navy);
	border-top: 3px solid var(--usna-gold);
	padding: 14px 20px;
	display: flex;
	align-items: center;
	gap: 14px;
}

.usna-flags-sticky-bar[hidden] {
	display: none;
}

.usna-flags-sticky-info {
	flex: 1;
	min-width: 0;
}

.usna-flags-sticky-count {
	display: block;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--usna-gold);
}

.usna-flags-sticky-total {
	display: block;
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--usna-white);
}

.usna-flags-sticky-bar .usna-btn {
	flex: 0 0 auto;
}

@media (min-width: 900px) {
	.usna-flags-sticky-bar {
		display: none !important;
	}
}

/* ------------------------------------------------------------------ */
/* Crest Flag single product page as a landing page                    */
/* Scoped by usnapccfl_is_flag_product() in inc/flag-year-page.php, so */
/* these classes only ever render on a Crest Flags product page - a    */
/* membership, donation or name-badge product on the same              */
/* single-product.html template is unaffected.                         */
/* ------------------------------------------------------------------ */

.usna-flag-single-lines {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--usna-sand-line);
	max-width: 32em;
}

.usna-flag-single-auth,
.usna-flag-single-ship {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--usna-body-text);
	margin: 0;
}

.usna-flag-single-auth + .usna-flag-single-ship {
	margin-top: 6px;
}

.usna-flag-single-other-years {
	max-width: 1180px;
	margin: 0 auto;
	padding: 32px 20px 0;
	border-top: 1px solid var(--usna-sand-line);
}

@media (min-width: 782px) {
	.usna-flag-single-other-years {
		padding: 40px 40px 0;
	}
}

.usna-flag-single-other-h2 {
	font-family: Bevan, Georgia, serif;
	font-size: 1.375rem;
	line-height: 1.15;
	color: var(--usna-navy);
	text-transform: uppercase;
	margin: 0;
}

.usna-flag-single-other-note {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--usna-muted-label);
	margin: 8px 0 0;
}

.usna-flag-single-other-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-top: 18px;
}

@media (min-width: 600px) {
	.usna-flag-single-other-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 900px) {
	.usna-flag-single-other-grid {
		grid-template-columns: repeat(6, 1fr);
	}
}

.usna-flag-single-other-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	border: 1px solid var(--usna-sand-line);
	background: var(--usna-white);
	border-radius: var(--usna-radius-control);
	padding: 14px 10px;
	min-height: 44px;
	text-decoration: none;
}

.usna-flag-single-other-item:hover {
	border-color: var(--usna-navy);
}

.usna-flag-single-other-year {
	font-family: Bevan, Georgia, serif;
	font-size: 1.125rem;
	color: var(--usna-navy);
}

.usna-flag-single-other-price {
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--usna-muted-label);
}

.usna-flag-single-all-link {
	margin: 20px 0 40px;
	font-size: 1rem;
}

.usna-flag-single-all-link a {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--usna-navy);
}

/* ------------------------------------------------------------------ */
/* Member directory: richer Our Midshipmen cards, Alumni rows,         */
/* the family detail disclosure, and the account settings tab.         */
/* ------------------------------------------------------------------ */

.usna-directory-hidden-note {
	margin: 10px 0 0;
	font-size: 0.875rem;
	font-style: italic;
	color: var(--usna-muted-label);
}

.usna-directory-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin-top: 16px;
}

@media (min-width: 600px) {
	.usna-directory-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.usna-directory-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.usna-directory-card {
	background: var(--usna-white);
	border: 1px solid var(--usna-sand-line);
	border-top: 3px solid var(--usna-navy);
	padding: 16px 18px;
}

.usna-directory-mid {
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--usna-navy);
}

.usna-directory-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--usna-muted-label);
}

.usna-directory-sep {
	color: var(--usna-sand-line);
}

.usna-directory-parents {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--usna-sand);
	font-size: 0.9375rem;
	color: var(--usna-body-text);
}

.usna-directory-table {
	display: flex;
	flex-direction: column;
	margin-top: 16px;
}

.usna-directory-row {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 4px 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--usna-sand-line);
	font-size: 0.9375rem;
	color: var(--usna-body-text);
}

@media (min-width: 700px) {
	.usna-directory-row {
		grid-template-columns: 90px 1.1fr 1fr 1.2fr 0.9fr auto;
		align-items: center;
	}
}

.usna-directory-row-class {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.04em;
	color: var(--usna-navy);
}

.usna-directory-row-mid {
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	color: var(--usna-navy);
}

.usna-directory-row-company {
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--usna-muted-label);
}

/* Detail disclosure, shared by a card and a row. */
.usna-directory-detail {
	margin-top: 10px;
}

.usna-directory-detail summary {
	cursor: pointer;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--usna-navy);
	text-decoration: underline;
	text-decoration-color: var(--usna-gold);
	text-underline-offset: 3px;
}

.usna-directory-detail-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--usna-sand-line);
	font-size: 0.9375rem;
	color: var(--usna-body-text);
}

.usna-directory-detail-label {
	display: block;
	font-family: "Barlow Condensed", Arial Narrow, sans-serif;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--usna-muted-label);
}

.usna-directory-reveal {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 4px;
}

.usna-directory-revealed {
	font-family: Cabin, Georgia, serif;
	font-weight: 700;
	color: var(--usna-navy);
}

/* Account tab: family settings. */
.usna-checkbox-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--usna-body-text);
}

.usna-checkbox-row input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	min-height: 0;
	margin-top: 2px;
}