/* ---------------------------------------------------------------------------
   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.full-width-content .entry-content > .alignfull {
	margin-left: calc(-100vw / 2 + 100% / 2);
	margin-right: calc(-100vw / 2 + 100% / 2);
	max-width: 100vw;
}

.housing-options-page .entry-content section {
	margin-bottom: var(--section-spacing-large);
}

.housing-options-page .entry-content section > .wrap {
	max-width: 1200px;
	margin: auto;
	padding: 0 5%;
}

.housing-options-page .entry-content section > .wrap::before,
.housing-options-page .entry-content section > .wrap::after {
	display: none;
}

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

.housing-options-page .entry-content 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(.wp-block-button__link),
.housing-options-page .housing-options-result-note a,
.housing-options-page .housing-options-note-inner a {
	color: var(--color-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(--color-cerulean-blue);
	outline-offset: 2px;
}

.housing-options-page .housing-options-hero a:focus-visible,
.housing-options-page .housing-options-contact a:focus-visible {
	outline-color: var(--color-saffron);
}


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

.housing-options-page .housing-options-hero {
	background-color: var(--color-navy);
	color: #fff;
	text-align: center;
	padding: var(--section-spacing-large) 0;
}

.housing-options-page .housing-options-hero h1 {
	color: #fff;
	margin-bottom: 0.4em;
}

.housing-options-page .housing-options-hero-sub {
	max-width: 62ch;
	margin: 0 auto 1.8em;
	font-size: 1.15rem;
}

.housing-options-page .housing-options-hero-content {
	animation: housing-options-rise 550ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@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(--color-pale-yellow);
	border-radius: var(--radius-small);
	color: var(--color-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);
	}
}

.housing-options-page .housing-options-card {
	display: flex;
	flex-direction: column;
	padding: 1.75rem 1.5rem;
	background-color: var(--color-light-gray);
	border-radius: var(--radius-small);
	border-top: 6px solid var(--color-navy);
}

.housing-options-page .housing-options-card:nth-child(2) {
	border-top-color: var(--color-cerulean-blue);
}

.housing-options-page .housing-options-card:nth-child(3) {
	border-top-color: var(--color-citrus-orange);
}

.housing-options-page .housing-options-card:nth-child(4) {
	border-top-color: var(--color-primary-orange);
}

.housing-options-page .housing-options-card-num {
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--color-navy);
}

.housing-options-page .housing-options-card h3 {
	margin: 0.3em 0 0.2em;
	font-size: 1.25rem;
}

.housing-options-page .housing-options-card-kicker {
	margin: 0 0 0.9em;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-navy);
}

.housing-options-page .housing-options-card-flag {
	padding: 0.6rem 0.8rem;
	background-color: var(--color-pale-yellow);
	border-radius: var(--radius-small);
	color: var(--color-navy);
	font-size: 0.9rem;
}

.housing-options-page .housing-options-card ul {
	margin: 0 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(--color-pale-yellow);
	border-radius: var(--radius-small);
	color: var(--color-navy);
}


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

.housing-options-page .housing-options-finder {
	background-color: var(--color-light-gray);
	padding: var(--section-spacing-large) 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 .entry-content section.housing-options-finder > .wrap {
	width: 90%;
	max-width: 860px;
	margin: 0 auto;
	padding: 0;
}

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

.housing-options-page .housing-options-noscript {
	max-width: 68ch;
	padding: 1rem 1.25rem;
	background-color: var(--color-pale-yellow);
	border-radius: var(--radius-small);
	color: var(--color-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(--color-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(--color-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: var(--radius-small);
	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(--color-navy);
	background-color: var(--color-pale-yellow);
	font-weight: 700;
	color: var(--color-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 {
	padding: 0.8rem 1.6rem;
	min-height: 44px;
	background-color: var(--color-navy);
	border: 2px solid var(--color-navy);
	border-radius: var(--radius-full);
	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(--color-navy);
}

.housing-options-page .housing-options-btn-quiet:hover {
	background-color: var(--color-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(--color-navy);
	border-color: var(--color-navy);
}

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


.housing-options-page .housing-options-error {
	margin: 0.75rem 0 0;
	padding: 0.6rem 0.9rem;
	background-color: var(--color-pale-yellow);
	border-left: 4px solid var(--color-primary-orange);
	border-radius: var(--radius-small);
	color: var(--color-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-gray);
	border-radius: var(--radius-small);
	border-left: 6px solid var(--color-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(--color-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(--color-pale-yellow);
	border-radius: var(--radius-small);
	color: var(--color-navy);
}

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


/* 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(--color-navy);
	border-radius: var(--radius-full);
	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-gray);
	border-radius: var(--radius-small);
}

.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
--------------------------------------------------------------------------- */

.housing-options-page .housing-options-contact {
	background-color: var(--color-navy);
	color: #fff;
	text-align: center;
	padding: var(--section-spacing-large) 0;
	margin-bottom: 0 !important;
}

.housing-options-page .housing-options-contact h2 {
	color: #fff;
}

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

.housing-options-page .housing-options-contact a {
	color: var(--color-saffron);
}

.housing-options-page .housing-options-contact-details {
	line-height: 1.9;
}

.housing-options-page .housing-options-contact-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

.housing-options-page .housing-options-contact-buttons a {
	color: inherit;
}


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

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

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

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

}