/* ---------------------------------------------------------------------------
   Housing Options (/housing-options/)

   Ported from the WordPress Altitude Pro template housing-options.css
   (eas-housing-options-wt), 2026-09-29. Everything is scoped under
   .housing-options-page. No new brand colors: the WordPress theme's token names
   are remapped onto the vanilla set, all but two of them exact matches.

   Token map
     --color-cerulean-blue   -> --eas-blue          #007cb1  exact
     --color-citrus-orange   -> --eas-citrus        #f7941e  exact
     --color-light-gray      -> --color-light       #F3F3F3  exact
     --color-navy            -> --eas-navy          #004473  exact
     --color-primary-orange  -> --color-primary     #cf4b04  exact
     --color-pale-yellow     -> --eas-pale-yellow   #ffe3b3  NOT the WordPress
         ivory #ffe9c2. The 2026-07-29 style-package port ruled that vanilla uses
         the brand-compliant pale yellow; keeping WP's ivory here would reintroduce
         an off-brand value the site already rejected.
     --color-saffron         -> --color-gold        #ffd180  nearest vanilla token.
         It was the focus ring on the old navy hero (7.08:1 on #004473). That
         hero became the program split hero (iprov-agency/eas-easterseals#223),
         whose panel is --eas-blue #007cb1, where gold measures only 3.25:1, so
         the hero ring is white (4.65:1) and gold is no longer used on this page.
         The contact band used it too until it turned light yellow (#222): gold
         on #ffe3b3 is 1.15:1, so that band uses navy instead.

   The cerulean focus ring measures 4.19:1 on the light-gray cards and 4.65:1 on
   white, both clear of the 3:1 non-text minimum, so it carries over unchanged.
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Housing Options page (page_housing-options.php)
   All rules scoped under .housing-options-page. Uses :root brand tokens from
   style.css. No new brand colors are introduced here.
--------------------------------------------------------------------------- */

.housing-options-page .alignfull {
	margin-left: calc(-100vw / 2 + 100% / 2);
	margin-right: calc(-100vw / 2 + 100% / 2);
	max-width: 100vw;
}

/* Every section rule in this file is scoped to `main` (issue #108). The
   worker wraps page content in <main> and injects the footer AFTER it, so an
   unscoped `.housing-options-page section` also matched the footer's
   <section class="footer-newsletter-band">: it took this margin and the
   container rule below, and rendered 1200px wide with 24px side padding and
   no vertical padding instead of full width with 46px top and bottom. */
/* Not the hero (iprov-agency/eas-easterseals#223). The hero is a full-bleed
   band sitting directly on the full-bleed grey finder band, so this rhythm
   margin rendered as an empty white strip between the two: 97.9px at 1440 and
   60.5px at 390, measured through wrangler dev. The rhythm belongs between the
   contained white sections, not between two bands that should touch. */
.housing-options-page main section:not(.program-hero) {
	margin-bottom: clamp(60px, 46.667px + 3.556vw, 100px);
}

/* This page came over from WordPress (page_housing-options.php), where every
   section carried a .wrap div. Only the three `alignfull` bands kept theirs in
   the vanilla build, so `section > .wrap` matched nothing on the other three and
   they rendered hard against the viewport edge: the "Four Ways to Live" heading,
   all four cards, the tip and the considerations list all started at x=0 at every
   desktop width.

   Containing the sections themselves fixes all three without three more wrapper
   divs, and keeps one mechanism for the page.

   The inset is the SITE container, --max-width with 24px gutters, rather than
   this file's old `0 5%`. 5% is proportional, so the page drifted further from
   the header the wider the screen got: content sat 48px inside the logo at 1440
   and 72px inside it at 1920. Matching site.css means every line on this page now
   starts exactly where the logo above it starts, at every width. */
.housing-options-page main section > .wrap {
	max-width: var(--max-width);
	margin-inline: auto;
	padding: 0 24px;
}

/* Deliberately its OWN rule, not a second selector on the one above. A comma
   list is invalidated as a whole by a single unsupported selector, so pairing
   these would mean a browser without :has() loses the .wrap containment it
   currently has. Split, the worst case is that this rule is skipped and the page
   degrades to exactly what it does today. */
/* The split hero (.program-hero, css/programs.css) is full bleed by design:
   its own 5% left gutter and the amber ground to the left of the photo. It has
   no .wrap, so without the :not() it would be boxed to --max-width here. */
.housing-options-page main section:not(:has(> .wrap)):not(.program-hero) {
	max-width: var(--max-width);
	margin-inline: auto;
	padding: 0 24px;
}

.housing-options-page h1,
.housing-options-page h2,
.housing-options-page h3,
.housing-options-page h4 {
	text-wrap: balance;
}

.housing-options-page p {
	text-wrap: pretty;
}

.housing-options-page .housing-options-intro {
	max-width: 68ch;
}

/* The flex and grid rules below would otherwise defeat the hidden attribute that
   the finder uses to show one question at a time. */
.housing-options-page [hidden] {
	display: none !important;
}


/* Link colour on tinted surfaces.
   The theme's link colour (cerulean blue) only reaches 4.19:1 on the light-gray
   cards and 3.92:1 on the pale-yellow callouts, both below WCAG AA. Navy clears
   9.12:1 and 8.53:1 on those same backgrounds. This audience makes that the floor,
   not a nice-to-have.
--------------------------------------------------------------------------- */

.housing-options-page .housing-options-card a,
.housing-options-page .housing-options-card-flag a,
.housing-options-page .housing-options-tip a,
.housing-options-page .housing-options-links-list a,
.housing-options-page .housing-options-result a:not(.housing-options-btn),
.housing-options-page .housing-options-result-note a,
.housing-options-page .housing-options-note-inner a {
	color: var(--eas-navy);
}


/* Focus visibility. The theme's global button system owns button look and hover.
--------------------------------------------------------------------------- */

.housing-options-page a:focus-visible,
.housing-options-page button:focus-visible,
.housing-options-page input[type="radio"]:focus-visible + label {
	outline: 3px solid var(--eas-blue);
	outline-offset: 2px;
}

/* The split hero panel is --eas-blue #007cb1, the same colour as the page's
   default ring above, which would make the ring invisible there. White on
   #007cb1 is 4.65:1, clear of the 3:1 non-text minimum. */
.housing-options-page .program-hero a:focus-visible {
	outline-color: var(--color-white);
}

/* The contact band is light yellow (#222): a navy ring, 8.14:1 on #ffe3b3. */
.housing-options-page .housing-options-contact a:focus-visible {
	outline-color: var(--eas-navy);
}

/* The split hero's .btn-primary is styled by css/programs.css
   (.program-hero-ctas .btn-primary, white border on the blue panel). The light
   yellow contact band styles its buttons with the band, below. */


/* Hero
--------------------------------------------------------------------------- */

/* The hero is the program split hero, .program-hero from css/programs.css,
   the same component /start-here/ and the program pages use
   (iprov-agency/eas-easterseals#223). No hero rules live in this file. The
   keyframes below stay: the finder results animate with them. */

@keyframes housing-options-rise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}


/* Optional editor note
--------------------------------------------------------------------------- */

.housing-options-page .housing-options-note-inner {
	max-width: 68ch;
	margin: 0 auto;
	padding: 1.25rem 1.5rem;
	background-color: var(--eas-pale-yellow);
	border-radius: 10px;
	color: var(--eas-navy);
}

.housing-options-page .housing-options-note-inner > *:last-child {
	margin-bottom: 0;
}


/* Four option cards
--------------------------------------------------------------------------- */

.housing-options-page .housing-options-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin: 2rem 0;
}

@media (min-width: 700px) {
	.housing-options-page .housing-options-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* The 6px navy slab across the top of every card is gone
   (iprov-agency/eas-easterseals#220: "The single big border screams AI
   design"), and with it the three nth-child rules that recoloured it per card.
   What replaces it is the hairline the rest of the site uses for a card,
   --color-border, so the card still reads as a card against the white page
   without a band of colour doing the work. */
.housing-options-page .housing-options-card {
	display: flex;
	flex-direction: column;
	padding: 1.75rem 1.5rem;
	background-color: var(--color-light);
	border-radius: var(--radius);
	border: 1px solid var(--color-border);
	overflow: hidden;
}

/* Photo header, on the two options Easterseals Arkansas runs (01 Community
   Living, 02 Roommate Housing) and deliberately NOT on 03 and 04: an EAS photo
   on a Group Home or ICF/IID card would imply EAS operates one
   (iprov-agency/eas-easterseals#223). The negative margins equal the card's
   padding, so the photo runs to the card's inner edge and the card's
   overflow: hidden rounds its top corners. Rows stay balanced without any
   height rule: the grid stretches both cards in a row to the taller one, the
   photo row (01, 02) and the text-only row (03, 04) are each like for like, and
   the link's margin-top: auto keeps the two links level. */
.housing-options-page .housing-options-card-media {
	margin: -1.75rem -1.5rem 1.25rem;
}

.housing-options-page .housing-options-card-media img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* The per-card colour coding is dropped outright rather than relocated. It
   carried no legend and no label, so nothing in the copy referred to it: what
   the intro leans on ("arranged from the most independent to the most
   supported") is the ORDER, and the 01-04 badges still carry that. Keeping the
   colour as text was not an option anyway: on the card fill (--color-light) the
   four brand values measure navy 9.12, blue 4.19, citrus 2.05 and orange 4.06,
   so three of the four fail WCAG AA 4.5:1 at this 0.9rem size. Reversing them
   into filled pills would have cleared AA, but the complaint on #220 is that a
   per-card colour accent reads as formula, and a row of coloured pills is the
   same formula in a new shape. All four badges stay the one navy, 9.12:1. */
.housing-options-page .housing-options-card-num {
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--eas-navy);
}

/* 0.6em below the heading, not the old 0.2em. The uppercase kicker that used to
   sit here owned the gap above the description (its own `margin: 0 0 0.9em`),
   and the kicker is gone (iprov-agency/eas-easterseals#219: "Lose the
   eyebrows."). Without this the description would sit 4px under the heading,
   because the base reset leaves these paragraphs with no margin of their own.
   The card is a flex column, so this margin does not collapse. */
.housing-options-page .housing-options-card h3 {
	margin: 0.3em 0 0.6em;
	font-size: 1.25rem;
}

/* The gap above the flag (#161). Like every paragraph on this page, the
   description above it has no bottom margin (the base reset), so the flag sat
   flush under it on cards C and D. 1.25rem matches the gap the list below the
   flag has above it. */
.housing-options-page .housing-options-card-flag {
	margin-top: 1.25rem;
	padding: 0.6rem 0.8rem;
	background-color: var(--eas-pale-yellow);
	border-radius: 10px;
	color: var(--eas-navy);
	font-size: 0.9rem;
}

/* The list's top margin is the gap under the paragraph above it (#161). The
   base reset in base.css (`*, *::before, *::after { margin: 0 }`) leaves the
   paragraphs on this page with no bottom margin, so the list sat flush against
   the description, or against the flag on the two cards that carry one.
   1.25rem above matches the 1.25rem below, so the list sits in an even band.
   The card is a flex column, so this margin does not collapse. */
.housing-options-page .housing-options-card ul {
	margin: 1.25rem 0 1.25rem 1.1rem;
	padding: 0;
	font-size: 0.95rem;
}

.housing-options-page .housing-options-card li {
	margin-bottom: 0.5rem;
}

.housing-options-page .housing-options-card-link {
	margin-top: auto;
	font-weight: 700;
}

/* No max-width here: the tip is a footer to the card grid and should line up
   with its edges, not wrap at a reading measure like the intro paragraphs do. */
.housing-options-page .housing-options-tip {
	padding: 1rem 1.25rem;
	background-color: var(--eas-pale-yellow);
	border-radius: 10px;
	color: var(--eas-navy);
}


/* Housing Finder
--------------------------------------------------------------------------- */

.housing-options-page .housing-options-finder {
	background-color: var(--color-light);
	padding: clamp(60px, 46.667px + 3.556vw, 100px) 0;
}

/* The band spans the viewport, but its contents line up with the option cards.
   860px is the theme's own content column for this layout
   (style.css `.full-width-content .content`), and the 90% tracks the 5% side
   padding the content wrapper uses below that width.
   The selector must carry `section` to outrank the generic
   `.entry-content section > .wrap` rule above. Dropping it silently reverts the
   max-width and padding. */
.housing-options-page main section.housing-options-finder > .wrap {
	width: 90%;
	max-width: 860px;
	margin: 0 auto;
	padding: 0;
}

/* Start over (js/housing-finder.js, issue #106) scrolls the shell to the top
   of the viewport. The site header is pinned (css/site.css #site-header), so
   the margin clears it plus 24px; js/main.js keeps --eas-header-h at the live
   header height, the same offset css/template-kit.css uses. */
.housing-options-page .housing-options-finder-shell {
	scroll-margin-top: calc(var(--eas-header-h, 96px) + 24px);
}

.housing-options-page .housing-options-finder-shell {
	margin-top: 2rem;
	padding: 1.75rem 1.5rem;
	background-color: #fff;
	border-radius: 10px;
}

.housing-options-page .housing-options-noscript {
	max-width: 68ch;
	padding: 1rem 1.25rem;
	background-color: var(--eas-pale-yellow);
	border-radius: 10px;
	color: var(--eas-navy);
}

.housing-options-page .housing-options-progress {
	margin: 0 0 1rem;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--eas-navy);
}

.housing-options-page .housing-options-question {
	margin: 0 0 2rem;
	padding: 0;
	border: 0;
}

.housing-options-page .housing-options-question legend {
	display: block;
	width: 100%;
	padding: 0;
	margin-bottom: 0.4rem;
}

/* The count lives in the legend so the no-JS view still numbers the questions.
   Once the finder is running, the progress line above owns that job. */
.housing-options-page .housing-finder-ready .housing-options-question-count {
	display: none;
}

.housing-options-page .housing-options-question-count {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--eas-navy);
}

.housing-options-page .housing-options-question-text {
	display: block;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-text);
}

.housing-options-page .housing-options-question-help {
	margin: 0 0 1.1rem;
	font-size: 0.95rem;
}

.housing-options-page .housing-options-answer {
	position: relative;
	margin-bottom: 0.6rem;
}

/* The radio stays in the accessibility tree and keeps its own hit area; the
   label is the visible target and carries the focus ring via the adjacent
   selector above. */
.housing-options-page .housing-options-answer input[type="radio"] {
	position: absolute;
	top: 1.15rem;
	left: 1rem;
	margin: 0;
}

.housing-options-page .housing-options-answer label {
	display: block;
	padding: 0.9rem 1rem 0.9rem 2.75rem;
	min-height: 44px;
	background-color: #fff;
	border: 2px solid #c9c9c9;
	border-radius: 10px;
	cursor: pointer;
	transition: border-color 150ms ease, background-color 150ms ease;
}

.housing-options-page .housing-options-answer input[type="radio"]:checked + label {
	border-color: var(--eas-navy);
	background-color: var(--eas-pale-yellow);
	font-weight: 700;
	color: var(--eas-navy);
}

.housing-options-page .housing-options-finder-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.housing-options-page .housing-options-btn {
	/* The nav buttons are flex items and get blockified for free, but the result
	   CTAs are anchors in normal flow. Left inline, an anchor ignores min-height
	   and its vertical padding bleeds over the line above, which covered the last
	   line of both recommendation cards ("...and we will get back to you") by 13px
	   at every desktop width. Stating display here also makes the 44px minimum
	   target real rather than declared. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.8rem 1.6rem;
	min-height: 44px;
	background-color: var(--eas-navy);
	border: 2px solid var(--eas-navy);
	border-radius: 9999px;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
}

.housing-options-page .housing-options-btn:hover {
	background-color: #00335a;
	border-color: #00335a;
}

.housing-options-page .housing-options-btn-quiet {
	background-color: transparent;
	color: var(--eas-navy);
}

.housing-options-page .housing-options-btn-quiet:hover {
	background-color: var(--eas-navy);
	color: #fff;
}

.housing-options-page .housing-options-btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

.housing-options-page .housing-options-btn[disabled]:hover {
	background-color: var(--eas-navy);
	border-color: var(--eas-navy);
}

.housing-options-page .housing-options-btn-quiet[disabled]:hover {
	background-color: transparent;
	color: var(--eas-navy);
}


.housing-options-page .housing-options-error {
	margin: 0.75rem 0 0;
	padding: 0.6rem 0.9rem;
	background-color: var(--eas-pale-yellow);
	border-left: 4px solid var(--color-primary);
	border-radius: 10px;
	color: var(--eas-navy);
	font-weight: 700;
}


/* Finder results
--------------------------------------------------------------------------- */

.housing-options-page .housing-options-results:focus {
	outline: none;
}

.housing-options-page .housing-options-announce {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.housing-options-page .housing-options-results-title {
	margin-top: 0;
	font-size: 1.5rem;
}

.housing-options-page .housing-options-result {
	margin-bottom: 1.5rem;
	padding: 1.5rem;
	background-color: var(--color-light);
	border-radius: 10px;
	border-left: 6px solid var(--eas-navy);
	animation: housing-options-rise 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.housing-options-page .housing-options-result-rank {
	margin: 0 0 0.3rem;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--eas-navy);
}

.housing-options-page .housing-options-result h4 {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
}

.housing-options-page .housing-options-result-note {
	padding: 1rem 1.25rem;
	background-color: var(--eas-pale-yellow);
	border-radius: 10px;
	color: var(--eas-navy);
}

.housing-options-page .housing-options-disclaimer {
	font-size: 0.9rem;
	font-style: italic;
}

/* Gaps inside the finder results (#161). None of these blocks had a margin,
   so once the finder showed its results the second paragraph of each
   recommendation sat flush under the first, its button flush under that, a
   second caveat note flush under the first, the disclaimer flush under a note
   and the Start over button flush under the disclaimer. Each gets the page's
   1.25rem above it. A note or the disclaimer that directly follows a
   recommendation card still sits 1.5rem below it: the card's bottom margin and
   this one collapse to the larger. */
.housing-options-page .housing-options-result > p + p,
.housing-options-page .housing-options-result-cta,
.housing-options-page .housing-options-result-note,
.housing-options-page .housing-options-disclaimer,
.housing-options-page .housing-options-results > .housing-options-btn {
	margin-top: 1.25rem;
}


/* Questions to consider
--------------------------------------------------------------------------- */

.housing-options-page .housing-options-considerations-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 800px) {
	.housing-options-page .housing-options-considerations-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

.housing-options-page .housing-options-considerations-list li {
	list-style: none;
	display: flex;
	gap: 0.9rem;
	align-items: flex-start;
}

.housing-options-page .housing-options-check {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	background-color: var(--eas-navy);
	border-radius: 9999px;
	color: #fff;
	font-size: 0.95rem;
}

.housing-options-page .housing-options-considerations-list h3 {
	margin: 0 0 0.2em;
	font-size: 1.1rem;
}

.housing-options-page .housing-options-considerations-list p {
	margin: 0;
	font-size: 0.95rem;
}


/* Helpful links
--------------------------------------------------------------------------- */

.housing-options-page .housing-options-links-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 800px) {
	.housing-options-page .housing-options-links-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

.housing-options-page .housing-options-links-list li {
	list-style: none;
	padding: 1.1rem 1.25rem;
	background-color: var(--color-light);
	border-radius: 10px;
}

.housing-options-page .housing-options-links-list a {
	font-weight: 700;
}

.housing-options-page .housing-options-links-list p {
	margin: 0.25rem 0 0;
	font-size: 0.95rem;
}


/* Contact band
--------------------------------------------------------------------------- */

/* Light yellow, as the closing CTAs of the profile pages and Our History
   (iprov-agency/eas-easterseals#222): --color-cream #ffe3b3. Navy heading
   8.14:1, body-gray copy 6.08:1. */
.housing-options-page .housing-options-contact {
	background-color: var(--color-cream);
	color: var(--color-text-body);
	text-align: center;
	padding: clamp(60px, 46.667px + 3.556vw, 100px) 0;
	margin-bottom: 0 !important;
}

.housing-options-page .housing-options-contact h2 {
	color: var(--eas-navy);
}

.housing-options-page .housing-options-contact p {
	max-width: 62ch;
	margin-left: auto;
	margin-right: auto;
}

/* Navy is for the phone number and inline links on the light yellow band
   (8.14:1 on #ffe3b3; the gold they wore on navy would be 1.15:1 here). It must
   not reach the buttons, which take their own colours below. */
.housing-options-page .housing-options-contact a:not(.btn) {
	color: var(--eas-navy);
}

/* The gap above the address (#161). The intro paragraph above it has no
   bottom margin (the base reset), so "Easterseals Arkansas" sat flush under
   it. Same 1.25rem as the buttons below. */
.housing-options-page .housing-options-contact-details {
	margin-top: 1.25rem;
	line-height: 1.9;
}

/* The gap above the buttons (#161). The address paragraph above has no bottom
   margin (the base reset), so the buttons sat flush under the phone number.
   1.25rem is the same gap the option cards put above their lists, and the
   address has the same gap above it. Each gap is a top margin on the block
   below it, so no paragraph's own spacing changes. */
.housing-options-page .housing-options-contact-buttons {
	margin-top: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

/* The band's two buttons on light yellow, as on the profile CTAs: the orange
   primary keeps its white label (4.51:1; its fill meets the band at 3.62:1),
   and the white outline-light button, built for navy, becomes a navy outline
   (label and border 8.14:1) that fills navy with a white label on hover
   (10.12:1). */
.housing-options-page .housing-options-contact-buttons a.btn-primary {
	color: var(--color-white);
}

.housing-options-page .housing-options-contact-buttons a.btn-outline-light {
	border-color: var(--eas-navy);
	color: var(--eas-navy);
}

.housing-options-page .housing-options-contact-buttons a.btn-outline-light:hover {
	background: var(--eas-navy);
	color: var(--color-white);
}


/* Reduced motion
--------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.housing-options-page .housing-options-result {
		animation: none;
	}

	.housing-options-page .housing-options-answer label,
	.housing-options-page .housing-options-btn {
		transition: none;
	}

}