/*
 * 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. */
.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 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: center; }
.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: center; }
.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; }
	.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); }
	.navbar-brand h1, .navbar-brand .site-title h1 { font-size: 1.4rem; 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
   #cb4315 .image-circle icon above each card. */
.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; }
.icon-image { position: inherit; width: 100px; top: -65px; }
.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-resource-search { max-width: 420px; margin-inline: auto; }
.hud-resource-search input { width: 100%; border: 1px solid var(--line); border-radius: 999px; padding: 12px 20px; font-size: .95rem; }
.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); }
.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); }

@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; }
.hud-topic-grid-photos .hud-topic-photo { min-height: 240px; }
.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; }
}

/* ==========================================================================
   Account dashboard (logged-in /account page).
   ========================================================================== */
.hud-account h1 { color: var(--navy-dark); }
.hud-account a { color: var(--navy); }
/* Yellow two-factor security banner. */
.hud-account .tfa-banner { background: #fbf6dd; border: 1px solid #f0e6a6; border-radius: 6px; padding: 18px 22px; margin: 0 0 24px; }
.hud-account .tfa-banner p { margin: 0 0 10px; }
.hud-account .tfa-banner p:last-child { margin: 0; }
/* 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). */
.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 | Create account | Reset password), matching live. */
.hud-auth-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 26px; }
.hud-auth-tab { display: inline-block; padding: 10px 16px; color: var(--navy); font-weight: 600; text-decoration: none; border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; }
.hud-auth-tab:hover { background: var(--soft); text-decoration: none; }
.hud-auth-tab.is-active { color: var(--navy-dark); background: #fff; border-color: var(--line); margin-bottom: -1px; cursor: default; }
/* 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; }
.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; }
/* 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-langline { color: var(--navy-dark); font-weight: 700; }
.hud-ert-langnote { color: var(--muted); }
.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-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-lang { display: flex; flex-direction: column; gap: 6px; max-width: 320px; margin: 0 0 6px; }
.hud-study-lang label { font-weight: 700; color: var(--navy-dark); font-size: .92rem; }
.hud-study-lang select { border: 1px solid var(--line); border-radius: 5px; padding: 10px 12px; font-size: .95rem; font-family: inherit; background: #fff; color: var(--ink); }
.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; }