/*
 * HUD Housing Counselor component system.
 * Ported from the approved design prototype (app/globals.css).
 * Prototype color variables are aliased to the canonical tokens in tokens.css.
 */

:root {
	--navy: var(--hud-blue);
	--navy-dark: var(--hud-blue-dark);
	--pistachio: var(--hud-pistachio);
	--pistachio-soft: var(--hud-pistachio-soft);
	--sinopia: var(--hud-sinopia);
	--plum: var(--hud-plum);
	--blue: var(--hud-honolulu-blue);
	--gold: var(--hud-tumeric);
	--ink: var(--hud-ink);
	--muted: var(--hud-muted);
	--line: var(--hud-border);
	--soft: var(--hud-surface);
	--white: var(--hud-white);
	--shadow: var(--hud-shadow-card);
}

/* Base typography — mirror the live site: Poppins for UI/headings, Arial for prose. */
body { font-family: "Poppins", Arial, Helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: "Poppins", Arial, Helvetica, sans-serif; font-weight: 500; text-transform: capitalize; }
p, ul, ol, dl, blockquote { font-family: Arial, Helvetica, sans-serif; }

.shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

/* Accessibility utilities (USWDS-aligned). */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 1000; background: var(--navy); color: #fff; padding: 10px 18px; font-weight: 700; border-radius: 0 0 5px 0; }
.skip-link:focus { left: 0; }

/* ==========================================================================
   Header — overrides on top of Bootstrap 5.3 (loaded before this file).
   Markup mirrors the live b5subtheme:
   <header class="home"><nav class="navbar navbar-expand-lg navbar-dark bg-dark">.
   Bootstrap supplies .navbar, .container, .collapse, the toggler and utilities;
   only the HUD-specific customisations live here.
   ========================================================================== */

header.home { position: relative; z-index: 10; padding-bottom: 25px; }
.bg-dark { background-color: var(--navy) !important; }

/* Brand: raw HUD seal + site title. Allow the title to wrap (live uses
   .navbar-brand { white-space: unset }) so the long site title never forces
   the nav out of its container. */
.navbar-brand { white-space: unset; }
.navbar-brand img { height: 36px; margin: 0 1rem 0 0; width: auto; }
.navbar-brand h1 { padding-top: 25px; margin: 0; text-transform: none; }
.navbar-brand a.site-title { color: #f8f9fa; text-decoration: none; }
.navbar-brand a.site-title:hover { color: #f8f9fa; text-decoration: none; }
.navbar-brand .site-title h1 { font-size: 2rem; letter-spacing: 2px; }
.thin { font-family: "Poppins", sans-serif; font-weight: 200; font-style: normal; }
.bold { font-family: "Poppins", sans-serif; font-weight: 600; }
@media (min-width: 992px) { .navbar-brand img { height: 100px; } }

/* Navbar links use the pistachio accent on hover. */
.navbar .nav-link { color: #fff; }
.navbar .nav-link:hover, .navbar .nav-link:focus-visible { color: var(--pistachio); }

/* Utility row (Login | Register) sits above the main menu, shifted down. */
/* Login | Register inside the collapsed mobile menu.
   The desktop copy sits outside the collapse and is hidden below the
   breakpoint, so without this pair a phone has no route to signing in or
   registering at all. Higher specificity than `.top-hud-nav li a` on purpose:
   that rule shrinks to 0.5rem under 768px, which is right for a utility row
   tucked above the header and unreadable as a menu item. */
.navbar-nav.hud-utility-mobile { display: flex; width: 100%; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .25); flex-direction: row; align-items: center; gap: 10px; }
.navbar-nav.hud-utility-mobile li a { font-size: 1rem; padding-left: 0; padding-right: 0; }
.navbar-nav.hud-utility-mobile .hud-utility-sep { color: rgba(255, 255, 255, .45); }
@media (min-width: 992px) { .navbar-nav.hud-utility-mobile { display: none; } }

.top-hud-nav-row { position: relative; top: 30px; }
.top-hud-nav li a { font-size: 14px; }
.hud-utility-sep { color: #979797; padding: 0 0.25rem; display: inline-flex; align-items: center; }
@media (max-width: 1199.98px) { .top-hud-nav li a { font-size: 0.9rem; } }
@media (max-width: 991.98px) { .top-hud-nav li a { font-size: 0.7rem; } }
@media (max-width: 767.98px) { .top-hud-nav li a { font-size: 0.5rem; } }

/* Main menu row. */
.nav-additional { padding-top: 15px; }
.bottom-hud-nav { position: relative; top: 50px; }
.bottom-hud-nav li { padding-left: 30px; }
.bottom-hud-nav .nav-link { font-weight: 600; }

/* Keep the five main-nav items on a single line while the navbar is still
   expanded (>=992px, before it collapses to the hamburger). At half-screen
   widths the default 30px item spacing pushes "Contact Us" onto a second line,
   so taper the spacing across the intermediate range — and, in the tightest
   range, the label size — to keep everything on one row (mirrors how the
   utility row above already tapers its font-size). */
@media (min-width: 992px) and (max-width: 1439.98px) {
	.bottom-hud-nav li { padding-left: 22px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
	.bottom-hud-nav li { padding-left: 12px; }
	.bottom-hud-nav .nav-link { font-size: 0.9rem; }
}
/* While expanded, give the menu column layout priority so it always keeps its
   items on one row; the brand (logo + title) absorbs the remaining space and
   wraps its title only when the viewport is genuinely too narrow. Without this
   the brand greedily reclaims any space freed by the spacing taper above and
   the last item wraps again. */
@media (min-width: 992px) {
	.navbar > .container { flex-wrap: nowrap; }
	.navbar > .container > .navbar-brand { flex: 1 1 auto; min-width: 0; }
	.navbar > .container > div:not(.navbar-brand) { flex: 0 0 auto; }
}

/* Below the breakpoint the same rules are needed for the opposite reason.
   The container was left free to wrap, so on a narrow phone the brand claimed
   the full width and pushed the hamburger onto a line of its own. Holding the
   row to `nowrap` keeps the toggle beside the title; letting the brand shrink
   (`min-width: 0`) and scaling the title with the viewport is what makes that
   fit rather than merely overflow. The toggle never shrinks - it is the only
   route to the menu, so it keeps its size and the title yields instead. */
@media (max-width: 991.98px) {
	.navbar > .container { flex-wrap: nowrap; align-items: center; }
	.navbar > .container > .navbar-brand { flex: 1 1 auto; min-width: 0; }
	.navbar > .container > div:not(.navbar-brand) { flex: 0 0 auto; }
	.navbar-brand { align-items: center; }
	.navbar-brand img { height: 34px; margin-right: .6rem; }
	.navbar-brand h1 { padding-top: 0; }
	.navbar-brand .site-title h1 { font-size: clamp(.95rem, 4.4vw, 1.5rem); letter-spacing: 1px; }
	.navbar-brand .pb-3 { padding-bottom: 0 !important; min-width: 0; }
	.navbar-toggler { flex: 0 0 auto; }
}

/* Below the lg breakpoint the navbar collapses to the hamburger toggle. The
   live site keeps the menu items in their natural row (right-aligned, wrapping
   as needed) rather than forcing a vertical stack, so we only reset the
   pulled-down offsets and right-align, matching live's
   `header .navbar-nav { text-align: right }`. */
@media (max-width: 991.98px) {
	.top-hud-nav-row, .bottom-hud-nav { position: static; top: auto; }
	.bottom-hud-nav li { padding-left: 10px; }
	header .navbar-nav { text-align: right; }
	.desktop-view { display: none; }
	.mobile-view { display: block; }
}
.mobile-view { display: none; }

.home-hero { position: relative; overflow: hidden; background: var(--navy); color: white; }
.hero-angle { position: absolute; right: -6vw; top: -12vw; width: 48vw; height: 35vw; background: var(--pistachio); clip-path: polygon(32% 0,100% 0,100% 100%,0 0); opacity: .95; }
.hero-grid { min-height: 560px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 80px; align-items: center; position: relative; padding-block: 80px; }
.hero-copy h1, .interior-hero h1 { font-size: clamp(2.7rem, 5vw, 4.6rem); line-height: 1.05; letter-spacing: -.045em; margin: 12px 0 24px; max-width: 820px; }
.hero-lede { font-size: 1.22rem; line-height: 1.7; max-width: 680px; color: #e2ebf4; }
.eyebrow { margin: 0 0 10px; color: var(--navy); font-size: .76rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow-light { color: #c9e6ad; }
.button-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 13px 19px; border-radius: 5px; text-decoration: none; font-weight: 800; font-size: .9rem; transition: transform .18s ease, box-shadow .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--navy); color: white; box-shadow: 0 8px 20px rgba(22,54,103,.2); }
.button-secondary { background: var(--pistachio); color: var(--navy-dark); }
.button-light { background: white; color: var(--navy); }
.button-outline { border: 1px solid rgba(255,255,255,.65); color: white; background: rgba(255,255,255,.04); }
.hero-feature { background: white; color: var(--ink); border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; position: relative; margin-top: 52px; }
.feature-top { padding: 34px; display: flex; align-items: end; gap: 14px; border-bottom: 1px solid var(--line); }
.feature-number { font-size: 4rem; line-height: .85; color: var(--navy); font-weight: 800; }
.feature-top span:last-child { max-width: 190px; color: var(--muted); font-weight: 700; line-height: 1.35; }
.domain-bars { display: grid; grid-template-columns: repeat(6,1fr); gap: 7px; padding: 28px 34px 20px; align-items: end; height: 145px; }
.domain-bars span { background: var(--pistachio); border-radius: 4px 4px 0 0; }
.domain-bars span:nth-child(1) { height: 82%; }
.domain-bars span:nth-child(2) { height: 55%; background: var(--blue); }
.domain-bars span:nth-child(3) { height: 67%; background: var(--gold); }
.domain-bars span:nth-child(4) { height: 92%; background: var(--plum); }
.domain-bars span:nth-child(5) { height: 75%; background: var(--sinopia); }
.domain-bars span:nth-child(6) { height: 48%; background: var(--navy); }
.feature-bottom { display: flex; flex-direction: column; gap: 5px; background: var(--soft); padding: 20px 34px 24px; }
.feature-bottom a { color: var(--navy); font-size: .86rem; font-weight: 800; }
.quick-actions { display: grid; grid-template-columns: repeat(3,1fr); background: white; margin-top: -24px; position: relative; z-index: 3; border-radius: 7px; box-shadow: var(--shadow); overflow: hidden; }
.quick-actions > a { padding: 25px; display: grid; grid-template-columns: auto 1fr auto; gap: 15px; align-items: center; text-decoration: none; border-right: 1px solid var(--line); }
.quick-actions > a:last-child { border-right: 0; }
.quick-actions strong, .quick-actions small { display: block; }
.quick-actions small { color: var(--muted); margin-top: 2px; font-size: .75rem; line-height: 1.35; }
.icon-badge { width: 46px; height: 46px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--pistachio-soft); color: var(--navy); font-weight: 800; flex: 0 0 auto; }
.tone-blue { background: #e5f2fa; color: #116fae; }
.tone-gold { background: #fff3df; color: #8e560b; }
.tone-plum { background: #f6e6f3; color: var(--plum); }
.section { padding-block: 104px; }
.section-heading { max-width: 720px; }
.section-heading h2 { margin: 0 0 18px; font-size: clamp(2rem,3.2vw,3rem); line-height: 1.15; letter-spacing: -.035em; color: var(--navy-dark); }
.section-heading > p:last-child { margin: 0; font-size: 1.06rem; color: var(--muted); }
.journey-grid { list-style: none; padding: 0; margin: 52px 0 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.journey-grid li { background: white; padding: 32px 26px; min-height: 260px; }
.step-number, .timeline-number { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--navy); background: var(--pistachio); font-weight: 800; }
.journey-grid h3 { font-size: 1.15rem; line-height: 1.35; color: var(--navy-dark); margin: 42px 0 10px; }
.journey-grid p { color: var(--muted); font-size: .88rem; }
.soft-section { background: var(--soft); padding-block: 100px; }
.split-intro { display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.resource-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 22px; margin-top: 48px; }
.resource-card { background: white; padding: 30px; border: 1px solid var(--line); border-radius: 7px; min-height: 360px; display: flex; flex-direction: column; align-items: flex-start; }
.resource-card .icon-badge { margin-bottom: 42px; }
.resource-card h3 { color: var(--navy-dark); font-size: 1.4rem; margin: 5px 0 10px; }
.resource-card p:not(.card-tag) { color: var(--muted); }
.resource-card a { margin-top: auto; color: var(--navy); font-weight: 800; }
.card-tag, .mini-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: var(--muted); }
.resource-art { width: calc(100% + 60px); margin: -30px -30px 25px; height: 130px; background: var(--navy); display: flex; align-items: end; justify-content: center; gap: 10px; padding: 20px; }
.resource-art span { width: 28%; height: 70%; background: white; color: var(--navy); display: grid; place-items: center; border-top: 5px solid var(--pistachio); font-weight: 800; }
.resource-art span:nth-child(2) { height: 85%; }
.resource-art span:nth-child(3) { height: 62%; }
.audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.audience-card { padding: 50px; border-radius: 7px; min-height: 390px; display: flex; flex-direction: column; align-items: flex-start; }
.audience-card h2 { font-size: 2rem; line-height: 1.2; margin: 30px 0 15px; }
.audience-card p:not(.eyebrow) { max-width: 520px; margin-bottom: 34px; }
.audience-card .button { margin-top: auto; }
.navy-card { background: var(--navy); color: white; }
.green-card { background: var(--pistachio-soft); }
.green-card h2 { color: var(--navy-dark); }
.handoff-section { background: #eef3f7; border-top: 1px solid var(--line); padding-block: 70px; }
.handoff-grid { display: grid; grid-template-columns: 1fr auto; gap: 50px; align-items: center; }
.handoff-grid h2 { font-size: 2rem; line-height: 1.2; color: var(--navy-dark); margin: 8px 0 12px; max-width: 780px; }
.handoff-grid p:last-child { color: var(--muted); max-width: 760px; }
/* #HUDCertifiedProud sub-footer banner — verbatim live b5subtheme rules.
   Navy #264072 band with a faint HUDCertifiedProud.jpg background and a
   centered award icon + hashtag block. */
.hud-sub-footer { position: relative; background: #264072; color: #fff; padding-block: 1.5rem; }
.hud-sub-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("../images/HUDCertifiedProud.jpg"); background-size: cover; background-position: center; opacity: 0.2; z-index: 0; }
.hud-sub-footer > * { position: relative; z-index: 1; }
.hud-sub-footer p, footer p { color: #fff; }
.certification-content { background-color: #163667; padding: 20px; text-align: center; position: relative; display: flex; align-items: center; width: 450px; margin: 0 auto; }
.certification-content i { font-size: 12px; }
.certification-content h1 { margin: 0; font-size: 32px; line-height: 1em; font-weight: bolder; text-align: left; }
.certification-content p { font-size: 12px; margin: 0; text-align: left; }
@media (max-width: 767.98px) {
	.certification-content { width: 350px !important; }
	.certification-content h1 { font-size: 1em; margin: 0; }
}

/* Footer — verbatim live b5subtheme rules. Navy #163667 background, white
   text, agency-logo image map (vertical desktop / horizontal mobile), flex
   footer link lists, social icons, and copyright/disclaimer rows. */
.footer-bg { background-color: #163667 !important; text-align: left; }
.footer-bg p { padding-bottom: 10px; }
.footer-background { color: #fff !important; background-color: #163667; background-size: cover; background-position: center; z-index: 10; padding-top: 40px; padding-bottom: 40px; }
.footer-background:before { content: ""; top: 0; right: 0; bottom: 0; left: 0; }
footer.footer-dark a { color: #f8f9fa; text-decoration: none; }
footer.footer-dark a:hover { color: #f8f9fa; text-decoration: none; }
ul.footer_list_links { list-style: none; float: left; }
.footer_list_links { display: flex; flex-wrap: wrap; list-style: none; padding: 0 0 15px 0; margin: 0; }
.footer_list_links li { margin-right: 20px; flex: 1; text-align: left; }
.social-icons { padding-bottom: 20px; }
.social-icons i { font-size: 38px; padding-right: 15px; }
footer .hud-info p { margin-bottom: 5px; }
footer .footer-links a { margin-bottom: 15px; }
footer .footer-links i { margin-bottom: 15px; }
.img-mobile, .mobile-view { display: none; }
@media (max-width: 991.98px) {
	.img-mobile { display: block; padding-bottom: 15px; }
	/* .mobile-view is set to display:none unconditionally above, later in the
	   file than the earlier media query that tried to show it - equal
	   specificity, so the none always won and the utility did nothing at any
	   width. Restored here alongside its .img-mobile counterpart. */
	.mobile-view { display: block; }
	.img-desktop, .desktop-view { display: none; }
}
@media (max-width: 767.98px) {
	.social-icons { display: none !important; }
}
.breadcrumbs { min-height: 48px; display: flex; align-items: center; font-size: .78rem; }
.breadcrumbs ol { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: 8px; color: #8796a8; }
.breadcrumbs li:last-child { color: var(--muted); }
.interior-hero { background: var(--navy); color: white; padding-block: 76px; overflow: hidden; }
.interior-hero-grid { display: grid; grid-template-columns: 1.05fr .75fr; align-items: center; gap: 80px; }
.interior-hero h1 { font-size: clamp(2.5rem,4.2vw,4rem); }
.interior-hero p:not(.eyebrow) { color: #d7e3ef; font-size: 1.1rem; max-width: 720px; }
.progress-card, .service-card { background: white; color: var(--ink); padding: 30px; border-radius: 7px; box-shadow: var(--shadow); }
.progress-card ol { list-style: none; padding: 0; margin: 20px 0 0; }
.progress-card li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-weight: 700; }
.progress-card li span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--pistachio-soft); color: var(--navy); }
.filter-row { display: flex; flex-wrap: wrap; gap: 9px; margin: 36px 0 30px; }
.filter-row button, .filter-row a { border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--navy); padding: 9px 15px; font-weight: 700; font-size: .82rem; text-decoration: none; }
.filter-row .filter-active { background: var(--navy); color: white; border-color: var(--navy); }
.resource-list-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.catalog-card { border: 1px solid var(--line); border-radius: 7px; padding: 28px; min-height: 270px; display: flex; flex-direction: column; align-items: flex-start; }
.catalog-card-top { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.catalog-card h2 { color: var(--navy-dark); font-size: 1.45rem; margin: 35px 0 8px; }
.catalog-card p { color: var(--muted); }
.catalog-card a { margin-top: auto; font-weight: 800; color: var(--navy); }
.domain-section, .timeline-section { background: var(--navy-dark); color: white; padding-block: 96px; }
.domain-section .section-heading h2, .timeline-section .section-heading h2 { color: white; }
.domain-section .section-heading > p:last-child { color: #bfcddd; }
.domain-section .eyebrow, .timeline-section .eyebrow { color: var(--pistachio); }
.review-chip { border: 1px solid #3d5b83; padding: 14px 18px; border-radius: 5px; display: flex; flex-direction: column; min-width: 180px; }
.review-chip span { font-size: .68rem; color: #bfcddd; text-transform: uppercase; letter-spacing: .1em; }
.domain-grid { display: grid; grid-template-columns: repeat(2,1fr); margin-top: 48px; border-top: 1px solid #3b567b; }
.domain-grid a { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; color: white; text-decoration: none; padding: 22px 5px; border-bottom: 1px solid #3b567b; }
.domain-grid a:nth-child(odd) { padding-right: 30px; }
.domain-grid a:nth-child(even) { padding-left: 30px; border-left: 1px solid #3b567b; }
.domain-number { color: var(--pistachio); font-weight: 800; }
.domain-grid strong, .domain-grid small { display: block; }
.domain-grid small { color: #b9c7d8; }
.compare-callout { display: flex; justify-content: space-between; gap: 50px; align-items: center; }
.compare-callout h2 { font-size: 2rem; color: var(--navy-dark); margin: 5px 0 10px; }
.compare-callout p:last-child { color: var(--muted); max-width: 760px; }
.compact-section { padding-block: 70px; }
.language-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.language-panel h2 { font-size: 2rem; color: var(--navy-dark); margin: 5px 0 10px; }
.language-panel p:last-child { color: var(--muted); }
.language-links { display: flex; flex-direction: column; }
.language-links a { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--navy); font-weight: 800; }
.light-hero { background: #f5f8f3; color: var(--ink); border-bottom: 1px solid var(--line); }
.light-hero p:not(.eyebrow) { color: var(--muted); }
.requirement-visual { background: white; border: 1px solid var(--line); border-radius: 7px; padding: 32px; box-shadow: var(--shadow); }
.requirement-visual > div { display: flex; align-items: center; gap: 15px; }
.requirement-visual strong, .requirement-visual small { display: block; }
.requirement-visual small { color: var(--muted); }
.requirement-visual .plus { display: block; margin: 14px 0 14px 20px; color: var(--pistachio); font-size: 1.5rem; font-weight: 800; }
.requirement-visual .equals { display: block; background: var(--navy); color: white; margin: 25px -32px -32px; padding: 18px 32px; font-weight: 800; }
.requirement-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 45px; }
.requirement-grid article { border: 1px solid var(--line); padding: 38px; border-radius: 7px; }
.large-number { color: var(--pistachio); font-size: 2rem; font-weight: 800; }
.requirement-grid h2 { color: var(--navy-dark); font-size: 1.5rem; margin: 28px 0 10px; }
.requirement-grid p { color: var(--muted); }
.requirement-grid a { color: var(--navy); font-weight: 800; }
.vertical-timeline { list-style: none; margin: 50px 0 0; padding: 0; }
.vertical-timeline li { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: start; padding: 26px 0; border-top: 1px solid #3b567b; }
.vertical-timeline h2 { margin: 4px 0 7px; font-size: 1.35rem; }
.vertical-timeline p { color: #c1cedd; margin: 0; max-width: 750px; }
.owner-label { border: 1px solid #4b668a; border-radius: 999px; padding: 5px 10px; color: #c9e6ad; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.agency-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; background: var(--navy); color: white; border-radius: 7px; padding: 55px; }
.agency-panel h2 { font-size: 2.3rem; line-height: 1.18; margin: 25px 0 15px; }
.agency-panel p:not(.eyebrow) { color: #d2deea; }
.agency-list p { padding: 13px 0; border-bottom: 1px solid #496287; }
.agency-list span { color: var(--pistachio); margin-right: 10px; }
.exam-hero { background: var(--navy); }
.service-card .mini-label { color: var(--sinopia); }
.service-card h2 { font-size: 1.6rem; line-height: 1.25; color: var(--navy-dark); }
.service-card p { color: var(--muted) !important; font-size: .92rem !important; }
.service-card .button { background: var(--pistachio); color: var(--navy-dark); }
.option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 45px; }
.option-grid article { border: 1px solid var(--line); border-radius: 7px; padding: 34px; }
.option-head { display: flex; gap: 16px; align-items: center; }
.option-head h2 { color: var(--navy-dark); margin: 0; }
.option-head p { color: var(--muted); margin: 3px 0 0; }
.option-grid dl { margin: 30px 0; }
.option-grid dl div { display: grid; grid-template-columns: 130px 1fr; gap: 15px; border-top: 1px solid var(--line); padding: 13px 0; }
.option-grid dt { font-weight: 800; color: var(--navy); }
.option-grid dd { margin: 0; color: var(--muted); }
.option-grid article > a { color: var(--navy); font-weight: 800; }
.exam-info-grid { display: grid; grid-template-columns: 1fr .75fr; gap: 70px; align-items: start; }
.check-list { list-style: none; padding: 0; margin: 35px 0 0; }
.check-list li { padding: 13px 0; border-top: 1px solid var(--line); font-weight: 700; }
.check-list span { color: var(--navy); background: var(--pistachio); display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; margin-right: 10px; }
.accommodation-card { background: white; padding: 38px; border-radius: 7px; border-top: 8px solid var(--pistachio); box-shadow: var(--shadow); }
.accommodation-card h2 { color: var(--navy-dark); font-size: 1.8rem; }
.accommodation-card p:not(.eyebrow) { color: var(--muted); }
.accommodation-card a { color: var(--navy); font-weight: 800; }
.policy-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin-top: 42px; }
.policy-grid a { text-decoration: none; border: 1px solid var(--line); padding: 28px; border-radius: 7px; }
.policy-grid h2 { color: var(--navy-dark); font-size: 1.2rem; }
.policy-grid p { color: var(--muted); }
.policy-grid span { color: var(--navy); font-weight: 800; }

@media (max-width: 900px) {
	.hero-grid, .interior-hero-grid, .language-panel, .exam-info-grid { grid-template-columns: 1fr; gap: 40px; }
	.hero-grid { min-height: auto; }
	.hero-feature { margin-top: 0; }
	.quick-actions { grid-template-columns: 1fr; margin-top: 20px; }
	.quick-actions > a { border-right: 0; border-bottom: 1px solid var(--line); }
	.journey-grid { grid-template-columns: repeat(2,1fr); }
	.resource-grid { grid-template-columns: 1fr 1fr; }
	.resource-grid > :first-child { grid-column: 1 / -1; }
	.audience-grid, .requirement-grid, .option-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
	.shell { width: min(100% - 28px,1180px); }
	/* Letter-spacing only. The size is left to the viewport-scaled clamp set at
	   the 991.98px breakpoint - a fixed 1.4rem here would override it and put
	   the title back over the width available on a 375px screen, which is what
	   pushed the hamburger onto its own line. */
	.navbar-brand h1, .navbar-brand .site-title h1 { letter-spacing: 1px; }
	.hud-certified-content { flex-direction: column; text-align: center; }
	.hero-grid, .section, .soft-section, .domain-section, .timeline-section { padding-block: 70px; }
	.home-hero .hero-grid { padding-top: 58px; }
	.hero-copy h1, .interior-hero h1 { font-size: 2.6rem; }
	.quick-actions { width: calc(100% - 28px); }
	.journey-grid, .resource-grid, .resource-list-grid, .domain-grid, .policy-grid { grid-template-columns: 1fr; }
	.journey-grid li { min-height: 220px; }
	.domain-grid a:nth-child(even), .domain-grid a:nth-child(odd) { border-left: 0; padding-inline: 5px; }
	.split-intro, .compare-callout, .handoff-grid { align-items: flex-start; flex-direction: column; display: flex; }
	.audience-card { padding: 34px; }
	.agency-panel { grid-template-columns: 1fr; padding: 34px; gap: 30px; }
	.vertical-timeline li { grid-template-columns: auto 1fr; }
	.owner-label { grid-column: 2; justify-self: start; }
	.option-grid dl div { grid-template-columns: 1fr; gap: 3px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.button { transition: none; }
}

/* Visible keyboard focus for interactive elements (accessibility). */
a:focus-visible, .button:focus-visible, summary:focus-visible, .filter-row a:focus-visible {
	outline: 3px solid var(--hud-honolulu-blue);
	outline-offset: 2px;
}

/* External-link affordance. */
.button[target="_blank"] .arrow::after, a.is-external::after { content: " \2197"; }

/* Learning-resource archive: map the core Query grid onto the catalog layout. */
.resource-list-grid-wrap .wp-block-post-template.resource-list-grid { gap: 20px; }
.resource-list-grid-wrap .catalog-card { height: 100%; }

/* Server-rendered resource catalog (inc/resource-query.php). */
.resource-catalog .catalog-card h2 { margin-top: 18px; }
.resource-catalog .card-tag { color: var(--muted); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.resource-empty { border: 1px dashed var(--line); border-radius: 7px; padding: 40px; text-align: center; color: var(--muted); }
.resource-pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 34px; }
.resource-pagination .page-numbers { border: 1px solid var(--line); border-radius: 5px; padding: 8px 14px; font-weight: 700; color: var(--navy); text-decoration: none; }
.resource-pagination .page-numbers.current { background: var(--navy); color: white; border-color: var(--navy); }

/* Governance metadata definition list (hud-review-metadata pattern). */
.option-grid-inline { margin: 18px 0 0; display: grid; gap: 0; }
.option-grid-inline div { display: grid; grid-template-columns: 160px 1fr; gap: 15px; border-top: 1px solid var(--line); padding: 12px 0; }
.option-grid-inline dt { font-weight: 800; color: var(--navy); margin: 0; }
.option-grid-inline dd { margin: 0; color: var(--muted); }


/* ==========================================================================
   Home page (verbatim copy of the live HUD Housing Counselors home).
   ========================================================================== */

/* Text link used alongside primary buttons. */
.button-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--navy); text-decoration: none; font-size: .9rem; }
.button-link:hover, .button-link:focus-visible { text-decoration: underline; }

/* ==========================================================================
   Home hero + exam cards + section band — verbatim copies of the live
   b5subtheme rules so layout/positioning matches production exactly.
   Bootstrap 5.3 (loaded before this file) supplies .container/.row/.card/.btn.
   ========================================================================== */

/* Hero band: mobile-first the green box is in normal flow full-width and the
   photo shows via .full-width-mobile; at >=1250px the box floats absolutely
   over the 525px .full-width-image band. */
.hero-section { position: relative; }
.full-width-mobile { width: 100%; height: 325px; background-size: cover; background-position: center top; }
.full-width-image { width: 100%; height: 0px; background-size: cover; background-position: center top; margin-top: 50px; }
.green-box { background-color: #98cd68; color: #000; padding: 2rem; margin-top: 0rem; border: solid #fff; width: 100%; }
.green-box h2 { word-wrap: break-word; }
.welcome-button { background-color: white; color: #000; display: inline-block; border-radius: 25px; border: none; margin-block-start: 0.75rem; padding: 0.75rem 4rem; text-decoration: none; transition: background-color 0.3s, color 0.3s; }
.welcome-button:hover, .welcome-button:focus, .welcome-button:active { background-color: var(--bs-secondary-bg-subtle, #eef3e8); }

@media (min-width: 1250px) {
	.green-box { background-color: #98cd68; padding: 2rem; position: absolute; margin-top: -2rem; margin-left: 7rem; border: solid #fff; width: 550px; z-index: 2; }
	.full-width-image { width: 100%; height: 525px; background-image: url("../images/home-hero-header.jpg"); background-size: cover; background-position: center top; margin-top: 50px; border-top: #192c4a solid 5px; }
	.full-width-mobile { display: none; }
}
@media (max-width: 768px) {
	.green-box { padding-bottom: 50px; }
}

/* Two exam cards over a translucent green rectangle (#home_exam). The row is
   pulled up (top:-125px) so the circles overlap the hero, matching live. The
   .position-relative class in the DOM provides the positioning context. */
#home_exam { top: -125px; }
.green-rectangle { position: absolute; top: 30%; left: 0; width: 100%; height: 100px; background-color: rgba(152, 205, 104, 0.75); z-index: 0; transform: translateY(-50%); }
#home_exam .card { position: relative; z-index: 1; background-color: transparent; border: none; height: 100%; display: flex; flex-direction: column; }
#home_exam .card .card-image-container { padding: 1.5rem 1.5rem 0 1.5rem; }
#home_exam .card .card-img-top { aspect-ratio: 1 / 1; border-radius: 50%; max-width: 300px; max-height: 300px; object-fit: cover; border: 5px solid white; margin-bottom: 1rem; }
/* Equal-height cards: let the body grow and pin the action row to the bottom so
   both cards' buttons align regardless of description length. */
#home_exam .card .card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
#home_exam .card .card-body > .row { margin-top: auto; }
@media (max-width: 1400px) { .green-rectangle { display: none; } }
@media (max-width: 1250px) { #home_exam { top: -90px; } }

/* Resources / Support / testimonial band: white .text-box with a floating
   icon above each card (.icon-circle for the OHC icons; #cb4315 .image-circle
   remains for the testimonial portrait). */
.section-container { margin-top: 30px; position: relative; z-index: 1; }
.image-circle { position: absolute; width: 150px; height: 150px; background-color: #cb4315; border-radius: 50%; top: -75px; left: calc(50% - 75px); display: flex; align-items: center; justify-content: center; z-index: -1; }
/* SC-03: OHC-style icon (white line glyph on a HUD Blue circle, Style Guide p.16).
   The circle is part of the SVG, so no colored disc sits behind it. */
.icon-circle { position: absolute; width: 130px; height: 130px; top: -65px; left: calc(50% - 65px); z-index: 2; }
.icon-circle .icon-image { display: block; width: 130px; height: 130px; }
.section-container.has-icon .text-box { padding-top: 5rem; }
.testimonial-image { position: inherit; width: 125px; border-radius: 50%; border: 3px solid white; top: -65px; }
.text-box { border: 1px solid #d3d3d3; padding: 2rem; background-color: white; min-height: 300px; margin-bottom: 75px !important; }
.text-box h3, .text-box ul, .text-box blockquote { margin-bottom: 1rem; }
.text-box ul { padding-left: 20px; }
.text-box li { text-align: left; }
.text-box h3 a { font-weight: 400 !important; text-decoration: none; color: var(--navy-dark); }
.text-box .fa-quote-right, .text-box .fas { color: #cb4315; }
.text-box blockquote:before { content: open-quote; }
.text-box blockquote:after { content: close-quote; }
.text-box footer { text-align: right; display: block; margin-top: 0.5rem; font-weight: 700; color: var(--navy-dark); }
.testimonial-box { margin-bottom: 0px !important; }
ul.home_list li { margin-bottom: 10px; }

/* Reasonable-accommodation callout. */
/* Trim the generic .compact-section 70px band a little for this callout. */
.hud-accommodation-section { padding-block: 48px; }
.hud-accommodation-card { background: var(--soft); border: 1px solid var(--line); border-radius: 7px; padding: 36px; text-align: center; }
.hud-accommodation-icons { font-size: 1.4rem; margin: 0 0 8px; }
.hud-accommodation-card h2 { color: var(--navy-dark); font-size: 1.6rem; margin: 0 0 10px; }
.hud-accommodation-card p { color: var(--muted); margin: 0 0 16px; }

/* "How Does The Process Work?" pistachio band. */
.hud-process-section { background: var(--pistachio); }
.hud-process-title { text-align: center; color: var(--navy-dark); font-size: clamp(1.6rem,3vw,2.2rem); margin: 0 0 40px; }
.hud-process-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.hud-step-card { background: #fff; border-radius: 7px; padding: 0 24px 26px; box-shadow: var(--shadow); position: relative; }
.hud-step-media { margin: 0 -24px 30px; height: 120px; overflow: hidden; border-radius: 7px 7px 0 0; }
.hud-step-media img { width: 100%; height: 100%; object-fit: cover; }
.hud-step-number { position: absolute; top: 100px; left: 24px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--pistachio); color: var(--navy-dark); font-weight: 800; border: 3px solid #fff; }
.hud-step-card h3 { color: var(--navy-dark); font-size: 1.15rem; margin: 10px 0 12px; }
.hud-step-card h3 a { color: inherit; text-decoration: none; }
.hud-step-card h3 a:hover { text-decoration: underline; }
.hud-step-card ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: .88rem; }
.hud-step-card li { margin: 6px 0; }

@media (max-width: 900px) {
	.hud-process-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
	.hud-process-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   Interior pages (Certification, About, Resources, Support, Contact).
   ========================================================================== */

/* Plain page title band (matches live white interior header). */
.hud-interior-title { padding-block: 28px 6px; }
.hud-interior-title h1 { color: var(--navy-dark); font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin: 0; }

/* Long-form prose column. */
.hud-prose-section { padding-block: 16px 60px; }
.hud-prose { max-width: none; }
.hud-prose h2 { color: var(--navy-dark); font-size: 1.6rem; margin: 40px 0 14px; }
.hud-prose h3 { color: var(--navy-dark); font-size: 1.3rem; margin: 34px 0 12px; }
.hud-prose h4 { color: var(--navy-dark); font-size: 1.05rem; margin: 22px 0 10px; }
.hud-prose p { color: var(--ink); line-height: 1.7; margin: 0 0 16px; }
.hud-prose a { color: var(--navy); text-decoration: underline; }
.hud-prose a:hover, .hud-prose a:focus-visible { color: var(--navy-dark); }
.hud-prose ol, .hud-prose ul { color: var(--ink); line-height: 1.7; margin: 0 0 16px; padding-left: 22px; }
.hud-prose li { margin: 10px 0; }
.hud-prose .hud-note { background: var(--soft); border-left: 4px solid var(--pistachio); padding: 14px 18px; border-radius: 0 6px 6px 0; }
/* Certification Compliance + Retakes two-column row (matches live layout). */
.hud-cert-compliance { margin-top: 26px; }
.hud-cert-compliance h3 { margin-top: 0; }
.hud-centered-title { text-align: center; color: var(--navy-dark); font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 40px; }

/* Exam-option cards (Certification + Resources pages). */
.hud-exam-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.hud-option-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.hud-option-media { height: 180px; overflow: hidden; }
.hud-option-media img { width: 100%; height: 100%; object-fit: cover; }
.hud-option-card h3 { color: var(--navy-dark); font-size: 1.2rem; margin: 22px 24px 10px; }
.hud-option-card p { color: var(--muted); margin: 0 24px 20px; }
.hud-option-card .button { margin: auto 24px 24px; align-self: flex-start; }
.hud-options-cta { text-align: center; margin: 34px 0 0; }
/* Certification page only: the Exam Options soft band follows the prose column
   directly and otherwise has no top padding, so the heading hugs the band's top
   edge. Add breathing room above the heading and offset it by trimming the prose
   section's bottom padding, keeping the overall vertical rhythm unchanged. This
   adjacency (prose section immediately followed by exam options) is unique to the
   certification page. */
.hud-prose-section:has(+ .hud-exam-options-section) { padding-bottom: 28px; }
.hud-prose-section + .hud-exam-options-section { padding-top: 32px; }

/* Agency-role callout. */
.hud-agencies-inner { text-align: center; max-width: 820px; margin-inline: auto; }
.hud-agencies-inner h2 { color: var(--navy-dark); font-size: 1.7rem; margin: 0 0 12px; }
.hud-agencies-inner p { color: var(--muted); margin: 0 0 22px; }
.hud-agencies-inner .button-row { justify-content: center; }
.hud-agencies-inner .hud-detail-accordion { text-align: left; }

@media (max-width: 760px) {
	.hud-exam-options-grid { grid-template-columns: 1fr; }
}


/* --- About page — verbatim live b5subtheme hero + highlights. The hero is a
   525px photo band (.about-bg::before shows about_page.png at 0.5 opacity behind
   the title) with the big title near the TOP of the band; the gray highlights
   card is pulled up over the band via .about-gray-box { position:absolute;
   top:275px } inside the relatively-positioned .about-hud-container. --- */
.about-hud-container { position: relative; }
.about-header-container { position: relative; height: 525px; overflow: hidden; }
.about-header-container .shell { position: relative; z-index: 1; padding-top: 40px; }
.about-header-container h1 { font-size: 72px; color: var(--navy-dark); margin: 0; }
.about-bg::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: var(--hud-hero-photo); background-size: cover; background-position: center top; opacity: 0.5; z-index: -1; }
/* The gray box also carries Bootstrap's .position-relative (position:relative
   !important) and .container (auto max-width) — override both. Keep the card in
   normal flow and pull it up onto the 525px hero band with a negative margin
   (275px from the top = 525 - 250), full-width with 100px insets. Because the
   card stays in flow, the section below always sits a fixed distance under it
   regardless of the card's (width-dependent) height. */
.about-hud-container .about-gray-box.position-relative { position: relative !important; margin-top: -250px; z-index: 10; max-width: none; padding-inline: 100px; }
.counseling-program-container { background-color: #f1f1f1; padding: 0 30px 30px 30px; margin-bottom: 50px; }
.about-hud-container ul { line-height: 1.6; }
/* The in-flow gray card now reserves its own height, so the training section
   only needs a modest, consistent gap above the "Training Overview" heading. */
.hud-training-section { padding-top: 24px; }
.hud-training-grid { display: grid; grid-template-columns: .75fr 1fr; gap: 40px; align-items: center; margin-bottom: 36px; }
.hud-training-media img { width: 100%; border-radius: 8px; box-shadow: var(--shadow); }
.hud-training-copy p { color: var(--ink); line-height: 1.7; }
.hud-check-list { list-style: none; margin: 20px 0; padding: 0; }
.hud-check-list li { position: relative; padding: 8px 0 8px 30px; color: var(--ink); }
.hud-check-list li::before { content: "\2713"; position: absolute; left: 0; top: 8px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--pistachio); color: var(--navy-dark); font-size: .7rem; font-weight: 800; }
.hud-training-links { display: flex; flex-direction: column; gap: 8px; }
.hud-training-links a { color: var(--navy); font-weight: 800; text-decoration: none; }
.hud-training-links a:hover { text-decoration: underline; }
.hud-detail-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.hud-detail-list li { border-bottom: 1px solid var(--line); }
.hud-detail-list a { display: flex; justify-content: space-between; align-items: center; padding: 16px 4px; color: var(--navy-dark); font-weight: 700; text-decoration: none; }
.hud-detail-list a:hover { color: var(--navy); }
.hud-detail-list span { color: var(--pistachio); font-size: 1.3rem; }
/* Expandable detail accordion (Course Syllabus, Knowledge Assessment, Practice
   Exam, Certification Exam details) — styled on top of Bootstrap's .accordion to
   match the HUD design system, echoing the .hud-detail-list row treatment. */
.hud-detail-accordion { border-top: 1px solid var(--line); margin-top: 8px; }
.hud-detail-accordion .accordion-item { border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.hud-detail-accordion .accordion-button { padding: 16px 4px; color: var(--navy-dark); font-weight: 700; font-size: 1.05rem; background: transparent; box-shadow: none; }
.hud-detail-accordion .accordion-button:not(.collapsed) { color: var(--navy); background: transparent; box-shadow: none; }
.hud-detail-accordion .accordion-button:focus { box-shadow: none; border-color: transparent; }
.hud-detail-accordion .accordion-body { padding: 4px 4px 28px; color: var(--ink); line-height: 1.7; }
.hud-detail-accordion .accordion-body h4 { color: var(--navy-dark); font-size: 1.1rem; margin: 22px 0 10px; }
.hud-detail-accordion .accordion-body h4:first-child { margin-top: 0; }
.hud-detail-accordion .accordion-body ul { margin: 0 0 16px; padding-left: 22px; }
.hud-detail-accordion .accordion-body li { margin-bottom: 6px; }
.hud-detail-accordion .accordion-body a { color: var(--navy); font-weight: 700; }
.hud-syllabus { margin-top: 4px; }
.hud-syllabus-area { margin-bottom: 22px; }
.hud-syllabus-area:last-child { margin-bottom: 0; }
.hud-syllabus-area > h4 { margin: 0 0 6px; }
/* Nested module accordion (each syllabus module opens its lightbox content). */
.hud-module-accordion { border-top: 1px solid var(--line); }
.hud-module-accordion .accordion-item { border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.hud-module-accordion .accordion-button { padding: 12px 4px; color: var(--navy); font-weight: 600; font-size: 0.98rem; background: transparent; box-shadow: none; }
.hud-module-accordion .accordion-button:not(.collapsed) { color: var(--navy-dark); background: transparent; box-shadow: none; }
.hud-module-accordion .accordion-button:focus { box-shadow: none; border-color: transparent; }
.hud-module-accordion .accordion-body { padding: 2px 4px 20px; }
.hud-module-accordion .accordion-body h6 { color: var(--navy-dark); font-size: 0.98rem; font-weight: 700; margin: 14px 0 6px; }
.hud-module-accordion .accordion-body h6:first-child { margin-top: 0; }
.hud-module-accordion .accordion-body p { margin: 0 0 10px; }
.hud-module-accordion .accordion-body ul { margin: 0; }
.hud-about-cta { text-align: center; }
.hud-about-cta p { color: var(--navy-dark); font-size: 1.1rem; margin: 0 0 18px; }
.hud-about-cta .button-row { justify-content: center; align-items: center; }

/* Live: at <=1260px the gray box lifts to top:175px (margin-top -350 = 175-525);
   at <=1050px it lifts to top:160px (margin-top -365) and its side padding
   collapses to 0. The in-flow card keeps the training gap consistent, so no
   per-breakpoint padding-top override is needed. */
@media (max-width: 1260px) {
	.about-header-container h1 { font-size: 58px; }
	.about-hud-container .about-gray-box.position-relative { margin-top: -350px; }
}
@media (max-width: 1050px) {
	.about-hud-container .about-gray-box.position-relative { margin-top: -365px; padding-inline: 0; }
	.about-header-container h1 { font-size: 42px; }
}
@media (max-width: 760px) {
	.hud-training-grid { grid-template-columns: 1fr; }
	.about-header-container { height: 500px; }
	.about-hud-container .about-gray-box.position-relative { margin-top: -340px; }
}

/* --- Resources page --- */
/* Even vertical rhythm: the generic .section/.soft-section/.compact-section
   paddings are oversized for this page, so scope tighter, consistent spacing. */
.hud-resources-head { text-align: center; padding-block: 46px 24px; }
.hud-exam-options-section { padding-block: 0 64px; }
.hud-handbook-section { padding-block: 64px; }
.hud-faq-section { padding-block: 64px; }
.hud-glossary-section { padding-block: 64px 72px; }
.hud-resources-head h1 { margin: 0 0 12px; }
.hud-resources-head p { color: var(--muted); max-width: 640px; margin: 0 auto 22px; }
.hud-handbook { text-align: center; max-width: 720px; margin-inline: auto; }
.hud-handbook .eyebrow { justify-content: center; }
.hud-handbook h2 { color: var(--navy-dark); font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 8px 0 24px; }
.hud-handbook-media { margin: 0 0 24px; }
.hud-handbook-media img { width: 100%; max-height: 320px; object-fit: cover; border-radius: 8px; box-shadow: var(--shadow); }
.hud-faq-lede { color: var(--muted); max-width: 760px; margin: 6px 0 34px; }
.hud-faq-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center; }
.hud-faq-list { list-style: none; margin: 0; padding: 0; }
.hud-faq-item { display: flex; align-items: flex-start; gap: 20px; padding: 24px 0; }
.hud-faq-icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 75px; height: 75px; border-radius: 50%; background: #dddfe7; color: var(--navy); font-size: 30px; }
.hud-faq-item > div { padding-top: 2px; }
.hud-faq-list h3 { color: var(--navy); font-size: 1.3rem; font-weight: 700; margin: 0 0 6px; }
.hud-faq-list h3 a { color: var(--navy); text-decoration: underline; }
.hud-faq-list p { color: var(--muted); margin: 0; line-height: 1.6; }
.hud-faq-media img { width: 100%; height: 100%; max-height: 360px; object-fit: cover; border-radius: 8px; box-shadow: var(--shadow); }
.hud-glossary-card { text-align: center; max-width: 560px; margin-inline: auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 36px; box-shadow: var(--shadow); }
.hud-glossary-mark { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--pistachio-soft); color: var(--navy-dark); font-weight: 800; font-size: 1.4rem; margin-bottom: 14px; }
.hud-glossary-card h2 { color: var(--navy-dark); font-size: 1.4rem; margin: 0 0 10px; }
.hud-glossary-card p { color: var(--muted); margin: 0 0 18px; }

@media (max-width: 760px) {
	.hud-faq-grid { grid-template-columns: 1fr; align-items: start; }
	.hud-exam-options-section, .hud-handbook-section, .hud-faq-section, .hud-glossary-section { padding-block: 44px; }
}

/* --- Contact page --- */
/* Interior form page: trim the default .section 104px band so the form
   doesn't float in excess vertical whitespace (matches live spacing). */
.hud-contact-section { padding-block: 64px 48px; }
.hud-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: stretch; }
.hud-contact-form-col h1 { color: var(--navy-dark); font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 12px; }
.hud-contact-form-col > p { color: var(--muted); margin: 0 0 24px; line-height: 1.6; }
.hud-form-note { color: var(--navy-dark); font-weight: 700; margin: 0 0 12px; }
.hud-field { margin: 0 0 18px; }
.hud-field label { display: block; font-weight: 700; color: var(--navy-dark); margin: 0 0 6px; font-size: .92rem; }
.hud-field .req { color: var(--sinopia); }
.hud-field input, .hud-field textarea, .hud-field select { width: 100%; border: 1px solid var(--line); border-radius: 5px; padding: 11px 13px; font-size: .95rem; font-family: inherit; background: #fff; color: var(--ink); }
.hud-field textarea { resize: vertical; }
.hud-send-button { width: 100%; background: var(--navy); color: #fff; justify-content: center; }
.hud-form-footnote { color: var(--muted); font-size: .82rem; margin: 12px 0 0; }
/* Media column fills its grid track height so the photo aligns with the
   form column (live shows a tall portrait crop, not a short banner). */
.hud-contact-media { height: 100%; }
.hud-contact-media img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; border-radius: 8px; box-shadow: var(--shadow); }
.hud-tech-support-section { padding-block: 0 56px; }
.hud-tech-support { border-top: 1px solid var(--line); padding-top: 34px; }
.hud-tech-support h2 { color: var(--navy-dark); font-size: 1.4rem; margin: 0 0 14px; }
.hud-tech-support p { color: var(--ink); line-height: 1.7; margin: 0 0 14px; }

/* --- Reasonable accommodation request --- */
/* Login-gated request form. Unlike Contact there is no media column, so
   constrain the many-field form to a comfortable reading width instead of
   letting it stretch across the full shell. */
.hud-accommodation-form-col { max-width: 760px; }

/* --- Reusable form engine --- */
/* Honeypot: hidden from users but present for bots. */
.hud-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Short "Submit" button matching live (not full-width). */
.hud-submit-button { display: inline-flex; background: var(--navy); color: #fff; padding: 10px 26px; border: none; border-radius: 5px; font-weight: 600; cursor: pointer; }
.hud-submit-button:hover { background: var(--navy-dark); }

/* Submitting state. Progressive enhancement only: without JavaScript the
   button never gains [disabled] and .hud-form-busy stays hidden. */
.hud-submit-button[disabled] { background: var(--navy); opacity: .62; cursor: progress; }
.hud-form.is-busy .hud-form-busy { display: flex; }
.hud-form-busy { display: none; gap: 10px; align-items: flex-start; margin: 14px 0 0;
  color: var(--navy-dark); font-size: .92rem; line-height: 1.45; }
.hud-form-busy::before { content: ""; flex: 0 0 auto; width: 15px; height: 15px; margin-top: 3px;
  border: 2px solid var(--pistachio); border-top-color: var(--navy);
  border-radius: 50%; animation: hud-form-spin .8s linear infinite; }
@keyframes hud-form-spin { to { transform: rotate(360deg); } }

/* Respect a reduced-motion preference: keep the indicator, drop the spin. */
@media (prefers-reduced-motion: reduce) {
  .hud-form-busy::before { animation: none; border-top-color: var(--pistachio); }
}

/* Privacy Act statement and anything like it. Below the button since
   2026-09-11, and quieter than the form it follows: it is disclosure the
   visitor must be able to read, not a step in completing the form. */
.hud-form-after-submit { margin: 28px 0 0; padding-top: 18px;
  border-top: 1px solid var(--rule, #e3e6ea); color: var(--muted);
  font-size: .84rem; line-height: 1.55; }
.hud-form-after-submit p { margin: 0 0 10px; }
.hud-form-after-submit p:last-child { margin-bottom: 0; }
.hud-form-after-submit a { word-break: break-word; }
.hud-form-statement-title { font-size: .92rem; font-weight: 600; letter-spacing: .01em;
  color: var(--navy-dark); margin: 0 0 10px; }

/* Completion panel. Replaces the form on success so a submission that
   already worked cannot be sent again. */
.hud-form-anchor { scroll-margin-top: 1.5rem; }
.hud-form-complete { background: var(--pistachio-soft); border: 1px solid var(--pistachio);
  border-radius: 6px; padding: 22px 24px; margin: 0 0 24px; color: var(--navy-dark); }
.hud-form-complete__message { margin: 0; font-size: 1rem; line-height: 1.6; }
.hud-form-complete__title { font-size: 1.02rem; font-weight: 700; margin: 20px 0 10px;
  color: var(--navy-dark); }
.hud-form-next-steps { margin: 0; padding-left: 1.25rem; }
.hud-form-next-steps li { margin: 0 0 10px; line-height: 1.55; font-size: .95rem; }
.hud-form-next-steps li:last-child { margin-bottom: 0; }
.hud-field--captcha input { max-width: 140px; }
.hud-field--error input, .hud-field--error textarea, .hud-field--error select { border-color: var(--sinopia); }
.hud-field-error { display: block; color: var(--sinopia); font-size: .82rem; font-weight: 600; margin: 6px 0 0; }
.hud-form-message { border-radius: 6px; padding: 14px 16px; margin: 0 0 20px; font-size: .95rem; }
.hud-form-message--success { background: var(--pistachio-soft); color: var(--navy-dark); border: 1px solid var(--pistachio); }
.hud-form-message--error { background: #fde8e3; color: #7a2410; border: 1px solid var(--sinopia); }
/* Error summary on a failed submit (SC-26, 2026-09-26): the USWDS pattern of
   a heading and one link per field, rendered above the form by
   inc/forms/form-render.php. It carries tabindex="-1" so assets/js/forms.js
   can move focus to it; the ring below is for that programmatic focus. */
.hud-form-errors { padding: 16px 20px; }
.hud-form-errors:focus { outline: 3px solid var(--hud-honolulu-blue); outline-offset: 2px; }
.hud-form-errors__title { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.4; color: inherit; text-transform: none; }
.hud-form-errors__list { margin: 8px 0 0; padding-left: 1.25rem; }
.hud-form-errors__list li { margin: 4px 0 0; line-height: 1.45; }
.hud-form-errors__list a { color: inherit; font-weight: 600; text-decoration: underline; }

@media (max-width: 760px) {
	.hud-contact-grid { grid-template-columns: 1fr; align-items: start; }
	.hud-contact-media img { min-height: 0; height: auto; }
}

/* --- Support page --- */
/* The generic .section (104px) / .soft-section (100px) bands are oversized for
   this interior page. Trim them for an even rhythm, and pull the Exam Related
   Topics band closer to the intro prose above it (which already adds 60px). */
.hud-support-topics-section { padding-block: 48px 64px; }
.hud-topics-exam { padding-top: 28px; }
.hud-band-title { color: var(--navy-dark); font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 700; margin: 0 0 14px; }
/* Live: section title is a large dark heading sitting above a thin full-width
   accent bar (pistachio for Exam Related Topics, navy for Account Support). */
.hud-band-bar { position: relative; padding: 0 0 16px; margin: 0 0 24px; }
.hud-band-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--pistachio); border-radius: 4px; }
.hud-band-bar-navy::after { background: var(--navy); }
.hud-band-lede { color: var(--muted); max-width: 780px; margin: 0 0 34px; line-height: 1.6; }
.hud-topic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; align-items: start; }
.hud-topic-card { background: transparent; padding: 0; }
.hud-topic-card h3 { display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; background: var(--navy); border-radius: 25px; padding: 12px 20px; font-size: 1.05rem; text-align: center; margin: 0 0 18px; }
.hud-topic-card h3::after { content: "\2192"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 0.8rem; }
/* Account Support card titles are links; keep them white on the navy pill (not
   the default anchor blue) and only underline on interaction. */
.hud-topic-card h3 a { color: inherit; text-decoration: none; }
.hud-topic-card h3 a:hover, .hud-topic-card h3 a:focus { color: inherit; text-decoration: underline; }
.hud-topic-card > p { color: var(--ink); margin: 0 0 14px; line-height: 1.6; padding-inline: 4px; }
.hud-topic-card ul { margin: 0; padding-left: 4px; list-style: none; color: var(--ink); line-height: 1.7; }
.hud-topic-card li { position: relative; margin: 9px 0; padding-left: 30px; }
.hud-topic-card li::before { content: "\2713"; position: absolute; left: 0; top: 2px; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 11px; }
/* Exam Related Topics: green pills + green check bullets. Account Support: navy. */
.hud-topics-exam .hud-topic-card h3 { background: var(--pistachio); color: var(--navy-dark); }
.hud-topics-exam .hud-topic-card li::before { background: var(--pistachio); color: var(--navy-dark); }
.hud-band-cta { margin: 28px 0 0; }
/* Interleaved topic photos (live pairs each card with a photo). */
.hud-topic-photo img, .hud-account-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }
/* Exam Related Topics: photo, then title, then list, inside one card. The four
   photos are about 526px square, so when they stood in their own grid cells they
   filled half the shell, towered over the card beside them and left a block of
   white space under the shorter card. As a band across the top of its own card
   each photo is a fixed 170px tall, and the row is sized by the cards. The band
   crops the frame, so a photo whose subject is not centred says where to anchor
   (see .hud-topic-photo-top). */
.hud-topic-grid-photos { align-items: stretch; }
.hud-topic-grid-photos .hud-topic-card { background: #fff; border: 1px solid #e6e9ef; border-radius: 10px; padding: 0 0 18px; overflow: hidden; }
.hud-topic-grid-photos .hud-topic-card h3 { margin: 0 18px 16px; }
.hud-topic-grid-photos .hud-topic-card > p,
.hud-topic-grid-photos .hud-topic-card ul { padding-inline: 22px; }
.hud-topic-grid-photos .hud-topic-photo { height: 170px; margin: 0 0 18px; }
.hud-topic-grid-photos .hud-topic-photo img { object-position: center 35%; border-radius: 0; }
.hud-topic-grid-photos .hud-topic-photo-top img { object-position: center top; }
.hud-account-photo { margin: 0 0 30px; }
.hud-account-photo img { max-height: 340px; }

@media (max-width: 760px) {
	.hud-topic-grid { grid-template-columns: 1fr; }
	/* One column: the cards are full width, so the bands can be shallower. */
	.hud-topic-grid-photos .hud-topic-photo { height: 150px; }
}

/* ==========================================================================
   Account dashboard (logged-in /account page).
   ========================================================================== */
.hud-account h1 { color: var(--navy-dark); }
.hud-account a { color: var(--navy); }
/* Yellow two-factor security banner. */
/* Exam-not-registered alert. */
.hud-account .alert-light { background: var(--soft); border: 1px solid var(--line); border-radius: 6px; padding: 18px 22px; }
.hud-account .alert-light .fa-exclamation-circle { color: var(--navy); margin-right: 8px; }
/* Status tabs. */
.hud-account .nav-tabs { border-bottom: 1px solid var(--line); }
.hud-account .nav-tabs .nav-link { color: var(--muted); font-weight: 700; border: none; }
.hud-account .nav-tabs .nav-link.active { color: var(--navy-dark); border-bottom: 3px solid var(--pistachio); background: transparent; }
/* Status cards. */
.hud-account .card { border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.hud-account .card-title { color: var(--navy-dark); }
.hud-account .btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.hud-account .btn-primary:hover { background: var(--navy-dark); border-color: var(--navy-dark); }
/* Full-width tinted bands (Inside Your Account, Know Before You Register). */
/* SC-08 Training Center: portal feature band + section headings. */
.hud-tc-lede { font-size: 1.1rem; max-width: 60rem; }
.hud-tc-portal { background: var(--navy); color: #fff; border-radius: 8px; padding: 36px 40px; box-shadow: var(--shadow); }
.hud-tc-portal h2 { color: #fff; margin: 0 0 16px; }
.hud-tc-benefits { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; max-width: 52rem; }
.hud-tc-benefits li { padding-left: 28px; position: relative; line-height: 1.55; }
.hud-tc-benefits li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 14px; border-radius: 50%; background: var(--pistachio); }
.hud-tc-actions { display: flex; flex-wrap: wrap; gap: 14px; }
/* SC-46: direct Training Portal sign-in under the portal box buttons (light on HUD Blue, AA). */
.hud-tc-portal-signin { margin: 18px 0 0; color: #d2deea; font-size: .95rem; }
.hud-tc-portal-signin a { color: #c9e6ad; font-weight: 700; }
.hud-tc-portal-signin a:hover, .hud-tc-portal-signin a:focus-visible { color: #fff; }
.hud-tc-section-note a { color: var(--navy); font-weight: 700; }
.hud-tc-section-title { color: var(--navy-dark); margin-bottom: 18px; }
.hud-tc-section-note { color: var(--muted); max-width: 60rem; margin-bottom: 20px; }
@media (max-width: 767px) { .hud-tc-portal { padding: 26px 22px; } }
/* SC-48: Training Center - choose where to study once ("Two ways to study"), then the four materials as one set. */
.hud-tc-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.hud-tc-way { display: flex; flex-direction: column; border-radius: 8px; padding: 32px 36px; }
.hud-tc-way h3 { margin: 0 0 12px; font-size: 1.6rem; color: var(--navy-dark); }
.hud-tc-portal.hud-tc-way h3 { color: #fff; }
.hud-tc-way-lede { margin: 0 0 16px; }
.hud-tc-way--site { background: #eef3f7; border: 1px solid var(--line); }
.hud-tc-way .hud-tc-benefits { margin-bottom: 24px; }
.hud-tc-way-actions { margin-top: auto; }
.hud-tc-way .hud-tc-portal-signin a { display: inline-flex; align-items: center; min-height: 44px; }
.hud-tc-button-quiet { background: #fff; color: var(--navy); border: 2px solid var(--navy); }
.hud-tc-button-quiet:hover { background: var(--soft); color: var(--navy-dark); }
.hud-tc-materials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.hud-tc-materials .training-tool-card { height: 100%; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgba(22, 54, 103, .08); }
.hud-tc-marker { display: inline-block; align-self: flex-start; margin: 0 0 12px; padding: 4px 10px; border: 1px solid; border-radius: 999px; line-height: 1.3; }
.hud-tc-marker--both { color: var(--navy); background: var(--soft); border-color: var(--navy); }
.hud-tc-marker--portal { color: var(--muted); background: #fff; border-color: var(--muted); }
.hud-training-center .btn { min-height: 44px; display: inline-flex; align-items: center; }
.hud-training-center .btn:focus-visible, .hud-training-center .accordion-button:focus-visible { outline: 3px solid var(--hud-honolulu-blue); outline-offset: 2px; }
@media (max-width: 640px) { .hud-tc-ways, .hud-tc-materials { grid-template-columns: 1fr; } .hud-tc-way { padding: 26px 22px; } }
/* SC-50: Training Center polish - section spacing; the two study columns share rows (subgrid) so their titles,
   lists and buttons line up; material cards use the site card chrome and navy .button-primary. */
.hud-training-center > section:first-of-type { margin-top: 44px; }
.hud-tc-section-title + .hud-tc-section-note { margin-top: -8px; }
@supports (grid-template-rows: subgrid) {
	@media (min-width: 641px) {
		.hud-tc-ways { row-gap: 0; }
		.hud-tc-way { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
		.hud-tc-way--site > h3 { grid-row: 2; }
		.hud-tc-way--site > .hud-tc-benefits { grid-row: 3 / 5; align-self: start; }
		.hud-tc-way--site > .hud-tc-way-actions { grid-row: 5; }
		.hud-tc-way-actions { margin-top: 0; }
	}
}
.hud-tc-materials .card-body { padding: 22px 22px 24px; }
.hud-tc-materials .card-title { margin: 0 0 10px; color: var(--navy-dark); }
.hud-tc-materials .card-text { margin-bottom: 18px; }
.hud-tc-materials .button { margin-top: auto; align-self: flex-start; }
/* Headings are written in title case in the pattern, so small words (to, on, the) stay lowercase here. */
.hud-training-center .hud-tc-section-title, .hud-training-center .hud-tc-way h3, .hud-training-center .hud-account-band > .container > h2 { text-transform: none; }
.hud-account-band { background: var(--soft); }
.hud-account-band h2 { color: var(--navy-dark); }
.hud-account-band h3, .hud-account-band h4 { color: var(--navy-dark); }
.hud-account-band h4 a { color: var(--navy); font-weight: 700; text-decoration: none; }
.hud-account-band h4 a:hover { text-decoration: underline; }
.hud-account-band .fa-user-circle { color: var(--navy); }
/* Pre-exam checklist rows (account dashboard). These Bootstrap `.form-check`
   controls sit outside `.hud-account`, so scope by `.form-check` (used only
   here). The theme's generic `input` rule in style.css leaks padding, full
   width, and a larger font size onto the checkbox, distorting the 1em box;
   reset those to Bootstrap's intended sizing without touching its border,
   background, or checked-state appearance. */
.form-check .form-check-input[type="checkbox"] {
	width: 1.15em;
	height: 1.15em;
	padding: 0;
	margin-top: 0.2em;
	font-size: 1rem;
	line-height: normal;
}
.form-check .form-check-label { color: var(--ink); font-weight: 700; }
.form-check .form-check-label small { font-weight: 400; }

/* ==========================================================================
   Auth pages (custom /login and /register), tabbed card layout.
   ========================================================================== */
.hud-auth-section { padding-block: 48px 64px; }
.hud-auth-shell { max-width: 560px; }
.hud-auth-title { color: var(--navy-dark); font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 0 0 18px; }
/* Primary tabs (Log in | Reset your password): see the "Log in / Reset your
   password" block below (SC-26), which restyled them as underline tabs. */
.hud-auth-tabs { display: flex; flex-wrap: wrap; }
/* Field help text (e.g. username-or-email hint) and inline checkbox row. */
.hud-field-help { display: block; color: var(--muted); font-size: .82rem; margin: 6px 0 0; }
.hud-field--check { display: flex; align-items: center; }
.hud-check-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; color: var(--ink); }
.hud-check-label input { width: auto; }
/* Field groups (a form's `groups`), e.g. the candidate profile sections. */
.hud-fieldset { border: 0; border-top: 1px solid var(--line); margin: 0 0 8px; padding: 18px 0 0; min-width: 0; }
.hud-fieldset:first-of-type { border-top: 0; padding-top: 0; }
.hud-fieldset__legend { float: none; width: auto; padding: 0; margin: 0 0 6px; color: var(--navy-dark); font-size: 1.05rem; font-weight: 700; }
.hud-fieldset__help { margin: 0 0 14px; color: var(--muted); font-size: .9rem; }
.hud-auth-alt { margin: 20px 0 0; color: var(--muted); }
.hud-auth-alt a { color: var(--navy); font-weight: 600; }
/* Standing instruction above an auth form (e.g. what the reset page will send). */
.hud-auth-help { margin: 0 0 20px; color: var(--muted); font-size: .95rem; }
/* "What happens next" panel on /create-account/. The step that matters most
   happens in Acadis, minutes later, so it is given standing space on the page
   rather than living only in a flash notice the visitor may never see again. */
.hud-auth-next { margin: 28px 0 0; padding: 20px 22px; background: var(--soft); border: 1px solid var(--line); border-radius: 8px; }
.hud-auth-next-title { margin: 0 0 12px; color: var(--navy-dark); font-size: 1.05rem; font-weight: 700; }
.hud-auth-steps { margin: 0; padding-inline-start: 1.25em; color: var(--ink); }
.hud-auth-steps li { margin: 0 0 10px; line-height: 1.5; }
.hud-auth-steps li:last-child { margin-bottom: 0; }
.hud-auth-steps strong { display: block; color: var(--navy-dark); }
.hud-auth-next .hud-auth-help { margin: 14px 0 0; }
/* Standing intro under an auth/payment heading, and the small print beneath a
   form. Both were in use on /create-account/ and /exam-payment/ before they had
   any rules, so they inherited body copy and read as undifferentiated text. */
.hud-auth-lede { margin: 0 0 22px; color: var(--ink); font-size: 1.02rem; line-height: 1.6; }
.hud-auth-note { margin: 18px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.hud-auth-note a { color: var(--navy); font-weight: 600; }

/* --- Auth pages: shared field treatment (SC-26, 2026-09-26) --- */
/* /create-account/, /login/ and /reset/ share these. The section sits on the
   surface tone so a white form card reads as a card. Controls are 46px tall
   at 1rem in weight 400 on a #7a8899 border (3.6:1 against white, WCAG
   1.4.11); every focusable element gets the same solid 3px ring; nothing
   below is set under 0.875rem, and spacing keeps to the USWDS unit scale.
   Selects are flat with an inline navy chevron, and "- Select -" reads as a
   placeholder (the :has() rule; older browsers show it in the ink colour). */
.hud-auth-section { background: var(--soft); }
.hud-auth-section .hud-auth-lede { color: var(--muted); }
.hud-auth-section .hud-field { min-width: 0; }
.hud-auth-section .hud-field label { margin: 0 0 8px; font-size: .875rem; font-weight: 600; line-height: 1.25rem; }
.hud-auth-section .hud-field input, .hud-auth-section .hud-field select { box-sizing: border-box; height: 46px; padding: 0 14px; border: 1px solid #7a8899; border-radius: 6px; font-size: 1rem; font-weight: 400; line-height: 1.2; color: var(--ink); background-color: #fff; }
.hud-auth-section .hud-field input { max-width: 30rem; }
.hud-auth-section .hud-field select { -webkit-appearance: none; appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23163667' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px; }
.hud-auth-section .hud-field select:has(option[value=""]:checked) { color: var(--muted); }
.hud-auth-section .hud-field select option { color: var(--ink); }
.hud-auth-section .hud-field .hud-check-label { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; font-size: .9rem; font-weight: 400; line-height: 1.25rem; color: var(--ink); }
.hud-auth-section .hud-check-label input { width: 20px; height: 20px; margin: 0; padding: 0; flex: 0 0 auto; accent-color: var(--navy); }
.hud-auth-section .hud-field--error input, .hud-auth-section .hud-field--error select { border: 2px solid var(--sinopia); }
.hud-auth-section .hud-field-help, .hud-auth-section .hud-field-error { margin: 8px 0 0; font-size: .875rem; line-height: 1.25rem; }
.hud-auth-section .hud-submit-button { align-items: center; min-height: 48px; padding: 0 32px; border-radius: 6px; font-size: 1rem; font-weight: 600; box-shadow: 0 8px 20px rgba(22, 54, 103, .2); }
/* Visible focus (WCAG 2.4.7 / 1.4.11): one ring for everything, never removed. */
.hud-auth-section a:focus-visible, .hud-auth-section button:focus-visible, .hud-auth-section input:focus-visible, .hud-auth-section select:focus-visible, .hud-auth-section textarea:focus-visible, .hud-auth-section [tabindex]:focus-visible { outline: 3px solid var(--hud-honolulu-blue); outline-offset: 2px; box-shadow: none; }
@media (max-width: 640px) {
	.hud-auth-section { padding-block: 24px 40px; }
	.hud-auth-section .hud-field input { max-width: none; }
}

/* --- Create Account: the registration form as a card (SC-25, 2026-09-26; reworked SC-26) --- */
/* The auth shell is 560px wide for the sign-in and reset pages. The
   registration form has six sections and two-column rows, so its shell is
   wider and the form itself is the white card. Each fieldset is a 12-column
   grid and fields are placed by the per-field class the renderer adds
   (hud-field--<key>), so nothing here reaches other forms. The section
   number is a CSS counter on the legend and never typed into the DOM. */
.hud-auth-shell--wide { max-width: 760px; }
.hud-auth-shell--wide .hud-auth-lede { max-width: 690px; }
.hud-auth-shell--wide .hud-auth-alt { margin-top: 24px; text-align: center; }
/* /create-account/ on the Webassessor platform (SC-32): what the form creates, said before the
   candidate fills it in. Two cards (Counselor Account / Training Portal account), a callout and a
   "have ready" line sit between the title and the form, and the "Already have an account?" line
   moves under the title. Everything is scoped to the wide shell or to its own hud-auth-* classes,
   so the sign-in and reset pages are untouched. Colours are the theme tokens; the callout's left
   rule is Pistachio per the OHC guide. */
.hud-auth-shell--wide .hud-auth-alt--top { margin: -6px 0 18px; text-align: left; font-size: .95rem; }
.hud-auth-shell--wide .hud-auth-lede { margin-bottom: 8px; color: var(--ink); }
.hud-auth-returning { margin: 0 0 24px; max-width: 690px; color: var(--ink); font-size: .98rem; line-height: 1.55; }
.hud-auth-creates { margin: 0 0 22px; }
.hud-auth-creates__title { margin: 0 0 14px; color: var(--navy-dark); font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
.hud-auth-cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
.hud-auth-card { margin: 0; padding: 20px 22px 16px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(22, 54, 103, .06); }
.hud-auth-card__head { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.hud-auth-card__icon { flex: 0 0 52px; width: 52px; height: 52px; }
.hud-auth-card__eyebrow { margin: 0 0 3px; color: var(--muted); font-size: .76rem; font-weight: 600; letter-spacing: .05em; line-height: 1.2; text-transform: uppercase; }
.hud-auth-card__title { margin: 0; color: var(--navy-dark); font-size: 1.08rem; font-weight: 700; line-height: 1.3; }
.hud-auth-card p { margin: 0 0 10px; color: var(--ink); font-size: .95rem; line-height: 1.55; }
.hud-auth-card .hud-auth-card__lead { margin-bottom: 6px; font-weight: 600; }
.hud-auth-card__list { margin: 0 0 12px; padding-inline-start: 1.15em; color: var(--ink); font-size: .95rem; line-height: 1.5; }
.hud-auth-card__list li { margin: 0 0 6px; }
.hud-auth-card .hud-auth-card__note { margin-bottom: 0; color: var(--muted); font-size: .9rem; }
.hud-auth-callout { display: flex; align-items: flex-start; gap: 12px; margin: 16px 0 0; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--pistachio); border-radius: 6px; }
.hud-auth-callout p { margin: 0; color: var(--ink); font-size: .95rem; line-height: 1.55; }
.hud-auth-callout__icon { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 2px; }
.hud-auth-ready { margin: 0 0 6px; }
.hud-auth-privacy { margin: 0 0 18px; font-size: .9rem; }
/* SC-38: "What happens when you submit this form" - three steps, each an OHC-style icon
   joined to the next by a thin rule. */
.hud-auth-flow { margin: 0 0 22px; }
.hud-auth-flow__title { margin: 0 0 18px; color: var(--navy-dark); font-size: 1.3rem; font-weight: 700; line-height: 1.3; text-transform: none; }
.hud-auth-flow__steps { margin: 0; padding: 0; list-style: none; }
.hud-auth-flow__step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; padding: 0 0 22px; }
.hud-auth-flow__step:last-child { padding-bottom: 0; }
.hud-auth-flow__step:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--line); }
.hud-auth-flow__icon { width: 44px; height: 44px; }
.hud-auth-flow__body p { margin: 0; color: var(--ink); font-size: .95rem; line-height: 1.55; }
/* SC-39: a note under a field that opens on demand (native <details>). */
.hud-field-details { margin: 8px 0 0; font-size: .875rem; line-height: 1.25rem; }
.hud-field-details > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; list-style: none; }
.hud-field-details > summary::-webkit-details-marker { display: none; }
.hud-field-details > summary::before { content: ""; flex: 0 0 auto; border-left: 6px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.hud-field-details[open] > summary::before { transform: rotate(90deg); }
.hud-field-details > p { margin: 4px 0 0; color: var(--ink); }
.hud-auth-flow__body .hud-auth-flow__head { margin: 8px 0 4px; font-family: "Poppins", Arial, Helvetica, sans-serif; color: var(--navy-dark); font-size: 1.02rem; font-weight: 700; line-height: 1.35; }
@media (min-width: 768px) {
	.hud-auth-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
	.hud-auth-card { padding: 16px 16px 14px; }
	.hud-auth-card__icon { flex-basis: 44px; width: 44px; height: 44px; }
}
.hud-form--new_account { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 40px; box-shadow: 0 12px 32px rgba(22, 54, 103, .08); overflow: hidden; counter-reset: hud-step; }
.hud-form--new_account .hud-fieldset { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 24px; border: 0; border-bottom: 1px solid var(--line); margin: 0; padding: 0 0 32px; }
.hud-form--new_account .hud-fieldset:last-of-type { border-bottom: 0; padding-bottom: 0; }
.hud-form--new_account .hud-fieldset + .hud-fieldset { margin-top: 24px; }
.hud-form--new_account .hud-fieldset__legend { counter-increment: hud-step; display: flex; align-items: center; gap: 12px; margin: 0; padding: 0 0 16px; font-size: 1.125rem; font-weight: 600; line-height: 1.75rem; color: var(--navy-dark); }
.hud-form--new_account .hud-fieldset:has(.hud-fieldset__help) .hud-fieldset__legend { padding-bottom: 4px; }
.hud-form--new_account .hud-fieldset__legend::before { content: counter(hud-step); flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; font-size: .875rem; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.hud-form--new_account .hud-fieldset__help { grid-column: 1 / -1; margin: 0; padding-left: 40px; font-size: .875rem; line-height: 1.25rem; color: var(--muted); }
/* Every field spans the row unless it is one of the pairs below. */
.hud-form--new_account .hud-field { grid-column: 1 / -1; margin: 0; }
.hud-form--new_account .hud-field--first_name, .hud-form--new_account .hud-field--last_name,
.hud-form--new_account .hud-field--password, .hud-form--new_account .hud-field--confirm_password,
.hud-form--new_account .hud-field--phone_no, .hud-form--new_account .hud-field--fax,
.hud-form--new_account .hud-field--counselors_id, .hud-form--new_account .hud-field--agency_fha_hcs_id,
.hud-form--new_account .hud-field--occupation, .hud-form--new_account .hud-field--employer,
.hud-form--new_account .hud-field--language, .hud-form--new_account .hud-field--training { grid-column: span 6; }
/* City / State / ZIP on one row. */
.hud-form--new_account .hud-field--addr_city { grid-column: span 5; }
.hud-form--new_account .hud-field--addr_state { grid-column: span 3; }
.hud-form--new_account .hud-field--addr_zip { grid-column: span 4; }
/* SC-36: with no City / ZIP in the fieldset, State takes a half row, beside the
   FHA Connection Counselor ID. :where() keeps this below the phone rule. */
.hud-form--new_account :where(.hud-fieldset:not(:has(.hud-field--addr_city))) .hud-field--addr_state { grid-column: span 6; }
/* SC-37: in "Your account" the ID note sits under the First / Last Name row, with
   State and the Counselor ID after it. Visual order only; the note stays first in
   the markup, right after the legend. */
.hud-form--new_account .hud-fieldset--identity:has(.hud-field--first_name) .hud-fieldset__legend { padding-bottom: 16px; }
.hud-form--new_account .hud-fieldset--identity:has(.hud-field--first_name) .hud-fieldset__help { order: 1; padding-left: 0; margin-top: -8px; }
.hud-form--new_account .hud-fieldset--identity:has(.hud-field--first_name) .hud-field--addr_state,
.hud-form--new_account .hud-fieldset--identity:has(.hud-field--first_name) .hud-field--counselors_id { order: 2; }
/* Question rows: the question on the left, a short select on the right, a
   rule under each. The yes/no in Counseling role and the voluntary block.
   Help and error text, when present, take a full line beneath. */
.hud-form--new_account .hud-field--direct_provider,
.hud-form--new_account .hud-fieldset--demographics .hud-field:not(.hud-field--check) { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.hud-form--new_account .hud-field--direct_provider label,
.hud-form--new_account .hud-fieldset--demographics .hud-field:not(.hud-field--check) label { flex: 1 1 0; min-width: 0; margin: 0; font-size: .9rem; font-weight: 500; line-height: 1.25rem; color: var(--ink); }
.hud-form--new_account .hud-field--direct_provider select,
.hud-form--new_account .hud-fieldset--demographics .hud-field:not(.hud-field--check) select { flex: 0 0 168px; width: 168px; height: 44px; }
.hud-form--new_account .hud-field--direct_provider .hud-field-help, .hud-form--new_account .hud-field--direct_provider .hud-field-error,
.hud-form--new_account .hud-fieldset--demographics .hud-field-help, .hud-form--new_account .hud-fieldset--demographics .hud-field-error { flex: 1 0 100%; margin: 0; }
/* The seven voluntary rows sit flush, like a list. */
.hud-form--new_account .hud-fieldset--demographics { row-gap: 0; }
.hud-form--new_account .hud-fieldset--demographics .hud-fieldset__help { margin-bottom: 12px; }
.hud-form--new_account .hud-fieldset--demographics .hud-field:not(.hud-field--check):first-of-type { border-top: 1px solid var(--line); }
.hud-form--new_account .hud-fieldset--demographics .hud-field--check { margin-top: 16px; }
.hud-form--new_account .hud-submit-button { margin-top: 32px; }
/* The Privacy Act statement as the card's grey footer. */
.hud-form--new_account .hud-form-after-submit { margin: 32px -40px -40px; padding: 24px 40px; background: var(--soft); border-top: 1px solid var(--line); font-size: .875rem; line-height: 1.5; }
@media (max-width: 640px) {
	.hud-form--new_account { padding: 24px 20px; }
	.hud-form--new_account .hud-fieldset { gap: 16px; }
	.hud-form--new_account .hud-fieldset { padding-bottom: 24px; }
	.hud-form--new_account .hud-fieldset:last-of-type { padding-bottom: 0; }
	.hud-form--new_account .hud-fieldset__legend { font-size: 1.0625rem; }
	.hud-form--new_account .hud-fieldset .hud-field { grid-column: 1 / -1; }
	.hud-form--new_account .hud-field--direct_provider select,
	.hud-form--new_account .hud-fieldset--demographics .hud-field:not(.hud-field--check) select { flex-basis: 128px; width: 128px; padding: 0 32px 0 12px; background-position: right 12px center; }
	.hud-form--new_account .hud-submit-button { display: flex; width: 100%; justify-content: center; margin-top: 24px; }
	.hud-form--new_account .hud-form-after-submit { margin: 24px -20px -24px; padding: 20px 20px 24px; }
}

/* --- Log in / Reset your password: the auth form as a card (SC-26, 2026-09-26) --- */
/* The same treatment on the 560px shell: underline tabs above the card (the
   active tab keeps aria-current="page" and its underline, so it is not told
   apart by colour alone), the form as the white card, one full-width primary
   action, and the alternative ("Forgot your password?", "Remembered it? Log
   in") centred beneath. Scoped to form.hud-auth-form and the tab strip, so
   the registration and contact forms are untouched. */
.hud-auth-tabs { gap: 24px; margin: 0 0 24px; border-bottom: 1px solid var(--line); }
.hud-auth-tab { display: inline-block; padding: 8px 0 12px; margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; color: var(--muted); font-size: .9375rem; font-weight: 600; line-height: 1.375rem; text-decoration: none; }
.hud-auth-tab:hover, .hud-auth-tab:focus-visible { background: none; color: var(--navy); text-decoration: none; }
.hud-auth-tab.is-active { background: none; border-color: transparent; border-bottom-color: var(--navy); color: var(--navy-dark); cursor: default; }
.page-template-page-login .hud-auth-help, .page-template-page-reset .hud-auth-help { margin: 0 0 20px; font-size: .9375rem; line-height: 1.55; }
form.hud-auth-form { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 32px 40px 40px; box-shadow: 0 12px 32px rgba(22, 54, 103, .08); }
.hud-auth-form .hud-field { margin: 0 0 20px; }
.hud-auth-form .hud-field--check { margin: 0 0 24px; }
.hud-auth-form .hud-submit-button { display: flex; width: 100%; justify-content: center; margin: 0; }
.hud-auth-form + .hud-auth-alt { margin: 20px 0 0; text-align: center; font-size: .9375rem; }
.hud-auth-form + .hud-auth-alt a { font-weight: 700; }
@media (max-width: 640px) {
	.hud-auth-tabs { gap: 20px; margin-bottom: 24px; }
	form.hud-auth-form { padding: 24px 20px; }
	.hud-auth-form .hud-field { margin-bottom: 16px; }
}

/* --- Exam payment --- */
/* The registration a candidate is about to pay for. Presented as a bordered
   summary rather than loose paragraphs because this is the one moment they can
   catch a wrong exam before money moves, so it has to read as a receipt to be
   checked rather than as prose to be skimmed. */
.hud-exam-summary { margin: 0 0 24px; padding: 4px 22px; background: var(--soft); border: 1px solid var(--line); border-radius: 8px; }
.hud-exam-summary__row { display: grid; grid-template-columns: minmax(140px, 34%) 1fr; gap: 8px 18px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.hud-exam-summary__row:last-child { border-bottom: 0; }
.hud-exam-summary dt { margin: 0; color: var(--muted); font-size: .86rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.hud-exam-summary dd { margin: 0; color: var(--navy-dark); font-weight: 600; }

/* Outcome panel on return from the payment page. The accent colour is the
   whole point: "enrolled", "still finishing" and "nothing was charged" are
   three different states and a candidate should not have to read carefully to
   tell which one they are looking at. */
.hud-exam-outcome { margin: 0 0 24px; padding: 18px 22px; background: var(--soft); border: 1px solid var(--line); border-left: 5px solid var(--navy); border-radius: 8px; }
.hud-exam-outcome p { margin: 0 0 10px; line-height: 1.6; }
.hud-exam-outcome p:last-child { margin-bottom: 0; }
/* The card answers one question at a glance: did the payment work?

   Every state reachable through Clover's success URL means the money moved, so
   all of them read as success, in the same pistachio the rest of the site uses
   for it. What differs between them — enrollment confirmed, still applying, or
   needing Support — is carried by the copy, because that is a detail rather
   than an alarm.

   Corrected 2026-09-11 after a candidate whose payment had *succeeded* read the
   amber edge as failure. Reserving a cautionary colour for "we are still
   working on it" mis-weights the message: the candidate cares that they have
   paid, and the one thing still outstanding is ours to finish, not theirs. */
.hud-exam-outcome--enrolled,
.hud-exam-outcome--received,
.hud-exam-outcome--pending {
	background: var(--pistachio-soft);
	border-color: var(--pistachio);
	border-left-color: #1e7d32;
}
/* Cancelled or failed at Clover: no money moved. Neutral rather than red —
   a cancelled payment is a choice, not an error. */
.hud-exam-outcome--stopped { border-left-color: var(--muted); }
.hud-exam-outcome__exam { margin: 0 0 10px; color: var(--navy-dark); font-weight: 700; }

/* Test-mode banner. Deliberately loud: this state enrols somebody without
   charging them, and nobody demonstrating the site should mistake it for the
   real thing. */
.hud-exam-testmode { margin: 0 0 20px; padding: 12px 16px; background: #fff8e1; border: 1px solid #e0b400; border-radius: 6px; color: #5c4600; font-size: .92rem; line-height: 1.5; }

/* Handoff band: the primary action plus the "no account yet" route beneath it.
   The second line only renders where /create-account/ is provisioned. */
.handoff-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.handoff-alt { margin: 0; color: var(--muted); font-size: .92rem; }
.handoff-alt a { color: var(--navy); font-weight: 600; }
/* Neutral notice (e.g. closed-registration message). */
.hud-form-message--notice { background: #fbf6dd; color: var(--navy-dark); border: 1px solid #f0e6a6; }

/* ==========================================================================
   Exam Related Topics (interior /exam-related-topics page).
   Live: light-gray head band with breadcrumb, large title, and a row of green
   pill tabs; white body reusing the .hud-prose type scale.
   ========================================================================== */
.hud-ert-head { background: var(--soft); padding: 22px 0 30px; }
.hud-ert-breadcrumb { margin: 0 0 14px; }
.hud-ert-breadcrumb a { color: var(--navy); font-weight: 700; text-decoration: none; }
.hud-ert-breadcrumb a:hover, .hud-ert-breadcrumb a:focus-visible { text-decoration: underline; }
.hud-ert-head h1 { color: var(--navy-dark); font-size: clamp(2.2rem, 4.4vw, 3.4rem); margin: 0 0 26px; }
/* Green pill tab navigation. */
.hud-ert-tabs { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 0; list-style: none; border: 0; }
.hud-ert-tabs .nav-item { margin: 0; }
.hud-ert-tabs .nav-link { display: inline-block; background: var(--pistachio); color: var(--navy-dark); font-weight: 700; font-size: .92rem; padding: 11px 22px; border: 1px solid transparent; border-radius: 4px; text-decoration: none; cursor: pointer; }
.hud-ert-tabs .nav-link:hover, .hud-ert-tabs .nav-link:focus-visible { background: var(--hud-pistachio-soft, var(--pistachio)); }
.hud-ert-tabs .nav-link.active { background: var(--pistachio); border-color: var(--navy-dark); }
/* White body; type comes from .hud-prose. */
.hud-ert-body { padding: 40px 0 64px; }
.hud-ert-section-title { color: var(--navy-dark); font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 0 0 24px; }
.hud-ert-body .hud-prose h3 { color: var(--navy-dark); font-size: 1.3rem; margin: 34px 0 12px; }
.hud-ert-body .hud-prose h4 { color: var(--navy-dark); font-size: 1.05rem; margin: 22px 0 10px; }
.hud-ert-cta { margin: 34px 0 0; }
@media (max-width: 760px) {
	.hud-ert-tabs { gap: 10px; }
	.hud-ert-tabs .nav-link { width: 100%; text-align: center; }
}

/* ==========================================================================
   Exam Center (interior /exam-center page) — HECM exam hub rebuilt from the
   live b5subtheme page: centered intro, HECM callout, eligibility list, green
   practice/CE bands, exam steps, and the FHA Connection roster process.
   ========================================================================== */
.hud-exam-center { color: var(--ink); }
.hud-exam-center a:not(.button) { color: var(--navy); text-decoration: underline; }
.hud-exam-center a:not(.button):hover, .hud-exam-center a:not(.button):focus-visible { color: var(--navy-dark); }
.hud-ec-head { padding: 22px 0 0; }
.hud-ec-intro { text-align: center; max-width: 760px; margin: 0 auto 20px; }
.hud-ec-intro h1 { color: var(--navy-dark); font-size: clamp(2.2rem, 4.4vw, 3.4rem); margin: 26px 0 20px; }
.hud-ec-intro h2 { color: var(--navy-dark); font-size: 1.7rem; margin: 0 0 14px; }
.hud-ec-intro p { color: var(--muted); margin: 0; }
.hud-ec-intro-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: center; margin: 20px 0 10px; }
.hud-ec-eyebrow { font-weight: 800; letter-spacing: .06em; color: var(--muted); margin: 0 0 8px; }
.hud-ec-intro-copy h2 { color: var(--navy-dark); font-size: 1.7rem; margin: 0 0 14px; }
.hud-ec-intro-copy p { color: var(--ink); line-height: 1.7; margin: 0 0 16px; }
.hud-ec-intro-cta { text-align: center; margin: 22px 0 0; }
.hud-ec-intro-media img { width: 100%; height: auto; border-radius: 8px; }
.hud-ec-section { padding-block: 24px; }
.hud-ec-rule { border: 0; border-top: 1px solid var(--line); margin: 30px 0; }
.hud-ec-section h3 { color: var(--navy-dark); font-size: 1.4rem; margin: 0 0 12px; }
.hud-ec-section p { color: var(--ink); line-height: 1.7; margin: 0 0 16px; }
.hud-ec-eligibility { color: var(--ink); line-height: 1.7; padding-left: 22px; }
.hud-ec-eligibility li { margin: 10px 0; }
.hud-ec-band { background: var(--pistachio-soft); padding-block: 54px; }
.hud-ec-practice { display: flex; justify-content: center; }
.hud-ec-practice-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 32px; max-width: 560px; width: 100%; text-align: center; }
.hud-ec-practice-card h3 { color: var(--navy-dark); font-size: 1.3rem; margin: 0 0 12px; }
.hud-ec-practice-card p { color: var(--muted); margin: 0 0 22px; }
.hud-ec-practice-card .button { width: 100%; }
.hud-ec-practice { gap: 28px; flex-wrap: wrap; align-items: stretch; }
.hud-ec-practice-card { flex: 1 1 320px; display: flex; flex-direction: column; }
.hud-ec-practice-card p { flex-grow: 1; }
.hud-ec-ce-lede { text-align: center; max-width: 760px; margin: 0 auto 28px; color: var(--ink); line-height: 1.7; }
.hud-ec-study { margin-top: 40px; }
.hud-ec-study-list { list-style: none; margin: 24px 0 0; padding: 0; }
.hud-ec-study-list li { margin: 0 0 20px; }
.hud-ec-study-list strong { display: block; font-size: 1.05rem; margin: 0 0 4px; }
.hud-ec-study-list p { color: var(--muted); margin: 0; line-height: 1.6; }
.hud-ec-steps { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: center; }
.hud-ec-steps-media img { width: 100%; height: auto; border-radius: 8px; }
.hud-ec-steps-copy h2 { color: var(--navy-dark); font-size: 1.7rem; margin: 0 0 16px; }
.hud-ec-steps-list { color: var(--ink); line-height: 2.4; font-size: 1.15rem; padding-left: 22px; margin: 0 0 24px; }
.hud-ec-fhac h4 { color: var(--navy-dark); font-size: 1.05rem; margin: 22px 0 10px; }
.hud-ec-ce-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 900px; margin: 0 auto; }
.hud-ec-ce-card { background: var(--pistachio); border-radius: 8px; padding: 30px; text-align: center; }
.hud-ec-ce-card h3 { margin: 0 0 10px; font-size: 1.3rem; }
.hud-ec-ce-card h3 a { color: var(--navy-dark); text-decoration: none; }
.hud-ec-ce-card h3 a:hover, .hud-ec-ce-card h3 a:focus-visible { text-decoration: underline; }
.hud-ec-ce-card p { color: var(--navy-dark); margin: 0; }
@media (max-width: 760px) {
	.hud-ec-intro-grid, .hud-ec-steps, .hud-ec-ce-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Study Guide (interior /study page) — downloadable training modules grouped
   by topic into cards, rebuilt from the live study page. PDFs resolve from the
   Media Library via hud_study_pdf_url().
   ========================================================================== */
.hud-study-head { padding-block: 28px 10px; }
.hud-study-intro { color: var(--ink); line-height: 1.7; max-width: 760px; margin: 12px 0 20px; }
.hud-study-intro a { color: var(--navy); font-weight: 700; }
.hud-study-section { padding-block: 24px 72px; }
.hud-study-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hud-study-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 28px; display: flex; flex-direction: column; }
.hud-study-card-title { color: var(--navy-dark); font-size: 1.3rem; margin: 0 0 16px; padding: 0 0 12px; border-bottom: 3px solid var(--pistachio); }
.hud-study-modules { list-style: none; margin: 0; padding: 0; }
.hud-study-modules li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.hud-study-modules li:first-child { border-top: 0; }
.hud-study-link { color: var(--navy); font-weight: 700; text-decoration: none; }
.hud-study-link:hover, .hud-study-link:focus-visible { text-decoration: underline; }
.hud-study-link[aria-disabled="true"] { color: var(--muted); cursor: not-allowed; pointer-events: none; }
.hud-study-pages { color: var(--muted); font-size: .82rem; white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 900px) {
	.hud-study-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
	.hud-study-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Glossary archive (glossary_term archive at /glossary/). A searchable,
   accessible A-Z definition list that replaces the legacy SCORM object.
   ========================================================================== */
.hud-glossary-head { padding-block: 28px 6px; }
.hud-glossary-head h1 { color: var(--navy-dark); font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin: 0 0 8px; }
.hud-glossary-head p { color: var(--muted); max-width: 720px; margin: 0; line-height: 1.6; }
.hud-glossary-body { padding-block: 20px 72px; }
.hud-glossary-controls { position: sticky; top: 0; z-index: 5; background: #fff; padding: 12px 0; border-bottom: 1px solid var(--line); }
.hud-glossary-search input { width: 100%; max-width: 520px; border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; font-size: 1rem; font-family: inherit; background: #fff; color: var(--ink); }
.hud-glossary-search input:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.hud-glossary-index { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 0; }
.hud-glossary-index a, .hud-glossary-index span { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 5px; font-weight: 800; font-size: .82rem; text-decoration: none; }
.hud-glossary-index a { color: var(--navy); background: var(--soft); border: 1px solid var(--line); }
.hud-glossary-index a:hover, .hud-glossary-index a:focus-visible { background: var(--navy); color: #fff; border-color: var(--navy); }
.hud-glossary-index span { color: var(--line); border: 1px solid transparent; }
.hud-glossary-count { color: var(--muted); font-size: .84rem; margin: 16px 0 0; }
.hud-glossary-list { margin: 8px 0 0; }
.hud-glossary-group { margin: 0 0 8px; scroll-margin-top: 120px; }
.hud-glossary-letter { color: var(--navy-dark); font-size: 1.5rem; margin: 26px 0 6px; padding: 0 0 8px; border-bottom: 3px solid var(--pistachio); }
.hud-glossary-list dl { margin: 0; }
.hud-glossary-item { padding: 16px 0; border-top: 1px solid var(--line); }
.hud-glossary-item:first-child { border-top: 0; }
.hud-glossary-item dt { color: var(--navy-dark); font-weight: 800; font-size: 1.08rem; margin: 0 0 4px; }
.hud-glossary-item dd { margin: 0; color: var(--ink); line-height: 1.7; }
.hud-glossary-empty { color: var(--muted); margin: 24px 0 0; font-weight: 700; }

/* --- Long unbroken strings --- */
/* The Privacy Act statement on /create-account/ prints its SORN URL in full,
   which is the convention for a federal notice rather than an oversight. A
   694px unbroken token has no break opportunity, so at 360px it pushed the
   document 348px wider than the viewport and every page scrolled sideways.
   `break-word` rather than `anywhere`: it breaks the offending token without
   altering intrinsic sizing, so no flex or grid track resolves differently. */
p, a, dd, li { overflow-wrap: break-word; }

/* --- Site alert (SC-55, 2026-09-28) --- */
/* The USWDS site alert (usa-site-alert), drawn by inc/site-banner.php above the
   header, after the skip link. Two types, as USWDS defines: info and emergency.
   The body is held to the site container width; the band runs full width. */
.hud-site-alert { display: block; font-family: var(--hud-font-body, Arial, Helvetica, sans-serif); }
.hud-site-alert[hidden], .hud-site-alert__dismiss[hidden] { display: none !important; }
.hud-site-alert .usa-alert { background: #e8f1f8; border-bottom: 1px solid #c7dbeb; color: var(--ink, #17233b); }
.hud-site-alert .usa-alert__body { position: relative; display: flex; align-items: flex-start; gap: 16px; max-width: 1180px; margin: 0 auto; padding: 16px 20px 16px 24px; border-left: 8px solid #1b79bb; }
.hud-site-alert__icon { flex: 0 0 auto; width: 28px; height: 28px; margin-top: 1px; color: #1b79bb; }
.hud-site-alert__content { flex: 1 1 auto; min-width: 0; }
.hud-site-alert .usa-alert__heading { margin: 0 0 4px; font-family: "Poppins", Arial, sans-serif; font-size: 1.05rem; font-weight: 600; line-height: 1.35; text-transform: none; color: var(--navy-dark, #0d2852); }
.hud-site-alert .usa-alert__text { margin: 0; font-size: 0.95rem; line-height: 1.5; color: inherit; }
.hud-site-alert .usa-alert__text + .usa-alert__text { margin-top: 6px; }
.hud-site-alert .usa-link { color: var(--navy, #163667); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.hud-site-alert .usa-link:hover { color: var(--navy-dark, #0d2852); text-decoration-thickness: 2px; }
.hud-site-alert__dismiss { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--navy, #163667); border-radius: 5px; background: #fff; color: var(--navy, #163667); font: 600 0.875rem/1 "Poppins", Arial, sans-serif; cursor: pointer; }
.hud-site-alert__dismiss:hover { background: var(--navy, #163667); color: #fff; }
.hud-site-alert .usa-link:focus-visible, .hud-site-alert__dismiss:focus-visible { outline: 3px solid var(--hud-honolulu-blue, #1b79bb); outline-offset: 2px; }
/* Emergency: the USWDS emergency colour, white text (7:1). */
.usa-site-alert--emergency .usa-alert { background: #9c3d10; border-bottom-color: #7a300c; color: #fff; }
.usa-site-alert--emergency .usa-alert__body { border-left-color: #5c2409; }
.usa-site-alert--emergency .hud-site-alert__icon,
.usa-site-alert--emergency .usa-alert__heading,
.usa-site-alert--emergency .usa-link,
.usa-site-alert--emergency .usa-link:hover { color: #fff; }
.usa-site-alert--emergency .hud-site-alert__dismiss { background: transparent; border-color: #fff; color: #fff; }
.usa-site-alert--emergency .hud-site-alert__dismiss:hover { background: #fff; color: #9c3d10; }
.usa-site-alert--emergency .usa-link:focus-visible, .usa-site-alert--emergency .hud-site-alert__dismiss:focus-visible { outline-color: #fff; }
/* Phones: the Dismiss button keeps its 44px target but shows only the X, so
   the alert does not grow a row just for it. The accessible name stays. */
@media (max-width: 640px) {
	.hud-site-alert .usa-alert__body { gap: 10px; padding: 12px 12px 14px 14px; }
	.hud-site-alert__icon { width: 22px; height: 22px; }
	.hud-site-alert .usa-alert__heading { font-size: 1rem; }
	.hud-site-alert .usa-alert__text { font-size: 0.9rem; }
	.hud-site-alert__dismiss { width: 44px; padding: 0; justify-content: center; }
	.hud-site-alert__dismiss span { display: none; }
	.hud-site-alert__dismiss svg { width: 20px; height: 20px; }
}
@media print {
	.hud-site-alert { display: none; }
}

/* --- Site notice page (SC-55) --- */
/* Content made by the Site Alert screen's "Create notice page" button
   (inc/site-notice-page.php). Headings are written in title case, so the
   theme's text-transform: capitalize is turned off inside it. */
.hud-notice-page { background: var(--soft, #f4f7f8); padding: 40px 0 56px; }
.hud-notice h1, .hud-notice h2, .hud-notice h3 { text-transform: none; color: var(--navy-dark, #0d2852); }
.hud-notice__intro { max-width: 52rem; margin-bottom: 28px; }
.hud-notice__eyebrow { margin: 0 0 10px; color: #156094; font: 800 0.76rem/1.3 "Poppins", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.hud-notice__title { margin: 0 0 14px; font-size: clamp(1.8rem, 3.2vw, 2.4rem); line-height: 1.2; font-weight: 500; }
.hud-notice__lede { margin: 0; font-size: 1.05rem; line-height: 1.65; color: var(--ink, #17233b); }
.hud-notice__card { background: #fff; border: 1px solid var(--line, #d8e1ea); border-radius: 8px; box-shadow: 0 10px 30px rgba(22, 54, 103, .06); padding: 26px 28px; margin-bottom: 24px; }
.hud-notice__card h2 { margin: 0 0 14px; font-size: 1.35rem; font-weight: 500; }
.hud-notice__card h3 { margin: 22px 0 8px; padding-top: 18px; border-top: 1px solid var(--line, #d8e1ea); font-size: 1.1rem; font-weight: 600; }
.hud-notice__card p { line-height: 1.65; color: var(--ink, #17233b); }
.hud-notice__card a:not(.button) { color: var(--navy, #163667); font-weight: 700; text-decoration: underline; }
.hud-notice__card--previous { background: var(--pistachio-soft, #eaf5df); border-color: var(--pistachio, #98cd68); }
.hud-notice__list { margin: 0 0 4px; padding-left: 1.2rem; line-height: 1.6; }
.hud-notice__list li { margin: 0 0 10px; }
.hud-notice__where { list-style: none; margin: 0; padding: 0; }
.hud-notice__where li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--line, #d8e1ea); }
.hud-notice__where li:last-child { border-bottom: 0; }
.hud-notice__what { font-weight: 700; color: var(--ink, #17233b); flex: 1 1 18rem; }
.hud-notice__tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.hud-notice__tag { display: inline-block; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line, #d8e1ea); background: var(--soft, #f4f7f8); color: var(--navy-dark, #0d2852); font: 700 0.8rem/1.4 "Poppins", Arial, sans-serif; }
.hud-notice__tag--portal { background: var(--pistachio-soft, #eaf5df); border-color: #6fa83f; }
.hud-notice__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 0; }
.hud-notice__button-quiet { background: #fff; color: var(--navy, #163667); border: 2px solid var(--navy, #163667); }
.hud-notice__button-quiet:hover { background: var(--soft, #f4f7f8); color: var(--navy-dark, #0d2852); }
.hud-notice__small { margin: 12px 0 0; font-size: 0.9rem; color: var(--muted, #536176) !important; }
.hud-notice__thanks { color: var(--muted, #536176); line-height: 1.65; max-width: 48rem; }
.hud-notice__side h2 { font-size: 1.15rem; }
.hud-notice__dates { list-style: none; margin: 0; padding: 0; }
.hud-notice__dates li { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; line-height: 1.5; color: var(--ink, #17233b); }
.hud-notice__dates li:last-child { margin-bottom: 0; }
.hud-notice__date { flex: 0 0 52px; display: flex; flex-direction: column; border: 1px solid var(--line, #d8e1ea); border-radius: 6px; overflow: hidden; text-align: center; font-family: "Poppins", Arial, sans-serif; }
.hud-notice__date span:first-child { background: var(--navy, #163667); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 0; }
.hud-notice__date span:last-child { color: var(--navy-dark, #0d2852); font-size: 1.3rem; font-weight: 700; padding: 2px 0 4px; }
.hud-notice__stack { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.hud-notice__stack .button { width: 100%; }
.hud-notice .button:focus-visible, .hud-notice a:focus-visible { outline: 3px solid var(--hud-honolulu-blue, #1b79bb); outline-offset: 2px; }
@media (min-width: 992px) { .hud-notice__side { position: static; } }
@media (max-width: 640px) { .hud-notice__card { padding: 22px 18px; } .hud-notice-page { padding-top: 28px; } }

/* --- Home exam cards (SC-54, 2026-09-28) --- */
/* Site navy buttons in both cards (were Bootstrap blue and green); the text
   links beside them in navy. */
#home_exam .hud-exam-card-cta { margin: 0 8px 8px 0; }
#home_exam .hud-exam-card-link { color: var(--navy, #163667); font-weight: 600; min-height: 44px; }
#home_exam .hud-exam-card-link:hover { color: var(--navy-dark, #0d2852); }

/* Training Portal card on My Account (inc/candidate/candidate-training-portal.php):
   one card, three states - not set up, email sent, active. */
.hud-portal-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 1px 3px rgba(22, 54, 103, .08); padding: 20px 24px; }
.hud-portal-card__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.hud-portal-card__icon { width: 44px; height: 44px; flex: 0 0 44px; }
.hud-portal-card__titles { flex: 1 1 auto; min-width: 0; }
.hud-portal-card__title { font-size: 1.15rem; font-weight: 700; color: var(--navy-dark); margin: 0; }
.hud-portal-card__sub { color: var(--muted); font-size: .9rem; margin: 2px 0 0; }
.hud-portal-card__badge { flex: 0 0 auto; font-size: .78rem; font-weight: 700; border-radius: 999px; padding: 3px 12px; border: 1px solid transparent; white-space: nowrap; }
.hud-portal-card__badge--none { background: #eef1f5; color: #3d4a5c; border-color: #dfe4ea; }
.hud-portal-card__badge--active { background: #e8f5dc; color: #2f6b14; border-color: #bfe0a3; }
.hud-portal-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 14px; }
.hud-portal-card__actions form { margin: 0; }
.hud-portal-card__aside { color: var(--muted); font-size: .9rem; margin: 0; flex: 1 1 260px; }
a.hud-portal-card__aside { flex: 0 0 auto; }
@media (max-width: 575px) { .hud-portal-card { padding: 16px; } .hud-portal-card__head { flex-wrap: wrap; } .hud-portal-card__badge { margin-left: 58px; } }
/* SC-66: the Active card's note - account created, finish setting up from the Acadis welcome email; dismissible (the site alert's colors and button). */
.hud-portal-card__note { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: #e8f1f8; border-left: 4px solid #1b79bb; border-radius: 4px; }
.hud-portal-card__note-text { flex: 1 1 auto; min-width: 0; margin: 0; font-size: .95rem; line-height: 1.5; }
.hud-portal-card__note-dismiss { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--navy, #163667); border-radius: 5px; background: #fff; color: var(--navy, #163667); font: 600 0.875rem/1 "Poppins", Arial, sans-serif; cursor: pointer; }
.hud-portal-card__note-dismiss:hover { background: var(--navy, #163667); color: #fff; }
.hud-portal-card__note-dismiss:focus-visible { outline: 3px solid var(--hud-honolulu-blue, #1b79bb); outline-offset: 2px; }
.hud-portal-card__note-dismiss[hidden] { display: none !important; }
@media (max-width: 575px) { .hud-portal-card__note-dismiss { width: 44px; padding: 0; justify-content: center; } .hud-portal-card__note-dismiss span { display: none; } }
/* The "Checking..." dots: each fades in turn while the Acadis check runs. Still for reduced motion. */
.hud-dots span { opacity: 0; animation: hud-dot 1.4s infinite both; }
.hud-dots span:nth-child(2) { animation-delay: .2s; }
.hud-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes hud-dot { 0%, 80%, 100% { opacity: 0; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hud-dots span { animation: none; opacity: 1; } }

/* SC-42: two-step verification set-up (/account/ and /hud_exam/ while set-up is
   pending), laid out to Scott's 9/28 mockup. Inherits the create-account field
   styles through .hud-auth-section. */
.hud-2fa__shell { max-width: 760px; }
.hud-2fa .hud-2fa__title { margin: 0 0 12px; color: var(--navy-dark); font-size: clamp(1.7rem, 3vw, 2.2rem); }
.hud-2fa__lede { max-width: 690px; margin: 0 0 28px; color: var(--ink); font-size: 1.02rem; line-height: 1.6; }
.hud-2fa-card { margin: 0 0 20px; padding: 32px 36px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 32px rgba(22, 54, 103, .08); }
.hud-2fa-card p { margin: 0 0 12px; color: var(--ink); font-size: .95rem; line-height: 1.55; }
.hud-2fa .hud-2fa-card__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 22px; color: var(--navy-dark); font-size: 1.35rem; font-weight: 600; line-height: 1.3; text-transform: none; }
.hud-2fa-badge { display: inline-block; padding: 3px 12px; border: 1px solid var(--pistachio); border-radius: 999px; background: #f1f8ea; color: var(--navy-dark); font-size: .78rem; font-weight: 600; letter-spacing: .02em; line-height: 1.4; }
.hud-2fa-steps { margin: 0; padding: 0; list-style: none; counter-reset: hud-2fa-step; }
.hud-2fa-step { position: relative; margin: 0 0 28px; padding-left: 40px; counter-increment: hud-2fa-step; }
.hud-2fa-step:last-child { margin-bottom: 0; }
.hud-2fa-step::before { content: counter(hud-2fa-step); position: absolute; top: 0; left: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; font-size: .8rem; font-weight: 700; line-height: 26px; text-align: center; }
.hud-2fa .hud-2fa-step__title { margin: 0 0 6px; color: var(--navy-dark); font-size: 1.05rem; font-weight: 600; line-height: 26px; text-transform: none; }
.hud-2fa-scan { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px 24px; margin-top: 16px; }
.hud-2fa .hud-2fa-qr { flex: 0 0 auto; margin: 0; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 6px; line-height: 0; }
.hud-2fa-qr a { display: inline-block; line-height: 1.4; }
.hud-2fa-qr svg, .hud-2fa-qr img, .hud-2fa-qr canvas { display: block; width: 168px; height: 168px; }
.hud-2fa-key { flex: 1 1 260px; min-width: 0; }
.hud-2fa-key__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.hud-2fa-key__value { padding: 8px 12px; background: var(--soft); border: 1px solid var(--line); border-radius: 4px; color: var(--ink); font-size: .9rem; letter-spacing: .04em; word-break: break-all; user-select: all; }
.hud-2fa-copy { min-height: 38px; padding: 0 14px; background: #fff; border: 1px solid var(--navy); border-radius: 6px; color: var(--navy); font-family: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.hud-2fa-copy:hover, .hud-2fa-copy:focus-visible { background: var(--soft); }
.hud-2fa .hud-2fa-key__status { margin: 0; color: var(--muted); font-size: .85rem; }
.hud-2fa .hud-2fa-key__status:empty { display: none; }
.hud-2fa .hud-2fa-key__meta { margin: 0; font-size: .9rem; }
.hud-2fa-verify { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-top: 12px; }
.hud-2fa-verify .hud-field { flex: 0 1 220px; margin: 0; }
.hud-2fa .hud-2fa-verify .hud-field input { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.1rem; letter-spacing: .3em; }
.hud-2fa .hud-2fa-submit { min-height: 46px; }
.hud-2fa .hud-2fa-secondary { min-height: 46px; background: #fff; border: 1px solid var(--navy); color: var(--navy); }
.hud-2fa .hud-2fa-secondary:hover, .hud-2fa .hud-2fa-secondary:focus-visible { background: var(--soft); }
.hud-2fa-card--email { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.hud-2fa-card__body { flex: 1 1 360px; }
.hud-2fa .hud-2fa-card--email .hud-2fa-card__title { margin-bottom: 8px; font-size: 1.2rem; }
.hud-2fa-card--email p { margin: 0; }
.hud-2fa-card--email .hud-2fa-form { margin: 0; }
.hud-2fa-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
.hud-2fa-card__actions .hud-2fa-form { margin: 0; }
.hud-2fa-card__actions a { color: var(--navy); font-size: .95rem; }
.hud-2fa-help { margin: 8px 0 0; color: var(--muted); font-size: .9rem; text-align: center; }
.hud-2fa-help a { color: var(--navy); }
@media (max-width: 640px) {
	.hud-2fa-card { padding: 24px 20px; }
	.hud-2fa-step { padding-left: 36px; }
	.hud-2fa-verify .hud-field { flex-basis: 100%; }
}