/**
 * MSAD 2026 redesign -- SHARED design system (chrome + components).
 *
 * Everything here is used by two or more of the 2026 page templates: the
 * global header/nav, footer + tri-stripe, buttons, section headings, the
 * subpage hero band, card grids and the Beacon Hill bill rows. Page-specific
 * sections live in each page's own stylesheet (e.g. home-2026.css).
 *
 * Loaded only on 2026 page templates (inc/msad-2026.php); global colour/type
 * tokens come from msad-2026-tokens.css, which loads site-wide.
 *
 * Scoping: all rules sit under .msad-h26 (the design-system namespace) so the
 * ~41 existing Bricks pages are untouched. The --h26-* variables below map
 * onto the global tokens where one exists, and carry the four values that
 * must NOT go global yet (see the tokens file header for why).
 */

.msad-h26 {
	/* core */
	--h26-navy: var(--brand-primary, #1b2d59);
	--h26-sky: var(--brand-secondary, #2E7D32);

	/* green -- strips only: section rules and the footer stripe band */
	--h26-sky-50: var(--brand-secondary-50, #E4EFE8); /* unused tint, kept not deleted */
	--h26-sky-100: var(--brand-secondary-100, #D3E7DB); /* unused tint, kept not deleted */
	--h26-sky-300: var(--brand-secondary-300, #6FA98A); /* unused tint, kept not deleted */
	--h26-sky-700: var(--brand-secondary-700, #256428);

	/* accent -- yellow: every accent on navy */
	--h26-accent: var(--brand-accent, #5FE08F);
	--h26-accent-100: var(--brand-accent-100, #FDF1C9); /* unused tint, kept not deleted */
	--h26-accent-700: var(--brand-accent-700, #DCAE10);
	--h26-on-accent: var(--on-accent, #ffffff);

	/* cranberry -- red owns the light half: buttons, icons, arrows, links, badges */
	--h26-cranberry: var(--brand-cranberry, #9e0135);
	--h26-cranberry-deep: var(--brand-cranberry-700, #680A1D);

	/* danger -- Trash / destructive states only. No site-wide equivalent
	   exists yet, so this is a plain literal like --h26-text below. */
	--h26-danger: #c0392b;
	--h26-danger-100: #fbe4e2;
	--h26-danger-700: #9c2b1f;

	/* success/green -- Pending review states. No site-wide equivalent
	   exists yet, so this is a plain literal like --h26-danger above. */
	--h26-green: #2f8f5b;
	--h26-green-100: #e3f3ea;
	--h26-green-700: #1f6b41;

	/* text + surfaces -- the literals here are the redesign values that would
	   collide with Bricks' site-wide variables, kept scoped on purpose */
	--h26-text: #3b3f47;
	--h26-muted: var(--text-muted, #5c6270);
	--h26-muted-nav: #8a8f99;
	--h26-on-navy: #b9c8e0;
	--h26-on-navy-strong: #dce6f2;
	--h26-on-navy-soft: #c3d3e8; /* subpage hero intro copy */
	--h26-hero-sub: #d3ddec;
	--h26-band: var(--surface-band, #F7F8FA);
	--h26-band-border: #eceff4;
	--h26-border: #ecebe5;
	--h26-hairline: var(--border-soft, #e4e2da);
	--h26-img-placeholder: #edf1f6;

	/* type */
	--h26-font-head: var(--font-heading, 'Space Grotesk', ui-sans-serif, system-ui, sans-serif);
	--h26-font-body: var(--font-body, 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif);

	/* layout */
	--h26-max: 1160px;
	--h26-gutter: 32px;

	/* motion + focus */
	--h26-transition: var(--transition-fast, 140ms ease);
	--h26-focus: var(--focus-ring, 3px solid #9e0135);

	font-family: var(--h26-font-body);
	color: var(--h26-text);
	background: #fff;
	-webkit-font-smoothing: antialiased;

	/* Sticky footer: on short-content pages (e.g. an empty admin-tool tab),
	   #brx-footer would otherwise sit right under the content and leave a
	   gap of bare viewport below it. #brx-content absorbs all the slack. */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#brx-header,
#brx-footer {
	flex-shrink: 0;
}

#brx-content {
	flex: 1 0 auto;
}

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

.msad-h26 *,
.msad-h26 *::before,
.msad-h26 *::after {
	box-sizing: border-box;
}

/* Zero out the browser's/Bricks' default block margins so each template's
   explicit values are the only vertical rhythm in play. :where() keeps this
   at zero specificity, so every component rule below still wins. */
.msad-h26 :where(h1, h2, h3, h4, p, ul, ol, figure) {
	margin: 0;
	padding: 0;
}

.msad-h26 :where(ul, ol) {
	list-style: none;
}

/* :where() keeps this at 0,1,0 instead of 0,1,1 -- a plain ".msad-h26 a" would
   outrank every single-class colour rule below it and paint the page navy. */
.msad-h26 :where(a) {
	color: var(--h26-navy);
	text-decoration: none;
}

.msad-h26 img {
	max-width: 100%;
}

/* Focus is never removed -- 3px ring at 3px offset on every interactive
   element (handoff "Interactions & Behavior"). */
.msad-h26 a:focus-visible,
.msad-h26 button:focus-visible,
.msad-h26 [tabindex]:focus-visible {
	outline: var(--h26-focus);
	outline-offset: 3px;
	border-radius: 4px;
}

.msad-h26__shell {
	max-width: var(--h26-max);
	margin: 0 auto;
	padding-left: var(--h26-gutter);
	padding-right: var(--h26-gutter);
}

.msad-h26__section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.msad-h26__h2 {
	font-family: var(--h26-font-head);
	font-weight: 700;
	font-size: 34px;
	letter-spacing: -0.03em;
	color: var(--h26-navy);
	margin: 0;
}

/* Used only by "Coming up" / "Latest news" / "On Beacon Hill" -- Mission and
   Membership have their own separate heading classes (they carry an eyebrow
   above the heading instead, so this rule would be redundant there). */
.msad-h26__h2::after {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	border-radius: 2px;
	background: var(--h26-sky);
	margin-top: 8px;
}

/* Section link: "Full calendar →", "All news →" ... */
.msad-h26__section-link {
	font-weight: 700;
	font-size: 15px;
	color: var(--h26-cranberry);
	padding-bottom: 4px;
	box-shadow: inset 0 0 0 transparent;
	transition: box-shadow var(--h26-transition), color var(--h26-transition);
}

.msad-h26__section-link:hover,
.msad-h26__section-link:focus-visible {
	color: var(--h26-navy);
	box-shadow: inset 0 -2px 0 var(--h26-navy);
}

/* Screen-reader-only helper. */
.msad-h26 .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
   Header (global chrome -- template-parts/msad-2026-header.php)
   --------------------------------------------------------------------------- */

.msad-h26__header {
	border-bottom: 1px solid var(--h26-border);
	background: #fff;
}

.msad-h26__header-inner {
	max-width: var(--h26-max);
	margin: 0 auto;
	padding: 0 var(--h26-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	min-height: 84px;
}

/* Statement lockup -- brand concept "01 Statement" */
.msad-h26__lockup {
	display: block;
}

.msad-h26__wordmark {
	font-family: var(--h26-font-head);
	font-weight: 700;
	font-size: 30px;
	letter-spacing: -0.05em;
	color: var(--h26-navy);
	line-height: 1;
}

.msad-h26__wordmark-stop {
	color: var(--h26-accent);
}

.msad-h26__lockup-rule {
	height: 1px;
	background: var(--h26-hairline);
	margin: 6px 0 5px;
}

.msad-h26__lockup-sub {
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--h26-muted);
	white-space: nowrap;
}

/* Gaps are tighter than the 4-item mock: the live menu carries the site's
   real 8-item IA, so the row has to fit twice as many labels. */
.msad-h26__nav {
	display: flex;
	align-items: center;
	gap: 20px;
}

.msad-h26__nav-list {
	display: flex;
	align-items: center;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Dropdown-only parents render as <button> (see walker_nav_menu_start_el in
   inc/msad-2026.php) -- strip the UA button chrome so it is visually identical
   to the sibling links. */
.msad-h26__nav-toggle {
	appearance: none;
	background: none;
	border: 0;
	margin: 0;
	font-family: inherit;
	cursor: pointer;
}

.msad-h26__nav-link {
	display: inline-block;
	font-weight: 600;
	font-size: 15px;
	color: var(--h26-navy);
	white-space: nowrap;
	padding: 10px 2px;
	box-shadow: inset 0 0 0 transparent;
	transition: box-shadow var(--h26-transition), color var(--h26-transition);
}

.msad-h26__nav-link:hover,
.msad-h26__nav-link:focus-visible {
	color: var(--h26-navy);
	box-shadow: inset 0 -3px 0 var(--h26-accent);
}

/* Current-page state reuses the hover underline (see the About link in the
   subpage mocks) so the nav reads as oriented on every template. */
.msad-h26__nav-item.current-menu-item > .msad-h26__nav-link,
.msad-h26__nav-link[aria-current='page'] {
	box-shadow: inset 0 -3px 0 var(--h26-accent);
}

/* ---- Dropdowns -------------------------------------------------------------
   The site's real IA is 8 top-level items with children. Opens on hover AND
   on :focus-within, so the parent link receiving keyboard focus reveals the
   submenu and Tab walks straight into it -- no JS, fully keyboard-operable. */

.msad-h26__nav-item {
	position: relative;
}

/* Caret on items that have children */
.msad-h26__nav-item.menu-item-has-children > .msad-h26__nav-link::after {
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 7px;
	vertical-align: middle;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: 0.55;
	transition: opacity var(--h26-transition), transform var(--h26-transition);
}

.msad-h26__nav-item.menu-item-has-children:hover > .msad-h26__nav-link::after,
.msad-h26__nav-item.menu-item-has-children:focus-within > .msad-h26__nav-link::after {
	opacity: 1;
	transform: rotate(180deg);
}

.msad-h26__subnav {
	position: absolute;
	top: 100%;
	left: -14px;
	z-index: 40;
	min-width: 244px;
	/* Some labels are long (e.g. the NASADHH entry) -- let them wrap inside a
	   sane width instead of stretching or clipping the panel. */
	max-width: 320px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--h26-border);
	border-radius: 12px;
	box-shadow: 0 18px 44px rgba(15, 25, 52, 0.18);
	/* Hidden but still in flow-free space; visibility keeps it out of the tab
	   order until the parent is hovered/focused. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--h26-transition), transform var(--h26-transition),
		visibility var(--h26-transition);
}

.msad-h26__nav-item:hover > .msad-h26__subnav,
.msad-h26__nav-item:focus-within > .msad-h26__subnav {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.msad-h26__subnav-link {
	display: block;
	padding: 9px 10px;
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.35;
	color: var(--h26-navy);
	transition: color var(--h26-transition), text-decoration-color var(--h26-transition);
}

/* Hover language stays consistent with the rest of the header: links get a
   marigold underline, never a filled block -- solid fills are button language
   in this system, which made the dropdown read as a row of buttons. */
.msad-h26__subnav-link:hover,
.msad-h26__subnav-link:focus-visible,
.msad-h26__subnav-item.current-menu-item > .msad-h26__subnav-link {
	color: var(--h26-navy);
	text-decoration: underline;
	text-decoration-color: var(--h26-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Dropdowns near the right edge open right-aligned so they can't overflow. */
.msad-h26__nav-list > li:nth-last-child(-n + 3) > .msad-h26__subnav {
	left: auto;
	right: -14px;
}

.msad-h26__login {
	font-weight: 600;
	font-size: 15px;
	color: var(--h26-muted-nav);
	white-space: nowrap;
	padding: 10px 2px;
	box-shadow: inset 0 0 0 transparent;
	transition: box-shadow var(--h26-transition), color var(--h26-transition);
}

.msad-h26__login:hover,
.msad-h26__login:focus-visible {
	color: var(--h26-navy);
	box-shadow: inset 0 -3px 0 var(--h26-cranberry);
}

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

.msad-h26__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 22px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 15px;
	transition: background-color var(--h26-transition), color var(--h26-transition),
		box-shadow var(--h26-transition);
}

/* Marigold fill, navy text (10.1:1 AAA) -> solid navy on hover. */
.msad-h26__btn--accent {
	background: var(--h26-cranberry);
	color: var(--h26-on-accent);
}

.msad-h26__btn--accent:hover,
.msad-h26__btn--accent:focus-visible {
	background: var(--h26-cranberry-deep);
	color: #fff;
}

/* Accent button on navy surfaces: yellow fill, navy text -- 7.8:1, fine on navy. */
.msad-h26__btn--accent-on-navy {
	background: var(--h26-cranberry);
	color: var(--h26-on-accent);
	min-height: 46px;
	white-space: nowrap;
}

.msad-h26__btn--accent-on-navy:hover,
.msad-h26__btn--accent-on-navy:focus-visible {
	background: var(--h26-cranberry-deep);
	color: var(--h26-on-accent);
}

.msad-h26__btn--outline {
	min-height: 52px;
	padding: 0 24px;
	border: 2px solid var(--h26-navy);
	color: var(--h26-navy);
	font-size: 16px;
}

.msad-h26__btn--outline:hover,
.msad-h26__btn--outline:focus-visible {
	background: var(--h26-navy);
	color: #fff;
}

/* Solid navy button (subpage mocks: "Ask about serving") -> deep sky. */
.msad-h26__btn--navy {
	background: var(--h26-navy);
	color: #fff;
	min-height: 48px;
	padding: 0 24px;
	white-space: nowrap;
}

.msad-h26__btn--navy:hover,
.msad-h26__btn--navy:focus-visible {
	background: var(--h26-sky-700);
	color: #fff;
}

/* ---------------------------------------------------------------------------
   Shared atoms: eyebrow, icon tile
   --------------------------------------------------------------------------- */

.msad-h26__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brand-accent);
}

.msad-h26__eyebrow-dash {
	display: inline-block;
	width: 26px;
	height: 3px;
	border-radius: 2px;
	background: var(--brand-accent);
}

.msad-h26__tile {
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: var(--brand-secondary);
	color: var(--white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Subpage hero (navy band + eyebrow + H1 + intro, closed by the 10px stripe)
   Shared by Contact / Awards / Support Us / Legislative Bills / Meet the Board.
   --------------------------------------------------------------------------- */

.msad-h26__page-hero {
	background: var(--h26-navy);
	color: #fff;
}

.msad-h26__page-hero-inner {
	max-width: var(--h26-max);
	margin: 0 auto;
	padding: 60px var(--h26-gutter) 56px;
}

/* Meet the Board variant: taller top, bottom padding carried by the row. */
.msad-h26__page-hero-inner--tall {
	padding: 84px var(--h26-gutter) 0;
}

.msad-h26__page-title {
	font-family: var(--h26-font-head);
	font-weight: 700;
	font-size: clamp(44px, 5.4vw, 72px);
	line-height: 0.98;
	letter-spacing: -0.04em;
	margin: 20px 0 0;
	color: #fff;
	max-width: 14ch;
	text-wrap: balance;
}

.msad-h26__page-title--xl {
	font-size: clamp(48px, 6.4vw, 88px);
	line-height: 0.96;
	margin-top: 22px;
}

.msad-h26__page-title-stop {
	display: none;
}

.msad-h26__page-intro {
	font-size: 18px;
	line-height: 1.65;
	max-width: 52ch;
	margin: 20px 0 0;
	color: var(--h26-on-navy-soft);
}

/* Intro + aside on one line (bills: centered; board: end-aligned + spread). */
.msad-h26__page-hero-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 20px;
	align-items: center;
}

.msad-h26__page-hero-row--spread {
	gap: 40px;
	align-items: end;
	margin-top: 28px;
	padding-bottom: 56px;
}

.msad-h26__page-hero-row--spread .msad-h26__page-intro,
.msad-h26__page-hero--xl .msad-h26__page-hero-row .msad-h26__page-intro {
	margin: 0;
}

.msad-h26__page-hero-aside {
	font-family: var(--h26-font-head);
	font-weight: 700;
	font-size: 15px;
	color: var(--h26-cranberry);
	white-space: nowrap;
	padding-bottom: 4px;
}

/* ---------------------------------------------------------------------------
   Card grids (events/news pattern; reused by subpages)
   --------------------------------------------------------------------------- */

.msad-h26__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 28px;
}

.msad-h26__card {
	display: block;
	position: relative;
	background: #fff;
	border: 1px solid var(--h26-border);
	border-radius: 12px;
	overflow: hidden;
	transition: transform var(--h26-transition), box-shadow var(--h26-transition);
}

/* Tri-stripe hover cap: blue/green/red, weighted 4:3:2 (red widened vs.
   the footer/hero .msad-h26__stripe's 5:3:1 so it reads at this size).
   An overlay, not the old single-colour inset box-shadow line, because
   box-shadow can't render three flat colour bands. */
.msad-h26__card::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5px;
	background: linear-gradient(to right, var(--brand-bay-blue) 0 44.44%, var(--h26-sky) 44.44% 77.78%, var(--brand-cranberry) 77.78% 100%);
	opacity: 0;
	transition: opacity var(--h26-transition);
	pointer-events: none;
}

.msad-h26__card:hover,
.msad-h26__card:focus-visible {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgba(27, 45, 89, 0.16);
}

.msad-h26__card:hover::after,
.msad-h26__card:focus-visible::after {
	opacity: 1;
}

.msad-h26__card-media {
	position: relative;
	background-color: var(--h26-img-placeholder);
	background-size: cover;
	background-position: center;
}

.msad-h26__card-media--event {
	height: 160px;
}

.msad-h26__card-media--news {
	height: 150px;
}

.msad-h26__card-body {
	padding: 18px 20px 22px;
}

.msad-h26__card-title {
	font-family: var(--h26-font-head);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--h26-navy);
	text-wrap: pretty;
}

.msad-h26__card-title--event {
	font-size: 19px;
	line-height: 1.22;
}

.msad-h26__card-title--news {
	font-size: 18px;
	line-height: 1.25;
	margin-top: 9px;
}

.msad-h26__card-meta {
	font-size: 14px;
	color: var(--h26-muted);
	margin-top: 8px;
}

.msad-h26__card-meta i {
	margin-right: 7px;
	color: var(--h26-muted);
}

/* Event date badge */
.msad-h26__date-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: #fff;
	border-radius: 8px;
	padding: 7px 11px;
	text-align: center;
	line-height: 1;
	box-shadow: 0 2px 8px rgba(27, 45, 89, 0.15);
}

.msad-h26__date-day {
	font-family: var(--h26-font-head);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: -0.02em;
	color: var(--h26-navy);
}

.msad-h26__date-month {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--h26-muted);
	margin-top: 3px;
}

/* News "Video" pill sits over an arbitrary thumbnail image, not a light
   surface, so it takes the structural navy fill rather than cranberry --
   a photo can wash out a cranberry pill; navy stays legible either way. */
.msad-h26__asl-pill {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--brand-primary);
	color: #fff;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 11.5px;
	font-weight: 700;
}

.msad-h26__kicker {
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--h26-cranberry);
}

/* ---------------------------------------------------------------------------
   Beacon Hill bill rows (homepage section + Legislative Bills page)
   --------------------------------------------------------------------------- */

.msad-h26__bills-list {
	margin-top: 24px;
	border-top: 2px solid var(--h26-navy);
}

.msad-h26__bill-item {
	border-bottom: 1px solid var(--h26-border);
}

/* A <button>, not a link -- legislative-bill posts have no single-post page
   to send visitors to, so the row expands the detail panel below instead
   (same interaction as the Legislative Bills page/admin list). */
.msad-h26__bill {
	display: grid;
	grid-template-columns: 110px 1fr auto auto;
	gap: 26px;
	align-items: center;
	width: 100%;
	padding: 20px 8px;
	background: none;
	border: 0;
	text-align: left;
	font-family: inherit;
	cursor: pointer;
	transition: background-color var(--h26-transition), box-shadow var(--h26-transition),
		padding-left var(--h26-transition);
}

.msad-h26__bill:hover,
.msad-h26__bill:focus-visible,
.msad-h26__bill[aria-expanded="true"] {
	background: var(--h26-band);
	box-shadow: inset 5px 0 0 var(--h26-cranberry);
	padding-left: 20px;
}

.msad-h26__bill-number {
	font-family: var(--h26-font-head);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: -0.01em;
	color: var(--h26-cranberry);
}

.msad-h26__bill-title {
	font-family: var(--h26-font-head);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: -0.015em;
	color: var(--h26-navy);
	line-height: 1.3;
}

.msad-h26__bill-status {
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: transparent;
	border: 1px solid var(--h26-cranberry);
	color: var(--h26-cranberry);
	padding: 5px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.msad-h26__bill-chevron {
	font-family: var(--h26-font-head);
	font-weight: 700;
	font-size: 18px;
	color: var(--h26-navy);
}

/* Expanded detail panel -- same "click the row to open more info below"
   pattern as the Legislative Bills page/admin list. */
.msad-h26__bill-detail {
	background: var(--h26-band);
	border-radius: 10px;
	margin: 12px 8px 16px;
	padding: 18px 22px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 28px;
}

.msad-h26__bill-detail[hidden] {
	display: none;
}

.msad-h26__bill-detail-item {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--h26-text);
}

.msad-h26__bill-detail-item strong {
	color: var(--h26-navy);
}

.msad-h26__bill-link {
	font-weight: 700;
	font-size: 14.5px;
	color: var(--h26-cranberry);
	text-decoration: none;
}

.msad-h26__bill-link:hover,
.msad-h26__bill-link:focus-visible {
	color: var(--h26-navy);
	text-decoration: underline;
}

.msad-h26__bills-note {
	font-size: 14px;
	color: var(--h26-muted);
	margin: 14px 0 0;
}

/* ---------------------------------------------------------------------------
   Generic CTA band (cool band, title + sub left, actions right) -- the
   pattern every subpage closes with.
   --------------------------------------------------------------------------- */

.msad-h26__cta-band {
	background: var(--h26-band);
	border-top: 1px solid var(--h26-band-border);
	margin-top: 88px;
}

.msad-h26__cta-band-inner {
	max-width: var(--h26-max);
	margin: 0 auto;
	padding: 72px var(--h26-gutter);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 40px;
	align-items: center;
}

.msad-h26__cta-band-title {
	font-family: var(--h26-font-head);
	font-weight: 700;
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--h26-navy);
	text-wrap: balance;
}

.msad-h26__cta-band-sub {
	font-size: 16px;
	line-height: 1.6;
	color: var(--h26-muted);
	margin: 14px 0 0;
	max-width: 56ch;
}

.msad-h26__cta-band-actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.msad-h26__cta-band .msad-h26__btn--accent {
	min-height: 50px;
	padding: 0 26px;
	font-size: 16px;
	white-space: nowrap;
}

.msad-h26__cta-band .msad-h26__btn--outline {
	min-height: 50px;
}

@media (max-width: 1024px) {
	.msad-h26__cta-band-inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

@media (max-width: 720px) {
	.msad-h26__cta-band-inner {
		padding-top: 56px;
		padding-bottom: 56px;
	}
}

/* ---------------------------------------------------------------------------
   Footer (global chrome -- template-parts/msad-2026-footer.php)
   --------------------------------------------------------------------------- */

.msad-h26__footer {
	background: var(--h26-navy);
	color: #fff;
}

.msad-h26__footer-inner {
	max-width: var(--h26-max);
	margin: 0 auto;
	padding: 56px var(--h26-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.msad-h26__footer-wordmark {
	font-family: var(--h26-font-head);
	font-weight: 700;
	font-size: 24px;
	letter-spacing: -0.05em;
}

.msad-h26__footer-rule {
	height: 1px;
	background: rgba(255, 255, 255, 0.25);
	margin: 7px 0 6px;
	max-width: 300px;
}

.msad-h26__footer-sub {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--h26-on-navy);
}

.msad-h26__footer-links {
	display: flex;
	gap: 26px;
	font-size: 14.5px;
	font-weight: 600;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.msad-h26__footer-link {
	color: var(--h26-on-navy-strong);
	padding-bottom: 3px;
	box-shadow: inset 0 0 0 transparent;
	transition: box-shadow var(--h26-transition), color var(--h26-transition);
}

.msad-h26__footer-link:hover,
.msad-h26__footer-link:focus-visible {
	color: #fff;
	box-shadow: inset 0 -2px 0 var(--h26-accent);
}

.msad-h26__footer-link i {
	margin-right: 7px;
}

/* Tri-stripe: 5 parts blue, 3 parts green, 1 part cranberry -- 3 bands only,
   the accent/green-light band was removed (kept to 3 colours: blue/green/red).
   8px under the footer; 10px closing the subpage hero (--hero). Explicit
   width is required here -- the News/Event/Video article hero section is
   a column flex container with align-items:center (unlike the subpage
   page-hero), so a flex child with no width and no text content (just
   empty spans) shrinks to 0 instead of filling the row, collapsing the
   whole stripe to nothing. */
.msad-h26__stripe {
	display: flex;
	width: 100%;
	height: 8px;
}

.msad-h26__stripe--hero {
	height: 10px;
}

.msad-h26__stripe span:nth-child(1) {
	flex: 5;
	background: var(--brand-bay-blue);
}

.msad-h26__stripe span:nth-child(2) {
	flex: 3;
	background: var(--h26-sky);
}

.msad-h26__stripe span:nth-child(3) {
	flex: 1;
	background: var(--brand-cranberry);
}

/* ---------------------------------------------------------------------------
   Responsive (shared chrome + components only; page sections handle their own)
   --------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.msad-h26__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.msad-h26__bill {
		grid-template-columns: 96px 1fr auto;
		gap: 18px;
	}

	/* Chevron is hidden once the row wraps -- the whole row still expands
	   the detail panel on click/tap either way. */
	.msad-h26__bill-chevron {
		display: none;
	}
}

/* Between the desktop row and the wrap point the 8-item menu needs to shed
   width before it breaks the lockup onto two lines. */
@media (max-width: 1180px) {
	.msad-h26__nav,
	.msad-h26__nav-list {
		gap: 15px;
	}

	.msad-h26__nav-link,
	.msad-h26__login {
		font-size: 14px;
	}
}

@media (max-width: 980px) {
	.msad-h26__header-inner {
		flex-wrap: wrap;
		gap: 10px;
		padding-top: 14px;
		padding-bottom: 14px;
	}

	.msad-h26__nav {
		width: 100%;
		flex-wrap: wrap;
		gap: 12px 18px;
	}

	.msad-h26__nav-list {
		flex-wrap: wrap;
		gap: 12px 18px;
	}
}

@media (max-width: 860px) {
	.msad-h26 {
		--h26-gutter: 24px;
	}
}

@media (max-width: 720px) {
	/* Mobile header: wordmark only, per the handoff. The full association
	   name stays available to assistive tech via the lockup's aria-label. */
	.msad-h26__lockup-rule,
	.msad-h26__lockup-sub {
		display: none;
	}

	.msad-h26__header-inner {
		flex-wrap: wrap;
		gap: 12px;
		padding-top: 14px;
		padding-bottom: 14px;
	}

	.msad-h26__nav {
		width: 100%;
		flex-wrap: wrap;
		gap: 14px 20px;
	}

	.msad-h26__nav-list {
		flex-wrap: wrap;
		gap: 14px 20px;
	}

	/* Dropdowns can't hover on touch: below the wrap point every submenu
	   becomes a plain indented list so nothing is unreachable. */
	.msad-h26__nav-item {
		width: 100%;
	}

	.msad-h26__subnav {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-width: 0;
		margin: 6px 0 4px 14px;
		padding: 0 0 0 10px;
		border: 0;
		border-left: 2px solid var(--h26-border);
		border-radius: 0;
		box-shadow: none;
		background: none;
	}

	.msad-h26__subnav-link {
		padding: 8px 6px;
	}

	.msad-h26__nav-item.menu-item-has-children > .msad-h26__nav-link::after {
		display: none;
	}

	.msad-h26__grid {
		grid-template-columns: 1fr;
	}

	.msad-h26__page-hero-inner {
		padding-top: 56px;
		padding-bottom: 44px;
	}

	.msad-h26__page-hero-inner--tall {
		padding-bottom: 0;
	}

	.msad-h26__page-hero-row,
	.msad-h26__page-hero-row--spread {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.msad-h26__bill {
		grid-template-columns: 1fr auto;
		gap: 10px 16px;
		align-items: start;
	}

	.msad-h26__bill-number {
		grid-column: 1;
	}

	.msad-h26__bill-status {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
	}

	.msad-h26__bill-title {
		grid-column: 1 / -1;
		font-size: 17px;
	}

	.msad-h26__bill-detail {
		grid-template-columns: 1fr;
		margin: 12px 4px 14px;
	}

	.msad-h26__footer-inner {
		align-items: flex-start;
	}
}

@media (max-width: 520px) {
	.msad-h26__footer-links {
		gap: 14px 20px;
	}
}

/* Reduced motion: keep colour/shadow feedback, drop every transform. */
@media (prefers-reduced-motion: reduce) {
	.msad-h26 *,
	.msad-h26 *::before,
	.msad-h26 *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.msad-h26__card:hover,
	.msad-h26__card:focus-visible {
		transform: none;
	}

	.msad-h26__bill:hover,
	.msad-h26__bill:focus-visible {
		padding-left: 8px;
	}
}

/* ---------------------------------------------------------------------------
   Page-hero XL modifier -- used by the "MSAD Page Hero" Bricks component.
   One root class drives the same numbers as the --tall / --xl / --spread
   classes above, so instances switch size with a single component property.
   --------------------------------------------------------------------------- */

.msad-h26__page-hero--xl .msad-h26__page-hero-inner {
	padding: 84px var(--h26-gutter) 0;
}

.msad-h26__page-hero--xl .msad-h26__page-title {
	font-size: clamp(48px, 6.4vw, 88px);
	line-height: 0.96;
	margin-top: 22px;
}

.msad-h26__page-hero--xl .msad-h26__page-hero-row {
	gap: 40px;
	align-items: end;
	margin-top: 28px;
	padding-bottom: 56px;
}

@media (max-width: 720px) {
	.msad-h26__page-hero--xl .msad-h26__page-hero-inner {
		padding-bottom: 0;
	}

	.msad-h26__page-hero--xl .msad-h26__page-hero-row {
		padding-bottom: 44px;
	}
}

/* ---------------------------------------------------------------------------
   Bricks Nav Menu element (WordPress Main Menu) inside the 2026 header.
   Maps the design's nav/dropdown language onto Bricks' own markup
   (.bricks-nav-menu / .brx-submenu-toggle / .sub-menu), scoped to the header.
   --------------------------------------------------------------------------- */

.msad-h26__nav .bricks-nav-menu {
	display: flex;
	align-items: center;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.msad-h26__nav .bricks-nav-menu > li {
	position: relative;
}

.msad-h26__nav .bricks-nav-menu > li > a,
.msad-h26__nav .bricks-nav-menu > li > .brx-submenu-toggle > a {
	display: inline-block;
	font-weight: 600;
	font-size: 15px;
	color: var(--h26-navy);
	white-space: nowrap;
	padding: 10px 2px;
	box-shadow: inset 0 0 0 transparent;
	transition: box-shadow var(--h26-transition), color var(--h26-transition);
}

.msad-h26__nav .bricks-nav-menu > li > a:hover,
.msad-h26__nav .bricks-nav-menu > li > a:focus-visible,
.msad-h26__nav .bricks-nav-menu > li.current-menu-item > a,
.msad-h26__nav .bricks-nav-menu > li.current-menu-item > .brx-submenu-toggle > a,
.msad-h26__nav .bricks-nav-menu > li.current-menu-ancestor > .brx-submenu-toggle > a,
.msad-h26__nav .bricks-nav-menu > li:hover > .brx-submenu-toggle > a,
.msad-h26__nav .bricks-nav-menu > li:focus-within > .brx-submenu-toggle > a {
	color: var(--h26-navy);
	box-shadow: inset 0 -3px 0 var(--h26-accent);
}

/* Caret button (Bricks renders an svg chevron) */
.msad-h26__nav .brx-submenu-toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.msad-h26__nav .brx-submenu-toggle button {
	appearance: none;
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	color: var(--h26-navy);
	cursor: pointer;
	display: inline-flex;
	opacity: 0.55;
	transition: opacity var(--h26-transition), transform var(--h26-transition);
}

.msad-h26__nav .brx-submenu-toggle button svg {
	width: 11px;
	height: 11px;
}

.msad-h26__nav .bricks-nav-menu > li:hover > .brx-submenu-toggle button,
.msad-h26__nav .bricks-nav-menu > li:focus-within > .brx-submenu-toggle button {
	opacity: 1;
	transform: rotate(180deg);
}

/* Dropdown panel -- same language as the design's .msad-h26__subnav */
.msad-h26__nav .bricks-nav-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: -14px;
	z-index: 40;
	min-width: 244px;
	max-width: 320px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--h26-border);
	border-radius: 12px;
	box-shadow: 0 18px 44px rgba(15, 25, 52, 0.18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--h26-transition), transform var(--h26-transition),
		visibility var(--h26-transition);
}

.msad-h26__nav .bricks-nav-menu > li:hover > .sub-menu,
.msad-h26__nav .bricks-nav-menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Dropdowns near the right edge open right-aligned so they can't overflow. */
.msad-h26__nav .bricks-nav-menu > li:nth-last-child(-n + 3) > .sub-menu {
	left: auto;
	right: -14px;
}

.msad-h26__nav .bricks-nav-menu .sub-menu a {
	display: block;
	padding: 9px 10px;
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.35;
	color: var(--h26-navy);
	white-space: normal;
	transition: color var(--h26-transition), text-decoration-color var(--h26-transition);
}

/* Marigold underline on hover, never a filled block (button language). */
.msad-h26__nav .bricks-nav-menu .sub-menu a:hover,
.msad-h26__nav .bricks-nav-menu .sub-menu a:focus-visible,
.msad-h26__nav .bricks-nav-menu .sub-menu .current-menu-item > a {
	color: var(--h26-navy);
	text-decoration: underline;
	text-decoration-color: var(--h26-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Label-only parents (e.g. Resources) render as <a> without href. */
.msad-h26__nav .brx-submenu-toggle > a:not([href]) {
	cursor: default;
}

/* ---------------------------------------------------------------------------
   Third-party content islands. With .msad-h26 on <body> (Bricks-native build),
   the resets above would strip margins/list styles inside plugin-rendered
   content (Directories Pro, Ultimate Membership Pro, post content). Restore
   the browser defaults there; the 2026 components never rely on them.
   --------------------------------------------------------------------------- */

.msad-h26 :where(.drts, [class*="ihc-"], .brxe-post-content, .drts-view-entities)
	:where(h1, h2, h3, h4, p, ul, ol, figure) {
	margin: revert;
	padding: revert;
}

.msad-h26 :where(.drts, [class*="ihc-"], .brxe-post-content, .drts-view-entities)
	:where(ul, ol) {
	list-style: revert;
}

/* ---------------------------------------------------------------------------
   Mobile menu (Bricks Nav Menu element's off-canvas panel).
   Navy panel, white items, sky sub-links — same language as the footer.
   Open state: .brxe-nav-menu gains .show-mobile-menu.
   --------------------------------------------------------------------------- */

.msad-h26__nav .bricks-mobile-menu-toggle {
	color: var(--h26-navy);
}

/* The toggle becomes the close (X) over the navy panel when open. */
.msad-h26__nav .show-mobile-menu .bricks-mobile-menu-toggle {
	color: #fff;
	position: relative;
	z-index: 10002;
}

.msad-h26__nav .bricks-mobile-menu-wrapper {
	background: var(--h26-navy);
	width: min(320px, 85vw);
	padding: 92px 28px 28px;
}

.msad-h26__nav .bricks-mobile-menu {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.msad-h26__nav .bricks-mobile-menu > li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.msad-h26__nav .bricks-mobile-menu a {
	display: block;
	padding: 15px 0;
	font-family: var(--h26-font-head);
	font-weight: 700;
	font-size: 19px;
	letter-spacing: -0.01em;
	color: #fff;
}

.msad-h26__nav .bricks-mobile-menu .brx-submenu-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.msad-h26__nav .bricks-mobile-menu .brx-submenu-toggle a {
	flex: 1;
}

.msad-h26__nav .bricks-mobile-menu .brx-submenu-toggle button {
	appearance: none;
	background: none;
	border: 0;
	padding: 10px;
	color: var(--h26-cranberry);
	cursor: pointer;
	display: inline-flex;
	transition: transform var(--h26-transition);
}

.msad-h26__nav .bricks-mobile-menu .brx-submenu-toggle button svg {
	width: 14px;
	height: 14px;
}

.msad-h26__nav .bricks-mobile-menu .brx-submenu-toggle button[aria-expanded='true'] {
	transform: rotate(180deg);
}

/* Sub-items: indented, sky, lighter weight */
.msad-h26__nav .bricks-mobile-menu .sub-menu {
	list-style: none;
	margin: 0 0 10px;
	padding: 0 0 0 16px;
	border-left: 2px solid rgba(129, 212, 250, 0.35);
}

.msad-h26__nav .bricks-mobile-menu .sub-menu a {
	font-family: var(--h26-font-body);
	font-weight: 600;
	font-size: 15.5px;
	color: var(--h26-on-navy-strong);
	padding: 11px 0;
}

/* Current page: marigold underline, same language as desktop */
.msad-h26__nav .bricks-mobile-menu .current-menu-item > a,
.msad-h26__nav .bricks-mobile-menu .current-menu-item > .brx-submenu-toggle > a,
.msad-h26__nav .bricks-mobile-menu .current-menu-ancestor > .brx-submenu-toggle > a {
	text-decoration: underline;
	text-decoration-color: var(--h26-accent);
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}

/* Label-only parents (Resources) */
.msad-h26__nav .bricks-mobile-menu .brx-submenu-toggle > a:not([href]) {
	cursor: default;
}

/* Backdrop */
.msad-h26__nav .bricks-mobile-menu-overlay {
	background: rgba(15, 25, 52, 0.55);
}

/* Accessibility corrections for the current Bricks header and homepage.
   Keep these scoped so existing page/template settings remain intact. */
.msad-h26 a.skip-link {
	color: #fff;
	background: #1b2d59;
}

.msad-h26 #brxe-51f315,
.msad-h26 #brxe-hcwtrr {
	color: #526079;
}

.msad-h26 #brxe-c77bd1 {
	font-size: 12px;
	letter-spacing: 0.06em;
}

/* Bricks shares desktop submenu typography with the navy mobile drawer. */
.msad-h26 #brxe-e2b30c .bricks-mobile-menu .sub-menu a {
	color: #fff;
}

/* The plugin moves this panel offscreen but leaves its close button tabbable. */
.home #mdp-readabler-accessibility-statement-box:not(.mdp-open),
.category #mdp-readabler-accessibility-statement-box:not(.mdp-open),
.page-id-3752 #mdp-readabler-accessibility-statement-box:not(.mdp-open),
.page-id-6921 #mdp-readabler-accessibility-statement-box:not(.mdp-open),
.page-id-80509 #mdp-readabler-accessibility-statement-box:not(.mdp-open),
.page-id-290409 #mdp-readabler-accessibility-statement-box:not(.mdp-open),
.page-id-82611 #mdp-readabler-accessibility-statement-box:not(.mdp-open),
.page-id-83516 #mdp-readabler-accessibility-statement-box:not(.mdp-open),
.page-id-82364 #mdp-readabler-accessibility-statement-box:not(.mdp-open),
.page-id-1817 #mdp-readabler-accessibility-statement-box:not(.mdp-open),
.page-id-291259 #mdp-readabler-accessibility-statement-box:not(.mdp-open),
.page-id-290566 #mdp-readabler-accessibility-statement-box:not(.mdp-open),
.page-id-82188 #mdp-readabler-accessibility-statement-box:not(.mdp-open),
.page-id-292174 #mdp-readabler-accessibility-statement-box:not(.mdp-open),
.single-directory_dir_ltg #mdp-readabler-accessibility-statement-box:not(.mdp-open),
.single-event #mdp-readabler-accessibility-statement-box:not(.mdp-open),
.single-post #mdp-readabler-accessibility-statement-box:not(.mdp-open),
.single-msad_video #mdp-readabler-accessibility-statement-box:not(.mdp-open),
.single-gallery_album #mdp-readabler-accessibility-statement-box:not(.mdp-open) {
	display: none;
}

/* Contact pathways and response controls retain visible keyboard focus. */
.page-id-1817 #brxe-63jo3r .form-group[aria-hidden="true"] {
	display: none;
}

.page-id-1817 main a:focus-visible,
.page-id-1817 .msad-h26__contact-form-native .message .close:focus-visible {
	outline: 3px solid var(--h26-navy);
	outline-offset: 3px;
}

.page-id-1817 .msad-h26__contact-form-native .message .close {
	min-width: 32px;
	min-height: 32px;
}

.page-id-1817 .msad-h26__contact > *,
.page-id-1817 .msad-h26__contact-ways > *,
.page-id-1817 .msad-h26__contact-card > *,
.page-id-1817 .msad-h26__contact-form-native :is(.form-group, input, select, textarea) {
	min-width: 0;
}

.page-id-1817 .msad-h26__contact-card {
	grid-template-columns: 52px minmax(0, 1fr);
	overflow-wrap: anywhere;
}

@media (max-width: 479px) {
	.page-id-1817 .msad-h26__contact,
	.page-id-1817 .msad-h26__contact-ways {
		grid-template-columns: minmax(0, 1fr);
	}
	.page-id-1817 .msad-h26__contact {
		padding-inline: 20px;
	}
	.page-id-1817 .msad-h26__contact-card {
		padding: 20px;
	}
}

/* News detail: visible keyboard focus on the back link and article links. */
:is(.single-post, .single-msad_video) .msad-h26__art-back:focus-visible,
:is(.single-post, .single-msad_video) .msad-h26__art a:focus-visible {
	outline: 3px solid var(--h26-navy);
	outline-offset: 3px;
}

.single-msad_video .msad-youtube-description > .msad-video-transcript-heading:first-child {
	margin-top: 0;
}

/* Event detail: retain the original subheading size after correcting its level. */
.single-event .msad-h26__art-content h2.msad-event-session-heading {
	font-size: 19px;
}

.single-event .msad-h26__art-content a:focus-visible,
.single-event .msad-h26__art-back:focus-visible {
	outline: 3px solid var(--h26-navy);
	outline-offset: 3px;
}

.single-event .msad-h26__art-side-share-link:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

.single-event:has(.pswp--open) #mdp-readabler-trigger-button {
	visibility: hidden;
}

/* Advocacy: readable secondary labels and search hint, preserving native layout. */
.page-id-83516 .msad-h26__blist-pill,
.page-id-83516 .msad-h26__blist-date {
	font-size: 14px;
}

.page-id-83516 .msad-h26__blist-search::placeholder {
	color: #526079;
	opacity: 1;
}

.page-id-83516 .msad-h26__blist-load-more[hidden] {
	display: none;
}

/* Directory: retain card spacing when names become real headings. */
.page-id-82364 .msad-h26__dir-card-name {
	margin: 12px 0 0;
}

.page-id-82364 .msad-h26__dir-card:focus-visible {
	outline: 3px solid #1b2d59;
	outline-offset: 3px;
}

.page-id-82364 .msad-h26__dir-search::placeholder {
	color: #526079;
	opacity: 1;
}

.page-id-82364 .msad-h26__dir-load-more[hidden] {
	display: none;
}

/* Keep unawarded years visually muted while meeting normal-text contrast. */
.page-id-6921.msad-h26 .msad-h26__award-recipient-name--none {
	color: #626b79;
}

.msad-h26 #brxe-c97ce1,
.home.msad-h26 .msad-h26__announce-label,
.home.msad-h26 .msad-h26__asl-pill,
.home.msad-h26 .msad-h26__kicker,
.home.msad-h26 .msad-h26__bill-status {
	font-size: 12px;
}

.home.msad-h26 .msad-h26__membership-stop {
	color: #b23457;
}

/* Preserve the paragraph's spacing when it becomes a semantic heading. */
.home.msad-h26 .msad-h26__announce-title {
	line-height: 1.6;
	margin-top: 0;
	margin-bottom: 0;
}

.msad-h26__hero-pause {
	position: absolute;
	right: 16px;
	top: 16px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	min-height: 44px;
	padding: 0;
	border: 1px solid #fff;
	border-radius: 50%;
	background: #1b2d59;
	color: #fff;
	font: 600 14px/1.4 var(--h26-font-body);
	cursor: pointer;
}

.msad-h26__hero-pause[hidden] {
	display: none;
}

.msad-h26__hero-pause-icon {
	display: block;
	width: 20px;
	height: 20px;
}

.msad-h26__hero-pause-label {
	display: none;
}

/* A light inner ring and dark outer ring remain visible on photos and navy. */
.msad-h26 a:focus-visible,
.msad-h26 button:focus-visible,
.msad-h26 [tabindex]:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
	box-shadow: 0 0 0 6px #1b2d59 !important;
}

@media (prefers-reduced-motion: reduce) {
	.home .msad-h26__hero-slide {
		animation: none !important;
		opacity: 0;
	}
	.home .msad-h26__hero-slide:first-of-type {
		opacity: 1;
	}
}