/* Residential page.

   Scoped under .ij-residential so the other ~521 Beaver Builder pages are
   untouched. Layout lives in the template's inline styles, as on every
   other redesigned page; this file carries the states an inline style
   attribute cannot express, the breakpoints, and the prose typography for
   the page's own content beneath the design's sections. */

.ij-residential { font-family: var(--font-sans); font-weight: 500; color: var(--color-text); -webkit-font-smoothing: antialiased; }
.ij-residential a { color: var(--color-link); text-decoration: none; }

/* Beaver Builder's Customizer skin sets `h1…h6 { font-family: Helvetica }`
   and loads after this file, so the headings did not inherit Poppins from
   the <main> above. tokens.css resets headings only for the pages it
   names; this page is not one of them. The leading `body` outscores the
   skin's bare element selector regardless of load order. */
body .ij-residential :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-display); color: var(--color-text); }

/* ---- Parent-theme overrides ---------------------------------------------
   bb-theme/css/base.min.css underlines every link on hover and paints a
   system-blue ring on focus, and Beaver Builder's generated skin carries
   `.fl-page-content a:hover { text-decoration: underline }` — which wraps
   this <main>. That selector scores 0-2-1 and both sheets load after this
   one, so a bare `.ij-residential a:hover` would TIE and lose on load
   order. The leading `body` adds the element that settles it. Same
   reasoning, and the same arithmetic, as the block in tokens.css.

   This matters more here than on the other ported pages: the prose below
   carries seventeen links, so an unbeaten rule would underline all of
   them on hover in a colour the design never uses. */
body .ij-residential a:hover, body .ij-residential a:focus { text-decoration: none; }
body .ij-residential a:focus { outline: none; }

/* The design specifies no focus styling. Reproducing that literally would
   leave keyboard users with nothing, so the blue ring is replaced with the
   theme's focus-visible convention rather than simply deleted. */
.ij-residential a:focus-visible {
	outline: 2px solid var(--brand-green-dark);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---- Buttons ------------------------------------------------------------- */

.ij-residential .res-cta {
	transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Colour restated alongside the background: without it, `color` falls
   through to the link hover colour and paints the label brand-orange. */
.ij-residential .res-cta:hover,
.ij-residential .res-cta:focus-visible {
	background: var(--brand-green-dark);
	color: #fff;
}

/* ---- Region cards -------------------------------------------------------- */

.ij-residential .regcard {
	transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ij-residential .regcard:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(17, 16, 22, 0.05), 0 18px 44px rgba(17, 16, 22, 0.09);
}

/* A photograph that has not been imported leaves its frame out entirely
   rather than drawing an empty coloured block, so nothing is needed for
   the missing case — but the frames that do render must never let an
   image escape their rounded corners in Safari. */
.ij-residential .resframe { isolation: isolate; }

/* ---- FAQ disclosures -----------------------------------------------------
   The design marks each row with a plus that rotates into a cross when the
   row opens — 45 degrees is the whole animation, which is why the glyph is
   a plus and not a chevron. */

.ij-residential details > summary { list-style: none; cursor: pointer; }
.ij-residential details > summary::-webkit-details-marker { display: none; }
.ij-residential details > summary::marker { content: ''; }

.ij-residential .faq-chev { transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); }
.ij-residential details[open] > summary .faq-chev { transform: rotate(45deg); }

.ij-residential details > summary:focus-visible {
	outline: 2px solid var(--brand-green-dark);
	outline-offset: 4px;
	border-radius: 4px;
}

/* ---- The page's own content ----------------------------------------------
   Everything below styles the ~1,937 words the design had no place for.
   The markup is whatever Beaver Builder kept in `post_content` — h2/h3,
   paragraphs, lists, images and links — so these rules are by element
   rather than by class, scoped to .resbody so they reach nothing else. */

.ij-residential .resbody { font-size: 17px; line-height: 1.7; color: var(--color-text-secondary); }

.ij-residential .resbody h2 {
	margin: 56px 0 0;
	font-size: 32px;
	line-height: 1.15;
	letter-spacing: -1.1px;
	font-weight: 600;
	color: var(--color-text);
	text-wrap: pretty;
}

.ij-residential .resbody h3 {
	margin: 40px 0 0;
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: -0.5px;
	font-weight: 600;
	color: var(--color-text);
	text-wrap: pretty;
}

/* The first heading opens the section, so it does not need the space that
   separates one block of prose from the next. */
.ij-residential .resbody > :first-child { margin-top: 0; }

.ij-residential .resbody p { margin: 20px 0 0; }
.ij-residential .resbody strong { font-weight: 600; color: var(--color-text); }

.ij-residential .resbody ul { margin: 20px 0 0; padding-left: 22px; }
.ij-residential .resbody li { margin: 8px 0 0; }
.ij-residential .resbody li::marker { color: var(--brand-green); }

.ij-residential .resbody img {
	max-width: 100%;
	height: auto;
	margin: 32px 0 0;
	border-radius: 16px;
}

/* The prose links inherit the paragraph's colour, so the underline is what
   marks them as links at all. The hover rule states its own colour — the
   reset above would otherwise leave it falling through. */
.ij-residential .resbody a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ij-residential .resbody a:hover,
.ij-residential .resbody a:focus-visible {
	color: var(--brand-green-dark);
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.ij-residential .res-cta,
	.ij-residential .regcard,
	.ij-residential .faq-chev { transition: none; }
	.ij-residential .regcard:hover { transform: none; }
}

/* ---- Breakpoints ---------------------------------------------------------
   The hero, the structure section and the FAQ are all auto-fit grids, so
   they collapse on their own. The region grid is the design's hardcoded
   two columns and is the one that needs stating. */

@media (max-width: 860px) {
	.ij-residential .reggrid { grid-template-columns: minmax(0, 1fr) !important; }
	.ij-residential .resfaq { gap: 48px !important; }
	.ij-residential .resstruct .resframe { min-height: 380px !important; }
}

@media (max-width: 560px) {
	.ij-residential .reshero h1 {
		font-size: 36px !important;
		letter-spacing: -1.4px !important;
	}

	.ij-residential h2 {
		font-size: 30px !important;
		letter-spacing: -1px !important;
	}

	.ij-residential details > summary { gap: 16px !important; }

	.ij-residential .resbody { font-size: 16px; }
	.ij-residential .resbody h2 { font-size: 26px !important; }
}