/* Care404 brand treatments — complements the theme.json presets.
   Loaded on the front end and inside the editor iframe.
   Horizontal gutter is 40px at EVERY width — the design never narrows it on
   mobile — and comes from theme.json root padding. */

/* ---- Vertical rhythm ------------------------------------------------------ */
/* Kill the flow gap between the three top-level regions — header, main, footer.
   Reported by the user 2026-08-15 as "a space between footer and stay connected",
   measured at 19.2px on `<footer class="wp-block-template-part">`.

   §6e killed this gap INSIDE `<main>` with `blockGap: 0` on the template, but
   `.wp-site-blocks` is core's own wrapper AROUND header/main/footer and no
   template controls it. It is a constrained-flow container, so core emits
   `:root :where(.wp-site-blocks) > * { margin-block-start: 1.2rem }` — the same
   19.2px, one level up, where our templates could not reach it.

   `body` is needed on the selector: core's rule is (0,1,0) via `:root` (the
   `:where()` contributes nothing), ours would tie at (0,1,0) and lose on source
   order because global styles print after this file (gotcha 2). At (0,1,1) it
   wins on specificity and does not depend on order at all.

   Every Care404 band carries its own vertical padding, so no gap is ever wanted
   between the chrome and the content. */
body .wp-site-blocks > * { margin-block-start: 0; }

.care404-section { padding-top: var(--wp--preset--spacing--section); padding-bottom: var(--wp--preset--spacing--section); }
/* Category-page bands run slightly shorter than the landing page's: 100px/60px
   against 104px/64px. Both pairs are the design's own literals, so this is a
   modifier applied alongside `.care404-section`, not a fourth spacing preset. */
.care404-section--page { padding-top: 100px; padding-bottom: 100px; }
.care404-band    { padding-top: var(--wp--preset--spacing--band);    padding-bottom: var(--wp--preset--spacing--band); }
.care404-strip   { padding-top: var(--wp--preset--spacing--strip);   padding-bottom: var(--wp--preset--spacing--strip); }

/* ---- Eyebrow --------------------------------------------------------------
   The design's `.eyebrow` is a literal `font-size: 13px; letter-spacing: 0.16em`
   at every one of its four appearances (story, resources, video, partners). This
   used to read 0.875rem/0.08em — a 1px and 0.08em drift on every eyebrow. */
.care404-eyebrow {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 13px;
	color: var(--wp--preset--color--warm-brown);
	margin: 0 0 0.75rem;
}

/* ---- Section lede: the design's 17px supporting paragraph ------------------
   The type scale has no 17px step (`body` is 16px, `medium` is 20px), and every
   supporting paragraph on the landing page is a literal 17px/1.7. A class is
   cheaper than a preset step that only this one role would ever use. */
.care404-lede { font-size: 17px; line-height: 1.7; }

/* ---- Section copy columns -------------------------------------------------
   The design stacks these as flex columns with a fixed gap — 22px in
   `.resource-intro`, 20px in `.story-copy` — so the per-element margins WP would
   otherwise supply are zeroed. Doubled selectors because WP global styles print
   after this file and `body .is-layout-flow > * + *` would re-add them.
   No `align-items`: the design leaves it at `stretch`, and stretching is what
   keeps the headings wrapping at the column width instead of shrink-wrapping. */
.wp-block-column.care404-resource-intro,
.wp-block-column.care404-story-copy,
.wp-block-column.care404-video-copy,
.wp-block-column.care404-video-media,
.wp-block-column.care404-expert-col,
.wp-block-column.care404-video-cat-main,
.wp-block-column.care404-video-cat-more {
	display: flex;
	flex-direction: column;
}
.wp-block-column.care404-resource-intro { gap: 22px; }
.wp-block-column.care404-story-copy     { gap: 20px; }
.wp-block-column.care404-video-copy     { gap: 22px; }
.wp-block-column.care404-video-media    { gap: 20px; }
.wp-block-column.care404-expert-col     { gap: 32px; } /* design .expert-col     */
.wp-block-column.care404-video-cat-main { gap: 20px; } /* design .video-featured */
.wp-block-column.care404-video-cat-more { gap: 22px; } /* design .video-more     */
.wp-block-column.care404-resource-intro > *,
.wp-block-column.care404-story-copy > *,
.wp-block-column.care404-video-copy > *,
.wp-block-column.care404-video-media > *,
.wp-block-column.care404-expert-col > *,
.wp-block-column.care404-video-cat-main > *,
.wp-block-column.care404-video-cat-more > * { margin-top: 0; margin-bottom: 0; }
/* Story photo: the design's `.story-media` is `display: flex` with the image at
   `width: 100%; height: 100%; min-height: 340px; object-fit: cover` — it fills
   the column and crops. Ours was a plain image at its natural 1100x615, which is
   324px in the 579px column, 16px under the design's floor. `min-height` is what
   actually does the work here: the column is `align-self: center`, so the
   figure's `height: 100%` resolves against an auto height and is inert. */
.care404-story-photo { margin: 0 !important; display: flex; }
.care404-story-photo img {
	display: block;
	width: 100%;
	min-height: 340px;
	object-fit: cover;
}
.care404-resource-intro .care404-lede { max-width: 420px; }
.care404-story-copy .care404-lede     { max-width: 560px; }
.care404-video-copy .care404-lede     { max-width: 440px; }
/* The design gives the resource and video CTAs 6px on top of their 22px stack gap. */
.care404-resource-intro .wp-block-buttons,
.care404-video-copy .wp-block-buttons { margin-top: 6px; }
/* Newsletter band: same 17px lede, but 1.6 and centred in a 560px measure. */
.care404-band .care404-lede {
	line-height: 1.6;
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}
/* The design gives the newsletter CTA `margin-top: 8px` on top of the layout's
   20px gap. The band is a flow container, where a sibling margin REPLACES the
   gap rather than adding to it (unlike the flex stacks above), so the value here
   is the sum. */
.care404-band .wp-block-buttons { margin-top: 28px; }
/* ...but the CATEGORY bands stack at 18px, not 20px, so their sum is 26px. Both
   carry `.care404-band`, so this is (0,2,0) against (0,2,0) and must stay below.
   Measured in a live viewport 2026-08-15: without it both category bands ran
   28px, 2px over the design. */
.care404-band--page .wp-block-buttons { margin-top: 26px; }

/* ---- Section headings -----------------------------------------------------
   `.care404-heading` is a hook, not a look — the size comes from theme.json's
   `elements.h2`. It used to draw a 48px x 3px gold rule above every heading
   carrying it. That rule was an invention: it appears nowhere in the design —
   not in the landing page markup (every h2 there is preceded directly by its
   `<p class="eyebrow">`), not in `SectionHeading.prompt.md` ("eyebrow, h2, one
   supporting paragraph"), not in `Eyebrow.prompt.md` (which is explicit that the
   eyebrow is how a section announces itself), and not in the style guide's own
   h2 card. It also only ever reached two of our three h2s, because it depended
   on which patterns happened to carry the class. Removed 2026-08-14.

   The landing page uses three h2 sizes. `elements.h2` carries the largest —
   `clamp(30px, 2.9vw, 42px)/1.12`, the resource and video headings — and the
   two modifiers below carry the rest. All six values are literals read off the
   page, not the token files: `guidelines/type-display.card.html` claims h2 is
   `clamp(28-38px)/1.14`, which the page itself contradicts (gotcha 5). */
.care404-heading--story {           /* design .story h2 / .partners h2  */
	font-size: clamp(28px, 2.6vw, 38px);
	line-height: 1.14;
	letter-spacing: normal;
}
.care404-heading--band {            /* design .newsletter-band h2       */
	font-size: clamp(28px, 2.8vw, 40px);
	line-height: 1.15;
	letter-spacing: normal;
}
/* The category pages add two more sizes, bringing the total to FIVE. Neither is
   a variant of anything above — both are literals off the category page markup.
   Keep the table in docs/SESSION-HANDOFF.md §6b in step with this block. */
.care404-heading--sponsorship {     /* design .band.sponsorship h2      */
	font-size: clamp(28px, 2.7vw, 38px);
	line-height: 1.15;
	letter-spacing: normal;
}
.care404-heading--category-video {  /* design .video-featured h2        */
	font-size: clamp(26px, 2.4vw, 34px);
	line-height: 1.14;
	letter-spacing: normal;
}
/* The sponsor panel's heading is a fixed 26px, not a clamp — it lives in a 4-col
   panel that never gets wide enough for one to matter. Same value as the mega
   menu's "Not sure where to begin?" card. */
.care404-heading--panel {           /* design .sponsor-panel h2         */
	font-size: 26px;
	line-height: 1.18;
	letter-spacing: normal;
}
/* `text-wrap: balance` is NOT a global in the design. On the landing page it
   appears on exactly four headings — the hero h1, the resource h2, the video h2
   and the region directory h2 — and on none of the h3s, nor the story, partners
   or newsletter headings. It used to be applied to every heading here, which
   changed line breaks the design never asked to change. The hero h1 carries its
   own copy below.

   The category pages add it to two more: the topic grid and provider directory
   headings. They do NOT give it to the category video h2, which is why that band
   is classed `.care404-video-cat` and not `.care404-video` — the latter is in
   this list. */
.care404-resource-intro .care404-heading,
.care404-video .care404-heading,
.care404-region-head .care404-heading,
.care404-topic-head .care404-heading,
.care404-directory-head .care404-heading { text-wrap: balance; }

/* ---- Buttons -------------------------------------------------------------
   Poppins 600, 14px, 0.07em, uppercase, 18px of vertical padding and a 5px
   radius — the design gives every section button that same treatment, and varies
   only the horizontal padding. So the base rule carries the common case (34px,
   the hero and video band) and the exceptions below restate one property each.

   The size and padding have to be stated. Left to core, the link inherits body
   text — `clamp(16px, …, 18px)`, so 18px at desktop — and core's
   `:where(.wp-block-button__link){padding:calc(.667em + 2px) calc(1.333em + 2px)}`
   computes 14px/26px off it. That ran the newsletter button 4px short of the
   design vertically and 14px short PER SIDE. Measured and fixed 2026-08-14. */
.wp-block-button .wp-block-button__link {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.07em;
	line-height: 1;
	text-transform: uppercase;
	padding: 18px 34px;
	border-radius: 5px;
	transition: none;
}
/* The design's horizontal exceptions: 32px in the resource section, the region
   cards and every category-page section that has a button; 40px in the
   newsletter band; 36px in the sponsorship band. */
.care404-resource-intro .wp-block-button__link,
.care404-region .wp-block-button__link,
.care404-topic .wp-block-button__link,
.care404-sponsor-panel .wp-block-button__link,
.care404-hero--cat .wp-block-button__link,
.care404-video-cat .wp-block-button__link { padding-left: 32px; padding-right: 32px; }
.care404-band .wp-block-button__link { padding-left: 40px; padding-right: 40px; }
/* ORDER IS LOAD-BEARING: the sponsorship band carries `.care404-band` too, so
   this rule and the 40px one above are both (0,2,0) and only source order
   separates them. It must stay below. The design's two bands really do differ —
   36px on sponsorship, 40px on newsletter. */
.care404-sponsorship .wp-block-button__link { padding-left: 36px; padding-right: 36px; }
/* The footer's Sign Up is the design's compact button — 13px in a 16x28 box,
   the same size it gives the mega menu's CTA. */
.care404-footer-brand .wp-block-button__link {
	font-size: 13px;
	padding: 16px 28px;
}
.wp-block-button__link.has-gold-background-color:hover,
.wp-block-button__link.has-gold-background-color:focus {
	background-color: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--navy) !important;
}
.wp-block-button__link.has-slate-background-color:hover,
.wp-block-button__link.has-slate-background-color:focus {
	background-color: var(--wp--preset--color--navy) !important;
}
.wp-block-button__link.has-navy-background-color:hover,
.wp-block-button__link.has-navy-background-color:focus {
	background-color: var(--wp--preset--color--slate) !important;
}

/* ---- Hero: full-bleed cover band ------------------------------------------
   Two independently positioned background layers — the 90deg navy scrim at
   `center center` over the photo at `center right`, both `cover`. A block style
   attribute cannot express `background-size: cover, cover`, so it lives here,
   keyed off `.care404-hero` (docs/design-specs/hero-and-nav.md §2.2, §5).

   Reuse: the photo is a custom property, so a category page swaps it with ONE
   modifier class (`.care404-hero--health` etc.) instead of restating the rule.
   Note the landing photo is .jpg and the four category photos are .png.        */
.care404-hero {
	--care404-hero-photo: url("../photos/03-hero-family.jpg");
	background-color: #0E131B;
	background-image:
		linear-gradient(90deg, #0E131B 0%, #0E131B 22%, rgba(14, 19, 27, 0.82) 42%, rgba(14, 19, 27, 0.34) 62%, rgba(14, 19, 27, 0.08) 82%, rgba(14, 19, 27, 0) 100%),
		var(--care404-hero-photo);
	background-size: cover, cover;
	background-position: center center, center right;
	background-repeat: no-repeat, no-repeat;
}
.care404-hero--family    { --care404-hero-photo: url("../photos/03-hero-family.jpg"); }
.care404-hero--health    { --care404-hero-photo: url("../photos/10-hero-health.png"); }
.care404-hero--legal     { --care404-hero-photo: url("../photos/11-hero-legal.png"); }
.care404-hero--housing   { --care404-hero-photo: url("../photos/12-hero-housing.png"); }
.care404-hero--caregiver { --care404-hero-photo: url("../photos/13-hero-caregiver.png"); }

/* ---- Hero photo as a block instead of a background ------------------------
   Same two layers as `.care404-hero` above, re-expressed as real DOM so the
   photo can be swapped from the Media Library instead of from this file: the
   core/image child is the bottom layer, the scrim moves to ::before, and the
   copy rides above both. Editors get the block's Replace button; this file
   stops owning the photo URL.

   Used by all five hero pages (Home 16, Housing 12, Health 13, Legal 14,
   Caregiver 15), each carrying a `care404-hero-photo` image block as the hero
   group's first child. The `--care404-hero-photo` variables above are now the
   fallback path only — still live for the hero PATTERNS, which continue to
   seed CSS-background heroes and have not been converted.

   ORDER IS LOAD-BEARING: `background-image: none` is (0,1,0), exactly tying
   `.care404-hero`, so only source order kills the background photo. This block
   must stay below it.

   The gradient is duplicated verbatim from line 256 and again in the <=781px
   block — same scrim in three places, so a change to one is a change to all
   three. Lifting it into a custom property would fix that.                    */
.care404-hero--blockphoto {
	position: relative;
	isolation: isolate;
	background-image: none;
}
.care404-hero--blockphoto > .care404-hero-photo {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}
/* Must beat `.care404-hero .wp-block-image img { height: auto }`, which sets the
   image back to its intrinsic ratio and sits BELOW this block in the file. The
   obvious selector (`.care404-hero--blockphoto > .care404-hero-photo img`) is
   (0,2,1) — an exact tie — so source order would hand that rule the win. The
   doubled `.care404-hero.care404-hero--blockphoto` takes this to (0,3,1) and
   settles it on specificity, so the block survives being moved.
   `object-position` replaces the background layer's old `center right`. */
.care404-hero.care404-hero--blockphoto > .care404-hero-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center right;
}
.care404-hero--blockphoto::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image: linear-gradient(90deg, #0E131B 0%, #0E131B 22%, rgba(14, 19, 27, 0.82) 42%, rgba(14, 19, 27, 0.34) 62%, rgba(14, 19, 27, 0.08) 82%, rgba(14, 19, 27, 0) 100%);
}
/* The photo block makes the columns the SECOND child, so core's constrained-
   layout `> * + *` rule hands it a block-gap `margin-block-start` (19.2px) it
   never had as an only child. The hero has no top padding, so that margin
   collapses straight through the parent and drops the whole band down 19px,
   leaving a white sliver under the header. Zeroing it restores the live
   geometry exactly. (0,3,0) clears core's (0,1,0) container rule. */
.care404-hero.care404-hero--blockphoto > .wp-block-columns {
	position: relative;
	z-index: 2;
	margin-block-start: 0;
}

/* Inner grid: 6fr 6fr, no gap. (The design also sets `align-items: stretch`, but
   core forces `.wp-block-columns { align-items: initial !important }`, which
   computes to the same thing on a flex container — so restating it here would be
   dead CSS. The `gap: 0` IS load-bearing: it beats both TT5's core/columns
   blockGap and core's `:where(.wp-block-columns){margin-bottom:1.75em}`.) */
.care404-hero .care404-hero-grid {
	gap: 0 !important;
}
.care404-hero .care404-hero-grid > .wp-block-column { min-width: 0; }

/* Copy column: 560px min-height, centred, 26px child gaps. */
.care404-hero .care404-hero-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	gap: 26px;
	box-sizing: border-box;
}
.care404-hero .care404-hero-headline,
.care404-hero .care404-hero-support { gap: 10px; }
.care404-hero .care404-hero-support { max-width: 480px; }

/* Images: no stray block margins, exact widths from the design. */
.care404-hero .wp-block-image { margin: 0; display: block; }
.care404-hero .wp-block-image img { display: block; height: auto; border-radius: 0; }
.care404-hero .care404-hero-wordmark img { width: 300px; }
.care404-hero .care404-hero-script img { width: min(400px, 100%); }
.care404-hero .care404-hero-radio-one img { width: 168px; }
/* The <a> is inside the <figure>, so the figure is the lockup's flex child. The
   design pins it with `flex: 0 0 auto`; we don't need to, because a flex item's
   default `min-width: auto` already floors it at the image's 168px min-content
   width. Same result, one less rule. */
.care404-hero .care404-hero-radio-one a { display: block; }

/* Headline: page-accurate clamp, tight leading, balanced wrap. */
.care404-hero .care404-hero-h1 {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	font-size: clamp(40px, 4.2vw, 62px);
	line-height: 1.04;
	letter-spacing: -0.015em;
	margin: 0;
	text-wrap: balance;
}
.care404-hero .care404-hero-h1::before { content: none; }

/* Body copy: 18px / 1.6 (the page value, not the token file's 19px). */
.care404-hero .care404-hero-support p {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 18px;
	line-height: 1.6;
	margin: 0;
}

/* Buttons: hero-only hovers. The type and 18x34 padding are the shared button
   rule's defaults now, so restating them here would be dead CSS. */
.care404-hero .care404-hero-actions { gap: 16px; }
.care404-hero .care404-hero-actions .wp-block-button__link.has-gold-background-color:hover,
.care404-hero .care404-hero-actions .wp-block-button__link.has-gold-background-color:focus {
	background-color: #966E5A !important;
	color: #F6F6F5 !important;
}
.care404-hero .care404-hero-actions .wp-block-button__link.has-slate-background-color:hover,
.care404-hero .care404-hero-actions .wp-block-button__link.has-slate-background-color:focus {
	background-color: #3B434C !important; /* hero-only — every other slate button hovers to navy */
	color: #F6F6F5 !important;
}

/* "Powered by [Radio One] Atlanta" lockup. */
.care404-hero .care404-hero-lockup { gap: 14px; align-items: center; }
.care404-hero .care404-hero-powered {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	white-space: nowrap;
	margin: 0;
}
.care404-hero .care404-hero-powered-atl { color: var(--wp--preset--color--white); }

/* ---- Category hero: same band, different copy column ---------------------
   All four category pages share the landing hero's cover band exactly — same
   two-layer background, same 90deg gradient stops, same 6fr/6fr grid, same
   `aria-hidden` spacer — so `.care404-hero` above carries all of it and the
   photo still swaps on the `--housing`/`--health`/`--legal`/`--caregiver`
   modifier. What differs is everything INSIDE the copy column, and it differs on
   every value, so `.care404-hero--cat` restates each one.

   Structural differences are structural: no wordmark, no script line, no Radio
   One lockup and ONE button. Those are absent from the pattern rather than
   hidden here — a display:none hero element is invisible in the dashboard but
   still in the DOM, and the design simply does not have them.

   The copy column's `padding: 76px 56px 76px 0` (landing: 72px) and
   `min-height: 500px` (landing: 560px) stay INLINE block attributes in the
   pattern so both remain editable; only what a block attribute cannot express
   is below. */
.care404-hero--cat .care404-hero-copy { gap: 24px; }          /* landing: 26px */
.care404-hero--cat .care404-hero-support { max-width: 460px; } /* landing: 480px */
/* Headline and body copy: two more literals off the category pages. Both are
   near-misses against the landing hero's, which is exactly the kind of drift
   that stays invisible until measured — 38/3.9vw/58 against 40/4.2vw/62, and
   1.65 against 1.6. Doubled selectors to outrank the `.care404-hero .…` rules
   above at equal class count but later source order. */
.care404-hero--cat .care404-hero-h1 {
	font-size: clamp(38px, 3.9vw, 58px);
	line-height: 1.06;
}
.care404-hero--cat .care404-hero-support p { line-height: 1.65; }

/* Eyebrow lockup: a 40px icon beside a gold label, replacing the landing hero's
   wordmark. NOT `.care404-eyebrow` — that is the sections' 13px/0.16em warm-brown
   Inter eyebrow, and this one is Poppins on gold at 14px/0.14em. Different role,
   different class, rather than a modifier hung off the wrong base.

   Its 14px gap and centre alignment are the block's own flex-layout attributes,
   not rules here — a `gap` in this file would be (0,2,0) against WP's
   `.wp-container-N { gap }` at (0,1,0) and would silently override anything the
   dashboard set. Only the type, which no block attribute can express, is CSS. */
.care404-hero--cat .care404-hero-eyebrow .wp-block-image img { width: 40px; height: 40px; }
.care404-hero--cat .care404-hero-eyebrow-label {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin: 0;
}

/* Health alone carries a sponsor lockup between the paragraph and the button:
   a 12px/0.16em uppercase caption over a 190px logo, `margin-top: 4px` on top of
   the column's 24px gap. The other three pages have nothing there. Inter, not
   Poppins — the design gives this caption no font-family override, so it
   inherits the page face, unlike every other uppercase micro-label on the site.

   Its 10px gap and 4px top margin are block attributes, for the same reason the
   eyebrow lockup's are. */
.care404-hero--cat .care404-hero-sponsor-label {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0;
}
.care404-hero--cat .care404-hero-sponsor img { width: 190px; }

/* ---- Grid gaps (measured from the design's landing page) ----------------- */
/* 56px desktop / 40px mobile is the pair the design gives BOTH `.story-layout`
   and `.resource-layout`, so one class carries the story split and the resource
   section's 4fr/8fr split. */
.care404-cols-grid  { gap: 56px !important; } /* story + resource splits        */
.care404-cols-value { gap: 24px !important; } /* value strip   — design .value-grid     */
.care404-cols-cards { gap: 24px !important; } /* resource cards — design .resource-cards */

/* Resource cards are a 3-up GRID on desktop, not a flex row — the design's own
   `.resource-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)) }`.
   This is required, not cosmetic: all six cards live in ONE columns block (they
   have to, so the mobile rule can pair them 2-up), and core forces
   `@media (min-width: 782px) { .wp-block-columns { flex-wrap: nowrap !important } }`,
   which would otherwise squeeze all six onto a single line. Grid ignores that.
   The doubled selector beats `body .is-layout-flex { display: flex }`, which WP
   global styles print after this stylesheet — a single class silently loses.
   The 781px query below only swaps the track list to repeat(2, ...). */
.wp-block-columns.care404-cols-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---- Value strip: centered items, gold icons, hairline dividers ---------- */
.care404-value .wp-block-column {
	text-align: center;
	position: relative;
	padding: 0 12px;
}
.care404-value .wp-block-column + .wp-block-column::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	background: #3B434C;
}
.care404-value .wp-block-image { justify-content: center; margin: 0 0 16px; }
.care404-value .wp-block-image img { width: 52px; height: 52px; }
/* The doubled selector is load-bearing: the value item is a FLOW column, so WP's
   `:root :where(.is-layout-flow) > * { margin-block-start: 1.2rem }` (0,1,0)
   would otherwise push the title to a 19.2px gap. At (0,2,0) this wins and the
   gap stays the design's 16px, carried by the icon's margin-bottom above. */
.care404-value .care404-value-title {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.4;
	color: var(--wp--preset--color--white);
	margin: 0;
}

/* ---- Category value strip: left-aligned, real borders, a body line -------
   Same slate band, a different component. The landing strip is four CENTRED
   icon+title pairs separated by absolutely-positioned hairlines; all four
   category pages instead give `.value-item` a left-aligned icon / uppercase gold
   title / body paragraph stack, and draw the divider as a real
   `border-left: 1px solid #3B434C` with `padding-left: 28px` on items 2-4.
   Item 1 has neither, so the rule is `+ .wp-block-column`, not every column.

   Nothing here is a variant of the landing strip — the grid gap (28 vs 24), the
   icon size (46 vs 52), the title (16px/1.3/0.02em uppercase GOLD vs 17px/1.4
   white sentence case) and the added body line all differ — so it is its own
   class rather than a modifier, and the two never share a declaration. */
.wp-block-columns.care404-cols-value-cat {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
}
/* Grid, for the same reason as every other card row here: all four items must
   live in ONE columns block so the mobile rule can restack them, and core's
   `flex-wrap: nowrap !important` / `flex-basis: 100% !important` pair stops
   applying the moment the container is a grid (gotcha 3).

   Each item is a flex COLUMN, but that comes from the block's own vertical
   flex layout, not from here: the layout supplies `display: flex`, the 14px
   `gap` and the margin reset (`.is-layout-flex > * { margin: 0 }`) together, and
   all three stay editable. `min-width: 0` is the one thing no attribute covers —
   a grid item's `auto` minimum would otherwise refuse to shrink below its
   longest word and blow the four tracks out. */
.care404-value-cat .wp-block-column { min-width: 0; }
.care404-value-cat .wp-block-column + .wp-block-column {
	border-left: 1px solid #3B434C;
	padding-left: 28px;
}
.care404-value-cat .wp-block-image img { display: block; border-radius: 0; }
.care404-value-cat .care404-value-cat-title {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin: 0;
}
.care404-value-cat .care404-value-cat-body {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}

/* ---- Resource card: ONE navy box, photo flush above the caption row ------ */
.care404-card { overflow: hidden; }
.care404-card-photo { margin: 0 !important; }
.care404-card-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 11;
	object-fit: cover;
}
/* Equal-height cards: columns stretch, card fills its column. */
.care404-cols-cards .wp-block-column { display: flex; }
.care404-card { flex: 1 1 auto; display: flex; flex-direction: column; }

/* Caption is a flex row: gold icon tight to the title (design gap: 12px).
   min-height reserves two title lines (2 x 17px x 1.3 + 20/24 padding), so a
   wrapping title ("Housing & Senior Living") no longer makes its card taller.
   The copy itself is untouched — it just sits in a consistently sized bar. */
.care404-caption {
	padding: 20px 20px 24px;
	gap: 12px !important;
	align-items: center;
	flex-wrap: nowrap;
	min-height: 89px;
	box-sizing: border-box;
	margin-top: auto;
	/* `width: 100%` is load-bearing — gotcha 11, and the same fix `.care404-partners`
	   already uses on its logo row. `.care404-card` is a `layout: "constrained"`
	   group, so WP gives every child `margin-left: auto !important; margin-right:
	   auto !important`. That is harmless while the card is flow, but the card is
	   made `display: flex` from CSS just above, and auto cross-axis margins
	   suppress `align-self: stretch` — so the caption shrink-wrapped to its own
	   content and centred itself.

	   Measured live 2026-08-15, and it had been shipping: at 1600px four of the
	   six captions were narrower than their card, leaving the icon and title
	   indented by 0, 2.2, 7.3, 27.2 and 49px on different cards — a visibly ragged
	   left edge across the row. At one column on mobile it was worse: a 152.9px
	   caption floating in the middle of a 295px card.

	   `width: 100%` leaves the auto margins with no free space to distribute, so
	   they resolve to zero and the caption fills the card. */
	width: 100%;
}
.care404-card-icon { margin: 0 !important; flex: 0 0 auto; }
.care404-card-icon img { width: 30px; height: 30px; display: block; }
.care404-card-title {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.3;
	color: var(--wp--preset--color--white);
	margin: 0;
	min-width: 0;
}
.care404-card-title::before { content: none; }

/* Narrow cards: icon ABOVE the title so headings wrap on word boundaries.
   This is the design's own second query, verbatim:
     `@media (max-width: 1120px) { .resource-card-head { flex-direction: column;
      align-items: flex-start; gap: 10px } }`

   It is not the "second breakpoint" gotcha 3 warns against. That warning is about
   the desktop -> mobile collapse frame, where a 768px rule and core's 781px
   stacking disagreed and left a visibly broken 13px window. This query is
   independent of that collapse: it reflows the inside of a card and nothing else.

   It became load-bearing when the resource section took its real 4fr/8fr shape.
   The cards used to span the full 1446px content width (466px each); in the 8fr
   column they are 293px at 1446px viewport and ~176px at 1000px, which leaves
   roughly 134px beside a 30px icon — not enough for "Legal & Financial Planning".
   Stacking returns those 42px to the title. The design hit the same wall, which
   is why it ships this rule at all. */
@media (max-width: 1120px) {
	.care404-caption {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px !important;
	}
	/* The post template's own second breakpoint, and it is the same 1120px: below
	   it the related card's 30px icon moves ABOVE its title rather than beside it.
	   Joining this query rather than opening a third. */
	.care404-related-card .care404-related-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px !important;
	}
}

/* ---- Featured video band --------------------------------------------------
   Design `section.featured-video`: navy, `padding: 104px 40px`, inner grid
   `5fr 7fr` at `gap: 56px; align-items: center`. Almost none of that needs to be
   here — the band padding is `.care404-section`, the 40px gutter is theme.json
   root padding on the alignfull group, the split is the column widths, and the
   56px/40px gap pair is `.care404-cols-grid`, which the design gives identically
   to `.video-layout`, `.story-layout` and `.resource-layout`. What is left is
   the sponsor lockup and the two images. */
/* `flex-wrap: wrap` is OURS, not the design's — a deliberate, chosen deviation
   (2026-08-15). The design's `.sponsor-lockup` is a nowrap flex row with a fixed
   170px logo and no `white-space: nowrap` on the label, which holds down to about
   375px and fails below it: measured at 360px the label broke to "Presented / by"
   and the logo was squeezed to 147.9px.

   Wrapping was chosen over `white-space: nowrap` on the label because this is a
   SPONSOR credit. Nowrap fixes the typography by taking the shortfall out of the
   logo instead — 170px down to 132.7px, a 22% cut — which trades a problem nobody
   raised for one the sponsor would. Wrapping keeps the logo at its full 170px and
   puts "Presented by" on the line above it, which is a conventional sponsor
   lockup and preserves every value the design actually states.

   No row-gap of its own: the design's 16px is reused on both axes rather than
   inventing a second number. Inert above ~375px, where the row still fits.

   ⚠️ TWO things had to change, and measuring was the only way to find either.

   1. The wrap itself is a BLOCK ATTRIBUTE, not a rule here. The group used to
      carry `"flexWrap":"nowrap"`, and WP emits
      `.wp-container-...{flex-wrap:nowrap}` for that — (0,1,0), printed after this
      stylesheet, so `.care404-video-lockup{flex-wrap:wrap}` tied and lost
      (gotcha 2). Dropping the attribute in the pattern is the fix; there is
      deliberately no `flex-wrap` declaration here.
   2. Allowing the wrap is still not enough on its own. Flex items SHRINK before
      a line wraps, and both of these can — the label reflows its own text and
      the figure's image is capped by `max-width: 100%`. With wrapping allowed but
      nothing else, the row still refused to break and simply squeezed both. The
      `flex-shrink: 0` below is what makes the line genuinely overflow, and
      therefore wrap. */
.care404-video-lockup { gap: 16px !important; align-items: center; }
.care404-video-presented,
.care404-video-emory { flex-shrink: 0; }
/* "Presented by" — 12px / 600 / 0.18em uppercase. Deliberately no font-family:
   the design leaves this line on the page's Inter, unlike the topbar's Poppins
   "Powered by" line, so restating the inherited family would be dead CSS. */
.care404-video-presented {
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
	margin: 0;
}
.care404-video-emory { margin: 0 !important; }
.care404-video-emory img { width: 170px; height: auto; display: block; }
.care404-video-thumb { margin: 0 !important; }
.care404-video-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
/* The video band's button is 18x34 at 14px/0.07em — which is exactly the shared
   button rule's default, so only the hover differs.
   This gold button hovers to warm brown, not to white. The design gives the video
   CTA the hero's hover pair (`#966E5A` / `#F6F6F5`); the footer and mega-menu gold
   buttons get the white one the shared rule above already provides. So do the
   category pages' three other gold CTAs — the sponsor panel's "Learn More", the
   sponsorship band's and the category video band's "Watch Now". Every gold button
   the design puts inside a SECTION takes the brown hover; only the two in site
   chrome take the white one. */
.care404-video .wp-block-button__link.has-gold-background-color:hover,
.care404-video .wp-block-button__link.has-gold-background-color:focus,
.care404-video-cat .wp-block-button__link.has-gold-background-color:hover,
.care404-video-cat .wp-block-button__link.has-gold-background-color:focus,
.care404-sponsor-panel .wp-block-button__link.has-gold-background-color:hover,
.care404-sponsor-panel .wp-block-button__link.has-gold-background-color:focus,
.care404-sponsorship .wp-block-button__link.has-gold-background-color:hover,
.care404-sponsorship .wp-block-button__link.has-gold-background-color:focus {
	background-color: #966E5A !important;
	color: #F6F6F5 !important;
}

/* ---- Partners band --------------------------------------------------------
   Design `section.partners`: `#F6F6F5`, `padding: 104px 40px`, and an inner
   `display: flex; flex-direction: column; align-items: center; gap: 18px`. The
   band padding and gutter come free; the flex column has to be stated because a
   `layout: "constrained"` group is flow, not flex. Doubled selector and zeroed
   child margins for the same reason the copy columns above need them: WP global
   styles print after this file and would otherwise re-add the per-block margins.
   Text centring is not here — it is `align: center` on each block, so it stays
   editable from the dashboard. */
.wp-block-group.care404-partners {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}
.wp-block-group.care404-partners > * { margin-top: 0; margin-bottom: 0; }
.care404-partners .care404-lede { max-width: 620px; }

/* Logo row: the same flex -> grid swap as the resource cards, and load-bearing
   for the same two reasons — core forces `flex-wrap: nowrap !important` above
   782px and `flex-basis: 100% !important` below 781px, and neither applies to a
   grid item. The doubled selector beats `body .is-layout-flex { display: flex }`.
   `width: 100%` is the design's own: inside `align-items: center` the row would
   otherwise shrink-wrap. The 26px margin is on TOP of the 18px flex gap, exactly
   as in the design, and needs the extra class to outrank the margin reset above. */
.wp-block-columns.care404-partner-logos {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px !important;
	width: 100%;
}
.care404-partners .wp-block-columns.care404-partner-logos { margin-top: 26px; }
.care404-partner-logo { margin: 0 !important; }
.care404-partner-logo img { width: 100%; height: auto; display: block; }

/* ---- Region directory (category pages) ------------------------------------
   Design `section.region-directory` on the Housing page: `#F6F6F5`, `padding:
   100px 40px`, a flex column at `gap: 40px` holding a 620px heading block over a
   4-across card grid at `gap: 24px`.

   The 40px and 16px stack gaps are block gaps in the pattern rather than rules
   here, so they stay visible and editable in the dashboard, and the 620px cap
   sits on the heading block's CHILDREN — see the pattern's own comments for why
   both of those had to avoid a constrained-layout wrapper. */
.care404-region-head > * { max-width: 620px; }
/* Tracking `normal`: the directory h2 is `clamp(30px, 2.9vw, 42px)/1.12` with no
   letter-spacing, where the landing page's same-size headings carry -0.01em. */
.care404-region-head .care404-heading { letter-spacing: normal; }

/* Card grid: the same flex -> grid swap as the resource cards and partner logos,
   load-bearing for the same `flex-wrap`/`flex-basis` !important reasons, with the
   doubled selector beating `body .is-layout-flex { display: flex }`. */
.wp-block-columns.care404-region-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px !important;
}
/* Equal-height cards: columns stretch, card fills its column — same pair of rules
   the resource cards use. */
.care404-region-cards .wp-block-column { display: flex; }
.care404-region-card {
	flex: 1 1 auto;
	border: 1px solid var(--wp--preset--color--hairline);
	padding: 30px 26px 32px;
}
/* No background rule: the design paints the card `#F6F6F5`, which is already the
   section's — and the page's — colour, so stating it would be dead CSS. */
.care404-region-icon { margin: 0 !important; }
.care404-region-icon img { width: 54px; height: 54px; display: block; }
.care404-region-title {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.25;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0;
}
.care404-region-body { font-size: 15px; line-height: 1.6; margin: 0; }
/* The region card's button is 18x32 — one of the shared button rule's
   horizontal exceptions, declared alongside the others up there. */

/* ---- Topic grid (category pages) ------------------------------------------
   Design `section.topic-grid`, carried identically by all four category pages:
   `#F6F6F5`, `padding: 100px 40px`, `border-top: 1px solid #E4E2E0`, a flex
   column at `gap: 40px` holding a 620px heading block, a THREE-across card grid
   at `gap: 24px`, and a CTA.

   Three, not four. The earlier handoff recorded this as a 4-across grid at
   `gap: 14px`; the 14px is the gap INSIDE each card and the grid is
   `repeat(3, minmax(0, 1fr))` on every page. The band padding, gutter and
   border come from `.care404-section--page`, theme.json root padding and the
   block's own border attribute, so none of that is here. */
.care404-topic-head > * { max-width: 620px; }

/* Card grid: the same flex -> grid swap as the resource cards, partner logos
   and region cards — core forces `flex-wrap: nowrap !important` above 782px and
   `flex-basis: 100% !important` below 781px, and neither applies to a grid item.
   Doubled selector because `body .is-layout-flex { display: flex }` (0,1,1)
   prints after this file. */
.wp-block-columns.care404-topic-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px !important;
}
/* Equal-height cards: columns stretch, card fills its column. The design gets
   this free from the grid; we need it because a card is one level deeper, inside
   a `wp-block-column`. */
.care404-topic-cards .wp-block-column { display: flex; }
.care404-topic-card {
	flex: 1 1 auto;
	padding: 32px 28px 34px;
}
.care404-topic-icon { margin: 0 !important; }
.care404-topic-icon img { width: 44px; height: 44px; display: block; }
.care404-topic-title {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.3;
	color: var(--wp--preset--color--white);
	margin: 0;
}
.care404-topic-body {
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--white);
	margin: 0;
}

/* ---- Local experts + sponsor panel (category pages) ------------------------
   Design `section.experts`: `#F6F6F5`, `padding: 100px 40px`, `border-top: 1px
   solid #E4E2E0`, inner grid `8fr 4fr` at `gap: 56px; align-items: start`.

   The 8fr/4fr split is the column widths, the 56px/40px gap pair is
   `care404-cols-grid`, and `align-items: start` is the block's own
   `verticalAlignment` attribute — see the pattern for why that had to be an
   attribute and not a rule. What is left is the two inner stacks. */
.wp-block-columns.care404-expert-links {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px !important;
}
.care404-expert-icon { margin: 0 !important; }
.care404-expert-icon img { width: 40px; height: 40px; display: block; }
.care404-expert-title {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.3;
	margin: 0;
}
.care404-expert-body {
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}
/* The expert links' own CTA and the video band's "View all videos" are the same
   treatment at two sizes — 12px in the expert blocks, 13px beside the video
   list. Both hover to NAVY, where theme.json's `elements.link` would otherwise
   take every link to gold. */
.care404-expert-cta,
.care404-video-all { margin: 0; }
.care404-expert-cta a,
.care404-video-all a {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--warm-brown);
	text-decoration: none;
}
.care404-expert-cta a { font-size: 12px; }
.care404-video-all a  { font-size: 13px; }
.care404-expert-cta a:hover,
.care404-expert-cta a:focus,
.care404-video-all a:hover,
.care404-video-all a:focus { color: var(--wp--preset--color--navy); }

/* Sponsor panel. Background and the 36x32 padding are block attributes; the flex
   column and its 18px gap are the block's own vertical flex layout. Only the
   body measure is left, and it is a plain 16px/1.65 — NOT `.care404-lede`,
   which is the 17px role. */
.care404-sponsor-body {
	font-size: 16px;
	line-height: 1.65;
	margin: 0;
}
/* 12px, against the base eyebrow's 13px. Tracking and weight are unchanged. */
.care404-eyebrow--panel { font-size: 12px; margin-bottom: 0; }

/* ---- Category featured video ----------------------------------------------
   Design `section.featured-video` on the Health and Legal pages — NOT the
   landing page's navy band, which is a different section entirely (see the
   pattern's own warning). `#F6F6F5`, `padding: 100px 40px`, inner grid `7fr 5fr`
   at `gap: 56px; align-items: start`. */
.care404-video-cat-still { margin: 0 !important; }
.care404-video-cat-still img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.care404-video-cat-main .care404-lede { max-width: 560px; }
/* One column on desktop, two on mobile — the design's own `.video-list` values.
   Same flex -> grid swap and same doubled selector as every other card row. */
.wp-block-columns.care404-video-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px !important;
}
/* `#D8D6D4` is a one-off: it is NOT the palette's hairline (`#E4E2E0`) and
   appears nowhere else in the design, so it stays a literal rather than becoming
   a ninth colour preset. Every item carries the border, the last one included —
   the design does not exempt it. */
.care404-video-item {
	padding-bottom: 18px;
	border-bottom: 1px solid #D8D6D4;
}
.care404-video-item-title {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.3;
	margin: 0;
}
.care404-video-item-body {
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}

/* ---- Provider directory (Caregiver Support) -------------------------------
   Design `section.provider-directory`: `#F6F6F5`, `padding: 100px 40px`, a flex
   column at `gap: 32px` holding a 660px heading block over a table.

   Core does most of the table: `.wp-block-table table { border-collapse:
   collapse; width: 100% }` is the design's rule verbatim, and
   `.wp-block-table { overflow-x: auto }` is `.directory-scroll`. What core adds
   and the design does not have is a 3px `thead` bottom border and a 1px border
   plus `.5em` padding on every cell. All three are removed below.

   Specificity: core's are `.wp-block-table thead` and `.wp-block-table td` at
   (0,1,1). Everything here is (0,2,1) or higher, so these win on specificity and
   do not depend on which stylesheet prints last. */
.care404-directory-head > * { max-width: 660px; }
.care404-directory-head .care404-heading { letter-spacing: normal; }
.care404-directory .wp-block-table { margin: 0; }
.care404-directory .wp-block-table thead { border-bottom: 0; }
.care404-directory .wp-block-table thead tr { background-color: var(--wp--preset--color--navy); }
.care404-directory .wp-block-table th {
	border: 0;
	padding: 16px 20px;
	text-align: left;
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
}
.care404-directory .wp-block-table tbody tr { border-bottom: 1px solid var(--wp--preset--color--hairline); }
/* `line-height: normal` undoes theme.json's global 1.7, which the design's cells
   never inherit — its `body` sets no line-height at all. The services column is
   the one exception the design DOES declare, at 1.5, and it is also the only
   cell long enough to wrap at full width. Keyed by position because a table cell
   cannot carry a class without breaking block validation. */
.care404-directory .wp-block-table td {
	border: 0;
	padding: 18px 20px;
	font-size: 15px;
	line-height: normal;
	color: var(--wp--preset--color--body-gray);
}
.care404-directory .wp-block-table td:nth-child(2) { line-height: 1.5; }
.care404-directory .wp-block-table td:first-child {
	font-size: 16px;
	font-weight: 600;
	color: var(--wp--preset--color--heading-gray);
}

/* ---- Colour band icons (category pages) ------------------------------------
   The sponsorship and category newsletter bands each open with a centred mark.
   The band is a constrained FLOW group, so the 18px below the icon is the
   container's `margin-block-start` on the heading — the icon only has to stop
   contributing core's own `:where(.wp-block-image){margin-bottom:1em}`. It is
   always the first child, so its top margin is already zero. */
.care404-band-icon { margin-top: 0 !important; margin-bottom: 0 !important; }
.care404-band-icon img { display: block; }
/* The sponsorship band's lede is 17px/1.65 in a 620px measure, against the
   newsletter band's 17px/1.6 in 560px. Both bands carry `.care404-band`, so this
   is (0,2,0) against (0,2,0) and MUST stay below the `.care404-band .care404-lede`
   rule for source order to settle it. */
.care404-sponsorship .care404-lede {
	line-height: 1.65;
	max-width: 620px;
}

/* ---- Header / topbar ----------------------------------------------------- */
.care404-topbar-row { gap: 24px !important; width: 100%; }
.care404-topbar-logo { margin: 0 !important; }
.care404-topbar-logo img { height: 56px; width: auto; display: block; }
.care404-topbar-right { gap: 20px !important; }

.care404-powered { gap: 8px !important; }
.care404-powered-text {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	white-space: nowrap;
	margin: 0;
}
.care404-powered-atl { color: var(--wp--preset--color--white); }
.care404-topbar-radio-one { margin: 0 !important; }
.care404-topbar-radio-one img { height: 26px; width: auto; display: block; }

.care404-stations { gap: 24px !important; }
.care404-station { margin: 0 !important; }
.care404-station img { height: 22px; width: auto; display: block; }

/* Every topbar logo is a link (wordmark -> home, Radio One and the four
   stations -> their sites), so each figure wraps its img in an <a>. That anchor
   computes to inline-block, which builds a line box and leaves ~9.1px of
   descender space beneath the image — inflating the figures to 65.1 / 35.1 /
   31.1px around 56 / 26 / 22px logos and padding the whole bar to 93.1px.
   `display: block` collapses the line box so each figure hugs its image and the
   bar hugs its tallest logo. Same fix as `.care404-station-logo a` in the
   footer and `.care404-hero-radio-one a` in the hero. */
.care404-topbar .wp-block-image a { display: block; }

/* Hamburger: gold bars on navy, 5px radius, colour-only hover (design spec). */
.care404-nav .wp-block-navigation__responsive-container-open,
.care404-nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--gold);
	background: transparent;
	border-radius: 5px;
	padding: 10px;
}
.care404-nav .wp-block-navigation__responsive-container-open:hover {
	background: var(--wp--preset--color--slate);
}
.care404-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--navy) !important;
	padding: 32px 40px 64px;
}
.care404-nav .wp-block-navigation__responsive-container.is-menu-open a {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 600;
	color: var(--wp--preset--color--white);
	text-decoration: none;
}
.care404-nav .wp-block-navigation__responsive-container.is-menu-open a:hover {
	color: var(--wp--preset--color--gold);
}

/* ---- Footer -------------------------------------------------------------- */
.care404-footer-grid { gap: 56px !important; align-items: flex-start; }
.care404-footer-brand { display: flex; flex-direction: column; gap: 20px; }
/* 16px, not the inherited body preset. `--wp--preset--font-size--body` is fluid
   `clamp(16px, …, 18px)` and resolves to 18px at desktop; the design's footer
   paragraph is a literal 16px/1.7. Line height is already 1.7 from theme.json. */
.care404-footer-brand p { color: var(--wp--preset--color--white); font-size: 16px; max-width: 340px; margin: 0; }
.care404-footer-logo { margin: 0 !important; }
.care404-footer-links { gap: 40px !important; }
.care404-footer-links .wp-block-column { display: flex; flex-direction: column; gap: 14px; }
.care404-footer-heading {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin: 0;
}
.care404-footer-heading::before { content: none; }
.care404-footer-link { margin: 0; font-size: 16px; line-height: 1.5; }
.care404-footer-link a { color: var(--wp--preset--color--white); text-decoration: none; }
.care404-footer-link a:hover { color: var(--wp--preset--color--gold); }

/* The doubled selector is load-bearing. `margin-top: 56px` at a single class
   (0,1,0) tied with core's `:root :where(.is-layout-constrained) > *
   { margin-block-start: 1.2rem }`, also (0,1,0), and lost on source order —
   global styles print after this file (gotcha 2). Measured 2026-08-15: the legal
   row was running at 19.2px, **36.8px short** of the design's 56px, and had been
   since the footer was built. At (0,2,0) this wins regardless of order. */
.care404-footer .care404-footer-legal {
	margin-top: 56px;
	border-top: 1px solid var(--wp--preset--color--slate);
	padding-top: 28px;
	gap: 24px !important;
}
.care404-footer-stations { gap: 22px !important; }
.care404-footer-powered {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	white-space: nowrap;
	margin: 0;
}
.care404-footer-powered-atl { color: var(--wp--preset--color--white); }
.care404-station-logo { margin: 0 !important; }
.care404-station-logo img { height: 20px; width: auto; display: block; }
.care404-radio-one img { height: 24px; }
/* The station logos link out (same destinations as the topbar), so each figure
   now wraps its img in an <a>. An inline anchor around a block-level img builds
   a line box, which adds ~9px of descender space below the image and inflates
   the figure — the topbar has exactly that bug today (31.1px figures around
   22px logos). `display: block` collapses it so the figure keeps hugging the
   image and the legal row stays 24px. Same fix as `.care404-hero-radio-one a`. */
.care404-station-logo a { display: block; }
.care404-footer-copyright { font-size: 14px; line-height: 1.6; color: var(--wp--preset--color--white); margin: 0; }
.care404-footer-copyright a { color: var(--wp--preset--color--white); text-decoration: none; }
.care404-footer-copyright a:hover { color: var(--wp--preset--color--gold); }

/* ---- No mid-word breaking in any card row ---------------------------------
   Core ships `.wp-block-column { word-break: break-word; overflow-wrap:
   break-word }`. The design has NEITHER, so where a word is too wide the design
   overflows its box and WordPress hyphenates inside the word instead. That is
   what produced "Senior Housin/g Guide" at 375px.

   The widths are fixed above, so this is a backstop rather than the fix: it means
   a longer word in future copy fails visibly (overflow) instead of silently
   turning into nonsense. Scoped to the card rows whose content has actually been
   measured — every one of them fits at every width the site supports. Do NOT
   promote it to a global: outside these rows, core's break-word is a useful net
   for URLs and long unbroken strings. */
.care404-topic-cards > .wp-block-column,
.care404-video-list > .wp-block-column,
.care404-expert-links > .wp-block-column,
.care404-region-cards > .wp-block-column,
.care404-cols-cards > .wp-block-column {
	word-break: normal;
	overflow-wrap: normal;
}

/* ---- Structure: square corners, no shadows ------------------------------- */
.wp-block-image img,
.wp-block-cover,
.wp-block-group,
.wp-block-column { border-radius: 0; box-shadow: none; }

/* ==== BLOG INDEX ==========================================================
   `Care404 - Category Blog.dc.html`. Read off that page's markup, not the token
   files (gotcha 5). Note this design is a CATEGORY ARCHIVE, not a generic index:
   its hero reads "Category / Health & Wellness / 24 Articles", and its chip row
   selects a category. The same body therefore serves `category.html` (dynamic
   title and description) and `home.html` (static "All Articles" copy).       */

/* ---- Blog hero -----------------------------------------------------------
   NOT the category-page hero. That one is a single cover band with the photo as
   a background layer and an empty spacer column. This one is a gradient-only
   background with a REAL <img> in the right-hand 5fr column, so the photo is
   content, not decoration, and carries its own alt text. The gradient still runs
   the full width; its right end is fully transparent, so it does not tint the
   photo it sits behind.

   Grid is 7fr/5fr here, against the category hero's 6fr/6fr. */
.care404-blog-hero {
	background-color: #0E131B;
	background-image: linear-gradient(90deg, #0E131B 0%, #0E131B 26%, rgba(14, 19, 27, 0.84) 46%, rgba(14, 19, 27, 0.36) 66%, rgba(14, 19, 27, 0.06) 88%, rgba(14, 19, 27, 0) 100%);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.care404-blog-hero .care404-blog-hero-grid { gap: 0 !important; }
.care404-blog-hero .care404-blog-hero-grid > .wp-block-column { min-width: 0; }
.care404-blog-hero .care404-blog-hero-copy { box-sizing: border-box; }
.care404-blog-hero .care404-blog-hero-h1 {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	font-size: clamp(34px, 3.6vw, 54px);
	line-height: 1.08;
	letter-spacing: -0.015em;
	max-width: 780px;
	margin: 0;
	text-wrap: balance;
}
.care404-blog-hero .care404-blog-hero-h1::before { content: none; }
/* The deck is 19px/1.6 — a fourth supporting-paragraph size, distinct from the
   17px `.care404-lede` and from the hero's own 18px body copy. */
.care404-blog-hero .care404-blog-deck {
	font-size: 19px;
	line-height: 1.6;
	max-width: 620px;
	margin: 0;
}
/* `core/term-description` wraps its text in the block's own div, so the size has
   to reach the child paragraph too. */
.care404-blog-hero .care404-blog-deck p { font-size: inherit; line-height: inherit; margin: 0; }
.care404-blog-hero .care404-blog-hero-photo img {
	width: 100%;
	height: 100%;
	min-height: 430px;
	object-fit: cover;
	object-position: center 28%;
	display: block;
	border-radius: 0;
}
.care404-blog-hero .care404-blog-hero-photo { margin: 0; height: 100%; }

/* A gold eyebrow. `.care404-eyebrow` is warm-brown — correct on a light section,
   wrong on navy — so the colour is the only thing this modifier changes. */
.care404-eyebrow--gold { color: var(--wp--preset--color--gold); }

/* The Poppins micro-lockup: the hero's "24 Articles · Updated Weekly" and the
   filter row's "Browse" label share one type spec at two colours. */
.care404-metaline {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0;
}

/* ---- Filter chip row -----------------------------------------------------
   A slate band of category links. In the design the active chip is hard-coded;
   here the chips are real links to the category archives, so on the blog index
   none is active and on a category archive the matching one cannot light up
   without PHP. Documented as a deliberate gap in the handoff. */
.care404-blog-filter { padding-top: 26px; padding-bottom: 26px; }
.care404-blog-filter .care404-filter-row { row-gap: 12px; }
.care404-blog-filter .wp-block-button__link {
	font-size: 12px;
	letter-spacing: 0.07em;
	padding: 11px 18px;
}
.care404-blog-filter .wp-block-button__link.has-navy-background-color:hover,
.care404-blog-filter .wp-block-button__link.has-navy-background-color:focus {
	background-color: var(--wp--preset--color--gold) !important;
	color: var(--wp--preset--color--navy) !important;
}

/* ---- Featured post ------------------------------------------------------- */
.care404-blog-featured { padding-top: 96px; padding-bottom: 96px; }
.care404-blog-featured .care404-featured-grid { gap: 0 !important; }
.care404-blog-featured .care404-featured-grid > .wp-block-column { min-width: 0; }
.care404-blog-featured .care404-featured-media { margin: 0; height: 100%; }
.care404-blog-featured .care404-featured-media img {
	width: 100%;
	height: 100%;
	min-height: 420px;
	object-fit: cover;
	display: block;
	border-radius: 0;
}
/* `.wp-block-column` computes as CONTENT-BOX — core sets no box-sizing and there
   is no global reset — so a column that has BOTH an explicit width and padding
   adds the padding OUTSIDE its flex-basis. The copy panel's 41.67% (602.5px) plus
   96px of horizontal padding made a 698.5px hypothetical, the pair overflowed
   1446 by 96, and flex-shrink rebalanced them to 787.45/658.55 — a 56px error in
   a split that is supposed to be 843.5/602.5. Measured, not inferred.

   The design draws this band with CSS Grid, where `grid-template-columns: 7fr 5fr`
   puts the padding INSIDE the track, so border-box is the faithful behaviour.
   Only this column needs it: every other padded panel in the theme (the experts
   sponsor panel, the hero copy) puts its padding on an inner GROUP, where the
   column's own width is untouched — verified at 926.72/463.28 against an expected
   926.67/463.33. */
.care404-blog-featured .care404-featured-copy { box-sizing: border-box; }
.care404-blog-featured .care404-featured-h2 {
	font-size: clamp(26px, 2.4vw, 36px);
	line-height: 1.18;
	letter-spacing: normal;
	text-wrap: balance;
}
/* `core/post-title` with `isLink` wraps the text in an `<a>`, and theme.json puts
   warm-brown on every `elements.link` — so the heading's own `textColor: white`
   styles the h2 while the anchor inside it renders brown on navy. The design's
   featured title is #F6F6F5 with no hover change. Same trap as the post card
   title, and the one the handoff flagged for the resource cards. */
.care404-blog-featured .care404-featured-h2 a {
	color: inherit;
	text-decoration: none;
}
.care404-blog-featured .care404-featured-body { font-size: 17px; line-height: 1.7; margin: 0; }
/* `core/read-more` is the only core block that links to the post from inside a
   query loop, so the design's "Read Article" button is that block wearing the
   shared button treatment. It emits a bare `<a class="wp-block-read-more">`, not
   a `.wp-block-button__link`, so every declaration has to be restated. */
.care404-blog-featured .wp-block-read-more {
	align-self: flex-start;
	display: inline-block;
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 18px 34px;
	border-radius: 5px;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	margin-top: 6px;
}
.care404-blog-featured .wp-block-read-more:hover,
.care404-blog-featured .wp-block-read-more:focus {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}
/* The byline is 0.1em where the hero metaline is 0.12em — a real 0.02em
   difference between two otherwise identical Poppins micro-labels. */
.care404-blog-featured .care404-metaline { letter-spacing: 0.1em; }

/* ---- Post grid ----------------------------------------------------------- */
/* Top padding is 0 by design: the air above the grid is the featured section's
   own 96px bottom padding, not a second helping from this one. */
.care404-blog-posts { padding-top: 0; padding-bottom: 96px; }
.care404-blog-posts .care404-posts-head {
	border-top: 3px solid var(--wp--preset--color--gold);
	padding-top: 34px;
	gap: 32px !important;
}
.care404-blog-posts .care404-posts-head > .wp-block-column { align-self: flex-end; min-width: 0; }
.care404-blog-posts .care404-posts-head-h2 {
	font-size: clamp(28px, 2.6vw, 38px);
	line-height: 1.15;
	letter-spacing: normal;
	text-wrap: balance;
}
.care404-blog-posts .care404-posts-head .wp-block-button__link { padding: 16px 30px; }

/* ---- Post card -----------------------------------------------------------
   Visually borderless: its background is the page background, it has no border,
   no radius, no shadow and no padding, so every bit of its structure is the two
   flex gaps — 16px image-to-text and 10px row-to-row. Both are block attributes
   on the post-template's inner groups, not rules here. */
.care404-post-card .wp-block-post-featured-image { margin: 0; }
.care404-post-card .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
	border-radius: 0;
}
.care404-post-card .care404-post-card-cat {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--warm-brown);
	margin: 0;
}
.care404-post-card .care404-post-card-cat a { color: inherit; text-decoration: none; }
.care404-post-card .care404-post-card-title {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	font-size: 21px;
	line-height: 1.28;
	letter-spacing: normal;
	margin: 0;
}
/* theme.json puts warm-brown on every `elements.link`, which would render the
   title brown-on-page. The design keeps the title in body ink and moves to brown
   only on hover — the whole title is the link. */
.care404-post-card .care404-post-card-title a {
	color: var(--wp--preset--color--heading-gray);
	text-decoration: none;
}
.care404-post-card .care404-post-card-title a:hover,
.care404-post-card .care404-post-card-title a:focus { color: var(--wp--preset--color--warm-brown); }
.care404-post-card .care404-post-card-excerpt {
	font-size: 16px;
	line-height: 1.65;
	color: #5F5D5D;
	margin: 0;
}
.care404-post-card .care404-post-card-excerpt p { margin: 0; font-size: inherit; line-height: inherit; }
/* The date and the read time are two blocks on one row where the design has one
   string; the middle dot between them is a real paragraph, so the row is a flex
   group at a 6px gap rather than a `separator` attribute nothing here supports. */
.care404-post-card .care404-post-card-meta,
.care404-post-card .care404-post-card-meta * {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #5F5D5D;
	margin: 0;
}
.care404-post-card .care404-post-card-meta a { color: inherit; text-decoration: none; }

/* ---- Pagination ----------------------------------------------------------
   Core emits `.page-numbers` anchors plus a `.current` span inside
   `core/query-pagination-numbers`, and a separate `core/query-pagination-next`.
   The design's row is centred over a hairline, numbers unspaced and untransformed,
   only "Next" uppercase and tracked. */
.care404-pagination {
	border-top: 1px solid #D8D6D4;
	padding-top: 34px;
	gap: 10px !important;
}
.care404-pagination .page-numbers {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	padding: 12px 18px;
	border-radius: 5px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--heading-gray);
	text-decoration: none;
}
.care404-pagination .page-numbers:hover,
.care404-pagination .page-numbers:focus {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy);
}
.care404-pagination .page-numbers.current {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy);
}
.care404-pagination .page-numbers.current:hover {
	background: var(--wp--preset--color--slate);
	color: var(--wp--preset--color--white);
}
.care404-pagination .wp-block-query-pagination-next {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 12px 24px;
	margin-left: 8px;
	border-radius: 5px;
	background: var(--wp--preset--color--slate);
	color: var(--wp--preset--color--white);
	text-decoration: none;
}
.care404-pagination .wp-block-query-pagination-next:hover,
.care404-pagination .wp-block-query-pagination-next:focus { background: var(--wp--preset--color--navy); }

/* ---- Blog newsletter band ------------------------------------------------
   A THIRD newsletter band. The landing band is 80px/20px with a 17px lede at
   560px; the category band is 76px/18px with the same lede; this one is 80px/18px
   with an 18px/1.6 paragraph at 620px. None of the three is a variant of another,
   which is exactly the drift the h2 table in §6b exists to catch. */
.care404-blog-band { padding-top: 80px; padding-bottom: 80px; }
.care404-blog-band .care404-blog-band-body {
	font-size: 18px;
	line-height: 1.6;
	max-width: 620px;
	margin: 0 auto;
}
.care404-blog-band .wp-block-button__link { padding-left: 40px; padding-right: 40px; }
.care404-blog-band .wp-block-button__link.has-navy-background-color:hover,
.care404-blog-band .wp-block-button__link.has-navy-background-color:focus {
	background-color: var(--wp--preset--color--slate) !important;
}

/* ==== SINGLE POST =========================================================
   `Care404 - Post Template.dc.html`, read off that page's markup (gotcha 5).

   The single most important fact about this template: the design sets
   `h1, h2, h3, p, figure { margin: 0 }` globally and gets EVERY vertical gap
   from a flex `gap`, with four surgical exceptions. So the article column is a
   flow container whose margins are zeroed and whose rhythm is one 26px gap,
   and the exceptions are restated one at a time below. Building it with
   `margin-bottom` instead would need a value per block pair and would drift.  */

/* ---- Post hero -----------------------------------------------------------
   The same gradient as the blog hero — 26/46/66/88 at .84/.36/.06, which is NOT
   the category pages' 22/42/62/82 at .82/.34/.08 — but over a real background
   photo with an empty `aria-hidden` spacer, the way the category-page hero is
   built. 7fr/5fr, and a fifth h1 clamp. */
.care404-post-hero {
	--care404-post-photo: url("../photos/10-hero-health.png");
	background-color: #0E131B;
	background-image:
		linear-gradient(90deg, #0E131B 0%, #0E131B 26%, rgba(14, 19, 27, 0.84) 46%, rgba(14, 19, 27, 0.36) 66%, rgba(14, 19, 27, 0.06) 88%, rgba(14, 19, 27, 0) 100%),
		var(--care404-post-photo);
	background-size: cover, cover;
	background-position: center center, center right;
	background-repeat: no-repeat, no-repeat;
}
.care404-post-hero .care404-post-hero-grid { gap: 0 !important; }
.care404-post-hero .care404-post-hero-grid > .wp-block-column { min-width: 0; }
.care404-post-hero .care404-post-hero-copy { box-sizing: border-box; }
.care404-post-hero .care404-post-hero-h1 {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	font-size: clamp(34px, 3.6vw, 54px);
	line-height: 1.08;
	letter-spacing: -0.015em;
	max-width: 780px;
	margin: 0;
	text-wrap: balance;
}
.care404-post-hero .care404-post-hero-h1::before { content: none; }
.care404-post-hero .care404-post-standfirst,
.care404-post-hero .care404-post-standfirst p {
	font-size: 19px;
	line-height: 1.6;
	max-width: 620px;
	margin: 0;
}
/* The byline is the Poppins micro-label; the date+read-time beside it is INTER
   at 14px with no tracking and no uppercase. Two different type roles on one
   row — easy to miss, and `.care404-metaline` would wrongly claim both. */
.care404-post-hero .care404-post-date-line,
.care404-post-hero .care404-post-date-line * {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: normal;
	text-transform: none;
	margin: 0;
}
.care404-post-hero .care404-post-byline,
.care404-post-hero .care404-post-byline * {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0;
}

/* ---- Article column and its rail ----------------------------------------- */
.care404-post-body { padding-top: 96px; padding-bottom: 96px; }
.care404-post-body .care404-post-layout { gap: 72px !important; }
.care404-post-body .care404-post-layout > .wp-block-column { min-width: 0; }
/* The 8fr track is 916px, but the prose measure is clamped to 760px and stays
   LEFT — the extra 156px is slack between the text and the rail, on top of the
   72px gap. That is the design's own `max-width` on the article, not centring. */
.care404-post-body .care404-post-article { max-width: 760px; }

/* The prose flow. `core/post-content` is a constrained container, so its children
   get WP's `margin-block-start: 1.2rem` (0,1,0) and, being constrained, also
   `margin-left/right: auto`. Both have to go before a gap model can work: the
   auto margins would centre every block inside the 916px track and undo the
   760px left-aligned measure. Doubled selector to clear (0,1,0) without
   `!important`. */
.care404-post-content.is-layout-constrained > *,
.care404-post-content.is-layout-flow > * {
	margin-block-start: 0;
	margin-block-end: 0;
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}
.care404-post-content {
	display: flex;
	flex-direction: column;
	gap: 26px;
	align-items: stretch;
}
.care404-post-content > p {
	font-size: 18px;
	line-height: 1.75;
	color: #5F5D5D;
}
/* The FIRST paragraph only: 21px/1.65 at weight 500 in body ink. The design
   marks it with a class rather than relying on position, so an editor can move
   it; `care404-post-lead` is written into the post content. */
.care404-post-content > p.care404-post-lead {
	font-size: 21px;
	line-height: 1.65;
	font-weight: 500;
	color: var(--wp--preset--color--heading-gray);
}
/* Exception 1 of 4: an h2 adds 14px on top of the 26px flow, so the space above
   a heading is 40px and the space below it stays 26px.

   THE DOUBLED CLASS IS LOAD-BEARING. The margin reset above is
   `.care404-post-content.is-layout-constrained > *` at (0,2,0); a plain
   `.care404-post-content > h2` is (0,1,1) and LOSES to it, so the 14px silently
   became 0. Measured at margin-top: 0px before this was doubled to (0,2,1).
   Same for the blockquote's `8px 0` and the button row's 10px below. */
.care404-post-content.is-layout-constrained > h2,
.care404-post-content.is-layout-flow > h2,
.care404-post-content > h2 {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	font-size: 30px;
	line-height: 1.2;
	letter-spacing: normal;
	color: var(--wp--preset--color--heading-gray);
	margin-top: 14px;
}
.care404-post-content > h2::before { content: none; }
.care404-post-content > ul,
.care404-post-content > ol {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-left: 22px;
	margin: 0;
}
.care404-post-content li {
	font-size: 18px;
	line-height: 1.7;
	color: #5F5D5D;
}
.care404-post-content figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.care404-post-content figure img { width: 100%; display: block; border-radius: 0; }
.care404-post-content figcaption {
	font-size: 14px;
	line-height: 1.6;
	color: #5F5D5D;
	margin: 0;
	text-align: left;
}
/* Exceptions 2 and 3: the quote adds 8px top and bottom (34px of air), and its
   attribution sits 12px under the quote — the blockquote is NOT a flex container
   in the design, so that 12px is a real margin. A gold 4px rule, no background,
   no card, no shadow, no quote glyph. */
.care404-post-content.is-layout-constrained > blockquote,
.care404-post-content.is-layout-flow > blockquote,
.care404-post-content > blockquote {
	border-left: 4px solid var(--wp--preset--color--gold);
	padding: 4px 0 4px 26px;
	margin: 8px 0;
	background: none;
}
.care404-post-content > blockquote p {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 600;
	font-size: 24px;
	line-height: 1.4;
	color: var(--wp--preset--color--heading-gray);
	margin: 0;
}
.care404-post-content > blockquote cite {
	display: block;
	font-family: var(--wp--preset--font-family--inter);
	font-style: normal;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--warm-brown);
	margin-top: 12px;
}
/* Exception 4: the closing button row adds 10px, for 36px of air above it.
   Doubled for the same reason as exceptions 1 and 2. */
.care404-post-content.is-layout-constrained > .care404-post-actions,
.care404-post-content.is-layout-flow > .care404-post-actions,
.care404-post-content > .care404-post-actions { margin-top: 10px; }

/* ---- The rail ----------------------------------------------------------- */
.care404-post-rail .care404-rail-sponsor { border-top: 3px solid var(--wp--preset--color--gold); }
.care404-post-rail .care404-rail-sponsor img { width: 190px; display: block; border-radius: 0; }
.care404-post-rail .care404-rail-label {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--warm-brown);
	margin: 0;
}
/* The takeaways heading is POPPINS at 0.12em on gold, where the two rail labels
   around it are Inter at 0.16em on brown. Three near-identical micro-labels, two
   of them different. */
.care404-post-rail .care404-rail-takeaways-label {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin: 0;
}
.care404-post-rail .care404-rail-takeaways ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-left: 20px;
	margin: 0;
}
.care404-post-rail .care404-rail-takeaways li {
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--white);
}
.care404-post-rail .care404-rail-link {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.35;
	margin: 0;
}
.care404-post-rail .care404-rail-link a {
	color: var(--wp--preset--color--heading-gray);
	text-decoration: none;
}
.care404-post-rail .care404-rail-link a:hover,
.care404-post-rail .care404-rail-link a:focus { color: var(--wp--preset--color--warm-brown); }
/* Every rail link but the LAST carries the hairline — the design leaves the
   final item deliberately unruled. */
.care404-post-rail .care404-rail-links .care404-rail-link:not(:last-child) {
	padding-bottom: 14px;
	border-bottom: 1px solid #D8D6D4;
}

/* ---- Video band and related posts ---------------------------------------- */
.care404-post-media { padding-top: 96px; padding-bottom: 96px; }
.care404-post-media .care404-post-media-layout { gap: 64px !important; }
.care404-post-media .care404-post-media-layout > .wp-block-column { min-width: 0; }
.care404-post-media .care404-media-body { font-size: 17px; line-height: 1.7; max-width: 420px; margin: 0; }
.care404-post-media .care404-media-embed img { width: 100%; display: block; border-radius: 0; }
.care404-post-media .care404-presented {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0;
}
.care404-post-media .care404-presented-logo img { height: 26px; width: auto; display: block; }

.care404-post-related { padding-top: 96px; padding-bottom: 96px; }
.care404-post-related .care404-related-layout { gap: 56px !important; }
.care404-post-related .care404-related-layout > .wp-block-column { min-width: 0; }
.care404-post-related .care404-related-body { font-size: 17px; line-height: 1.7; max-width: 400px; margin: 0; }
/* The related card is NOT the blog index's post card. It is the reduced topic
   tile: a navy block, a 16/11 image, and a 30px icon beside a 17px title — no
   excerpt, no date, no category label. In the design it is not even a link;
   these are wired to the category archives, because a card that looks clickable
   and is not is worse than either. */
.wp-block-columns.care404-related-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.care404-related-cards .wp-block-column { min-width: 0; }
.care404-related-card { height: 100%; }
.care404-related-card .wp-block-image { margin: 0; }
.care404-related-card .wp-block-image img {
	width: 100%;
	aspect-ratio: 16 / 11;
	object-fit: cover;
	display: block;
	border-radius: 0;
}
.care404-related-card .care404-related-head { padding: 20px 20px 24px; min-width: 0; }
.care404-related-card .care404-related-head .wp-block-image img { width: 30px; height: 30px; flex: 0 0 auto; }
.care404-related-card .care404-related-title {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.3;
	letter-spacing: normal;
	min-width: 0;
	margin: 0;
}
.care404-related-card .care404-related-title a { color: inherit; text-decoration: none; }

/* The design's own second breakpoint: below 1120px the related card's icon moves
   ABOVE its title. Same 1120px the resource-card caption uses, so it joins that
   query rather than opening a third. */

/* ---- Responsive: the system's single breakpoint --------------------------
   The design breaks at 768px, but WordPress stacks every core/columns block at
   its own 781px (`blocks/columns/style.css`, and our patterns are
   `isStackedOnMobile`). Holding our rules at 768px left a 13px window
   (769–781px) where columns had already collapsed to full width while the
   desktop styling was still applied — in the hero that put the headline and
   body copy over un-scrimmed photo. Matching WordPress at 781px keeps the
   restyle and the layout collapse on the same frame for every pattern.
   13px earlier than the design is imperceptible; the broken window was not.

   NOTE: no root-padding override here. The gutter stays 40px at every width —
   the design's own mobile block never touches horizontal padding. */
@media (max-width: 781px) {
	.care404-section { padding-top: 64px; padding-bottom: 64px; }
	.care404-section--page { padding-top: 60px; padding-bottom: 60px; }
	/* The category pages' mobile block takes EVERY band to 60px, colour bands
	   included: `.band, .value-strip, .topic-grid, .experts, .featured-video,
	   .region-directory, .provider-directory { padding: 60px 0 }`. The landing
	   page's bands are left alone — hence a modifier the two category bands carry
	   rather than a rule on `.care404-band`. The !important beats the newsletter
	   band's inline 76px, the same way the footer's beats its inline 72px. */
	.care404-band--page {
		padding-top: 60px !important;
		padding-bottom: 60px !important;
	}
	/* `.value-strip` is in that same 60px list, and the strip is the one band
	   whose desktop padding (56px) already matches the landing page's — so it
	   needs the modifier only for mobile, where the two diverge by 4px. Measured
	   on the Housing page 2026-08-15: it was sitting at 56px at 375px. */
	.care404-strip--page {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	/* Hero: gradient flips 90deg -> 180deg and gets much heavier, photo moves to
	   `center top`, the spacer is dropped and the copy column loses its padding
	   and min-height. Copy stays LEFT aligned (the design's own mobile block does
	   not centre it) and the 40px gutter is never overridden
	   (docs/design-specs/hero-and-nav.md §3). The hero's own 40px padding is an
	   inline block style and needs no restating here. The copy column's
	   padding/min-height are also inline, so those two DO need !important. */
	.care404-hero {
		background-image:
			linear-gradient(180deg, rgba(14, 19, 27, 0.94) 0%, rgba(14, 19, 27, 0.88) 62%, rgba(14, 19, 27, 0.72) 100%),
			var(--care404-hero-photo);
		background-position: center center, center top;
	}
	/* The block-photo path mirrors the flip above: scrim 90deg -> 180deg on the
	   ::before, photo `center right` -> `center top` on object-position. */
	.care404-hero--blockphoto::before {
		background-image: linear-gradient(180deg, rgba(14, 19, 27, 0.94) 0%, rgba(14, 19, 27, 0.88) 62%, rgba(14, 19, 27, 0.72) 100%);
	}
	/* Doubled class for the same reason as the desktop rule — it has to reach
	   (0,3,1) to override that rule's `object-position`, media query or not. */
	.care404-hero.care404-hero--blockphoto > .care404-hero-photo img {
		object-position: center top;
	}
	.care404-hero .care404-hero-spacer { display: none !important; }
	.care404-hero .care404-hero-copy {
		padding: 48px 0 40px 0 !important;
		min-height: 0 !important;
	}
	/* The category pages' mobile block gives the copy column 4px more at the
	   bottom than the landing page's — `48px 0 44px 0` against `48px 0 40px 0`.
	   Equal specificity (0,2,0) with the rule above, so ORDER IS LOAD-BEARING:
	   this must stay below it. */
	.care404-hero--cat .care404-hero-copy {
		padding: 48px 0 44px 0 !important;
	}

	/* The design's mobile block drops the story photo's floor to 240px. */
	.care404-story-photo img { min-height: 240px; }

	/* ---- Blog index, stacked --------------------------------------------
	   The blog design's own mobile block also narrows every horizontal gutter
	   from 40px to 24px. NOT carried across: this theme's gutter is 40px at
	   every width on every other page (theme.json root padding), and a blog
	   that indents 16px less than the category page linking to it reads as a
	   bug. A deliberate deviation — see the handoff. */
	.care404-blog-hero .care404-blog-hero-copy {
		padding: 56px 0 56px 0 !important;
		min-height: 0 !important;
		align-items: center !important;
		text-align: center;
	}
	.care404-blog-hero .care404-blog-hero-photo img { min-height: 260px; }
	.care404-blog-featured { padding-top: 56px !important; padding-bottom: 56px !important; }
	.care404-blog-featured .care404-featured-grid { gap: 32px !important; }
	.care404-blog-featured .care404-featured-media img { min-height: 260px; }
	.care404-blog-featured .care404-featured-copy {
		padding: 40px 24px !important;
	}
	/* The design's mobile block re-adds 56px of TOP padding here, which is 0 on
	   desktop — the stacked featured section no longer supplies it. */
	.care404-blog-posts { padding-top: 56px !important; padding-bottom: 56px !important; }
	.care404-blog-filter { padding-top: 56px !important; padding-bottom: 56px !important; }
	.care404-blog-filter .care404-filter-row { justify-content: center !important; }
	.care404-blog-band { padding-top: 56px !important; padding-bottom: 56px !important; }
	.care404-blog-posts .care404-posts-head { gap: 20px !important; }
	.care404-blog-posts .care404-posts-head > .wp-block-column { align-self: flex-start; }
	.care404-blog-posts .care404-posts-head-actions { justify-content: flex-start !important; }
	.care404-pagination { flex-wrap: wrap; }

	/* Post cards go to ONE column, not the design's two. Same deliberate
	   deviation, and the same reasoning, as the four card rows in §6k: at 375px
	   a 2-up grid gives a 137px card, and these cards carry the longest titles
	   on the site ("Five Signs It's Time to Talk About Driving") plus a
	   two-line excerpt. The design's own 768px rule says 2 and its dedicated
	   mobile file says 1 — the two disagree, and 1 is what a phone needs. */
	.care404-post-cards.is-layout-grid {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}

	/* ---- Single post, stacked -------------------------------------------
	   The rail drops BELOW the article at 40px, both the article/rail and the
	   video splits collapse, the hero spacer goes and its copy loses its
	   padding and floor. The related cards stay TWO across — the design never
	   takes them to one, and unlike the post cards these tiles carry a short
	   title and no excerpt, so 2-up at 375px is legible where the post card
	   was not. */
	.care404-post-hero .care404-post-hero-spacer { display: none !important; }
	.care404-post-hero .care404-post-hero-copy {
		padding: 56px 0 56px 0 !important;
		min-height: 0 !important;
	}
	.care404-post-hero {
		background-image:
			linear-gradient(180deg, rgba(14, 19, 27, 0.94) 0%, rgba(14, 19, 27, 0.88) 62%, rgba(14, 19, 27, 0.72) 100%),
			var(--care404-post-photo);
		background-position: center center, center top;
	}
	.care404-post-body { padding-top: 56px !important; padding-bottom: 56px !important; }
	.care404-post-media { padding-top: 56px !important; padding-bottom: 56px !important; }
	.care404-post-related { padding-top: 56px !important; padding-bottom: 56px !important; }
	.care404-post-body .care404-post-layout { gap: 40px !important; }
	.care404-post-media .care404-post-media-layout { gap: 40px !important; }
	.care404-post-related .care404-related-layout { gap: 40px !important; }
	.care404-post-body .care404-post-article { max-width: none; }
	.wp-block-columns.care404-related-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* The two closing buttons go full width and centre their labels. `width: 100%`
	   on the CONTAINER is the load-bearing one: `.wp-block-buttons` shrink-wraps
	   to its widest button as a flex item of the article column, so switching its
	   own direction to column left it 198.1px wide inside a 295px column and the
	   buttons stretched only to that. Measured. */
	.care404-post-content > .care404-post-actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}
	.care404-post-content > .care404-post-actions .wp-block-button { width: 100%; }
	.care404-post-content > .care404-post-actions .wp-block-button__link { display: block; text-align: center; }

	/* Text + media split: stacked by core, at the design's tighter mobile gap
	   (56px desktop -> 40px). The class this targets was missing from
	   care404-text-media.php until 2026-08-14, which made both this rule and its
	   desktop counterpart look like dead code — they were only ever unreachable. */
	.care404-cols-grid { gap: 40px !important; }

	/* Value strip: one column — core stacks it for us — at a WIDER gap. The
	   design's mobile block bumps `.value-grid` from its desktop 24px to
	   `gap: 32px !important`. The hairline dividers go with the columns they
	   used to separate. */
	.care404-cols-value { gap: 32px !important; }
	.care404-value .wp-block-column + .wp-block-column::before { display: none; }

	/* Category value strip: one column at 30px — the category pages' own mobile
	   value, not the landing strip's 32px — with the real borders dropped and
	   every item centred. All four of those are the design's own mobile block:
	   `.value-item { border-left: 0; padding-left: 0; align-items: center;
	   text-align: center }`. `align-items` is what centres the icon, which is a
	   flex child and would otherwise stay stretched to the left edge; the
	   `text-align` only reaches the title and body. */
	.wp-block-columns.care404-cols-value-cat {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.care404-value-cat .wp-block-column {
		align-items: center;
		text-align: center;
	}
	.care404-value-cat .wp-block-column + .wp-block-column {
		border-left: 0;
		padding-left: 0;
	}

	/* Resource cards go to ONE column on mobile. This is a DELIBERATE DEVIATION
	   from the design, which sets `.resource-cards { grid-template-columns:
	   repeat(2, minmax(0, 1fr)) }` and never stacks them.

	   Requested by the user 2026-08-15 after seeing it: two-up at 375px gives a
	   136px card and 96px of caption, which broke every multi-word title across
	   three lines — "Legal & / Financial / Planning", "Housing / & Senior /
	   Living". One column gives a 295px card and ~255px of caption, so those
	   titles fit in one or two. It is the same call already made for the topic
	   cards and the video list, and the one the design itself makes for the
	   region cards.

	   The grid swap below is still load-bearing even at one column. Ours is a
	   core/columns block, and core ships
	   `@media (max-width: 781px) { .wp-block-columns:not(.is-not-stacked-on-mobile)
	   > .wp-block-column { flex-basis: 100% !important } }` — an !important
	   declaration we could only outrank by piling on more classes. Don't fight
	   it: `flex-basis` is meaningless on a grid item, so core's rule stops
	   applying at all and the track list is ours to set.

	   The doubled selector is load-bearing for `display`: WP global styles emit
	   `body .is-layout-flex { display: flex }` (0,1,1) in
	   `global-styles-inline-css`, printed after this stylesheet, which outranks a
	   single class. Two classes (0,2,0) beat it without `!important`.

	   Everything else carries over untouched: the 24px gap above becomes the grid
	   gap, and the equal-height card rules still work because core's
	   `.wp-block-columns { align-items: normal !important }` computes to `stretch`
	   on a grid container just as it did on the flex one. */
	.wp-block-columns.care404-cols-cards {
		display: grid;
		grid-template-columns: 1fr;
	}

	/* ...and the caption stacks. Two-up leaves the caption bar ~128px wide at a
	   390px viewport; keeping the icon and title side by side gives the title a
	   46px column, which wrapped "Housing & Senior Living" onto SIX lines. The
	   design already solves this, in a query of its own:
	   `@media (max-width: 1120px) { .resource-card-head { flex-direction: column;
	   align-items: flex-start; gap: 10px } }`. Our 781px breakpoint sits wholly
	   inside that 1120px range, so the rule belongs here and needs no second
	   breakpoint of its own. `align-items` and `gap` need !important to beat
	   core-block-supports; the base `min-height: 89px` just goes inert, since a
	   stacked caption is always taller than that. */
	.care404-caption {
		flex-direction: column;
		align-items: flex-start !important;
		gap: 10px !important;
	}

	/* Partner logos: two across at the design's tighter mobile gap
	   (`.partner-logos { grid-template-columns: repeat(2, minmax(0, 1fr));
	   gap: 20px }`). Nothing else in the partners or video bands needs a mobile
	   rule: their 104px -> 64px padding is `.care404-section`, the video split's
	   56px -> 40px gap is `.care404-cols-grid`, and the `grid-template-columns:
	   1fr` the design asks of `.video-layout` is what core's own stacking already
	   does at this same breakpoint. */
	.wp-block-columns.care404-partner-logos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px !important;
	}

	/* The expert links go TWO across, which is the design's own mobile value, and
	   they measure fine there: a 126px column against "Community" at 102px. Only
	   the track list changes — the design leaves the 28px gap alone. */
	.wp-block-columns.care404-expert-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* ...but the topic cards and the video list go to ONE column, which is a
	   DELIBERATE DEVIATION from the design's `repeat(2, minmax(0, 1fr))`.
	   Decided 2026-08-15 after measuring at 375px:

	     | row        | card  | text col | longest word         | short by |
	     | topic card | 128px | 72px     | "Housing" @19px 81px | 9px      |
	     | video item | 131px | 131px    | "Understanding" 139px| 8px      |

	   The design's rule is fine at its own 768px breakpoint, where two-up gives
	   ~332px cards. It does not survive a 375px phone: the topic card spends 56px
	   of its 128px on its own `padding: 32px 28px 34px`, and 72px of text cannot
	   hold a 81px word. The result was titles breaking mid-word — "Senior
	   Housin/g Guide", "Caregiv/er Support".

	   This is the same call the design itself makes one section away, for the same
	   reason: `.region-cards` drops to one column because its content does not fit
	   two-up. Applied here to the two rows that measured short, and to no others. */
	.wp-block-columns.care404-topic-cards,
	.wp-block-columns.care404-video-list {
		grid-template-columns: 1fr;
	}

	/* Region cards drop to ONE column, not two — the design's own exception, and
	   its stated reason is this button: `.region-cards { grid-template-columns:
	   1fr }` with `.region-card a { align-self: stretch; text-align: center;
	   padding: 16px 18px }`. In our markup the flex item is the buttons block, so
	   `align-self` goes there and the button and its link are filled to match. */
	.wp-block-columns.care404-region-cards { grid-template-columns: 1fr; }
	.care404-region-card .wp-block-buttons { align-self: stretch; }
	.care404-region-card .wp-block-buttons .wp-block-button { flex: 1 1 auto; }
	.care404-region .wp-block-button__link {
		display: block;
		text-align: center;
		padding: 16px 18px;
	}

	/* Header: the top bar's 3fr/9fr split collapses to a single centred column
	   (design: `.topbar-grid { grid-template-columns: 1fr; gap: 16px;
	   justify-items: center }`). Ours is a flex row rather than a grid, so
	   "one column" is `flex-direction: column`, and `justify-items: center`
	   becomes `align-items: center` on the now-horizontal cross axis. Both
	   station rows centre with it (design: `.topbar-stations` and
	   `.station-row` -> `justify-content: center`).

	   The !importants are load-bearing: WordPress prints its block layout rules
	   (`justify-content: flex-end`, `align-items: center`, the default gap) in
	   `core-block-supports-inline-css`, which lands AFTER this stylesheet at
	   identical specificity. `flex-direction` needs none — WP only emits that
	   for vertically oriented flex layouts, and these are horizontal. */
	.care404-topbar-row {
		flex-direction: column;
		align-items: center !important;
		gap: 16px !important;
	}
	.care404-topbar-right { justify-content: center !important; }
	.care404-stations     { justify-content: center !important; }

	/* Footer: the design's mobile block shortens the band and tightens both
	   grids — `.footer { padding-top: 56px }` (from 72px), `.footer-grid
	   { gap: 40px }` (from 56px), `.footer-links { gap: 32px }` (from 40px) and
	   `.footer-legal { justify-content: flex-start }` (from space-between).
	   The `grid-template-columns: 1fr` the design also asks for on both grids
	   comes free — they are core/columns blocks and core stacks them at this
	   same 781px.

	   The padding !important is beating the template part's INLINE
	   `padding-top: 72px`; the rest are beating core-block-supports as above. */
	.care404-footer       { padding-top: 56px !important; }
	.care404-footer-grid  { gap: 40px !important; }
	.care404-footer-links { gap: 32px !important; }
	.care404-footer-legal { justify-content: flex-start !important; }
}