/* ==========================================================================
   TOKENS
   Design-Brief.md sections 4.1 (colour), 4.4 (type), 4.6 (radius and spacing).
   Values are fixed. Do not adjust them for aesthetic balance.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Roboto, self-hosted. Four faces only. No Google Fonts request.
   Static per-weight files, not a variable font (Design-Brief.md 4.4).
   Latin subset: covers British English and Gaelic accented vowels
   (a-grave, e-grave, i-grave, o-grave, u-grave all sit inside U+0000-00FF).
   -------------------------------------------------------------------------- */

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/roboto-regular.woff2") format("woff2"),
	     url("../fonts/roboto-regular.woff") format("woff");
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/roboto-bold.woff2") format("woff2"),
	     url("../fonts/roboto-bold.woff") format("woff");
}

@font-face {
	font-family: "Roboto";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/roboto-italic.woff2") format("woff2"),
	     url("../fonts/roboto-italic.woff") format("woff");
}

@font-face {
	font-family: "Roboto";
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/roboto-bolditalic.woff2") format("woff2"),
	     url("../fonts/roboto-bolditalic.woff") format("woff");
}

/* --------------------------------------------------------------------------
   CONTRAST, VERIFIED (Design-Brief.md 4.2). Computed, not assumed.

     #212B32 on #FFFFFF ............ 14.42:1  passes AAA
     #A84D98 on #FFFFFF ............  5.02:1  passes AA for body text
     #FFFFFF on #A84D98 (cards) ....  5.02:1  passes AA for body text
     #005EB8 on #FFFFFF ............  6.38:1  passes AA
     #FFFFFF on #005EB8 (buttons) ..  6.38:1  passes AA
     #212B32 on #F3E5F0 ............ 11.86:1  passes AAA
     #7A3A70 on #FFFFFF ............  7.87:1  passes AAA
     #FFB81C on #FFFFFF ............  1.73:1  decorative only, never text
     #D5281B on #FFFFFF ............  5.06:1  passes AA
     #D5281B on #F3E5F0 ............  4.16:1  FAILS, never use

   TWO PROHIBITIONS:
     1. Never put #A84D98 text on #F3E5F0. That pair is 4.13:1 and fails.
        Pale purple panels take #212B32 text only.
     2. Never put #D5281B text on #F3E5F0 or any tinted background. That
        pair is 4.16:1 and fails. --nhs-red is a white-background colour only.

   For the record: the reference site's card colour #1B7D9D gives white text
   only 4.19:1, which fails AA for normal text. This palette fixes that
   defect rather than inheriting it. Do not change these values casually.
   -------------------------------------------------------------------------- */

:root {

	/* Colour (4.1) */
	--purple:       #A84D98;  /* H1, inline links, card fill, button hover */
	--purple-dark:  #7A3A70;  /* Link hover on pale backgrounds, focus text */
	--purple-pale:  #F3E5F0;  /* Panels, callout boxes, menu band, footer bands */
	--nhs-blue:     #005EB8;  /* H2 to H6, nav links, button fill, card hover */
	--nhs-navy:     #1E3476;  /* Wordmark, breadcrumbs, header utility links */
	--nhs-teal:     #00857C;  /* Reserved. Large text and non-text only */
	--gold:         #FFB81C;  /* 4px accent rules and focus outlines. Never text */
	--text:         #212B32;  /* All body copy */
	--white:        #FFFFFF;  /* Page background, text on purple and blue */
	--cream:        #F7F5F0;  /* Optional alternating section background */
	--grey:         #EBEBEB;  /* Form fields, disabled states */

	/* Urgent Help PAGE only, and only for the heading, the warning icon and
	   the emergency contact numbers. On white only, never on #F3E5F0 or any
	   tinted background. The homepage URGENT HELP card stays --purple like
	   every other card: the card system is consistent before it is
	   expressive, and the page carries the urgency. */
	--nhs-red:      #D5281B;

	/* Type family (4.4) */
	--font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

	/* Type scale, desktop (4.4) */
	--fs-h1:     48px;
	--fs-h2:     40px;
	--fs-h3:     32px;
	--fs-h4:     24px;
	--fs-body:   19px;
	--fs-small:  16px;

	/* Line heights (4.4) */
	--lh-heading: 1.2;
	--lh-body:    1.5;

	/* Vertical rhythm (4.4) */
	--space-para:       20px;   /* paragraph margin-bottom */
	--space-h-top:      40px;   /* heading margin-top */
	--space-h-bottom:   24px;   /* heading margin-bottom */
	--space-h1-bottom:  25px;
	--measure:          70ch;   /* maximum measure on prose columns */

	/* Radius (4.6). 4px everywhere it appears.
	   Design-Brief 4.6 also asked for 8px on the search input and square
	   callout boxes. Both were reversed on 24 August 2026: two extra radii
	   read as mistakes rather than as distinctions. --radius-search and
	   --radius-none are kept so the original intent stays on the record, but
	   --radius-none is now used by nothing. */
	--radius:        4px;
	--radius-search: 8px;
	--radius-none:   0;

	/* Shadows: none. The design is entirely flat (4.6).
	   Separation is by flat colour block and 4px gold rule. */

	/* Spacing (4.6) */
	--grid-gap:          24px;
	--rule-accent:        4px;  /* the gold rule weight */
	--main-pad-top:      64px;
	--footer-pad-top:   128px;
	--gap-home-cols:    100px;
	--gap-inner-cols:    80px;
	--gutter-mobile:     20px;  /* deliberate deviation: reference site uses 0 */

	/* Container widths (4.6) */
	--container:      1200px;
	--container-md:    970px;
	--container-sm:    718px;
	--container-xs:    555px;
	--container-xxs:   350px;

	/* Focus. Hard rule: 3px gold, 2px offset. Never remove without
	   an immediate replacement. */
	--focus-width:  3px;
	--focus-offset: 2px;
	--focus-colour: var(--gold);
}

/* ==========================================================================
   BASE
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--white);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: var(--lh-body);
}

/* Headings (4.4). Colours are fixed by level. */

h1, h2, h3, h4, h5, h6 {
	margin: var(--space-h-top) 0 var(--space-h-bottom);
	line-height: var(--lh-heading);
	text-wrap: pretty;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
	margin-top: 0;
}

h1 {
	margin: 0 0 var(--space-h1-bottom);
	color: var(--purple);
	font-size: var(--fs-h1);
	font-weight: 700;
}

h2 {
	color: var(--nhs-blue);
	font-size: var(--fs-h2);
	font-weight: 700;
}

h3 {
	color: var(--nhs-blue);
	font-size: var(--fs-h3);
	font-weight: 700;
}

h4 {
	color: var(--text);
	font-size: var(--fs-h4);
	font-weight: 400;
}

h5,
h6 {
	color: var(--nhs-blue);
	font-size: var(--fs-h4);
	font-weight: 700;
}

p {
	margin: 0 0 var(--space-para);
}

/* Inline links in prose.
   NHS blue on white is 6.38:1, better than the 5.02:1 purple originally
   specified, and blue is the stronger link convention for this audience.
   Design-Brief 4.1 was amended to match the approved design. Purple is now
   for H1, cards and button hover only. */

a {
	color: var(--nhs-blue);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.1em;
}

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

/* Focus. Hard rule: 3px #FFB81C, 2px offset, always visible.
   The reference site suppresses focus outlines. That is a defect.
   Never write outline: 0 or outline: none without an immediate
   replacement focus style. */

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

/* Small print */

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

/* Media */

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* Screen-reader-only utility. Used by searchform.php and, from Block 2,
   the skip link. */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}