/* ==========================================================================
   COMPONENTS
   Buttons, cards, forms, lists, callouts. Design-Brief.md sections 4.3 and 4.5.
   Navigation is styled in Block 2, when the header is built.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The colour swap pair (4.3)
   Cards and buttons are mirror images. Both directions pass AA in both states.
     Card:   fill #A84D98, white content, hover fill #005EB8
     Button: fill #005EB8, white label, hover fill #A84D98
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Buttons (4.5)
   -------------------------------------------------------------------------- */

.btn {
	position: relative;
	display: block;
	width: 100%;
	margin-bottom: 4px;
	padding: 15px 72px 15px 24px;
	border: 0;
	border-bottom: var(--rule-accent) solid var(--gold);
	border-radius: var(--radius);
	background: var(--nhs-blue);
	color: var(--white);
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	transition: background .3s linear;
}

.btn:hover,
.btn:focus {
	background: var(--purple);
	color: var(--white);
}

/* External links carry a 24x24 white glyph at top 15px, right 24px, plus a
   visually hidden "opens in a new tab" in the markup. */

.btn--external .btn__icon {
	position: absolute;
	top: 15px;
	right: 24px;
	width: 24px;
	height: 24px;
	fill: var(--white);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Cards (4.5)

   Outer li is the pale purple frame, inner div is the purple tile.
   The whole card is clickable via a single anchor that covers it.
   Heading levels are nested correctly. Do NOT reintroduce the reference
   site's hidden <h2>Heading 2</h2> spacer: screen readers announce it.
   -------------------------------------------------------------------------- */

.cards {
	display: grid;
	gap: var(--grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.card {
	position: relative;
	border-radius: var(--radius);
	background: var(--purple-pale);
}

.card__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 48px 30px;
	border-radius: var(--radius);
	background: var(--purple);
	text-align: center;
	transition: background .3s linear;
}

.card:hover .card__inner,
.card:focus-within .card__inner {
	background: var(--nhs-blue);
}

.card__figure {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 112px;
	margin: 0;
}

/* Icons are line art: they paint with stroke, not fill (4.7). */

.card__figure svg {
	width: 113px;
	height: 112px;
	color: var(--white);
}

.card__title {
	margin: 0;
	color: var(--white);
	font-size: var(--fs-h3);
	font-weight: 700;
	text-transform: uppercase;
}

/* One anchor covers the card. Keep the link text real for screen readers. */

.card__link {
	color: var(--white);
	text-decoration: none;
}

.card__link::after {
	position: absolute;
	inset: 0;
	content: "";
}

.card__link:focus-visible {
	outline: none;
}

.card:focus-within {
	outline: var(--focus-width) solid var(--focus-colour);
	outline-offset: var(--focus-offset);
}

/* Full-width variant, used on hub pages. */

.card--full {
	grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   Callout box, the "greybox" equivalent (4.5)
   Square corners, no border, no shadow.
   Pale purple panels take #212B32 text only. Never #A84D98 on #F3E5F0.
   -------------------------------------------------------------------------- */

/* Design-Brief 4.6 specified square callouts as the one exception to the 4px
   radius. Reversed 24 August 2026: on the page it read as an oversight next
   to the rounded cards and controls around it, not as a distinction. */
.callout {
	padding: 34px 24px;
	border: 0;
	border-radius: var(--radius);
	background: var(--purple-pale);
	color: var(--text);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Breadcrumb (4.5)
   Two levels only, never "Home >".
   -------------------------------------------------------------------------- */

.breadcrumb {
	margin-bottom: 48px;
	color: var(--nhs-navy);
	font-size: 14px;
}

.breadcrumb__label {
	font-weight: 700;
}

.breadcrumb__sep {
	width: 16px;
	height: 16px;
	margin: 0 12px;
	vertical-align: middle;
	fill: var(--nhs-navy);
}

.breadcrumb a {
	color: var(--nhs-navy);
}

/* --------------------------------------------------------------------------
   Lists (4.5)
   Custom 4x4px bullet.
   -------------------------------------------------------------------------- */

.entry-content ul {
	margin: 30px 0;
	padding: 0;
	list-style: none;
}

.entry-content ul > li {
	position: relative;
	margin-bottom: 10px;
	padding-left: 24px;
}

.entry-content ul > li::before {
	position: absolute;
	top: calc(var(--lh-body) * 0.5em - 2px);
	left: 0;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--text);
	content: "";
}

.entry-content ol {
	margin: 30px 0;
	padding-left: 24px;
}

.entry-content ol > li {
	margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   Form fields (4.5)
   Label always visible above the field. Never placeholder-as-label.
   The 1px border is a deliberate deviation from the reference site: it helps
   low-vision users find the field edge.
   -------------------------------------------------------------------------- */

.field {
	margin-bottom: var(--space-para);
}

.field__label {
	display: block;
	margin-bottom: 8px;
	font-weight: 700;
}

.field__input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
	/* 44px and var(--radius), matching the pills, the search field and every
	   other control. This rule covers every field on the site, so the day
	   select was not a one-off: the whole form system was 50px and square
	   while the whole button system was 44px and rounded. Design-Brief 4.6
	   put callout boxes at radius 0; fields were never meant to be square
	   with them. 44px is also the WCAG 2.5.8 target minimum, so nothing is
	   lost by coming down to it. */
	width: 100%;
	height: 44px;
	padding: 0 19px;
	border: 1px solid var(--text);
	border-radius: var(--radius);
	background: var(--white);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
}

textarea {
	height: auto;
	min-height: 150px;
	padding: 19px;
	line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   Search form (section 8.1)
   The one 8px radius in the design. 40px tall, 193px wide, grey fill.
   Exactly one element may carry id="searchform" on any given page, so
   searchform.php generates a unique id per instance instead.
   -------------------------------------------------------------------------- */

.search-form {
	display: flex;
	align-items: center;
	gap: 0;
}

/* Selector carries the element as well as the class deliberately. The Block 9
   form rule above lists input[type="search"], which is specificity 0,1,1 and
   beat a bare .search-form__input at 0,1,0: the search box was silently
   inheriting the contact form's full-width, 50px, square, white styling and
   rendering 290px wide instead of 193px. That was what pushed the utility
   cluster left and closed the gap after the wordmark. */

/* appearance:none is doing the real work here. Safari and iOS give
   input[type="search"] a native look that silently discards border-radius,
   which is why the field rendered with square corners while the button beside
   it was rounded. It was never a style choice, it was the browser overruling
   one.

   Radius is now var(--radius), 4px, matching every other control. Design-Brief
   4.6 asked for 8px on the search field specifically; that is a deliberate
   departure, agreed 24 August 2026, because two radii on one control read as
   a mistake rather than as a distinction. */
input.search-form__input {
	appearance: none;
	-webkit-appearance: none;
	width: 141px;
	height: 44px;
	padding: 0 12px;
	border: 2px solid #768692;
	border-right: 0;
	border-radius: var(--radius) 0 0 var(--radius);
	background: var(--grey);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
}

/* Icon only, 52px square, sharing the field's rounded outer edge. */

.search-form__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 52px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0 var(--radius) var(--radius) 0;
	background: var(--nhs-blue);
	color: var(--white);
	cursor: pointer;
}

.search-form__submit:hover,
.search-form__submit:focus {
	background: var(--purple);
}

/* ==========================================================================
   BLOCK 2: HEADER, FOOTER AND OVERLAY MENU
   Design-Brief.md section 8.
   ========================================================================== */

[hidden] {
	display: none !important;
}

/* --------------------------------------------------------------------------
   Skip to content (8.1)
   Deliberate deviation: the reference site has none.
   -------------------------------------------------------------------------- */

.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 100;
	padding: 16px 24px;
	background: var(--nhs-blue);
	color: var(--white);
	font-weight: 700;
	text-decoration: none;
}

.skip-link:focus {
	top: 0;
	color: var(--white);
}

/* --------------------------------------------------------------------------
   Header (8.1). Not sticky.
   The Claude Design prototype states the split explicitly: 168px total is
   "122px strip one plus a 46px strip two".
     strip one 122 = 31 padding + 56 content + 31 padding + 4 gold border
     strip two  46 = 11 padding + 24 content + 11 padding
   -------------------------------------------------------------------------- */

.site-header__strip-one {
	background: var(--white);
	border-bottom: var(--rule-accent) solid var(--gold);
	padding: 31px 0;
}

.site-header__strip-two {
	background: var(--purple-pale);
	padding: 11px 0;
}

.site-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* The burger is positioned against strip one's container in both layouts,
   so its horizontal position never changes. Only the vertical offset does. */
.site-header__strip-one .container {
	position: relative;
}

/* Lockup: logo, 24px gap, wordmark. */

.header-lockup {
	display: flex;
	align-items: center;
	gap: 24px;
	text-decoration: none;
}

.header-lockup__logo {
	display: block;
	flex-shrink: 0;
}

.header-lockup__logo svg {
	display: block;
	width: auto;
	height: 56px;
}

/* Strip two's content row is 24px tall, giving the 46px band.

   min-height alone did not hold it there. The nav container between the row
   and the links inherits the 19px body font and its 28.5px line-height, so
   its line box made the row 31px and the band 53px, putting the header at
   175px against the 168px in 8.1. The links themselves are 16px/24px, so
   pinning the row's line-height to the links' is what actually gives 46. */

.site-header__strip-two .site-header__row,
.site-header__strip-two .site-header__row > * {
	min-height: 24px;
	line-height: 24px;
}

/* The list items are display: list-item and their anchors are inline-flex, so
   each anchor sat on the text baseline and the line box reserved descender
   space under it: 29px around a 24px link. Making the items flex containers
   takes the anchors out of the baseline and holds the band at 46px. */

.site-header__strip-two .menu-band__list > li {
	display: flex;
	align-items: center;
}

/* white-space: nowrap is load bearing. Without it "Ageing Well" wraps to two
   lines, which takes strip one from 122px to 162px and the whole header from
   168px to 215px. Design-Brief 3.2's 0.4px letter-spacing is dropped: the
   specimen has none. */

.header-lockup__wordmark {
	color: var(--nhs-navy);
	font-size: 40px;
	font-weight: 700;
	line-height: var(--lh-heading);
	white-space: nowrap;
}

/* Utility group: back link, search, accessibility toolbar. 24px apart. */

.header-utility {
	display: flex;
	align-items: center;
	gap: 24px;
}

.header-utility__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--nhs-navy);
	font-size: var(--fs-small);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-transform: uppercase;
	white-space: nowrap;
}

.header-utility__back:hover,
.header-utility__back:focus {
	color: var(--nhs-navy);
}

.icon-external {
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Accessibility toolbar (section 7)
   Three controls, right of the search box. Native, no overlay plugin.
   -------------------------------------------------------------------------- */

.a11y-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* One bordered group, buttons joined by a shared 2px rule, no gap. */

.a11y-sizes {
	display: flex;
	align-items: center;
	gap: 0;
	border: 2px solid var(--nhs-blue);
	border-radius: var(--radius);
}

.a11y-sizes .a11y-size {
	border: 0;
	border-radius: 0;
}

.a11y-sizes .a11y-size + .a11y-size {
	border-left: 2px solid var(--nhs-blue);
}

.a11y-toolbar button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 44px;
	height: 44px;
	padding: 0 10px;
	border: 2px solid var(--nhs-blue);
	border-radius: var(--radius);
	background: var(--white);
	color: var(--nhs-blue);
	font-family: var(--font-body);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.a11y-toolbar button:hover {
	background: var(--purple-pale);
}

/* Pressed state, driven by aria-pressed so the DOM stays the source of
   truth for both sighted users and assistive technology. */

.a11y-toolbar button[aria-pressed="true"] {
	background: var(--nhs-blue);
	color: var(--white);
}

.a11y-size--100 { font-size: 15px; }
.a11y-size--125 { font-size: 20px; }
.a11y-size--150 { font-size: 26px; }

/* The Listen control carries a 4px gold rule along its bottom edge in the
   specimen, which nothing else in the toolbar has: it is the one control that
   changes what the page does rather than how it looks, and the gold marks it.
   Measured off specimen 2a, where it is border-bottom: 4px solid #FFB81C.

   The specimen also fills this button #005EB8 at rest. We do not, because
   fill is what carries aria-pressed here, and a permanently blue button would
   leave the on and off states looking identical. Flagged for a decision
   rather than changed. */

.a11y-toolbar .a11y-listen__toggle {
	border-bottom: var(--rule-accent) solid var(--gold);
}

.a11y-listen {
	display: flex;
	align-items: center;
	gap: 4px;
}

.a11y-listen__label {
	font-size: var(--fs-small);
}

/* --------------------------------------------------------------------------
   Reader preferences applied to the body (section 7)

   Text scaling uses zoom because the type scale is expressed in px. The
   class is set server-side from the cookie, so the page never paints at the
   wrong size first.
   -------------------------------------------------------------------------- */

.aw-text-125 { zoom: 1.25; }
.aw-text-150 { zoom: 1.5; }

/* High contrast: black ground, white text, gold links.
   Gold on black is 12.12:1. The toolbar keeps its own pressed styling so the
   controls stay legible while contrast mode is on. */

.aw-hc-on,
.aw-hc-on .site-header__strip-one,
.aw-hc-on .site-header__strip-two,
.aw-hc-on .footer-band,
.aw-hc-on .overlay-menu,
.aw-hc-on .callout,
.aw-hc-on .social-panel,
.aw-hc-on .card,
.aw-hc-on .card__inner {
	background: #000000;
	color: #FFFFFF;
}

.aw-hc-on h1,
.aw-hc-on h2,
.aw-hc-on h3,
.aw-hc-on h4,
.aw-hc-on h5,
.aw-hc-on h6,
.aw-hc-on p,
.aw-hc-on li,
.aw-hc-on .header-lockup__wordmark {
	color: #FFFFFF;
}

.aw-hc-on a,
.aw-hc-on a:hover,
.aw-hc-on a:focus,
.aw-hc-on .card__link,
.aw-hc-on .menu-band__list a,
.aw-hc-on .footer-menu__list a,
.aw-hc-on .header-utility__back {
	color: var(--gold);
}

.aw-hc-on .btn,
.aw-hc-on .search-form__submit {
	background: #000000;
	border: 2px solid var(--gold);
	color: var(--gold);
}

.aw-hc-on .card__inner,
.aw-hc-on .callout {
	border: 4px solid var(--gold);
}

.aw-hc-on svg {
	color: var(--gold);
}

.aw-hc-on .partner-logos__img {
	filter: brightness(0) invert(1);
}

.aw-hc-on .a11y-toolbar button {
	background: #000000;
	border-color: var(--gold);
	color: var(--gold);
}

.aw-hc-on .a11y-toolbar button[aria-pressed="true"] {
	background: var(--gold);
	color: #000000;
}

/* Menu band (8.1): HOME and URGENT HELP only, 48px apart,
   each preceded by a 27x3px purple dash. */

.menu-band__list {
	display: flex;
	align-items: center;
	gap: 48px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu-band__list a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 24px;
	color: var(--nhs-blue);
	font-size: var(--fs-small);
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
}

.menu-band__list a::before {
	display: block;
	width: 27px;
	height: 3px;
	background: var(--purple);
	content: "";
}

.menu-band__list a:hover,
.menu-band__list a:focus {
	text-decoration: underline;
}

.menu-band__list .current-menu-item > a {
	color: var(--text);
}

/* Burger. Absolute against strip one's container: on desktop it drops into
   strip two (31px bottom padding + 4px border + 11px top padding = 46px). */

.burger {
	position: absolute;
	top: calc(100% + 46px);
	right: var(--gutter-mobile);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--nhs-blue);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: 700;
	line-height: var(--lh-heading);
	cursor: pointer;
}

/* The specimen sets the label uppercase in both the desktop and the mobile 390
   sheets. Brief 8.1 writes it as "Menu", which is the label's wording rather
   than its casing; the design wins on structure, and HOME and URGENT HELP
   beside it are uppercase too, so sentence case was reading as an oddity. */

.burger__label {
	text-transform: uppercase;
}

/* Above 1260px the container drops its gutter, so the burger aligns to the
   container edge rather than 20px inside it. Below that the gutter is present
   and the burger follows it. */

@media (min-width: 1261px) {

	.burger {
		right: 0;
	}
}

.burger__icon {
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Overlay menu (8.1)
   Full-screen panel translating down from the top.
   -------------------------------------------------------------------------- */

.overlay-catcher {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: transparent;
}

.overlay-menu {
	position: fixed;
	inset: 0;
	z-index: 95;
	padding: 50px 0 100px;
	overflow-y: auto;
	background: var(--purple-pale);
	transform: translateY(-100%);
	transition: transform .3s ease;
}

.overlay-menu.is-open {
	transform: translateY(0);
}

.has-overlay-open {
	overflow: hidden;
}

.overlay-menu__close {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 40px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--nhs-blue);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
}

/* The close control sits top right, where the burger it replaces sits. */

.overlay-menu__close {
	display: flex;
	margin-left: auto;
}

/* --------------------------------------------------------------------------
   Overlay utility area

   Holds the search box and the accessibility controls below 767px, where
   strip one has no room for them. The nodes are moved in by
   overlay-menu.js rather than duplicated, so these rules style the one real
   instance while it is a guest here. Everything reverts on close because the
   selectors are scoped to this container.
   -------------------------------------------------------------------------- */

.overlay-menu__utility:not(:empty) {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 40px;
}

/* Full width in the panel, unlike the fixed 193px box in the header. */

.overlay-menu__utility .search-form {
	width: 100%;
}

.overlay-menu__utility input.search-form__input {
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
}

/* Wraps rather than overflowing at 320px: the three sizes, contrast and
   Listen are 44px each and will not sit on one row on a narrow handset. */

.overlay-menu__utility .a11y-toolbar {
	flex-wrap: wrap;
	row-gap: 8px;
}

.overlay-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.overlay-menu__list li + li {
	margin-top: 8px;
}

/* The brief does not set a type size for overlay items. 24px matches the H4
   step and keeps the target comfortably large for the audience. */
.overlay-menu__list a {
	display: block;
	padding: 12px 0;
	color: var(--nhs-blue);
	font-size: var(--fs-h4);
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
}

.overlay-menu__list a:hover,
.overlay-menu__list a:focus {
	color: var(--purple-dark);
	text-decoration: underline;
}

/* Current page: the purple dash from the strip two band, plus the words
   "(current page)".

   Colour alone was the only signal here, which the brief prohibits. The dash
   adds a second visual signal and the words add a third that survives being
   read aloud or printed. The semantic is not carried by any of them:
   WordPress already puts aria-current="page" on this link, so the generated
   text is reinforcement rather than the only route to the meaning, which is
   the one job CSS content is safe for. */

.overlay-menu__list .current-menu-item > a {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--text);
}

.overlay-menu__list .current-menu-item > a::before {
	flex-shrink: 0;
	width: 27px;
	height: 3px;
	background: var(--purple);
	content: "";
}

.overlay-menu__list .current-menu-item > a::after {
	color: var(--text);
	font-size: var(--fs-body);
	font-weight: 400;
	text-transform: none;
	content: "(current page)";
}

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

	.overlay-menu {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Footer (8.2)
   -------------------------------------------------------------------------- */

/* Social panel. Rendered only when the account URLs exist. */

/* --------------------------------------------------------------------------
   Back to top

   Fixed bottom right, revealed by js/to-top.js once the page is long enough
   and you are a screen down. Solid fill, not a translucent circle: it has to
   sit over body text and stay legible, and a labelled block is easier to hit
   and easier to understand than an arrow on its own for this audience.

   No focus rule here on purpose. It inherits the global 3px gold ring with a
   2px offset like every other control, and nothing suppresses it.
   -------------------------------------------------------------------------- */

.to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 80;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border: 2px solid var(--white);
	border-radius: var(--radius);
	background: var(--nhs-blue);
	color: var(--white);
	font-size: var(--fs-small);
	font-weight: 700;
	text-decoration: none;
}

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

/* [hidden] is already display:none globally, but this element is display:flex
   and a later class rule would otherwise win the cascade. */

.to-top[hidden] {
	display: none;
}

/* Sits on the same 20px gutter as the content on small screens, so it lines
   up with the right edge of the cards rather than floating off it. */

@media (max-width: 570px) {

	.to-top {
		right: var(--gutter-mobile);
		bottom: var(--gutter-mobile);
	}
}

.social-panel {
	padding: 32px;
	border-radius: var(--radius);
	background: var(--purple-pale);
	text-align: center;
}

/* Element is h2 so the heading outline nests correctly. The brief calls this
   an H3 visually, so it takes the H3 size with body-text colour, which is
   also the only safe colour on a pale purple panel. */
.social-panel__heading {
	margin: 0 0 24px;
	color: var(--text);
	font-size: var(--fs-h3);
	font-weight: 700;
}

.social-panel__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.social-panel__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--text);
}

.social-panel__link:hover,
.social-panel__link:focus {
	color: var(--purple);
}

/* Partner logos. On white, minimum 44px tall. */

/* Four equal columns, per the specimen, so the logos hold their positions
   instead of bunching around the widest one. */

.partner-logos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: center;
	justify-items: center;
	gap: 48px;
	margin: 0;
	padding: 48px 0 0;
	list-style: none;
}

.partner-logos__img {
	display: block;
	width: auto;
	height: 56px;
	min-height: 44px;
}

/* Bottom band. */

.footer-band {
	margin-top: 72px;
	padding: 47px 0;
	border-top: var(--rule-accent) solid var(--gold);
	background: var(--purple-pale);
}

.footer-band__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--grid-gap);
}

/* Element is h2 for correct nesting; the brief specifies H4 sizing. */
.footer-band__heading {
	margin: 0;
	color: var(--nhs-blue);
	font-size: 23px;
	font-weight: 700;
}

.footer-menu__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 48px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-menu__list a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--nhs-blue);
	font-size: 18px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-transform: uppercase;
}

.footer-menu__list a:hover,
.footer-menu__list a:focus {
	color: var(--purple);
}

.colophon {
	margin: 32px 0 0;
	padding-bottom: 32px;
	font-size: var(--fs-small);
}

/* ==========================================================================
   BLOCK 4: LEAF PAGES AND CORE GUTENBERG BLOCKS
   Design-Brief.md section 6.3. Core blocks only: no custom blocks, no block
   plugin. These rules make the editor's default output come out correct.
   ========================================================================== */

/* Two columns at 59% / 41% with an 80px gap (6.3). The editor sets the
   widths; this fixes the gap and the collapse. */

/* nowrap, not wrap: the editor writes flex-basis 59% and 41% inline, and
   those plus an 80px gap exceed 100%, which would wrap the right column
   onto its own line. With nowrap they shrink to fit instead. The stacking
   is done deliberately at 767px in responsive.css. */

.leaf .wp-block-columns {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--gap-inner-cols);
	margin-bottom: 40px;
}

.leaf .wp-block-column {
	flex-grow: 1;
	min-width: 0;
}

/* Prose in the left column keeps the 70-character measure (4.4). */

.leaf .wp-block-column > p,
.leaf .wp-block-column > ul,
.leaf .wp-block-column > ol {
	max-width: var(--measure);
}

/* Button stack: full width inside a column, 4px apart (4.5). */

.wp-block-buttons {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
}

.wp-block-column .wp-block-button,
.wp-block-column .wp-block-button__link {
	width: 100%;
}

/* The full button treatment from 4.5, including the gold bottom border,
   which must survive hover. */

.wp-block-button__link {
	display: block;
	padding: 15px 72px 15px 24px;
	border: 0;
	border-bottom: var(--rule-accent) solid var(--gold);
	border-radius: var(--radius);
	background: var(--nhs-blue);
	color: var(--white);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
	text-transform: none;
	transition: background .3s linear;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
	background: var(--purple);
	border-bottom-color: var(--gold);
	color: var(--white);
}

/* Lists: the 4x4px circular bullet from 4.5. */

.entry-content .wp-block-list {
	margin: 30px 0;
	padding: 0;
	list-style: none;
}

.entry-content .wp-block-list > li {
	position: relative;
	margin-bottom: 10px;
	padding-left: 24px;
}

.entry-content .wp-block-list > li::before {
	position: absolute;
	top: calc(var(--lh-body) * 0.5em - 2px);
	left: 0;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--text);
	content: "";
}

/* Headings pick up the type scale rather than the editor's defaults. */

.entry-content h2.wp-block-heading { font-size: var(--fs-h2); font-weight: 700; color: var(--nhs-blue); }
.entry-content h3.wp-block-heading { font-size: var(--fs-h3); font-weight: 700; color: var(--nhs-blue); }
.entry-content h4.wp-block-heading { font-size: var(--fs-h4); font-weight: 400; color: var(--text); }

/* ==========================================================================
   BLOCK 3: HOMEPAGE
   Design-Brief.md section 6.1.
   ========================================================================== */

/* The card grid heading is visible in the design, not screen-reader-only. */

.home-sections__heading {
	margin: 0 0 24px;
}

/* Intro row: 66.66% / 33.33%, 100px gap (6.1).

   Expressed as 2fr 1fr, not as percentages. Grid ADDS the gap to the track
   sizes, so 66.66% + 33.33% + 100px overflows the container by the width of
   the gap and pushes the callout past the right edge. 2fr 1fr is the same
   2:1 ratio measured against the space left after the gap. */

.home-intro {
	grid-template-columns: 2fr 1fr;
	margin-bottom: 64px;
}

.home-intro__aside {
	min-width: 0;
}

/* The intro row as the client edits it: a core columns block in the page's
   content, not the theme's grid helper. Core supplies the flex row and the
   66.66 / 33.33 split from the block attributes; the 100px gap and the space
   beneath are ours, from 4.6. Stacks at 1022px to match the card grid, rather
   than at core's own 781px, which would leave the callout marooned beside a
   very narrow intro. */

.home-intro-content .wp-block-columns.home-intro-row {
	gap: var(--gap-home-cols);
	margin-bottom: 64px;
}

/* The 70ch measure goes on the text in the wide column, not on the row and
   not on the callout. The old markup put .prose on the left column alone and
   that was right: on the row it caps the whole two-column block at 747px
   inside a 1200px container, and on the callout it would do nothing useful,
   since a short bold panel is not running text. */

.home-intro-content .home-intro-row > .wp-block-column:first-child > * {
	max-width: var(--measure);
}

@media (max-width: 1022px) {

	/* !important on the wrap, reluctantly. Core ships
	   @media (min-width: 782px) { .wp-block-columns { flex-wrap: nowrap !important } }
	   so between 782 and 1022 our wrap loses to it and the columns stayed
	   side by side at 319px each. Nothing but !important beats !important. */

	.home-intro-content .wp-block-columns.home-intro-row {
		flex-wrap: wrap !important;
		gap: 40px;
	}

	.home-intro-content .wp-block-columns.home-intro-row > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Card grid: three across desktop, one across at and below 1022px (6.1).
   The grid owns the collapse, so it does not inherit the 767px rule that
   governs the generic .grid helpers. */

/* grid-template-rows is doing the work here. Without it each row sizes to its
   own tallest card, so the first row (URGENT HELP, CONTACT US, FIND
   ACTIVITIES, all one line) came out visibly shorter than the second (WHAT'S
   ON THIS WEEK, HEALTH AND WELLBEING, SERVICES AND SUPPORT, all two lines).
   Three explicit 1fr rows makes every card row the same height regardless of
   how the titles wrap, which also holds when the accessibility toolbar
   enlarges the type.

   Three rather than grid-auto-rows: 1fr, because the full-width download card
   lands in an implicit fourth row and should stay its own natural height. At
   1fr it would be forced as tall as a whole row of cards. */
.cards--3 {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	align-items: stretch;
}

/* Rows stay aligned when a title wraps to two lines: every card stretches to
   the tallest in its row, and the inner tile fills the card. */

.cards--3 > .card {
	display: flex;
}

.cards--3 > .card > .card__inner {
	flex: 1;
}

/* The title sits below a fixed 112px figure with a 24px gap (4.5). */

.card__figure + .card__title {
	margin-top: 24px;
}

.card__note {
	display: block;
	margin-top: 8px;
	font-size: var(--fs-small, 16px);
	font-weight: 400;
	text-transform: none;
}

/* Clearly marked unwritten copy. Visible on purpose: it must be impossible
   to mistake this for finished content or to ship it by accident. */

.verify-placeholder {
	padding: 8px 12px;
	border-left: 4px solid var(--gold);
	background: var(--cream);
	color: var(--text);
	font-style: italic;
}

/* --------------------------------------------------------------------------
   Listen to this section (Design-Brief.md 6.3, Block 8)

   Sits at the top of the reading column on leaf pages. Ships hidden and is
   revealed by js/accessibility-toolbar.js only where SpeechSynthesis exists.
   Same 44px target and gold underline as the other action controls.
   -------------------------------------------------------------------------- */

.listen-section {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin: 0 0 var(--space-para);
	padding: 8px 18px;
	border: 2px solid var(--nhs-blue);
	border-bottom: var(--rule-accent) solid var(--gold);
	border-radius: var(--radius);
	background: var(--white);
	color: var(--nhs-blue);
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	cursor: pointer;
}

.listen-section:hover {
	background: var(--purple-pale);
}

.listen-section__icon {
	flex-shrink: 0;
}

.listen-section[aria-pressed="true"] {
	background: var(--nhs-blue);
	color: var(--white);
}

.aw-hc-on .listen-section {
	background: #000000;
	color: var(--gold);
	border-color: var(--gold);
}

.aw-hc-on .listen-section[aria-pressed="true"] {
	background: var(--gold);
	color: #000000;
}

/* Speech is a screen affordance. It has no meaning on paper. */
@media print {

	.listen-section {
		display: none;
	}
}

/* ==========================================================================
   CONTACT FORM
   Block 9. Design-Brief.md 6.7 and section 9.
   ========================================================================== */

.contact-layout {
	display: grid;
	grid-template-columns: 59% 41%;
	gap: var(--gap-inner-cols);
	align-items: start;
}

.contact-layout__form {
	min-width: 0;
}

/* Radius added 24 August 2026. This panel never had one, so it was the last
   square-cornered pink block on the site once the callout was rounded. Same
   var(--radius) as the cards, the filter panel and the social panel. */
.contact-layout__direct {
	min-width: 0;
	padding: 34px 24px;
	border-radius: var(--radius);
	background: var(--purple-pale);
}

/* #212B32 on #F3E5F0 is 11.86:1. Purple text on pale purple is forbidden. */
.contact-layout__direct h2,
.contact-layout__direct h3 {
	color: var(--text);
}

.contact-layout__direct h2 {
	margin-top: 0;
	font-size: var(--fs-h3);
}

.contact-layout__direct h3 {
	font-size: var(--fs-h4);
	font-weight: 700;
}

.contact-address {
	line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   Fieldsets and radios. 30x30 controls per the playbook, inside a 44px row.
   -------------------------------------------------------------------------- */

.field-group {
	margin: 0 0 32px;
	padding: 0;
	border: 0;
}

.field-group__legend {
	padding: 0;
	margin-bottom: 12px;
	font-size: var(--fs-body);
	font-weight: 700;
}

.field-radio {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
}

.field-radio input[type="radio"] {
	width: 30px;
	height: 30px;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--nhs-blue);
}

.field-radio label {
	cursor: pointer;
}

.field__optional {
	font-weight: 400;
}

.field__hint {
	margin: 0 0 8px;
	font-size: var(--fs-small);
}

/* --------------------------------------------------------------------------
   Errors. Text and an icon, never colour on its own (section 9).
   #D5281B on white is 5.06:1. It is a white-background colour only, so the
   summary box is white with a red border, not a red tint.
   -------------------------------------------------------------------------- */

.error-summary {
	margin: 0 0 32px;
	padding: 24px;
	border: 4px solid var(--nhs-red);
	border-radius: var(--radius);
	background: var(--white);
}

.error-summary:focus-visible {
	outline: var(--focus-width) solid var(--focus-colour);
	outline-offset: var(--focus-offset);
}

.error-summary__title {
	margin: 0 0 12px;
	color: var(--nhs-red);
	font-size: var(--fs-h4);
	font-weight: 700;
}

.error-summary__list {
	margin: 0;
	padding-left: 20px;
}

.error-summary__list li {
	margin-bottom: 8px;
}

.error-summary__list a {
	color: var(--nhs-red);
	font-weight: 700;
}

.field-error {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 8px;
	color: var(--nhs-red);
	font-weight: 700;
}

.field-error__icon {
	flex-shrink: 0;
	margin-top: 3px;
}

[aria-invalid="true"] {
	border: 2px solid var(--nhs-red);
}

/* --------------------------------------------------------------------------
   Honeypot. Off-canvas rather than display:none, which some bots skip.
   aria-hidden and tabindex="-1" in the markup keep it away from everyone real.
   -------------------------------------------------------------------------- */

.honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.btn--submit {
	width: auto;
	min-height: 56px;
	padding: 14px 28px;
}

.contact-success {
	max-width: var(--measure);
}

@media (max-width: 1022px) {

	.contact-layout {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

/* --------------------------------------------------------------------------
   Urgent Help page only (Design-Brief.md 4.1)

   --nhs-red is scoped to this one page and to three things on it: the page
   heading, the warning icon and the emergency numbers. On white only.
   #D5281B on white is 5.06:1. It must never sit on #F3E5F0, which is 4.16:1
   and fails, so the callout and tag backgrounds are deliberately untouched.
   -------------------------------------------------------------------------- */

.page-urgent-help h1 {
	color: var(--nhs-red);
}

.page-urgent-help .entry-content strong {
	color: var(--nhs-red);
}

/* The emergency lead paragraphs sit on white. Keep it that way. */
.page-urgent-help .wp-block-column > p:first-child {
	background: var(--white);
}

.aw-hc-on.page-urgent-help h1,
.aw-hc-on.page-urgent-help .entry-content strong {
	color: var(--gold);
}

/* --------------------------------------------------------------------------
   External core buttons. The glyph is added at render time by
   ageing_well_mark_external_buttons(); it sits where .btn--external puts it.
   -------------------------------------------------------------------------- */

.wp-block-button__link .icon-external {
	position: absolute;
	top: 15px;
	right: 24px;
}

.wp-block-button__link[target="_blank"] {
	position: relative;
}

/* --------------------------------------------------------------------------
   Footer top: the social panel and the partner row share one container, as
   the specimen has them, with 56px below and the logos 48px under the panel.
   -------------------------------------------------------------------------- */

.footer-top {
	padding-bottom: 56px;
}


/* ---------------------------------------------------------------------------
   Card nine: the Ageing Well pack download
   ---------------------------------------------------------------------------
   tokens.css records a deliberate decision that every homepage card stays
   --purple, on the principle that the card system is consistent before it is
   expressive. This is a knowing exception, requested 21 August 2026: the pack
   is the only card that is a file download rather than a page, and it needs to
   read as different before it is clicked.

   --nhs-navy on white text is 11.6:1, comfortably past AA and AAA. Hover is
   left to inherit the shared .card:hover rule, so this card still turns
   --nhs-blue like every other one and the interaction stays learnable.
   -------------------------------------------------------------------------- */
.card--download > .card__inner {
	background: var(--nhs-navy);
}


/* The 'aside flush with the H1' block that stood here from 21 to 25 August
   2026 has been removed. See the note in page.php for why: it inflated the
   rows whenever the aside was the taller column, which Keeping Your Mind
   Active, with seven buttons in its aside, made obvious. Leaf pages are back
   to the ordinary two-column flow defined above. */


/* ---------------------------------------------------------------------------
   Select fields
   ---------------------------------------------------------------------------
   appearance:none is required, not cosmetic: Safari and iOS give a native
   look to select that discards border-radius, the same way they do to
   input[type="search"]. Without it the day field stays square on those
   browsers however the radius is set.

   Removing the native appearance also removes the native arrow, so one is
   supplied here. It is a background image rather than a pseudo-element
   because select cannot carry ::after.
   -------------------------------------------------------------------------- */
select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 48px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23212B32' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 20px 20px;
}

/* High contrast repaints the field, so the arrow has to be repainted with it
   or it disappears into the background. */
.aw-hc-on select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFB81C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}


/* ---------------------------------------------------------------------------
   Homepage intro button
   ---------------------------------------------------------------------------
   .wp-block-column .wp-block-button__link is set to width:100% for the leaf
   pages, where the right-hand column is a stack of full-width buttons and
   that is right. The homepage intro is also a column block, so it was picking
   the rule up and stretching a single call to action across two thirds of the
   page.

   align-items on the wrapper matters as much as the width: .wp-block-buttons
   is a column flex container, so without it the button stretches again
   whatever width the link is given.

   The 72px right padding in the base rule reserves room for the external-link
   icon, which only appears on target="_blank". This button is internal, so it
   would just be a gap.
   -------------------------------------------------------------------------- */
.home-intro-content .wp-block-buttons {
	align-items: flex-start;
}

.home-intro-content .wp-block-column .wp-block-button__link {
	display: inline-block;
	width: auto;
	padding-right: 24px;
}


/* ---------------------------------------------------------------------------
   Leaf split layout
   ---------------------------------------------------------------------------
   page.php lifts the right-hand column out of the post content and renders it
   as a sibling of the heading, so this is an ordinary two-column, one-row
   grid. Both columns start at the top; either can be the taller one without
   affecting the other.

   That is the whole point of doing it in the template rather than in CSS. The
   earlier version kept the aside nested in the prose and made it span three
   rows, which inflated the gaps around the heading whenever the aside was
   taller. There is no row to inflate here.
   -------------------------------------------------------------------------- */
.leaf-split {
	display: grid;
	grid-template-columns: 59fr 41fr;
	column-gap: var(--gap-inner-cols);
	align-items: start;
}

.leaf-split__main,
.leaf-split__aside {
	min-width: 0;
}

/* The .wp-block-columns wrapper carried this margin before the split. */
.leaf-split__aside > .wp-block-column,
.leaf-split__main #aw-leaf-prose > .wp-block-column {
	margin-bottom: 40px;
}

/* flex-basis on the column is inert outside a flex container, but be explicit
   so a browser cannot decide otherwise. */
.leaf-split .wp-block-column {
	flex-basis: auto;
	width: 100%;
}

@media (max-width: 767px) {

	.leaf-split {
		display: block;
	}

	.leaf-split__aside {
		margin-top: 40px;
	}

}


/* ---------------------------------------------------------------------------
   Aside group labels
   ---------------------------------------------------------------------------
   The button stack is broken into groups by a short bold paragraph above each
   one. Base paragraphs are margin: 0 0 20px and .wp-block-buttons is margin:
   0, so a label had 20px below it and nothing above: it sat hard against the
   button group it did NOT belong to and floated away from the one it did.

   Proximity is the whole job of these labels, so the spacing is reversed. A
   label now hugs the buttons underneath it and is pushed well clear of
   whatever sits above.

   Scoped to the split aside so the reading column keeps its 20px paragraph
   rhythm untouched.
   -------------------------------------------------------------------------- */
/* These are real h2s as of 25 August 2026, not bold paragraphs, so the button
   stack now has a proper outline and a screen reader user can jump between the
   two groups. Sized down to match the surrounding text: they are labels doing
   a structural job, not headings that should shout. */
.leaf-split__aside h2.wp-block-heading,
.leaf-split__aside p {
	margin-bottom: 12px;
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.4;
	color: var(--text);
}

/* Clear air between one group and the next label. */
.leaf-split__aside .wp-block-buttons + h2.wp-block-heading,
.leaf-split__aside .wp-block-buttons + p {
	margin-top: 36px;
}

/* And between the image and the first label. */
.leaf-split__aside .wp-block-image + h2.wp-block-heading,
.leaf-split__aside .wp-block-image + p {
	margin-top: 24px;
}

/* Home banner, 22 September 2026. Cropped to a letterbox so the intro and cards stay near the top of the screen. */
.home-hero { margin: 0 0 var(--space-6, 2rem); }
.home-hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 5; object-fit: cover; object-position: 60% 30%; border-radius: 4px; }
@media (max-width: 700px) { .home-hero img { aspect-ratio: 3 / 2; object-position: 70% 50%; } }