/* DSHA child styles — mirrors the state's child-theme pattern.
   Lighthouse component markup is never modified; anything DSHA-specific lives here. */

/* A11y fix (ours, in the sanctioned child layer): the Lighthouse CTA banner
   component puts text-white on the <h2> but not the <p>, so the paragraph
   inherits near-black body text on the #005f85 banner background = 2.31:1
   (fails WCAG AA 4.5:1). White on #005f85 = 7.4:1. Component markup untouched. */
.cta-banner .cta-text p {
	color: var(--lh-white, #fff);
}

/* White logo treatment on the dark footer (DSHA logo is dark-on-transparent) */
#lighthouse-footer .agency-logo {
	background: var(--lh-white, #fff);
	border-radius: 50%;
	padding: 0.5rem;
}

/* Footer address headings inherit brand gold like the section headings */
#lighthouse-footer address h3 {
	font-size: 1rem;
	font-weight: 600;
}

/* Crisis support card body needs its light background even outside the contact template */
.crisis-support-card .crisis-support-card-body {
	background: var(--lh-accent-4, #e9f8fe);
	padding: 1.5rem;
	border-radius: 8px;
}
.crisis-support-card {
	max-width: 44rem;
}

/* Keep the hero placeholder image from overwhelming small screens */
#large-banner-with-title > img {
	max-height: 34rem;
	object-fit: cover;
}

/* ============================================================
   Housing Delaware brand layer — from Brand Guidelines v1.0
   (references/docs/brand-guide-notes.md). Child-layer only;
   Lighthouse component markup untouched.
   ============================================================ */

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("fonts/montserrat/montserrat-var-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("fonts/montserrat/montserrat-var-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* Brand palette — Housing Delaware Brand Guidelines v1.0 */
	--hd-navy: #1e2a54;
	--hd-red: #c6424b;     /* Blush Red */
	--hd-orange: #f89d23;  /* Carrot Orange — NEVER small text on white (fails AA) */
	--hd-green: #1fa94e;   /* Jade Green */
	--hd-blue: #49a5be;    /* Pacific Blue */

	/* Program color system ("one program, one color") — proposal pending
	   DSHA confirmation; only Buy/DMP=green is official. */
	--hd-program-find: var(--hd-blue);
	--hd-program-buy: var(--hd-green);
	--hd-program-build: var(--hd-orange);
	--hd-program-partners: var(--hd-red);
	--hd-program-about: var(--hd-navy);
}

/* Typography: Montserrat headings per brand guide (Poppins body is the
   guide's own sanctioned digital fallback and Lighthouse's body font). */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: "Montserrat", "Poppins", system-ui, sans-serif;
	font-weight: 600; /* SemiBold — headlines per guide */
	color: var(--hd-navy);
}

/* Brand color strip — the 4-bar device from the guide (use once per page, top of banner) */
.hd-color-strip {
	display: flex;
	gap: 0.5rem;
	height: 6px;
}
.hd-color-strip span {
	flex: 1;
	max-width: 120px;
}
.hd-color-strip span:nth-child(1) { background: var(--hd-red); }
.hd-color-strip span:nth-child(2) { background: var(--hd-orange); }
.hd-color-strip span:nth-child(3) { background: var(--hd-green); }
.hd-color-strip span:nth-child(4) { background: var(--hd-blue); }

/* Compact page banner — interior pages (client design note: compact, not homepage-scale).
   Program accent via modifier class on the banner. */
.hd-page-banner {
	background: var(--hd-navy);
	color: #fff;
	padding: 2rem 0 2.25rem;
	border-bottom: 6px solid var(--hd-accent, var(--hd-blue));
}
.hd-page-banner h1 { color: #fff; margin-bottom: 0.25rem; }
.hd-page-banner .hd-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.85);
	font-family: "Montserrat", "Poppins", sans-serif;
	font-weight: 500;
}
.hd-program-find-housing { --hd-accent: var(--hd-program-find); }
.hd-program-buy-a-home { --hd-accent: var(--hd-program-buy); }
.hd-program-build-develop { --hd-accent: var(--hd-program-build); }
.hd-program-partners { --hd-accent: var(--hd-program-partners); }
.hd-program-about-data { --hd-accent: var(--hd-program-about); }

/* Program contact card — recurring "Questions about this program?" block */
.hd-contact-card {
	border: 1px solid var(--lh-accent-3, #afd9ed);
	border-left: 8px solid var(--hd-accent, var(--hd-navy));
	border-radius: 0.5rem;
	padding: 1.25rem 1.5rem;
	background: #fff;
}
.hd-contact-card h2, .hd-contact-card h3 { font-size: 1.125rem; margin-bottom: 0.5rem; }

/* Document rows inside accordions/lists — clean, clearly clickable (Arkansas style) */
.hd-doc-list { list-style: none; padding-left: 0; margin: 0; }
.hd-doc-list li { border-bottom: 1px solid var(--lh-gray-200, #e5e5e5); }
.hd-doc-list a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0.25rem;
	text-decoration: none;
}
.hd-doc-list a:hover { text-decoration: underline; }
.hd-doc-list .hd-doc-meta { margin-left: auto; font-size: 0.875rem; color: var(--lh-gray-700, #555); white-space: nowrap; }

/* Responsive media embed (YouTube / ArcGIS StoryMap) */
.hd-embed { position: relative; aspect-ratio: 16 / 9; }
.hd-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Pagination — Lighthouse's CSS build omits Bootstrap's pagination component,
   so the archive pagination is styled here (brand navy, AA-contrast). */
.pagination { display: flex; list-style: none; padding-left: 0; gap: 0.375rem; margin: 1.5rem 0; }
.pagination .page-link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--lh-gray-300, #d5d5d5);
	border-radius: 0.375rem;
	color: var(--hd-navy);
	text-decoration: none;
	font-family: "Montserrat", "Poppins", sans-serif;
	font-weight: 500;
}
.pagination a.page-link:hover { background: var(--lh-accent-4, #e9f8fe); }
.pagination .page-item.active .page-link {
	background: var(--hd-navy);
	border-color: var(--hd-navy);
	color: #fff;
}
.pagination .page-item.disabled .page-link { color: var(--lh-gray-600, #6b6b6b); background: var(--lh-gray-100, #f5f5f5); }

/* Chrome retint — Housing Delaware navy replaces GIC's teal-blue brand vars.
   Child-layer variable override (loads after lighthouse.css, so :root wins);
   component markup untouched. Brand-2/3 (cream/gold accents) retained. */
:root {
	--lh-brand-1: #1e2a54;
	--lh-accent-1: #1e2a54;
}