/* =========================================================
   Somerset Crisis and Resilience Alliance — design layer.

   The starter ships no design: every block reads
   `var(--fw-<selector>-<property>, 0)` and this file is where
   those tokens get their values, along with the brand palette
   mirror and the handful of rules the brand requires.

   Sources, do not design from memory:
     Claude Ops/clients/somersetcrisisandresilience.org.uk/
       DESIGN-BRIEF.md                 colour, type, buttons, the two pinks
       documents/homepage-build-brief.md  sections 5 and 6

   Enqueued after fw-overrides.css and added as an editor
   style, so the editor matches the front end.
   ========================================================= */

/* ---------------------------------------------------------
   1. Brand palette. Mirrors theme.json. These nine override
   the starter's greyscale in fw-overrides.css.
   --------------------------------------------------------- */
:root {
	--fw-primary:     #19233E; /* Dark blue   15.54:1 on white */
	--fw-secondary:   #545454; /* Dark grey    7.57:1 on white, body text */
	--fw-accent:      #41B29F; /* Aqua         2.59:1 — FIELDS AND RULES ONLY, never text on white */
	--fw-link:        #BF4458; /* Working pink 5.02:1 — links */
	--fw-highlight:   #BF4458; /* Working pink 5.02:1 — lockup, rules, button hover */
	--fw-grey:        #545454; /* muted text takes hierarchy from size, not colour */
	--fw-light-grey:  #DCDEE2; /* 1.35:1 — borders only */
	--fw-bg-grey:     #F4F4F5; /* 1.10:1 — section backgrounds only */
	--fw-white:       #FFFFFF;

	--fw-primary-rgb:    25 35 62;
	--fw-secondary-rgb:  84 84 84;
	--fw-accent-rgb:     65 178 159;
	--fw-link-rgb:       191 68 88;
	--fw-light-grey-rgb: 220 222 226;

	/* Beyond the nine slots. */
	--fw-brand-pink:  #DA4E64; /* DARK GROUNDS ONLY: the hero rule and "We can help." */
	--fw-tint-aqua:   #E2F3F1; /* Aqua 15 — intro band, footer funding box */
	--fw-tint-pink:   #F9E4E8; /* Warm pink 15 */

	/* Global radius. The framework ships square corners. */
	--fw-radius: 2px;
}

/* ---------------------------------------------------------
   2. Buttons. One spec, everywhere.
   Dark blue at rest, working pink on hover, white label,
   150ms. The framework renders these from core/button, so
   the geometry comes from the shared tokens.
   --------------------------------------------------------- */
:root {
	/* Measured off the button instances in the design (hero, intro, cards,
	   footer) — all four are 10/20 with a 12px icon gap. The `Button`
	   component's own description says "16/32 padding, label 18 Semi Bold";
	   both are wrong against the instances and the bound text style, which
	   are 10/20 and Bold 700. The file wins. Flagged for Monica. */
	--fw-wp-block-button-link-padding: 10px 20px;
	--fw-wp-block-button-link-gap: 12px;
	--fw-wp-block-buttons-margin-top: 32px;
}

.wp-block-button__link,
.fw-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--fw-wp-block-button-link-gap);
	padding: var(--fw-wp-block-button-link-padding);
	background-color: var(--fw-primary);
	color: var(--fw-white);
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: 700;        /* Body/Button is Bold 700, not Semi Bold */
	line-height: 24px;
	border-radius: var(--fw-radius);
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease;
}

/* The icon SVGs carry their own width/height; do not override them. */
.fw-btn__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
}

.fw-btn--icon-left .fw-btn__icon { order: -1; }

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible,
.fw-btn:hover,
.fw-btn:focus-visible {
	background-color: var(--fw-highlight);
	color: var(--fw-white);
}

/* Inverse, for buttons sitting on a Dark blue ground (the hero). */
.has-primary-background-color .wp-block-button__link,
.fw-on-dark .wp-block-button__link {
	background-color: var(--fw-white);
	color: var(--fw-primary);
}

.has-primary-background-color .wp-block-button__link:hover,
.has-primary-background-color .wp-block-button__link:focus-visible,
.fw-on-dark .wp-block-button__link:hover,
.fw-on-dark .wp-block-button__link:focus-visible {
	background-color: var(--fw-highlight);
	color: var(--fw-white);
}

/* ---------------------------------------------------------
   3. Keyboard focus. Designed nowhere in Figma; this is the
   build's answer and needs Monica's sign-off.

   WCAG 2.2 AA: 2.4.7 focus visible, 2.4.11 focus not
   obscured, 2.5.8 target size 24x24.
   --------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--fw-primary);
	outline-offset: 2px;
	border-radius: var(--fw-radius);
}

/* On Dark blue and Aqua grounds the ring has to invert to stay visible. */
.has-primary-background-color :where(a, button, [tabindex]):focus-visible,
.fw-on-dark :where(a, button, [tabindex]):focus-visible {
	outline-color: var(--fw-white);
}

/* 2.4.11: a sticky header must never cover the focused element. */
:root {
	scroll-padding-top: 105px; /* header 85 + 20 */
}

/* 2.5.8: nothing interactive below 24x24. */
.wp-block-button__link,
.fw-nav a,
.fw-footer a {
	min-height: 24px;
}

/* ---------------------------------------------------------
   4. Corner radius. Cards, buttons, panels and inset media.
   Full-bleed media stays square.
   --------------------------------------------------------- */
.wp-block-image img,
.fw-card,
.fw-panel {
	border-radius: var(--fw-radius);
}

.alignfull img,
.fw-media-fullbleed img {
	border-radius: 0;
}

/* ---------------------------------------------------------
   5. Left alignment. The brand guide says text is left
   aligned and explicitly says to avoid centring. Five
   framework blocks centre their headings in CSS, not as an
   author choice, so they are overridden here.

   Deliberate centred exceptions are set per instance and
   noted in the log, never by reverting this.
   --------------------------------------------------------- */
.wp-block-framework-content-cards .fw-content-cards__title,
.wp-block-framework-content-cards .fw-content-cards__caption,
.wp-block-framework-icon-cards .fw-icon-cards__intro,
.wp-block-framework-thumbnails-row .fw-thumbnails-row__intro,
.wp-block-framework-latest-news .fw-latest-news__heading,
.wp-block-framework-steps .fw-steps__caption {
	text-align: left;
}

/* ---------------------------------------------------------
   6. Links. Underlined in the footer. Whether in-content
   links also underline is OPEN with Monica (as of
   2026-10-05 underlines were footer only), so the rule for
   body copy is deliberately not set here yet.
   --------------------------------------------------------- */
.fw-footer a:not(.fw-btn) {
	color: var(--fw-primary); /* On aqua, Dark blue is the ONLY usable text colour, 5.99:1 */
	text-decoration: none;
}

.fw-footer a:not(.fw-btn):hover,
.fw-footer a:not(.fw-btn):focus-visible {
	text-decoration: underline;
}

/* ---------------------------------------------------------
   7. Aqua is a field colour, never text on white. Guard it
   so a future editor choosing "Aqua" for text gets a
   visible failure in review rather than a silent AA breach.
   --------------------------------------------------------- */
.has-accent-color:not(.has-background) {
	color: #2F8274; /* Proposed AA aqua, 4.60:1. PP proposal, pending client approval. */
}

/* ---------------------------------------------------------
   8. Site chrome — header and footer.

   `fw-chrome.css` already does the layout mechanics and reads
   `--fw-<selector>-<property>` tokens that default to 0. So the
   geometry below is set as tokens, not as overriding rules, and
   only the things the starter has no opinion on (colour, type,
   borders, hover) are written as rules.

   Figma XOAgNPOWsk3vP2jnn8X0aO: header 2004:4, footer 2004:8.
   --------------------------------------------------------- */
:root {
	/* Header: 85px tall = 52px site name + 16px top and bottom. */
	--fw-header-inner-padding: 16px 20px;
	--fw-header-inner-max-width: none;
	--fw-header-inner-gap: 32px;
	--fw-nav-gap: 30px;

	/* Footer: 24px top, 10px bottom, rows 16px apart. */
	--fw-footer-padding: 24px 0 10px;
	--fw-footer-margin-top: 0;
	--fw-footer-menu-gap: 32px;
}

/* ---- Header ---- */

.fw-header {
	background: var(--fw-white);
	border-bottom: 1px solid var(--fw-light-grey);
}

.fw-logo__text {
	display: block;
	max-width: 241px;
	color: var(--fw-primary);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.fw-header__nav .fw-nav a {
	position: relative;
	display: block;
	padding-block: 8px;
	color: var(--fw-primary);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
}

/* Hover is an underline drawn as a pseudo-element, so the text width
   never changes and the nav cannot reflow under the pointer. */
.fw-header__nav .fw-nav a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 6px;
	height: 2px;
	background: var(--fw-primary);
	opacity: 0;
	transition: opacity 150ms ease;
}

.fw-header__nav .fw-nav a:hover::after,
.fw-header__nav .fw-nav a:focus-visible::after,
.fw-header__nav .fw-nav .current-menu-item > a::after {
	opacity: 1;
}

/* ---- Footer ---- */

.fw-footer {
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: var(--fw-accent);
	color: var(--fw-primary);
}

.fw-footer__row {
	display: flex;
	align-items: center;
	width: 100%;
	padding-inline: 20px;
}

.fw-footer__row--main {
	justify-content: space-between;
	padding-top: 24px;
}

.fw-footer__site-name {
	display: block;
	max-width: 240px;
	color: var(--fw-primary);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.fw-footer__nav-block {
	display: flex;
	align-items: center;
	gap: 32px;
}

/* Footer links: no underline at rest, underline on hover. On Aqua,
   Dark blue is the only usable colour, so the underline is the only
   hover lever available — a weight change would reflow the row. */
.fw-footer__menu a,
.fw-footer__policy-links a {
	color: var(--fw-primary);
	text-decoration: none;
}

.fw-footer__menu a:hover,
.fw-footer__menu a:focus-visible,
.fw-footer__policy-links a:hover,
.fw-footer__policy-links a:focus-visible {
	text-decoration: underline;
}

.fw-footer__menu a {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
}

.fw-footer__row--funding { justify-content: flex-end; }

.fw-footer__funding-box {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	width: 1012px;
	max-width: 100%;
	padding: 6px 20px;
	/* Aqua 15, because the council teal is only about 2.7:1 on bare aqua. */
	background: var(--fw-tint-aqua);
	border-radius: var(--fw-radius);
}

.fw-footer__funding-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
}

.fw-footer__council-logo {
	display: block;
	flex: 0 0 auto;
	width: 116px;
	height: 32px;
	object-fit: contain;
}

.fw-footer__row--divider { padding-block: 0; }

.fw-footer__rule {
	width: 100%;
	height: 1px;
	margin: 0;
	border: 0;
	background: var(--fw-primary);
	opacity: 0.3;
}

.fw-footer__row--legal { align-items: flex-start; }

.fw-footer__legal {
	font-size: 14px;
	line-height: 1.5;
}

.fw-footer__legal p { margin: 0; }

.fw-footer__policy-links {
	display: flex;
	gap: 28px;
	margin: 0 0 0 auto;
	padding: 0;
	font-size: 14px;
	line-height: 1.5;
	list-style: none;
}

/* =========================================================
   9. Page body.

   IMPORTANT: several starter tokens default to 0 and COLLAPSE
   the element when unset: `max-width: var(--x, 0)` is a
   zero-width box, not "no limit". Every one used on this site
   is set below; anything new that reads a --fw- token needs
   the same check.
   ========================================================= */
:root {
	/* Home hero, Figma 2004:5 / Home Hero 14:2. */
	--fw-hero-min-height: 640px;
	--fw-hero-content-padding: 0 48px 0 0;
	--fw-hero-content-padding-left: 120px;
	--fw-hero-content-max-width: 572px;
	--fw-hero-content-margin: 0;
	--fw-hero-content-margin-bottom: 0;

	/* Split, Figma 2004:6. 676 + 48 + 676 = 1400. */
	--fw-section-py: 48px;
	--fw-split-inner-max-width: 1400px;
	--fw-split-inner-margin: 0 auto;
	--fw-split-inner-gap: 48px;
	--fw-split-content-margin: 0;
	--fw-split-content-margin-bottom: 0;

	/* Content cards, Figma 2004:7. 4 x 320 + 3 x 40 = 1400. */
	--fw-content-cards-padding: 0;
	--fw-content-cards-inner-max-width: 1400px;
	--fw-content-cards-inner-margin: 0 auto;
	--fw-content-cards-inner-gap: 40px;
	--fw-content-card-body-padding: 24px 24px 32px;
	--fw-content-card-body-gap: 24px;
	--fw-content-card-image-ratio: 8 / 5;   /* 320 x 200 */

	/* Inner page hero: Dark blue band, the homepage hero's colours. */
	--fw-page-hero-padding: 0 20px;
	--fw-page-hero-inner-max-width: 1400px;
	--fw-page-hero-inner-margin: 0 auto;
	--fw-page-hero-inner-padding: 64px 0;
	--fw-page-hero-inner-min-height: 0;
	--fw-page-hero-content-max-width: 860px;
	--fw-page-hero-content-margin: 0 0 16px;
	--fw-page-hero-media-width: 0;

	/* Mobile menu + off-canvas drawer. All default to 0, which made
	   the toggle a 0x0 button and the drawer a 0px-wide panel. */
	--fw-menu-btn-width: 44px;
	--fw-menu-btn-height: 44px;
	--fw-menu-btn-gap: 5px;
	--fw-menu-btn-padding: 0;
	--fw-bar-width: 24px;
	--fw-oc-max-width: 380px;
	--fw-oc-bar-height: 85px;
	--fw-oc-bar-padding: 16px 20px;
	--fw-oc-close-width: 44px;
	--fw-oc-close-height: 44px;
	--fw-oc-link-padding: 14px 20px;
	--fw-oc-link-gap: 12px;
	--fw-oc-back-padding: 14px 20px;
	--fw-oc-back-gap: 8px;
	--fw-oc-drill-width: 8px;
	--fw-oc-drill-height: 8px;

	/* Readable measure for running prose inside 1400px bands. */
	--scr-measure: 860px;
	--scr-band-py: 64px;
	--scr-gutter: max(20px, calc((100% - 1400px) / 2));
}

/* Full-width blocks stack edge to edge: no blockGap strip between bands. */
.entry-content > .alignfull,
.entry-content > .wp-block-framework-home-hero,
.entry-content > .wp-block-framework-split,
.entry-content > .wp-block-framework-page-hero,
.entry-content > .wp-block-framework-content-cards {
	margin-block: 0;
}

/* ---- Core block defaults lost with wp-block-library ---- */

.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	align-items: flex-start;
}

.wp-block-column {
	flex: 1 1 0;
	min-width: min(100%, 280px);
}

/* In-content links are underlined. Not a style choice: the working pink
   against Dark grey body text is only about 1.3:1, so colour alone cannot
   distinguish a link (WCAG 1.4.1). */
.entry-content p a,
.entry-content li a {
	color: var(--fw-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.entry-content p a:hover,
.entry-content li a:hover {
	color: var(--fw-primary);
}

.entry-content li + li { margin-top: 6px; }

/* ---- Home hero ---- */

.fw-hero {
	background: var(--fw-primary);
	color: var(--fw-white);
}

.fw-hero__content { gap: 32px; }

.fw-hero__content h1 {
	position: relative;
	max-width: var(--fw-hero-content-max-width);
	color: var(--fw-white);
	font-size: 36px;          /* Heading/H2 size: 48px breaks the brand's two-line lockup */
	line-height: 1.2;
}

/* The lockup rule: 96 x 5, brand pink, 6px under the strapline.
   Absolutely placed so it sits in the gap without adding height. */
.fw-hero__content h1::after {
	content: "";
	position: absolute;
	left: 0;
	top: calc(100% + 6px);
	width: 96px;
	height: 5px;
	background: var(--fw-brand-pink);
	border-radius: var(--fw-radius);
}

.fw-hero__content .scr-hero-tagline {
	color: var(--fw-brand-pink);   /* brand pink on Dark blue only: 3.9:1 at 28px bold */
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
}

/* Hero button is the inverse: white with a Dark blue label. */
.fw-hero .wp-block-button__link {
	background: var(--fw-white);
	color: var(--fw-primary);
}

.fw-hero .wp-block-button__link:hover,
.fw-hero .wp-block-button__link:focus-visible {
	background: var(--fw-highlight);
	color: var(--fw-white);
}

.fw-hero :focus-visible { outline-color: var(--fw-white); }

@media (max-width: 900px) {
	.fw-hero {
		grid-template-rows: auto auto;
		min-height: 0;
	}
	.fw-hero__slide { grid-area: 1 / 1; height: 300px; }
	.fw-hero__img { width: 100%; }
	.fw-hero__content {
		grid-area: 2 / 1;
		padding: 48px 20px 56px;
	}
	.fw-hero__content h1 { font-size: 30px; }
	.fw-hero__content .scr-hero-tagline { font-size: 24px; }
}

/* ---- Split ---- */

.fw-split__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.fw-split__content h2 { font-size: 36px; }

.fw-split__media { border-radius: var(--fw-radius); }
.fw-split__media > img { border-radius: var(--fw-radius); }

/* The split CTA carries the arrow; the starter reserves an ::after for it. */
.fw-split {
	--fw-wp-block-button-link-width: 16px;
	--fw-wp-block-button-link-height: 16px;
}

.fw-split__content .wp-block-button__link::after {
	background: url("../img/icon-arrow-right.svg") center / contain no-repeat;
}

/* No image yet: show a visible placeholder rather than an empty column.
   Disappears by itself once an image is set on the block. */
.fw-split__media:empty {
	position: relative;
	min-height: 320px;
	background: repeating-linear-gradient(45deg, var(--fw-bg-grey), var(--fw-bg-grey) 12px, var(--fw-white) 12px, var(--fw-white) 24px);
	border: 1px dashed var(--fw-light-grey);
}

.fw-split__media:empty::before {
	content: "Image to come";
	color: var(--fw-secondary);
	font-size: 16px;
}

/* ---- Content cards: the CRA Box card ---- */

.wp-block-framework-content-cards.scr-home-boxes { padding: 64px 20px; }

.fw-content-card--has-image,
.fw-content-card--linked {
	background: var(--fw-primary);
	color: var(--fw-white);
	border-radius: var(--fw-radius);
}

.fw-content-card--has-image .fw-content-card__text,
.fw-content-card--linked .fw-content-card__text {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fw-content-card--has-image .fw-content-card__text :is(h2, h3, h4),
.fw-content-card--linked .fw-content-card__text :is(h2, h3, h4) {
	margin: 0;
	color: var(--fw-white);
	font-size: 22px;
	line-height: 1.2;
}

.fw-content-card--has-image .fw-content-card__text p,
.fw-content-card--linked .fw-content-card__text p {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
}

/* Homepage only: titles reserve two lines so the four narratives start at
   the same height. 2 x 1.2em, two lines at the title's own leading, so it
   holds at any font size rather than being a fixed pixel height. */
.scr-home-boxes .fw-content-card__text :is(h2, h3, h4) { min-height: 2.4em; }

/* Inverse button on the Dark blue card. */
.fw-btn--inverse {
	background: var(--fw-white);
	color: var(--fw-primary);
}

/* Whole card is clickable: hovering anywhere on it lights the one link. */
.fw-content-card--linked:hover .fw-content-card__link,
.fw-content-card__link:focus-visible {
	background: var(--fw-highlight);
	color: var(--fw-white);
}

.fw-content-card__link:focus-visible { outline-color: var(--fw-white); }

/* Two-up card rows, for long card copy (partner organisations). */
.scr-cards--2 .fw-content-cards__inner > .fw-content-card {
	flex: 1 1 calc(50% - 20px);
}

/* Three-up row (Partner Resources jump cards). */
.scr-cards--3 .fw-content-cards__inner > .fw-content-card {
	flex: 1 1 calc((100% - 80px) / 3);
}

/* Tiles: plain cards with no image or link, white on the band. */
.scr-tiles .fw-content-card {
	background: var(--fw-white);
	border: 1px solid var(--fw-light-grey);
	border-radius: var(--fw-radius);
	padding: 24px;
}

.scr-tiles .fw-content-card__body :is(h2, h3, h4) {
	margin: 0;
	color: var(--fw-primary);
	font-size: 22px;
	line-height: 1.2;
}

.scr-tiles .fw-content-cards__inner > .fw-content-card { flex: 1 1 calc(50% - 20px); }

/* Cards placed inside a band sit on its own padding, not the block's. */
.scr-band .wp-block-framework-content-cards { padding: 0; }

@media (max-width: 700px) {
	.scr-cards--2 .fw-content-cards__inner > .fw-content-card,
	.scr-cards--3 .fw-content-cards__inner > .fw-content-card,
	.scr-tiles .fw-content-cards__inner > .fw-content-card { flex-basis: 100%; }
}

/* ---- Inner page hero ---- */

.fw-page-hero {
	background: var(--fw-primary);
	color: var(--fw-white);
}

.fw-page-hero__content h1 {
	color: var(--fw-white);
	font-size: 48px;
	line-height: 1.2;
}

.fw-page-hero__content p {
	font-size: 18px;
	line-height: 1.5;
	opacity: 1;
}

@media (max-width: 700px) {
	.fw-page-hero__content h1 { font-size: 36px; }
	:root { --fw-page-hero-inner-padding: 48px 0; }
}

/* ---- Bands: full-width sections on inner pages ----
   core/group, align full, flow layout. Padded to the same 1400 column as
   every framework block, so text left-aligns with the header and the cards. */

.scr-band {
	padding-block: var(--scr-band-py);
	padding-inline: var(--scr-gutter);
	background: var(--fw-white);
}

.scr-band--aqua { background: var(--fw-tint-aqua); }

/* Running prose keeps a readable measure; cards, columns and diagrams use
   the full 1400. */
.scr-band > :is(p, ul, ol, h2, h3, .wp-block-buttons) { max-width: var(--scr-measure); }

.scr-band > h3 { margin-top: 40px; }

.scr-band h2 { font-size: 36px; }
.scr-band h3 { font-size: 28px; }

.scr-band .wp-block-column > p > strong:only-child { font-size: 22px; color: var(--fw-primary); }

@media (max-width: 700px) {
	:root { --scr-band-py: 48px; }
	.scr-band h2 { font-size: 30px; }
}

/* ---- About: the three-circle diagram, rebuilt as live content ----
   The supplied raster put white text on aqua (2.59:1) and on the brand pink.
   Rebuilt with passing contrast: Dark blue text on aqua, white on the
   working pink and on Dark blue. Brackets and the two side labels are the
   "shared front door" and "evaluation and learning" frame. */

.scr-diagram {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: stretch;
	gap: 16px;
}

.scr-diagram > p.scr-diagram__frame {
	margin: 0;
	writing-mode: vertical-rl;
	align-self: center;
	color: var(--fw-secondary);
	font-size: 16px;
	font-weight: 700;
	text-align: center;
}

.scr-diagram__frame--left { transform: rotate(180deg); }

.scr-diagram__rows {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px 20px;
	border-inline: 6px solid var(--fw-light-grey);
	border-radius: 28px;
}

.scr-diagram .scr-diagram__row {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0;
}

.scr-diagram .scr-diagram__circle {
	display: flex;
	flex: 0 0 168px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	margin: 0;
	padding: 16px;
	border-radius: 50%;
	color: var(--fw-white);
	font-size: 19px;          /* bold 19px counts as large text: 3:1 needed */
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
}

.scr-diagram .scr-diagram__circle strong {
	display: block;
	text-transform: uppercase;
}

.scr-diagram__row--receive .scr-diagram__circle { background: var(--fw-highlight); }   /* white 5.02:1 */
.scr-diagram__row--recover .scr-diagram__circle { background: var(--fw-primary); }     /* white 15.5:1 */
.scr-diagram__row--remain  .scr-diagram__circle { background: var(--fw-accent); color: var(--fw-primary); } /* 5.99:1 */

.scr-diagram .scr-diagram__text {
	margin: 0;
	color: var(--fw-primary);
	font-size: 16px;
	line-height: 1.5;
}

/* The brand guide asks for no italics; emphasis is carried by weight. */
.scr-diagram .scr-diagram__text em {
	font-style: normal;
	font-weight: 700;
}


@media (max-width: 700px) {
	.scr-diagram { grid-template-columns: 1fr; }
	.scr-diagram > p.scr-diagram__frame { writing-mode: horizontal-tb; transform: none; }
	.scr-diagram .scr-diagram__circle { flex-basis: 120px; font-size: 16px; }
}

/* ---- Mobile: header, drawer, footer ---- */

.fw-menu-btn { color: var(--fw-primary); }
.fw-menu-btn__bar { background: var(--fw-primary); }

.fw-oc {
	background: var(--fw-white);
	color: var(--fw-primary);
	box-shadow: -8px 0 24px rgb(var(--fw-primary-rgb) / 0.15);
}

.fw-oc__overlay { background: rgb(var(--fw-primary-rgb) / 0.5); }

.fw-oc__bar { border-bottom: 1px solid var(--fw-light-grey); }

.fw-oc__close {
	background: none;
	border: 0;
	color: var(--fw-primary);
	font-size: 28px;
}

.fw-oc__link,
.fw-oc__drill,
.fw-oc__back {
	background: none;
	border: 0;
	border-bottom: 1px solid var(--fw-light-grey);
	color: var(--fw-primary);
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
}

.fw-oc__list { list-style: none; }

.fw-oc__drill::after {
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

@media (max-width: 1100px) {
	.fw-footer__row--main {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
	.fw-footer__nav-block {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.fw-footer__menu { flex-direction: column; gap: 8px; }
	.fw-footer__row--funding { justify-content: flex-start; }
	.fw-footer__funding-box {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: 12px 16px;
	}
	.fw-footer__row--legal { flex-direction: column; gap: 12px; }
	.fw-footer__policy-links { margin-left: 0; flex-wrap: wrap; gap: 8px 24px; }
}

@media (max-width: 1260px) {
	/* The four-item nav needs ~805px plus the 241px site name. */
	:root { --fw-nav-gap: 20px; }
	.fw-header__nav .fw-nav a { font-size: 16px; }
}

/* ---- Fixes found in the first screenshot pass (2026-10-13) ---- */

/* width:100% + padding overflowed the page by 40px: the starter does not set
   border-box globally, so it is set on everything this layer sizes. */
.fw-header,
.fw-header *,
.fw-footer,
.fw-footer *,
.scr-band,
.scr-diagram,
.scr-diagram *,
.fw-content-card,
.fw-content-card * {
	box-sizing: border-box;
}

/* On mobile the starter turns the card row into a column, so the cards'
   flex-basis (260px, or 50%/33%) becomes a HEIGHT and clips them. */
@media (max-width: 700px) {
	.wp-block-framework-content-cards .fw-content-cards__inner > .fw-content-card {
		flex: 0 0 auto;
	}
}

/* ---- Inner page hero with a photo (2026-10-13) ----
   The homepage hero's layout carried to the inner pages: Dark blue panel and
   title on the left, photo on the right half, nothing laid over the photo. */
.fw-page-hero--has-image {
	--fw-page-hero-media-width: 50%;
	--fw-page-hero-inner-min-height: 400px;
	--fw-page-hero-content-max-width: 600px;
}

.fw-page-hero__media {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* The starter fades the photo into the band so a title can overlap it. Text
   never sits on a photograph in this brand, so there is nothing to fade for. */
.fw-page-hero__media::before { display: none; }

/* Mobile: the starter keeps the photo on the right with the title laid over
   its faded edge. Stack it on top instead, as the homepage hero does. */
@media (max-width: 900px) {
	.fw-page-hero--has-image .fw-page-hero__inner {
		min-height: 0;
		padding-top: 0;
	}
	.fw-page-hero--has-image .fw-page-hero__media {
		position: relative;
		inset: auto;
		width: auto;
		height: 240px;
		margin: 0 -20px 32px;
	}
}

/* Splits stack image first on mobile, whichever side the image sits on at
   desktop, so two photos never end up back to back between sections. */
@media (max-width: 768px) {
	.fw-split__media { order: -1; }   /* image first on mobile */
}

/* =========================================================
   10. Second design pass, 2026-10-13 (Owen's review).
   ========================================================= */

/* ---- Everything sits on the 1400 frame ----
   Header, footer and the homepage hero text ran to the screen edge on wide
   monitors. Pinned to the same 1400 column as the bands and blocks; the
   hero and page hero photos still bleed to the screen edge. */
:root {
	--fw-header-inner-max-width: 1440px;   /* border-box: 1400 + 2 x 20 gutter */
	/* Hero text starts on the frame's left edge, like everything else
	   (Owen, 2026-10-13). This replaces the Figma design's 120px inset. */
	--fw-hero-content-padding-left: var(--scr-gutter);
}

.fw-footer__row {
	max-width: 1440px;
	margin-inline: auto;
}

/* ---- Splits: the photo fills the section's full height ----
   A 3:2 photo centred against a tall text column left half the section
   empty. The photo now stretches to the text, with a sensible minimum for
   short sections, and the text centres against it. */
.fw-split__inner { align-items: stretch; }

.fw-split__content { justify-content: center; }

.fw-split__media {
	position: relative;
	align-self: stretch;
	aspect-ratio: auto;
	min-height: clamp(280px, 32vw, 460px);
}

.fw-split__media > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- A label and the list it introduces read as one unit ---- */
.fw-split__content :is(ul, ol) { margin: 0; }
.fw-split__content p:has(+ :is(ul, ol)) { margin-bottom: -12px; }
.scr-band p + :is(ul, ol),
.scr-panel p + :is(ul, ol) { margin-top: 12px; }

/* ---- Continuation band: same colour as the section above, no seam ---- */
.scr-band--flush { padding-top: 0; }

/* ---- Panels: white on aqua, aqua on white, Dark blue for the action ---- */
.scr-panel {
	padding: 32px;
	background: var(--fw-white);
	border-radius: var(--fw-radius);
}

.scr-band:not(.scr-band--aqua) .scr-panel:not(.scr-panel--dark) { background: var(--fw-tint-aqua); }

.scr-panel > p > strong:only-child {
	color: var(--fw-primary);
	font-size: 22px;
}

.scr-panel--dark {
	background: var(--fw-primary);
	color: var(--fw-white);
}

.scr-panel--dark a,
.entry-content .scr-panel--dark p a { color: var(--fw-white); }

.scr-panel--dark .wp-block-button__link {
	background: var(--fw-white);
	color: var(--fw-primary);
}

.scr-panel--dark .wp-block-button__link:hover,
.scr-panel--dark .wp-block-button__link:focus-visible {
	background: var(--fw-highlight);
	color: var(--fw-white);
}

.scr-panel--dark :focus-visible { outline-color: var(--fw-white); }

/* Panels in a row are equal height, so the pair reads as balanced. */
.scr-cols-panels { align-items: stretch; }
.scr-cols-panels > .wp-block-column { display: flex; }
.scr-cols-panels .scr-panel { flex: 1 1 auto; }

/* ---- Tiles three across (About: the three goals) ---- */
.scr-tiles--3 .fw-content-cards__inner > .fw-content-card { flex: 1 1 calc((100% - 80px) / 3); }

.scr-tiles .fw-content-card__text p {
	margin: 0;
	color: var(--fw-primary);
	font-size: 18px;
	line-height: 1.5;
}

@media (max-width: 700px) {
	.scr-panel { padding: 24px; }
}

/* Bands sit inside .entry-content, which carries the 20px root padding each
   side, so 100% in their padding is the viewport minus 40px. Measured against
   1360 rather than 1400 to land on the same 1400 frame as everything else
   (verified at 1920: frame 260 to 1660). */
.scr-band { padding-inline: max(20px, calc((100% - 1360px) / 2)); }

/* The Dark blue panel is a call-to-action panel beside a longer list: kept
   narrower and its content centred, so the equal height reads as deliberate
   rather than an empty block. */
.scr-cols-panels .scr-panel--dark {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.scr-cols-panels .scr-panel--dark > * { margin-block: 0; }
.scr-cols-panels .scr-panel--dark > * + * { margin-top: 16px; }

/* The Columns block's vertical alignment setting is silently ignored on the
   front end in this WordPress: the generated layout class (.wp-container-...)
   is printed later at equal weight, and core's own Columns CSS sets
   align-items: normal !important, so core's own vertical alignment classes
   never apply. !important is the only way past it; kept to these three rules. Honour the
   editor's choice for every Columns block, so what the sidebar says is what
   the page does. */
.wp-block-columns.are-vertically-aligned-top { align-items: flex-start !important; }
.wp-block-columns.are-vertically-aligned-center { align-items: center !important; }
.wp-block-columns.are-vertically-aligned-bottom { align-items: flex-end !important; }

/* =========================================================
   11. Monica's internal testing, 2026-10-15, plus Owen's
   tablet pass. Row numbers are the "Internal Testing" sheet.
   ========================================================= */

/* ---- r18: headings read heavier than Figma ----
   The weight is right (variable Open Sans, a true 700, not synthesised).
   Figma rasterises with greyscale antialiasing; macOS browsers default to
   subpixel-style rendering that thickens bold type. Match Figma. */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ---- r2: "Crisis help" had 12px extra on the right ----
   The starter reserves an empty ::after for an arrow on the hero button,
   and the 12px icon gap still applied to it. No arrow in this design. */
.fw-hero__content .wp-block-button__link::after { display: none; }

/* ---- Alignment helpers core would normally print ---- */
.has-text-align-center { text-align: center; }
.scr-band > .has-text-align-center { margin-inline: auto; }

/* ---- r15: H3s inside a split rendered at the H2 size (36px) ---- */
.fw-split__content h3 { font-size: 28px; line-height: 1.2; }

/* ---- r10/r5: list labels are H3s in panels and splits ---- */
.scr-panel h3,
.fw-split__content h3.scr-list-label {
	margin: 0;
	color: var(--fw-primary);
	font-size: 22px;
	line-height: 1.3;
}
.scr-panel h3 + :is(ul, ol) { margin-top: 12px; }
.fw-split__content h3.scr-list-label + :is(ul, ol) { margin-top: -12px; }

/* ---- r9: cards per row, chosen in the editor (Styles panel) ---- */
.is-style-cols-2 .fw-content-cards__inner > .fw-content-card { flex: 0 1 calc((100% - 40px) / 2); }
.is-style-cols-3 .fw-content-cards__inner > .fw-content-card { flex: 0 1 calc((100% - 80px) / 3); }
.is-style-cols-4 .fw-content-cards__inner > .fw-content-card { flex: 0 1 calc((100% - 120px) / 4); }

@media (max-width: 1000px) {
	:is(.is-style-cols-3, .is-style-cols-4) .fw-content-cards__inner > .fw-content-card {
		flex-basis: calc((100% - 40px) / 2);
	}
}

/* ---- r9: partner organisation cards ----
   Modelled on openmentalhealth.org.uk/our-partners: white bordered card,
   logo on top, a rule, the name, a short description, a text link. */
.scr-partners .fw-content-cards__inner { justify-content: flex-start; }

.scr-partners .fw-content-card,
.scr-partners .fw-content-card--has-image,
.scr-partners .fw-content-card--linked {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--fw-white);
	color: var(--fw-secondary);
	border: 1px solid var(--fw-light-grey);
	border-radius: var(--fw-radius);
}

.scr-partners .fw-content-card__image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 140px;
	aspect-ratio: auto;
	margin: 0 24px;
	padding: 24px 0;
	border-bottom: 1px solid var(--fw-light-grey);
	background: var(--fw-white);
}

.scr-partners .fw-content-card__image img {
	position: static;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 92px;
	object-fit: contain;
}

.scr-partners .fw-content-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	padding: 24px 24px 28px;
}

.scr-partners .fw-content-card__text { flex: 1 1 auto; }

.scr-partners .fw-content-card__text :is(h2, h3, h4) {
	min-height: 0;
	color: var(--fw-primary);
	font-size: 22px;
}

.scr-partners .fw-content-card__text p { color: var(--fw-secondary); }

/* The link is a text link here, not a button. Still the card's one anchor,
   still stretched over the whole card. */
.scr-partners .fw-content-card__link {
	margin-top: 20px;
	padding: 0;
	background: none;
	color: var(--fw-link);
	font-size: 16px;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.scr-partners .fw-content-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.scr-partners .fw-content-card--linked:hover,
.scr-partners .fw-content-card--linked:focus-within { border-color: var(--fw-primary); }

.scr-partners .fw-content-card--linked:hover .fw-content-card__link,
.scr-partners .fw-content-card__link:focus-visible {
	background: none;
	color: var(--fw-primary);
}

.scr-partners .fw-content-card__link:focus-visible { outline-color: var(--fw-primary); }

/* ---- r14: the three goals, each with its number in a circle ----
   CSS counter, so a fourth goal added in the editor numbers itself. */
.scr-goals .fw-content-cards__inner { counter-reset: scr-goal; }

.scr-goals .fw-content-card {
	counter-increment: scr-goal;
	text-align: center;
	padding-top: 32px;
}

.scr-goals .fw-content-card::before {
	content: counter(scr-goal);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: var(--fw-primary);
	color: var(--fw-white);
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
}

/* ---- r12: inner page heroes a third of the screen, photo fades in ----
   The left edge of the photo blends into the Dark blue panel. */
.fw-page-hero--has-image {
	--fw-page-hero-inner-min-height: max(280px, 33.33vh);
	--fw-page-hero-content-max-width: min(600px, calc(50% - 40px));
}

.fw-page-hero--has-image .fw-page-hero__media::before {
	display: block;
	z-index: 1;
	right: auto;
	width: 35%;
	background: linear-gradient(to right, var(--fw-primary) 0%, rgba(25, 35, 62, 0.6) 40%, rgba(25, 35, 62, 0) 100%);
}

/* ---- Owen: tablet, 769 to 1180 ----
   Hero text stops 40px short of the photo, whatever the width. */
@media (min-width: 901px) {
	.fw-hero__content > * { max-width: min(var(--fw-hero-content-max-width), calc(50vw - var(--scr-gutter) - 40px)); }
}

@media (max-width: 1180px) and (min-width: 901px) {
	.fw-hero__content h1 { font-size: 30px; }
	.fw-hero__content .scr-hero-tagline { font-size: 24px; }
	.fw-page-hero__content h1 { font-size: 40px; }
}

/* Nav: smaller and tighter so it stays on one line. */
@media (max-width: 1180px) and (min-width: 769px) {
	:root {
		--fw-nav-gap: 20px;
		--fw-header-inner-gap: 24px;
	}
	.fw-header__nav .fw-nav a { font-size: 16px; }
	.fw-logo__text { font-size: 20px; max-width: 200px; }
}

/* Below 960 four items and the name no longer fit one row: the nav takes its
   own row under the name, spread across the frame, rather than wrapping
   ragged. The burger takes over at 768 (starter JS breakpoint). */
@media (max-width: 960px) and (min-width: 769px) {
	.fw-header__inner { flex-wrap: wrap; row-gap: 4px; }
	.fw-header__nav { flex: 1 1 100%; }
	.fw-header__nav .fw-nav { justify-content: space-between; }
	.fw-logo__text { max-width: none; }
}

/* About intro (trial layout 2026-10-15): the "two things" H3 starts a new
   thought under the intro paragraphs, so it gets clear space above. */
.scr-about-intro h3 { margin-top: 48px; }

/* ---- Back to top (Rhoda, 2026-10-15) ---- */
.scr-to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 1000;   /* under the off-canvas drawer (1200+) */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--fw-primary);
	color: var(--fw-white);
	border-radius: var(--fw-radius);
	box-shadow: 0 2px 8px rgba(25, 35, 62, 0.25);
	transition: background-color 150ms ease, opacity 150ms ease, visibility 150ms;
}

.scr-to-top:hover,
.scr-to-top:focus-visible {
	background: var(--fw-highlight);
	color: var(--fw-white);
}

/* visibility, not just opacity, so a hidden button is out of the tab order */
.scr-to-top.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

body.fw-oc-open .scr-to-top { display: none; }

/* Keep the footer's last row clear of the fixed button at the page bottom:
   room on the right on desktop (shrinks to nothing on wide screens, where
   the 1440 footer sits well inside the viewport), room below on mobile. */
.fw-footer__row--legal { padding-right: max(20px, calc(88px - (100vw - 1440px) / 2)); }

@media (max-width: 900px) {
	:root { --fw-footer-padding: 24px 0 76px; }   /* the starter reads the token, not a plain rule */
	.fw-footer__row--legal { padding-right: 20px; }
}

/* =========================================================
   12. Monica's final testing, 2026-11-03 (sheet r19 to r29).
   ========================================================= */

/* ---- r19: "We can help." sits midway between the pink rule and the button.
   It carried a 28px top margin on top of the 32px row gap (46px above, 31px
   below). 12px balances the rule's own 11px drop below the H1. */
.fw-hero__content .scr-hero-tagline { margin: 12px 0 0; }

/* ---- r20: on mobile the strapline runs as one sentence, no forced break ---- */
@media (max-width: 600px) {
	.fw-hero__content h1 br { display: none; }
}

/* ---- r21: mobile footer: tighter page links, council logo above its text ---- */
@media (max-width: 1100px) {
	:root { --fw-footer-menu-gap: 12px; }   /* the starter reads the token */
	.fw-footer__council-logo { order: -1; }
}

/* ---- r22: mobile heroes: title first, photo below, fading in from the top ---- */
@media (max-width: 900px) {
	.fw-page-hero--has-image .fw-page-hero__inner { padding-top: 48px; padding-bottom: 0; }
	.fw-page-hero--has-image .fw-page-hero__media {
		order: 2;
		margin: 32px -20px 0;
	}
	.fw-page-hero--has-image .fw-page-hero__media::before {
		display: block;
		inset: 0 0 auto;
		width: 100%;
		height: 40%;
		background: linear-gradient(to bottom, var(--fw-primary) 0%, rgba(25, 35, 62, 0.6) 40%, rgba(25, 35, 62, 0) 100%);
	}

	.fw-hero__slide { grid-area: 2 / 1; }
	.fw-hero__content { grid-area: 1 / 1; padding-bottom: 40px; }
	.fw-hero__slide::before {
		background: linear-gradient(to bottom, var(--fw-primary) 0%, rgba(25, 35, 62, 0.6) 16%, rgba(25, 35, 62, 0) 40%);
	}
}

/* ---- r23: mobile text and image sections: text first, then the photo ----
   Replaces the 2026-10-13 image-first rule. Every split now reads text then
   photo, so two photos still never meet between sections. */
@media (max-width: 768px) {
	.fw-split__media { order: 0; }
	.fw-split__content { order: -1; }   /* image-left splits put the photo first in the markup */
}

/* ---- r24: tapped buttons kept their hover colour on touch screens ----
   A tap leaves :hover set until the next tap elsewhere. Where the device has
   no hover, hover looks like rest; keyboard focus still shows the highlight. */
@media (hover: none) {
	.wp-block-button__link:hover:not(:focus-visible),
	.fw-btn:hover:not(:focus-visible) {
		background-color: var(--fw-primary);
		color: var(--fw-white);
	}
	.fw-hero .wp-block-button__link:hover:not(:focus-visible),
	.scr-panel--dark .wp-block-button__link:hover:not(:focus-visible),
	.fw-content-card--linked:hover .fw-content-card__link:not(:focus-visible) {
		background-color: var(--fw-white);
		color: var(--fw-primary);
	}
	.scr-partners .fw-content-card--linked:hover .fw-content-card__link:not(:focus-visible) {
		background: none;
		color: var(--fw-link);
	}
	.scr-partners .fw-content-card--linked:hover { border-color: var(--fw-light-grey); }
	.scr-to-top:hover:not(:focus-visible) { background: var(--fw-primary); }
}

/* ---- r25: the mobile menu bar shows the site name, not a broken image ---- */
.fw-oc__brand {
	color: var(--fw-primary);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	max-width: 240px;
}

/* ---- 2026-11-03 (monica): voicemail button, client amend ----
   The client asked that the footer number read as a voicemail, not a
   helpline: label "Leave a message: 0800 007 3675" with a voicemail icon
   (footer.php). The longer button no longer fits the nav row at 1440, so
   it moves to the funding row, left, under the site name; the funding box
   keeps its right edge. At 1100 and below the row stacks, which gives the
   same order as before: nav, button, funding box. */
.fw-footer__row--funding {
	justify-content: space-between;
	gap: 16px 40px;
}
.fw-footer__row--funding .fw-footer__phone { flex: 0 0 auto; }
@media (min-width: 1101px) {
	.fw-footer__row--funding .fw-footer__phone { white-space: nowrap; }
}
.fw-footer__row--funding .fw-footer__funding-box { flex: 0 1 1012px; }
@media (max-width: 1100px) {
	.fw-footer__row--funding {
		flex-direction: column;
		align-items: flex-start;
	}
	.fw-footer__row--funding .fw-footer__funding-box { flex-basis: auto; }
}

/* ---- 2026-11-04 (monica): Partner Resources, client photos ----
   The Advice First Aid split's photo is portrait (a trainer standing,
   group in the foreground). Where the box is landscape, as on mobile,
   cover crops the middle and loses his head; hold the crop near the top. */
.fw-split__media > img[src*="scr-split-afa-meeting-trainer"] { object-position: 50% 25%; }