/*
 * Braced — Get ready: /get-ready/ (page 943) and its hazard pages (944–951). The problem pages
 * under it (braced_kind = problem) load pages/problem.css instead. Loaded only on these pages
 * (body.braced-page--get-ready). Owner: the get-ready page task.
 *
 * A hazard page, top to bottom (each section a full-width band; neighbours always differ):
 *   page header (navy, braced/page-header)
 *   → what it leads to: the problem cards (braced/ready-causes) on white
 *   → the plan: steps and the safety notice (braced/ready-plan), or on Ice storms the checklist
 *     (core groups .braced-checklist), on the tint
 *   → find a pro (braced/find-a-pro, navy) → guides (braced/guide-cards) → questions (afp/faq)
 *   → other weather (braced/ready-problems).
 * Heat waves and Wildfire smoke keep their own few products as risk rows (braced/ready-risk)
 * in place of the problem cards: they have no problem pages.
 * The index: the eight hazards as picture cards, the published problems as cards, find a pro,
 * three guides.
 * Builders: sites/resilience-na/plugin/inc/pages/get-ready.php and problem.php.
 */

/* ---------- Bands ---------- */
.braced-ready-band > * {
	margin-block: 0;
}
.braced-ready-band > .wp-block-afp-section-intro {
	margin-block-end: var(--wp--preset--spacing--60);
}
.braced-ready-band > .wp-block-afp-section-intro + * {
	margin-block-start: 0;
}

/* ---------- 1. What to protect: one row per risk ----------
 * Text on the left (the risk, what to do, who does it, a "Compare …" link); one next step on the
 * right at a fixed width: our pick (the lifted product object), a local trade (navy, the
 * directory's colour) or official advice (outlined). Rows share one shape; hairlines between.
 */
.braced-ready-risks > .wp-block-afp-section-intro {
	margin-block-end: var(--wp--preset--spacing--50);
}
.braced-risk {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 28.5rem);
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70);
	align-items: center;
	margin-block: 0 !important;
	padding-block: var(--wp--preset--spacing--60);
	border-top: 1px solid var(--wp--preset--color--line);
}
.braced-risk:last-child {
	padding-block-end: 0;
}
.braced-risk.has-no-next {
	grid-template-columns: minmax(0, 1fr);
}
.braced-risk__text {
	max-width: 38rem;
}
.braced-risk__text > * {
	margin: 0;
}
.braced-risk__title {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.15;
}
.braced-risk__body {
	margin-block-start: var(--wp--preset--spacing--30) !important;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--custom--prose--size, 1.0625rem);
	line-height: var(--wp--custom--prose--leading, 1.6);
}
/* Who does it, and the "Compare …" link, on one line under the prose. */
.braced-risk__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px var(--wp--preset--spacing--50);
	margin-block-start: var(--wp--preset--spacing--40) !important;
}
.braced-risk__foot > * {
	margin: 0;
}
.braced-risk__who {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 10px;
	min-height: 44px;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
	line-height: 1.4;
}
.braced-risk__who .braced-ready-icon {
	flex: none;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	padding: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--base-3);
	color: var(--wp--preset--color--navy);
}
.braced-risk__who--pro .braced-ready-icon {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--on-navy);
}
.braced-risk__who > span {
	flex: 1 1 auto;
	min-width: 0;
}
/* Inline with the marker's words; the padding gives it a 44px tap area without moving the line. */
.braced-risk__find {
	display: inline-block;
	margin-block: -12px;
	margin-inline-start: 4px;
	padding-block: 12px;
	font-weight: 650;
}
.braced-risk__more a,
.braced-plan__link a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	font-weight: 650;
	text-decoration: none;
}
.braced-risk__more a:hover,
.braced-plan__link a:hover {
	text-decoration: underline;
}
:is(.braced-risk__more, .braced-plan__link) .braced-ready-icon {
	width: 18px;
	height: 18px;
	transition: transform 0.15s ease;
}
:is(.braced-risk__more, .braced-plan__link) a:hover .braced-ready-icon--arrow {
	transform: translateX(3px);
}

/* The next step: three objects, one shape (a head, then one full-width action at the foot). */
:is(.braced-pick, .braced-trade, .braced-advice) {
	box-sizing: border-box;
	display: grid;
	grid-template-rows: 1fr auto;
	gap: var(--wp--preset--spacing--40) 20px;
	min-height: 15.5rem;
	padding: 22px;
	border-radius: var(--wp--custom--radius--card);
}
:is(.braced-pick, .braced-trade, .braced-advice) p,
:is(.braced-pick, .braced-trade, .braced-advice) h4 {
	margin: 0;
}

/* Our pick is the site's one product card in its compact form (blocks.css); here it only takes
   the row's height, like the trade and advice cards beside it. */
.braced-risk__next > .braced-card {
	min-height: 15.5rem;
}
@media (max-width: 781px) {
	.braced-risk__next > .braced-card {
		min-height: 0;
	}
}

/* Our pick (fallback markup): the product as the one lifted object. */
.braced-pick {
	grid-template-columns: 8.25rem minmax(0, 1fr);
	grid-template-areas: "media head" "buy buy";
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base-2);
	box-shadow: var(--wp--preset--shadow--card);
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.braced-pick:hover {
	box-shadow: var(--wp--preset--shadow--lift);
	transform: translateY(-2px);
}
.braced-pick__media {
	grid-area: media;
	align-self: start;
	min-width: 0;
}
.braced-pick__media > a {
	display: block;
	width: 100%;
}
.braced-pick__media .afp-img {
	box-sizing: border-box;
	display: grid;
	place-items: center;
	width: 100% !important;
	max-width: 100%;
	min-width: 0;
	aspect-ratio: 1;
	margin: 0;
	border-radius: var(--wp--custom--radius--photo);
	overflow: hidden;
}
.braced-pick__media .afp-img :is(svg, img) {
	width: 100%;
	max-width: 100%;
	height: 100%;
	object-fit: contain;
}
.braced-pick__head {
	grid-area: head;
	align-self: start;
}
.braced-pick__label {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.01em;
}
.braced-pick__name {
	margin-block-start: 4px !important;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.braced-pick__name a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.braced-pick__name a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}
.braced-pick__why {
	margin-block-start: 8px !important;
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}
.braced-pick__buy {
	grid-area: buy;
	align-self: end;
	padding-block-start: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--line);
}
.braced-pick__buy .afp-region[hidden] {
	display: none;
}
.braced-pick__buy .afp-buy {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	margin: 0;
}
.braced-pick__buy .afp-buy__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
}
.braced-pick__buy .afp-price {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
}
.braced-pick__buy .afp-checked {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--x-small);
}
.braced-pick__buy :is(.afp-btn, .braced-btn) {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	justify-content: center;
}
.braced-pick__buy .braced-buy__tag {
	margin: 0 0 8px;
}
.braced-pick__fallback .braced-buy__tag {
	margin: 0;
}

/* A local trade: the shared entrance's compact form (components.css 3: navy card, its title,
   its lead, the on-dark button) as a link card, so every way into the directory looks kin. Only
   what the row needs is set here: the row's height and the button at the foot. */
.braced-trade.braced-entrance--compact {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: var(--wp--preset--spacing--60);
	border: 0;
	background: var(--wp--preset--color--navy);
	box-shadow: none;
}
.braced-trade .braced-entrance__inner {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--50);
}
.braced-trade .braced-entrance__inner > * + * {
	margin-block-start: 0;
}
.braced-trade .braced-entrance__lead {
	margin-block-start: var(--wp--preset--spacing--30);
}
.braced-trade__go {
	margin: 0 !important;
}
@media (max-width: 600px) {
	.braced-trade.braced-entrance--compact {
		padding: var(--wp--preset--spacing--50);
	}
}
:is(.braced-trade__go, .braced-advice__go) .braced-btn {
	box-sizing: border-box;
	width: 100%;
}
:is(.braced-trade__go, .braced-advice__go) .braced-ready-icon {
	width: 18px;
	height: 18px;
}

/* Official advice: outlined, on the tint. */
.braced-advice {
	grid-template-columns: 3.5rem minmax(0, 1fr);
	grid-template-areas: "mark head" "go go";
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base-3);
}
.braced-advice__mark {
	grid-area: mark;
	align-self: start;
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--navy);
}
.braced-advice__mark .braced-ready-icon {
	width: 28px;
	height: 28px;
}
.braced-advice__head {
	grid-area: head;
	align-self: start;
}
.braced-advice__source {
	margin-block-start: 8px !important;
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
}
.braced-advice__label {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.01em;
}
.braced-advice__name {
	margin-block-start: 4px !important;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.2;
}
.braced-advice__go {
	grid-area: go;
	align-self: end;
}

/* ---------- 2. The plan: three steps, then the safety notice ---------- */
.braced-plan > * {
	margin: 0;
}
.braced-plan__steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	padding: 0;
	list-style: none;
}
.braced-plan--2 .braced-plan__steps {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.braced-plan--1 .braced-plan__steps {
	grid-template-columns: minmax(0, 1fr);
}
.braced-plan--4 .braced-plan__steps {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.braced-plan__step {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 26px 26px 18px;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base-2);
}
.braced-plan__step > * {
	margin: 0;
}
/* The numeral and a rule running on to the next step: one sequence, read left to right. */
.braced-plan__num {
	display: flex;
	align-items: center;
	gap: 16px;
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.braced-plan__num::after {
	content: "";
	flex: 1;
	height: 2px;
	background: var(--wp--preset--color--line);
}
.braced-plan__title {
	margin-block-start: var(--wp--preset--spacing--40) !important;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
}
.braced-plan__text {
	flex-grow: 1;
	margin-block-start: 10px !important;
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.55;
}
.braced-plan__link {
	margin-block-start: var(--wp--preset--spacing--30) !important;
	padding-block-start: 8px;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
}
.braced-plan__notice {
	margin-block-start: var(--wp--preset--spacing--50) !important;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.55;
}

/* ---------- 3. More gear: the shared product grid, without its view switch and count ---------- */
.braced-ready-gear .afp-views__bar,
.braced-ready-gear .afp-grid__count {
	display: none;
}

/* ---------- 5. Questions: full container width ---------- */
.braced-ready-faq > .afp-faq {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--braced-container);
	margin-inline: auto !important;
}

/* ---------- 6. Problems as picture cards (index and the foot of every problem page) ---------- */
.braced-ready-problems {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}
.braced-ready-problems.is-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.braced-ready-problems.is-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.braced-ready-problems > li {
	margin: 0;
}
.braced-ready-problems .braced-problem-card > :is(h2, h3, h4) {
	font-size: var(--wp--preset--font-size--x-large) !important;
}
.braced-ready-problems__line {
	margin-block-start: 14px !important;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

/* ---------- Tablet and phone ---------- */
@media (max-width: 1023px) {
	.braced-risk {
		grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
		gap: var(--wp--preset--spacing--50);
	}
	.braced-ready-problems,
	.braced-ready-problems.is-3,
	.braced-plan--4 .braced-plan__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 781px) {
	.braced-risk {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--40);
		align-items: start;
	}
	.braced-risk__text {
		max-width: none;
	}
	:is(.braced-pick, .braced-trade, .braced-advice) {
		min-height: 0;
		padding: 18px;
	}
	.braced-plan__steps,
	.braced-plan--2 .braced-plan__steps,
	.braced-plan--4 .braced-plan__steps {
		grid-template-columns: minmax(0, 1fr);
	}
	.braced-plan__step {
		padding: 22px 20px 14px;
	}
}
@media (max-width: 600px) {
	.braced-pick {
		grid-template-columns: 5.5rem minmax(0, 1fr);
		gap: var(--wp--preset--spacing--40) 16px;
	}
	.braced-ready-problems {
		gap: var(--wp--preset--spacing--40) 12px;
	}
	.braced-ready-problems .braced-problem-card > :is(h2, h3, h4) {
		padding: 12px 14px;
		font-size: var(--wp--preset--font-size--large) !important;
	}
}
@media (prefers-reduced-motion: reduce) {
	.braced-pick,
	.braced-pick:hover {
		transform: none;
	}
}

/* ---------- 7. What a hazard leads to: problem cards (braced/ready-causes) ----------
 * Text cards (name and one line), no picture: a problem never repeats the hazard's own photo,
 * and the row reads as its own thing beside the photo cards of other hazards. Tinted on the
 * white band, white on the tint, a navy rule on top. A six-column grid: threes, the last two or
 * four at half width, so a row never ends on an orphan. A problem page that isn't published yet
 * shows without a link or an arrow.
 */
.braced-ready-causes > .wp-block-afp-section-intro {
	margin-block-end: var(--wp--preset--spacing--50);
}
.braced-causes {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}
.braced-cause {
	position: relative;
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-sizing: border-box;
	min-height: 9.5rem;
	margin: 0;
	padding: 22px 24px 24px;
	border-top: 3px solid var(--wp--preset--color--navy);
	border-radius: 0 0 var(--wp--custom--radius--card) var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base-3);
}
.braced-cause.is-half {
	grid-column: span 3;
}
.braced-cause.is-full {
	grid-column: 1 / -1;
}
.is-style-band-tint .braced-cause {
	background: var(--wp--preset--color--base-2);
}
.braced-cause > * {
	margin: 0;
}
.braced-cause__title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: var(--wp--preset--font-size--x-large) !important;
	line-height: 1.15;
}
.braced-cause__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.braced-cause__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.braced-cause__title .braced-ready-icon {
	flex: none;
	width: 22px;
	height: 22px;
	color: var(--wp--preset--color--accent);
	transition: transform 0.15s ease;
}
.braced-cause.is-linked:hover .braced-cause__title a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}
.braced-cause.is-linked:hover .braced-ready-icon {
	transform: translateX(3px);
}
.braced-cause.is-linked:focus-within {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}
.braced-cause__title a:focus-visible {
	outline: 0;
}
.braced-cause__line {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
}

/* ---------- 8. The ice storm checklist (Ice storms, 946): five phases, one row each ----------
 * The phase numeral and title on the left, the checklist on the right (empty boxes: nothing is
 * ticked for the visitor), the phase's safety notice under its list. Hairlines between phases.
 */
.braced-ready-checklist > .wp-block-afp-section-intro {
	margin-block-end: var(--wp--preset--spacing--50);
}
.braced-checklist {
	display: grid;
}
.braced-checklist > * {
	margin: 0 !important;
}
.braced-checklist__phase {
	display: grid;
	grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
	align-items: start;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--70);
	padding-block: var(--wp--preset--spacing--60);
	border-top: 1px solid var(--wp--preset--color--line);
}
.braced-checklist__phase:first-child {
	padding-block-start: 0;
	border-top: 0;
}
.braced-checklist__phase:last-child {
	padding-block-end: 0;
}
.braced-checklist__phase > * {
	margin: 0 !important;
}
.braced-checklist__title {
	grid-column: 1;
	grid-row: 1 / span 2;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: var(--wp--preset--font-size--x-large) !important;
	line-height: 1.15;
	scroll-margin-top: 96px;
}
.braced-checklist__num {
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.braced-checklist__items {
	grid-column: 2;
	display: grid;
	gap: 14px;
	max-width: 46rem;
	padding: 0;
	list-style: none;
}
.braced-checklist__items > li {
	position: relative;
	margin: 0;
	padding-inline-start: 36px;
	font-size: var(--wp--custom--prose--size, 1.0625rem);
	line-height: var(--wp--custom--prose--leading, 1.6);
}
.braced-checklist__items > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.25em;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	border: 2px solid var(--wp--preset--color--navy);
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--base-2);
}
.braced-checklist__notice {
	grid-column: 2;
	max-width: 46rem;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.55;
}
.braced-checklist__notice p {
	margin: 0;
}
@media (max-width: 1023px) {
	.braced-checklist__phase {
		grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--50);
	}
	.braced-causes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.braced-causes > .braced-cause {
		grid-column: auto;
	}
	.braced-causes.is-odd > .braced-cause:last-child {
		grid-column: 1 / -1;
	}
}
@media (max-width: 781px) {
	.braced-checklist__phase {
		grid-template-columns: minmax(0, 1fr);
	}
	.braced-checklist__title {
		grid-row: auto;
		flex-direction: row;
		align-items: baseline;
		gap: 14px;
	}
	.braced-checklist__items,
	.braced-checklist__notice {
		grid-column: 1;
	}
}
@media (max-width: 600px) {
	.braced-causes {
		grid-template-columns: minmax(0, 1fr);
	}
	.braced-causes.is-odd > .braced-cause:last-child {
		grid-column: auto;
	}
	.braced-cause {
		min-height: 0;
		padding: 18px 20px 20px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.braced-cause .braced-ready-icon {
		transition: none;
	}
}