/*
Theme Name: Kiltearn Medical Centre
Theme URI: https://www.kiltearnmedicalcentre.nhs.uk
Description: Custom NHS-compliant child theme for Kiltearn Medical Centre, Nantwich. Built on Astra.
Author: Cheshire Cat Marketing
Author URI: https://www.cheshirecatmarketing.co.uk
Template: astra
Version: 1.0.304
Text Domain: kiltearn-medical
*/

/* ---------------------------------------------------------------------
 * Frutiger font (NHS official font).
 *
 * NHS England issues a free Frutiger W01 web font licence to NHS
 * organisations. Apply at:
 *   https://service-manual.nhs.uk/design-system/styles/typography
 *
 * Family name is 'Frutiger W01' everywhere: the v1.0.208 audit found
 * eight templates declaring a plain 'Frutiger' family that doesn't
 * exist, silently dropping those pages to Arial.
 *
 * Self-host ready: local files in assets/fonts/ are tried first, the
 * NHS asset CDN second. Drop the four woff2/woff files (download them
 * straight from the assets.nhs.uk URLs below) into assets/fonts/ and
 * the theme switches to them automatically, removing the CORS and
 * availability dependency on the CDN.
 * --------------------------------------------------------------------- */
@font-face {
    font-family: 'Frutiger W01';
    src: url('assets/fonts/FrutigerLTW01-55Roman.woff2') format('woff2'),
         url('https://assets.nhs.uk/fonts/FrutigerLTW01-55Roman.woff2') format('woff2'),
         url('assets/fonts/FrutigerLTW01-55Roman.woff') format('woff'),
         url('https://assets.nhs.uk/fonts/FrutigerLTW01-55Roman.woff')  format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Frutiger W01';
    src: url('assets/fonts/FrutigerLTW01-65Bold.woff2') format('woff2'),
         url('https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.woff2') format('woff2'),
         url('assets/fonts/FrutigerLTW01-65Bold.woff') format('woff'),
         url('https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.woff')  format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* NHS Digital Service Manual palette */
:root {
    --km-blue: #005EB8;
    --km-dark-blue: #003087;
    --km-bright-blue: #0072CE;
    --km-light-blue: #41B6E6;
    --km-white: #FFFFFF;
    --km-black: #212b32;
    --km-grey-1: #4c6272;
    --km-grey-2: #768692;
    --km-grey-3: #aeb7bd;
    --km-grey-4: #d8dde0;
    --km-grey-5: #f0f4f5;
    --km-green: #336d00;       /* Kiltearn brand green. Site primary green for buttons and CTAs (client branding). */
    --km-green-dark: #1f4400;  /* Kiltearn brand green, darker, for hover and active. */
    --km-aqua-green: #00a499;
    --km-red: #d5281b;
    --km-warm-yellow: #ffb81c;
    --km-focus: #ffeb3b;
    --km-link: #005eb8;
    --km-link-hover: #7C2855;
    --km-link-visited: #330072;
    --km-border: #d8dde0;
    --km-body-bg: #f0f4f5;       /* Official brand green from logo board */
    --km-kiltearn-green-light: #abcaa0;  /* Secondary green tint, brand board swatch 2 */
    --km-kiltearn-charcoal: #404040;     /* Brand board swatch 4 */

    /* Tints and shades the templates used as literals until 5 September 2026.
     * Tokenised so DESIGN.md, :root and the critical block agree; nothing was recoloured. */
    --km-green-mid: #4a8c4a;              /* lighter green edging the dark-blue hero cards */
    --km-green-tint: #e8f5e9;             /* pale green panel behind confirmations and badges */
    --km-green-tint-soft: #e6f3ec;        /* pale green behind the open-now status */
    --km-green-shadow: #00401e;           /* pressed edge under the green form buttons */
    --km-green-hover: #00662f;            /* hover on the eConsult and form submit buttons */
    --km-blue-tint: #e6f1fb;              /* pale blue behind icons and category chips */
    --km-blue-tint-soft: #eaf2fb;         /* pale blue behind information callouts */
    --km-yellow-tint: #fef3cd;            /* pale yellow behind warning callouts */
    --km-yellow-pale: #fff9c4;            /* pale yellow notice panel, nhsuk-frontend */
    --km-red-dark: #8a1c12;               /* 999 and closed-status red, dark enough for AA on white */
    --km-red-hover: #b71c1c;              /* hover on the red urgent buttons */
    --km-red-tint: #fbe9e7;               /* pale red behind the closed-now status */
    --km-history-ink: #2a1b1f;            /* sepia headline ink, 1870 history section */
    --km-history-ink-soft: #3a2c30;       /* sepia body ink, history section */
    --km-history-ink-muted: #6c5b5f;      /* sepia muted text, history section */
    --km-history-lead: #4c3a3f;           /* sepia lead paragraph, history page */
    --km-history-plum: #5c1d3f;           /* hover on the history call to action */
    --km-history-paper: #fdfaf3;          /* lightest paper tone, top of the history page */
    --km-history-cream: #faf7f1;          /* paper ground of the history section */
    --km-history-cream-dark: #f5efe2;     /* paper ground at the foot of the history teaser */
    --km-history-rule: #e8dfd0;           /* hairline rules on the history section */
    --km-yellow-bright: #ffd34d;    /* yellow icon on the dark-blue hours card */

    --km-font: 'Frutiger', 'Frutiger W01', Arial, sans-serif;
    --km-max-width: 1180px;
    --km-header-height: 86px;
    --km-radius: 8px;
    --km-radius-sm: 6px;   /* buttons and callouts; alias so DESIGN.md rounded.sm has a token */
    --km-radius-md: 8px;   /* cards and panels; same value as --km-radius */

    /* --km-* aliases for canonical CSS extracted from mockups.
     * Mockup CSS references var(--km-blue), var(--font), etc., so the
     * aliases below let the canonical header/footer CSS in this file
     * resolve correctly even on pages that don't ship a per-template
     * <style> block (404, search results, default page.php). */
    --font: 'Frutiger', 'Frutiger W01', Arial, sans-serif;
    --max-width: 1180px;
    --header-height: 86px;
    --radius: 8px;
}

/* Opening hours table. Lives here rather than inline in the template:
 * the template's markup is passed through wp_kses_post(), which strips
 * <style> tags but leaves their text, so an inline block leaked the CSS
 * onto the page as visible text below the table. */
.km-hours-table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 16px; }
.km-hours-table th, .km-hours-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #d8dde0; color: #212b32; }
.km-hours-table thead th { background: #f0f4f5; font-weight: 600; }
.km-hours-table tbody th { font-weight: 600; width: 22%; }
.km-hours-table__closed td, .km-hours-table__closed th { color: #4c6272; }
@media (min-width: 641px) { .km-hours-table { font-size: 19px; } }

/* Hide Astra defaults */
body.km-custom-header #masthead,
body.km-custom-header .ast-primary-header,
body.km-custom-header .ast-above-header-wrap,
body.km-custom-header .ast-below-header-wrap,
body.km-custom-header #ast-desktop-header,
body.km-custom-header #ast-mobile-header,
body.km-custom-header .main-header-bar {
    display: none !important;
}

/* Hide Astra's footer elements (target by Astra-specific selectors,
 * NEVER by .site-footer alone because our own footer uses that class). */
body.km-custom-footer #colophon.site-footer,
body.km-custom-footer .ast-footer-overlay,
body.km-custom-footer .ast-small-footer,
body.km-custom-footer .ast-footer-section,
body.km-custom-footer .site-info,
body.km-custom-footer .footer-sml-section-1,
body.km-custom-footer .footer-sml-section-2 {
    display: none !important;
}

body.km-fullwidth .site-content,
body.km-fullwidth .ast-container,
body.km-fullwidth #primary,
body.km-fullwidth #content,
body.km-fullwidth #main,
body.km-fullwidth main#main-content,
body.km-fullwidth .ast-content,
body.km-fullwidth .ast-row,
body.km-fullwidth .content-area,
body.km-fullwidth .entry-content,
body.km-fullwidth .site-main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* White-gap killer. The browser default <main> margin plus Astra's
 * default top spacing on .site-content / #content / .ast-container can
 * leak through as a thin white strip between the notify banner and the
 * first hero section. Force all top spacing to zero on every plausible
 * wrapper, plus zero the bottom margin on the notify banner and the
 * top margin on the first hero section as belt-and-braces. */
html body.km-fullwidth,
html body.km-fullwidth main,
html body.km-fullwidth main#main-content,
html body.km-fullwidth .site-content,
html body.km-fullwidth #content,
html body.km-fullwidth .ast-container,
html body.km-fullwidth #primary,
html body.km-fullwidth .site-main,
html body.km-fullwidth .wp-site-blocks,
html body.km-fullwidth #page {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
body.km-fullwidth .notify-banner,
body.km-fullwidth .global-alert,
body.km-fullwidth .km-cookie-banner,
body.km-fullwidth .km-cookie-confirmation { margin-bottom: 0 !important; }
body.km-fullwidth main#main-content > section,
body.km-fullwidth main#main-content > div,
body.km-fullwidth main#main-content > section:first-of-type,
body.km-fullwidth main#main-content section.page-hero,
body.km-fullwidth main#main-content section.km-page-hero,
body.km-fullwidth main#main-content section.km-info-hero {
    margin-top: 0 !important;
}
/* Adjacent-sibling fallback: whichever element comes right after the
 * notify banner gets its top spacing zeroed too. This catches any
 * unexpected wrapper Astra or a plugin might inject between them. */
body.km-fullwidth .notify-banner + *,
body.km-fullwidth .km-cookie-confirmation + *,
body.km-fullwidth .global-alert + * {
    margin-top: 0 !important;
}

/* Last-resort: any direct child of main that is NOT a hero/section
 * still shouldn't introduce top padding (Astra title bars, accidental
 * wrapper divs, etc.). The hero sections take care of their own
 * spacing once they're the actual first child. */
body.km-fullwidth main#main-content > *:first-child {
    margin-top: 0 !important;
}

/* Astra title bar suppression for templates */
body.km-fullwidth .ast-page-title-bar,
body.km-fullwidth .entry-header {
    display: none !important;
}

/* Global container rules. Templates use one of two patterns
 * (.container or .km-container) - both kept for backwards compat.
 * Promoting these from scattered inline <style> blocks to global so
 * every page constrains its width consistently, instead of relying on
 * whichever template happened to define the rule in its own scope. */
body.km-fullwidth .container,
body.km-fullwidth .km-container {
    width: 100%;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}
@media (max-width: 600px) {
    body.km-fullwidth .container,
    body.km-fullwidth .km-container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Base resets */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    /* WCAG 2.2 SC 2.4.11 Focus Not Obscured (Minimum). The site has a
     * sticky header roughly 90px tall on desktop and 70px on mobile.
     * Without scroll-padding, anchoring or tab-navigating to an element
     * near the top of the page would scroll the focused element behind
     * the header where the user can't see it. The padding pushes the
     * scroll target down so the focused element sits below the header
     * with a small visual gap. */
    scroll-padding-top: 100px;
}
@media (max-width: 720px) {
    html { scroll-padding-top: 80px; }
}
body {
    font-family: var(--km-font);
    color: var(--km-black);
    background: var(--km-body-bg);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
@media (min-width: 641px) { body { font-size: 19px; } }

/* ---------------------------------------------------------------------
 * Text rendering. Four one-line settings with a disproportionate effect
 * on how finished the page looks, none of which change layout.
 *
 * balance stops a two-line heading leaving one word stranded on the
 * second line, which happens constantly here because clinical headings
 * are long. pretty kills orphans in body copy, and this site is mostly
 * body copy: privacy, terms, patient rights, complaints.
 *
 * tabular-nums on anything that updates, so the opening-times card does
 * not twitch as the wait time and queue length change.
 *
 * overflow-wrap on prose because a long URL or a drug name in a policy
 * page should break rather than push the page sideways.
 * ------------------------------------------------------------------- */
h1, h2, h3, h4, .km-hero-card h1, .hero h1 { text-wrap: balance; }
p, li, dd, figcaption, blockquote { text-wrap: pretty; overflow-wrap: anywhere; }
.ot-live-figure, .ot-queue-num, .ot-wait-num, .fact-num, .km-team-group__count,
time, [data-live-number] { font-variant-numeric: tabular-nums; }

/* Press feedback. 0.96 exactly: below 0.95 reads as a bounce, above 0.98
 * nobody feels it. Buttons only, not text links. Suppressed under
 * reduced-motion by the sitewide block above. */
.btn:active,
.km-btn-green:active,
.header-cta:active,
.km-cookie-banner__btn:active,
.km-newsletter__submit:active,
button.km-ticker__toggle:active,
.km-alert-bar__dismiss:active {
    transform: scale(0.96);
}
.btn, .km-btn-green, .header-cta, .km-cookie-banner__btn,
.km-newsletter__submit, .km-ticker__toggle, .km-alert-bar__dismiss {
    /* Custom ease-out. The built-in curves are too weak, and naming the
     * properties keeps the transition off layout. */
    transition-property: background-color, border-color, color, box-shadow, transform;
    transition-duration: 0.15s;
    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Site-wide motion safety. Anyone who's set reduced-motion in their OS
 * preferences gets ALL transitions, animations, and scroll-behaviour
 * neutralised in one pass. Individual components can opt back in to
 * specific motion if they need to, but the default is "off".
 * Every animation on the site respects this query. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Content-visibility utility for below-fold sections. Adding
 * .km-below-fold to any large section that won't be visible on initial
 * paint tells the browser it can skip rendering it until scrolled
 * into view. Reserves estimated height to prevent layout shift. */
.km-below-fold {
    content-visibility: auto;
    contain-intrinsic-size: 1px 800px;
}

/* Paint isolation for repeated card components. Tells the browser each
 * card is self-contained so a hover or focus change in one card doesn't
 * trigger layout or paint of its siblings. Free win on grids with 6+
 * cards. */
.action-card,
.service-card,
.team-preview-card,
.km-team-card,
.km-service-card,
.news-card,
.local-nhs-btn {
    contain: layout style paint;
}

/* Touch-action manipulation removes the 300ms double-tap-zoom delay
 * on iOS Safari for anything that's clearly meant to be tapped once. */
button,
a,
.km-cta,
[role="button"] {
    touch-action: manipulation;
}

/* iOS form-input zoom guard. Safari on iPhone zooms the page when an input
 * with computed font-size below 16px receives focus. The header search input
 * already scopes 16px at mobile, but any form added later (contact, sick-note
 * request, registration enquiry) would zoom on tap without this. Defensive. */
@media (max-width: 768px) {
    input, select, textarea {
        font-size: 16px;
    }
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--km-link); text-decoration: underline; transition: color 0.15s; }
a:hover { color: var(--km-link-hover); }
a:visited { color: var(--km-link-visited); }
a:focus { outline: 3px solid var(--km-focus); outline-offset: 2px; }

button { font-family: inherit; cursor: pointer; }

/* Skip link for screen readers */
.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    background: var(--km-focus);
    color: var(--km-black);
    padding: 8px 16px;
    z-index: 9999;
    font-weight: 700;
    text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* prefers-reduced-motion - per NHS accessibility guidance */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    html { scroll-behavior: auto !important; }
}

/* Print stylesheet - patients commonly print info pages (medications, registration) */
@media print {
    /* Hide non-essential UI */
    .km-header, .km-footer, .km-footer-accent, .km-top-bar,
    .km-cookie-banner, .km-banner-global, .km-mobile-toggle,
    .km-header__search, .km-header__right,
    .km-urgent-bar, .km-urgent-card,
    .skip-link, .km-fade-in {
        display: none !important;
    }

    /* Print colours: high contrast black on white */
    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt !important;
        line-height: 1.5 !important;
    }
    h1, h2, h3 { color: #000 !important; page-break-after: avoid; }
    p { page-break-inside: avoid; }

    /* Strip backgrounds from cards/heroes - keep the words */
    .km-hero-card, .km-info-hero-card, .km-info-prose,
    .km-info-callout, .km-info-card, .km-rx-card, .km-appt-card,
    .km-fact-card, .km-link-card, .km-page-hero, .km-info-hero {
        background: #fff !important;
        color: #000 !important;
        border: 1px solid #999 !important;
        padding: 12px !important;
        margin: 8px 0 !important;
        page-break-inside: avoid;
    }

    /* Show link destinations after each link */
    a::after { content: ' [' attr(href) ']'; font-size: 10pt; color: #333; }
    a[href^="#"]::after, a[href^="javascript:"]::after { content: ''; }
    a[href^="tel:"]::after { content: ''; }
    a[href^="mailto:"]::after { content: ''; }

    /* Practice address footer on every printed page */
    @page {
        margin: 20mm 15mm;
    }
    body::after {
        content: 'Kiltearn Medical Centre · Off Beam Street · Nantwich · CW5 5NX · 01270 441672';
        position: fixed;
        bottom: 8mm; left: 15mm; right: 15mm;
        text-align: center;
        font-size: 9pt; color: #666;
        border-top: 1px solid #ccc;
        padding-top: 4mm;
    }
}

/* =====================================================================
 * ASTRA OVERRIDES (Layer 3)
 * Body-class-scoped so nothing leaks. The Astra hooks in functions.php
 * do most of the work; this CSS picks up what PHP can't reach.
 *
 * Scope: every override here is gated on body.km-fullwidth so it only
 * applies to pages running our custom layouts.
 * =================================================================== */

/* Layer 3a: Container breakout — kill Astra's narrow content container */
body.km-fullwidth #page,
body.km-fullwidth #content,
body.km-fullwidth #primary,
body.km-fullwidth #main,
body.km-fullwidth .site-content,
body.km-fullwidth .ast-row,
body.km-fullwidth .ast-container,
body.km-fullwidth .site-content > .ast-container,
body.km-fullwidth .ast-no-sidebar .site-content > .ast-container,
body.km-fullwidth .ast-separate-container,
body.km-fullwidth .ast-plain-container,
body.km-fullwidth .ast-page-builder-template,
body.km-fullwidth .ast-page-builder-template .site-content > .ast-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Layer 3b: Hide Astra's chrome */
body.km-fullwidth #secondary,
body.km-fullwidth .ast-page-header-section,
body.km-fullwidth .page-header,
body.km-fullwidth .entry-header,
body.km-fullwidth .entry-title,
body.km-fullwidth .page-title,
body.km-fullwidth .ast-archive-description,
body.km-fullwidth .ast-pagination,
body.km-fullwidth .ast-author-box,
body.km-fullwidth .ast-related-posts-wrapper {
    display: none !important;
}

body.km-fullwidth .entry-content {
    margin: 0 !important;
    padding: 0 !important;
}

/* Layer 3c: Astra typography — heading colours overridden by Astra's
 * --ast-heading-color, so where templates need a specific colour use a
 * hex with the body-class prefix to win specificity. */

/* Hero text (white on blue gradient) */
body.km-fullwidth .hero,
body.km-fullwidth .hero h1,
body.km-fullwidth .hero .hero-sub { color: #FFFFFF !important; }

/* Hero H2/H3 outside the opening-times card */
body.km-fullwidth .hero h2:not(.ot-card h2),
body.km-fullwidth .hero h3:not(.ot-card h3) { color: #FFFFFF !important; }

/* Opening-times card lives inside .hero but has its own white-card scheme */
body.km-fullwidth .hero .ot-card,
body.km-fullwidth .hero .ot-card * { color: #212b32 !important; }
body.km-fullwidth .hero .ot-card h2 { color: #005EB8 !important; }
body.km-fullwidth .hero .ot-card .day-label { color: #212b32 !important; }
body.km-fullwidth .hero .ot-card .time-val { color: #4c6272 !important; }
body.km-fullwidth .hero .ot-card .ot-today .day-label { color: #1f4400 !important; }
body.km-fullwidth .hero .ot-card .ot-today .time-val { color: #212b32 !important; }
body.km-fullwidth .hero .ot-card .ot-note { color: #4c6272 !important; }
body.km-fullwidth .hero .ot-card a { color: #005EB8 !important; }
/* Reset Astra's default ul left-padding so day rows align with the
 * Opening Times heading rather than being indented 40px to the right. */
body.km-fullwidth .hero .ot-card .ot-list {
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
}
body.km-fullwidth .hero .ot-card .ot-list li { padding-left: 0 !important; margin-left: 0 !important; }
body.km-fullwidth .hero .ot-card .ot-list li::before,
body.km-fullwidth .hero .ot-card .ot-list li::after { content: none !important; }

/* Page-hero card (about, appointments, prescriptions, etc.) - white on dark blue */
body.km-fullwidth .page-hero .hero-card,
body.km-fullwidth .page-hero .hero-card h1,
body.km-fullwidth .page-hero .hero-card p,
body.km-fullwidth .page-hero .hero-card .stat-pill { color: #FFFFFF !important; }
body.km-fullwidth .page-hero .hero-card .stat-pill { background: rgba(255,255,255,0.95); }
body.km-fullwidth .page-hero .hero-card .stat-pill,
body.km-fullwidth .page-hero .hero-card .stat-pill * { color: #212b32 !important; }

/* km-btn-* button utility classes. Parallel to the .btn-* set used on
 * front-page.php but with the km- prefix used by some templates
 * (notably template-online-services.php). These were previously
 * undefined so login/register buttons there rendered as plain text. */
.km-btn-green, .km-btn-blue, .km-btn-white {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px; border-radius: 6px; text-decoration: none;
    font-weight: 700; font-size: 16px; border: 2px solid transparent;
    cursor: pointer; transition: background 0.15s, box-shadow 0.15s, color 0.15s;
    line-height: 1.3;
}
.km-btn-green { background: #336d00; color: #FFFFFF !important; border-color: #336d00; }
.km-btn-green:hover { background: #1f4400; color: #FFFFFF !important; border-color: #1f4400; box-shadow: 0 3px 10px rgba(0,0,0,0.15); }
.km-btn-green:focus-visible { background: #ffeb3b; color: #212b32 !important; border-color: #ffeb3b; outline: 3px solid #212b32; outline-offset: 2px; }
.km-btn-green:visited { color: #FFFFFF !important; }

.km-btn-blue { background: #005EB8; color: #FFFFFF !important; border-color: #005EB8; }
.km-btn-blue:hover { background: #003087; color: #FFFFFF !important; border-color: #003087; box-shadow: 0 3px 10px rgba(0,0,0,0.15); }
.km-btn-blue:focus-visible { background: #ffeb3b; color: #212b32 !important; border-color: #ffeb3b; outline: 3px solid #212b32; outline-offset: 2px; }
.km-btn-blue:visited { color: #FFFFFF !important; }

.km-btn-white { background: #FFFFFF; color: #005EB8 !important; border-color: #FFFFFF; }
.km-btn-white:hover { background: #f0f4f5; color: #005EB8 !important; }
.km-btn-white:focus-visible { background: #ffeb3b; color: #212b32 !important; border-color: #ffeb3b; outline: 3px solid #212b32; outline-offset: 2px; }
.km-btn-white:visited { color: #005EB8 !important; }

/* eConsult branded banner -- white text on green gradient. Astra
 * heading-cascade rules don't apply now the banner is just an image, but
 * keep a single rule resetting any inherited image filter Astra adds. */
body.km-fullwidth .econsult-banner-img { filter: none !important; }

/* eConsult info card -- two columns, NHS Black heading, grey body */
body.km-fullwidth .econsult-info-col h3 { color: #212b32 !important; }

/* Welcome from the practice + team preview - Astra-fight on the headings */
body.km-fullwidth .welcome-text h2 { color: #212b32 !important; }
body.km-fullwidth .welcome-text p { color: #212b32 !important; }
body.km-fullwidth .welcome-sig strong { color: #212b32 !important; }
body.km-fullwidth .welcome-sig span { color: #4c6272 !important; }
body.km-fullwidth .welcome-link { color: #005EB8 !important; }
body.km-fullwidth .team-preview .section-head h2 { color: #212b32 !important; }
body.km-fullwidth .team-preview .section-head p { color: #4c6272 !important; }
body.km-fullwidth .team-preview-card h3 { color: #212b32 !important; }
body.km-fullwidth .team-preview-role { color: #005EB8 !important; }
body.km-fullwidth .team-preview-qual { color: #4c6272 !important; }

/* History teaser - sepia palette, fight Astra heading cascade */
body.km-fullwidth .history-teaser-text h2 { color: var(--km-history-ink) !important; }
body.km-fullwidth .history-teaser-text p { color: var(--km-history-ink-soft) !important; }
body.km-fullwidth .history-since { color: var(--km-history-ink-muted) !important; }
body.km-fullwidth .history-since strong { color: #7c2855 !important; }
body.km-fullwidth .history-cta { color: #7c2855 !important; }
body.km-fullwidth .history-cta:hover { color: var(--km-history-plum) !important; }

/* CQC panel heading - Astra-fight */
body.km-fullwidth .cqc-panel-text h2 { color: #212b32 !important; }
body.km-fullwidth .cqc-panel-text p { color: #4c6272 !important; }

/* Clinical Team Sessions panel + drug lists - Astra-fight */
body.km-fullwidth .sessions-head h2 { color: #FFFFFF !important; }
body.km-fullwidth .sessions-head p { color: rgba(255,255,255,0.9) !important; }
body.km-fullwidth .sessions-name strong { color: #212b32 !important; }
body.km-fullwidth .sessions-name span { color: #4c6272 !important; }
body.km-fullwidth .sessions-days { color: #212b32 !important; }
body.km-fullwidth .drug-list-toggle summary { color: #005EB8 !important; }
body.km-fullwidth .drug-list-toggle summary:hover { color: #7C2855 !important; }
body.km-fullwidth .drug-list li { color: #212b32 !important; }

/* Custom Sections. Client-editable extra blocks.
 * Three layouts: text-only (full width), text-left/right (50/50 with
 * image). Three backgrounds: white, grey, NHS Blue. All variants share
 * the same outer padding and inner constraint. */
.km-custom { padding: 56px 0; }
.km-custom--white { background: var(--km-white); }
.km-custom--grey { background: var(--km-body-bg); }
.km-custom--blue { background: var(--km-blue); color: var(--km-white); }
.km-custom--blue h2 { color: var(--km-white) !important; }
.km-custom--blue a { color: var(--km-white); text-decoration: underline; }

.km-custom__inner { display: grid; gap: 32px; align-items: center; }
.km-custom--text-only .km-custom__inner { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }
.km-custom--text-left .km-custom__inner { grid-template-columns: 1fr 1fr; }
.km-custom--text-right .km-custom__inner { grid-template-columns: 1fr 1fr; }
.km-custom--text-right .km-custom__body { order: 2; }
.km-custom--text-right .km-custom__image { order: 1; }

.km-custom__body h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 700; margin-bottom: 14px; color: var(--km-black); }
.km-custom__text { line-height: 1.7; font-size: 16px; }
.km-custom__text p { margin-bottom: 16px; }
.km-custom__text p:last-child { margin-bottom: 0; }
.km-custom__image img { width: 100%; height: auto; border-radius: var(--radius); display: block; }

@media (max-width: 768px) {
    .km-custom { padding: 40px 0; }
    .km-custom--text-left .km-custom__inner,
    .km-custom--text-right .km-custom__inner { grid-template-columns: 1fr; }
    .km-custom--text-right .km-custom__body { order: 0; }
    .km-custom--text-right .km-custom__image { order: 1; }
}

body.km-fullwidth .km-custom h2 { color: inherit !important; }
body.km-fullwidth .km-custom--blue h2 { color: #FFFFFF !important; }

/* History page itself - sepia palette overrides */
body.km-fullwidth .km-history-hero h1 { color: var(--km-history-ink) !important; }
body.km-fullwidth .km-history-hero .km-since { color: #7c2855 !important; }
body.km-fullwidth .km-history-lead { color: var(--km-history-lead) !important; }
body.km-fullwidth .km-history-section h2,
body.km-fullwidth .km-history-section h3 { color: var(--km-history-ink) !important; }
body.km-fullwidth .km-history-section p { color: var(--km-history-ink-soft) !important; }
body.km-fullwidth .km-timeline-inner h2 { color: var(--km-history-ink) !important; }
body.km-fullwidth .km-timeline-years { color: #7c2855 !important; }
body.km-fullwidth .km-timeline-body strong { color: var(--km-history-ink) !important; }
body.km-fullwidth .km-timeline-body span { color: var(--km-history-ink-muted) !important; }
body.km-fullwidth .km-history-cta h2 { color: #212b32 !important; }
body.km-fullwidth .km-history-cta p { color: #4c6272 !important; }
body.km-fullwidth .km-history-cta a { color: #FFFFFF !important; }
body.km-fullwidth .km-history-cta a.km-secondary { color: #005EB8 !important; }
body.km-fullwidth .econsult-info-col > p,
body.km-fullwidth .econsult-info-note { color: #4c6272 !important; }
body.km-fullwidth .econsult-info-list li { color: #212b32 !important; }
body.km-fullwidth .econsult-info-list li svg { color: #336d00 !important; }
body.km-fullwidth .econsult-info-note a { color: #005EB8 !important; }

/* NHS services button grid -- white text on NHS Blue buttons, links below
 * in NHS Green. Astra heading-cascade also tries to dim the h2. */
body.km-fullwidth .nhs-services-section .section-head h2 { color: #212b32 !important; }
body.km-fullwidth .nhs-svc-btn,
body.km-fullwidth .nhs-svc-btn span,
body.km-fullwidth .nhs-svc-btn svg { color: #FFFFFF !important; }
body.km-fullwidth .nhs-svc-link { color: #336d00 !important; }
body.km-fullwidth .nhs-svc-link:hover { color: #1f4400 !important; }

/* Friends and Family Test card -- needs explicit colours on the h2 */
body.km-fullwidth .fft-card .fft-content h2 { color: #212b32 !important; }
body.km-fullwidth .fft-card .fft-content p { color: #4c6272 !important; }

/* Urgent help strip - the one sitewide component (partials/urgent-strip.php).
 * Red house style, replacing the dark homepage bar and near-black contact
 * card (v1.0.194). Colours are pinned with !important because Astra's
 * global heading and body colours bleed in on fullwidth pages. White
 * buttons carry each route's accent in the label and icon: NHS black and
 * a blue phone for 111, NHS purple for the crisis line, deep red for 999. */
.km-urgent-strip {
  background: linear-gradient(135deg, #d5281b, var(--km-red-hover));
  color: #FFFFFF;
  border-radius: var(--radius);
  padding: 28px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 18px;
}
.km-urgent-strip-message { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 280px; }
.km-urgent-strip-icon {
  width: 52px; height: 52px; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.6); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #FFFFFF;
}
.km-urgent-strip-icon svg { width: 26px; height: 26px; }
.km-urgent-strip h2 {
  font-size: 20px; font-weight: 700; margin: 0 0 4px;
  color: #FFFFFF !important;
}
.km-urgent-strip p {
  font-size: 15px; margin: 0; line-height: 1.5;
  color: #FFFFFF !important;
}
.km-urgent-strip-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.km-urgent-strip-btns a,
.km-urgent-strip-btns a:visited {
  display: inline-flex; align-items: center; gap: 8px;
  background: #FFFFFF; color: #212b32;
  padding: 12px 20px; border-radius: 6px;
  font-weight: 700; font-size: 15px; text-decoration: none;
  overflow-wrap: anywhere;
  box-shadow: 0 4px 0 rgba(0,0,0,0.28);
  transition: background 0.15s;
}
.km-urgent-strip-btns a:hover { background: #f0f4f5; }
.km-urgent-strip-btns a:active { box-shadow: 0 1px 0 rgba(0,0,0,0.28); transform: translateY(3px); }
.km-urgent-strip-btns a:focus-visible { outline: 3px solid var(--km-focus); outline-offset: 2px; }
.km-urgent-strip-btns a svg { width: 18px; height: 18px; flex-shrink: 0; }
.km-urgent-strip-btns .km-us-111 { color: #212b32; }
.km-urgent-strip-btns a:nth-child(1) svg { color: #005EB8; }
.km-urgent-strip-btns .km-us-mh { color: #330072; }
.km-urgent-strip-btns a:nth-child(2) svg { color: #330072; }
.km-urgent-strip-btns .km-us-999 { color: var(--km-red-dark); }
.km-urgent-strip-btns a:nth-child(3) svg { color: var(--km-red-dark); }
@media (max-width: 680px) {
  .km-urgent-strip { flex-direction: column; text-align: center; }
  .km-urgent-strip-message { flex-direction: column; }
  .km-urgent-strip-btns { justify-content: center; }
}

/* App card — the LEFT column (.app-content) is white-on-white, the RIGHT
 * column (.app-visual) is dark blue with the NHS logo lockup. Don't force
 * white text on the whole card. */
body.km-fullwidth .app-card { color: #212b32 !important; }
body.km-fullwidth .app-card .app-content,
body.km-fullwidth .app-card .app-content h2,
body.km-fullwidth .app-card .app-content h3 { color: #212b32 !important; }
body.km-fullwidth .app-card .app-content > p,
body.km-fullwidth .app-card .app-content li { color: #4c6272 !important; }
body.km-fullwidth .app-card .app-content .section-label { color: #336d00 !important; }
body.km-fullwidth .app-card .app-content a:not(.store-row a) { color: #005EB8 !important; }
body.km-fullwidth .app-card .app-visual,
body.km-fullwidth .app-card .app-visual-inner,
body.km-fullwidth .app-card .app-visual-text,
body.km-fullwidth .app-card .app-visual-cta,
body.km-fullwidth .app-card .app-visual-cta strong { color: #FFFFFF !important; }

/* Notify banner - NHS notification banner box colours, pinned so
 * Astra and LiteSpeed-combined stylesheets can't repaint them */
body.km-fullwidth .notify-box__title { color: #FFFFFF !important; }
body.km-fullwidth .notify-box__content,
body.km-fullwidth .notify-box__heading { color: #212b32 !important; }
body.km-fullwidth .notify-box__heading a { color: #005EB8 !important; }

/* Global alert banner — white text on dark blue */
body.km-fullwidth .global-alert,
body.km-fullwidth .global-alert * { color: #FFFFFF !important; }

/* Footer -- white on NHS Blue. v1.0.20: replaced the universal `*` selector
 * with explicit child targets so the CQC widget (which injects its own purple
 * logo, dark text and cream background) renders correctly. The old rule was
 * forcing CQC's "CQC overall rating" label and date to white-on-cream which
 * made them invisible. Same shape of fix as the v1.0.16 .ot-card carve-out:
 * narrow your !important by ancestor selector, don't blanket the universe.
 *
 * The widget's iframe-style HTML injection happens after page load, so any
 * rule that doesn't explicitly include `.cqc-widget *` won't touch it. */
/* NHS footer scheme (Service Manual footer component): pale grey
 * panel, 4px brand-blue top border, dark-blue underlined links. Pins
 * kept so Astra and LiteSpeed-combined stylesheets can't repaint. */
body.km-fullwidth .site-footer { background: #f0f4f5; border-top: 4px solid #005EB8; color: #212b32 !important; }
body.km-fullwidth .site-footer .container > .footer-grid,
body.km-fullwidth .site-footer .footer-grid *,
body.km-fullwidth .site-footer .footer-bottom,
body.km-fullwidth .site-footer .footer-bottom * { color: #212b32 !important; }
body.km-fullwidth .site-footer .footer-bottom p,
body.km-fullwidth .site-footer .footer-ods { color: #4c6272 !important; }
    body.km-fullwidth .site-footer .footer-credit { margin-top: 10px; font-size: 14px; }
body.km-fullwidth .site-footer h2 { color: #212b32 !important; }
body.km-fullwidth .site-footer .footer-col a,
body.km-fullwidth .site-footer .footer-bottom a,
body.km-fullwidth .site-footer .footer-links a { color: #003087 !important; text-decoration: underline; }
body.km-fullwidth .site-footer .footer-col a:hover,
body.km-fullwidth .site-footer .footer-col a:focus,
body.km-fullwidth .site-footer .footer-links a:hover,
body.km-fullwidth .site-footer .footer-links a:focus { color: #005EB8 !important; }
/* Footer brand row: compliance pills only. The header carries both
 * logos and the nhs.uk footer pattern runs logo-free. */
body.km-fullwidth .site-footer .footer-brand-strap,
body.km-fullwidth .site-footer .footer-brand-rating,
body.km-fullwidth .site-footer .footer-brand-rating * { color: #212b32 !important; }
body.km-fullwidth .site-footer .footer-rating-pill svg { color: #336d00 !important; }
body.km-fullwidth .site-footer .footer-rating-link {
    color: #003087 !important; text-decoration: underline;
}

/* Layer 3d: Astra nav-menu bullets — wp_nav_menu outputs <li> even when
 * items_wrap removes the wrapper <ul>. Astra adds list-style and dot
 * separators. Force them off across our navs. */
body.km-fullwidth .main-nav,
body.km-fullwidth .main-nav ul,
body.km-fullwidth .main-nav li,
body.km-fullwidth .main-nav .menu-item {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.km-fullwidth .main-nav li::before,
body.km-fullwidth .main-nav li::after,
body.km-fullwidth .main-nav .menu-item::before,
body.km-fullwidth .main-nav .menu-item::after {
    content: none !important;
    display: none !important;
}
body.km-fullwidth .main-nav li { display: inline-flex !important; align-items: center; }

/* Same treatment for footer <ul> lists */
body.km-fullwidth .footer-col ul,
body.km-fullwidth .footer-col li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.km-fullwidth .footer-col li::before,
body.km-fullwidth .footer-col li::after { content: none !important; }
body.km-fullwidth .footer-col li { padding: 4px 0 !important; }

/* Layer 3e: SVG icons inherit currentColor by default but Astra's body
 * text colour cascades through. Pin currentColor where icons should
 * match their parent's intended colour. */
body.km-fullwidth .header-search svg,
body.km-fullwidth .lang-btn svg,
body.km-fullwidth .mobile-toggle svg,
body.km-fullwidth .header-logo svg,
body.km-fullwidth .km-urgent-strip svg,
body.km-fullwidth .ot-card h2 svg { stroke: currentColor; fill: none; }

/* Layer 3f: Astra link-underline-on-hover conflicts with our subtle
 * nav style. Pin underline off for main-nav specifically. */
body.km-fullwidth .main-nav a,
body.km-fullwidth .main-nav a:hover,
body.km-fullwidth .main-nav a:focus { text-decoration: none !important; }

/* Layer 3g: Belt-and-braces footer visibility. The footer.php HTML
 * lives at the end of every template. These rules guarantee it can't
 * be hidden by a caching layer or plugin overlay. */
body.km-fullwidth footer.site-footer,
body.km-fullwidth .site-footer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    background: #f0f4f5 !important;
    padding: 36px 0 20px !important;
    margin: 0 !important;
}

/* Layer 3h: Astra's scroll-to-top button can overlap footer links */
body.km-fullwidth .ast-scroll-top-icon { z-index: 2; }

/* Layer 3i: Reduced-motion respect (NHS service manual requirement) */
@media (prefers-reduced-motion: reduce) {
    body.km-fullwidth *,
    body.km-fullwidth *::before,
    body.km-fullwidth *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* And reveal all fade-in content immediately when motion is reduced */
    body.km-fullwidth .fade-in { opacity: 1 !important; animation: none !important; }
}

/* Layer 3j: No-JS / no-IntersectionObserver fallback.
 * If JS fails or fails to run, the fade-in elements would stay invisible
 * forever. A document.documentElement.classList.add('km-js') is set at
 * the top of footer.php JS; if it never runs, .km-js is absent and this
 * rule forces fade-in content visible. */
html:not(.km-js) body.km-fullwidth .fade-in {
    opacity: 1 !important;
    animation: none !important;
}

/* ===================================================================
 * CANONICAL HEADER + FOOTER + GLOBAL UI STYLES
 * Extracted from kiltearn-homepage-v4.html mockup (the latest revision).
 * Single source of truth for header.php + footer.php styling.
 * Per-template <style> blocks no longer carry duplicates of these rules.
 * =================================================================== */

    .sr-only {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0,0,0,0); border: 0;
    }

    /* NHS focus style for ordinary links (nhsuk focused-text): yellow
     * box, black text, thick black underline via box-shadow. The
     * signature nhs.uk keyboard experience. Buttons and components
     * with their own focus-visible rules out-rank this through class
     * specificity, so nothing already styled changes. */
    a:focus-visible {
      background-color: var(--km-focus);
      box-shadow: 0 -2px var(--km-focus), 0 4px #212b32;
      color: #212b32;
      outline: 4px solid transparent;
      text-decoration: none;
    }

    

    /* Skip link */
    .skip-link {
      position: absolute; top: -100px; left: 16px;
      background: var(--km-focus); color: var(--km-black);
      padding: 8px 16px; font-weight: 700; z-index: 9999;
      text-decoration: none;
    }

    .skip-link:focus { top: 4px; }


    /* ====================================================================
     * HEADER - two-row NHS-supplier pattern
     *   Row 1 (.site-header-top): white, NHS+Kiltearn logos, search, CTA
     *   Row 2 (.site-header-nav): full-width NHS blue, primary nav
     *   Mobile (.mobile-drawer): slide-down panel with search, quick tasks,
     *     nav list, phone bar, Online Services link
     * ==================================================================== */

    .nhs-top-bar { background: var(--km-blue); height: 4px; }

    .site-header {
      background: var(--km-white);
      position: sticky; top: 0; z-index: 100;
      border-bottom: 1px solid var(--km-border);
    }

    /* ---- Row 1: white top strip ---- */
    .site-header-top { background: var(--km-white); }
    /* Row padding is 10px. Most of the white space around the logo is
     * inside the logo file rather than here: the padded artwork carries
     * roughly 25% of its height as blank. The .kiltearn-mark height
     * below assumes the trimmed file is in Site Identity. */
    .site-header-top-inner {
      display: flex; align-items: center; justify-content: space-between;
      gap: 24px; padding: 10px 24px; max-width: var(--max-width);
      margin: 0 auto;
    }

    .header-logo {
      display: flex; align-items: center; gap: 16px;
      text-decoration: none; flex-shrink: 0;
    }
    .header-logo:focus { outline: 3px solid var(--km-focus); outline-offset: 4px; background: transparent; }
    .header-logo .nhs-mark { height: 44px; width: auto; }
    .logo-divider { width: 1px; height: 66px; background: var(--km-grey-4); flex-shrink: 0; }
    /* 145px, not 180px. This is NOT a smaller logo: the padded file in
     * Site Identity renders roughly 135px of actual artwork inside its
     * 180px box, so with the trimmed file uploaded the mark appears the
     * same size or slightly larger, and the row loses 55px.
     *
     * The two changes go together. Set this to 145 without uploading
     * the trimmed logo and the artwork really does shrink, to about
     * 109px. */
    .kiltearn-mark { height: 145px; width: auto; }

    .site-header-top-right {
      display: flex; align-items: center;
      flex-shrink: 0;
    }
    .header-top-actions { display: flex; align-items: center; gap: 12px; }

    /* ---- Search pill + autocomplete dropdown ----
     * Kingfisher-style: at rest the search is a small round pill holding
     * just the magnifier. Hovering, focusing, or holding typed text widens
     * it, sliding the input out to the left while the icon stays put (the
     * row is anchored to the right edge). CSS does all the expanding; the
     * only JS is the empty-tap handler in header-search.js for touch. */
    .header-search {
      position: relative;
      display: flex; align-items: center;
      border: 1px solid var(--km-dark-blue); border-radius: 999px;
      overflow: visible; height: 44px;
      background: var(--km-white);
      transition: border-color 0.15s;
    }
    .header-search:focus-within { box-shadow: 0 0 0 1px var(--km-dark-blue); }

    .header-search input[type="search"] {
      border: none; outline: none;
      font-family: var(--font); font-size: 16px;
      padding: 0; width: 0; opacity: 0;
      height: 100%;
      background: transparent; color: var(--km-black);
      -webkit-appearance: none;
      transition: opacity 0.2s ease;
    }
    .header-search:hover input[type="search"],
    .header-search:focus-within input[type="search"],
    .header-search input[type="search"]:not(:placeholder-shown) {
      width: 210px; padding: 0 0 0 16px; opacity: 1;
    }
    @media (prefers-reduced-motion: reduce) {
      .header-search input[type="search"] { transition: none; }
    }
    .header-search input[type="search"]::placeholder { color: var(--km-grey-1); }

    /* Mobile search row: a visible search bar under the header on small
     * screens (NHS.uk pattern), so search never hides inside the menu
     * drawer. Hidden on desktop where the header bar search shows. */
    .mobile-search-row {
      display: none;
      background: var(--km-white);
      border-bottom: 1px solid var(--km-grey-4);
      padding: 10px 18px;
    }
    .mobile-search-form { display: flex; position: relative; max-width: 640px; margin: 0 auto; }
    .mobile-search-form input[type="search"] {
      flex: 1; min-width: 0;
      border: 2px solid var(--km-grey-1); border-right: 0;
      padding: 8px 12px; font-size: 16px; color: var(--km-black);
      border-radius: 0; -webkit-appearance: none;
    }
    .mobile-search-form input[type="search"]:focus { outline: 4px solid var(--km-focus); outline-offset: 0; }
    .mobile-search-form input[type="search"]::placeholder { color: var(--km-grey-1); }
    .mobile-search-form button {
      background: var(--km-blue); color: var(--km-white);
      border: 2px solid var(--km-blue);
      padding: 8px 18px; font-size: 16px; font-weight: 600;
      cursor: pointer; border-radius: 0;
    }
    .mobile-search-form button:focus { background: var(--km-focus); color: var(--km-black); border-color: var(--km-black); outline: none; }
    .mobile-search-form .header-search-suggest { top: calc(100% + 2px); left: 0; right: 0; }
    .header-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

    .header-search button {
      background: transparent; border: none; color: var(--km-dark-blue);
      width: 42px; height: 42px; padding: 0; border-radius: 999px;
      flex-shrink: 0; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.15s;
    }
    .header-search button:hover { background: var(--km-grey-5); }
    .header-search button:focus { background: var(--km-focus); color: var(--km-black); outline: none; }
    .header-search button svg { width: 20px; height: 20px; }

    /* Autocomplete dropdown - drops down from the search input */
    .header-search-suggest {
      list-style: none; margin: 0; padding: 8px 0;
      position: absolute; top: calc(100% + 4px); left: 0; right: 0;
      background: var(--km-white);
      border: 1px solid var(--km-grey-4);
      border-radius: 4px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
      z-index: 150;
      max-height: 420px; overflow-y: auto;
      animation: kmSearchSuggestIn 0.12s ease-out;
    }
    @keyframes kmSearchSuggestIn {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .header-search-suggest { animation: none; }
    }
    .header-search-suggest[hidden] { display: none; }
    .header-search-suggest li {
      padding: 0;
      border-bottom: 1px solid var(--km-grey-5);
    }
    .header-search-suggest li:last-child { border-bottom: none; }
    .header-search-suggest li a,
    .header-search-suggest li[role="option"] {
      display: flex; align-items: center; gap: 10px;
      padding: 11px 14px;
      text-decoration: none; color: var(--km-black);
      font-size: 15px; line-height: 1.4;
      cursor: pointer;
    }
    .header-search-suggest li[aria-selected="true"],
    .header-search-suggest li:hover {
      background: var(--km-grey-5);
    }
    .header-search-suggest li mark {
      background: transparent; color: var(--km-blue); font-weight: 700;
    }
    .header-search-suggest-tag {
      flex-shrink: 0;
      display: inline-block;
      font-size: 14px; font-weight: 700;
      color: var(--km-grey-1);
      text-transform: uppercase; letter-spacing: 0.4px;
      background: var(--km-grey-5);
      padding: 2px 7px; border-radius: 3px;
      min-width: 44px; text-align: center;
    }
    .header-search-suggest li:hover .header-search-suggest-tag,
    .header-search-suggest li[aria-selected="true"] .header-search-suggest-tag {
      background: var(--km-white);
    }
    .header-search-suggest-title { flex: 1; min-width: 0; }
    .header-search-suggest-empty {
      padding: 14px; color: var(--km-grey-1);
      font-size: 14px; text-align: left;
      display: block !important;
      line-height: 1.5;
    }
    .header-search-suggest-empty a {
      color: var(--km-blue); font-weight: 700;
      text-decoration: underline;
    }
    .header-search-suggest-more {
      background: var(--km-grey-5);
      border-top: 1px solid var(--km-grey-4) !important;
      border-bottom: none !important;
    }
    .header-search-suggest-more a {
      color: var(--km-blue); font-weight: 700;
      font-size: 14px;
      justify-content: flex-end;
      text-decoration: none;
    }
    .header-search-suggest-more a:hover { text-decoration: underline; }

    /* ---- Online Services CTA in the top strip ----
     * Solid NHS primary button in the Kiltearn brand green with a white
     * label and a white circle-arrow icon, plus the standard NHS 4px base
     * shadow that drops away on press. No border: the fill is the button.
     * Astra's global link colour would otherwise bleed through and tint the
     * label, so the colour is forced explicitly on every state. */
    .header-cta {
      display: inline-flex; align-items: center; gap: 8px;
      position: relative;
      padding: 10px 16px;
      background: var(--km-green); color: var(--km-white) !important;
      text-decoration: none; border: none; border-radius: 4px;
      box-shadow: 0 4px 0 var(--km-green-dark);
      font-size: 16px; font-weight: 700;
      transition: background 0.15s;
      overflow-wrap: anywhere;
    }
    .header-cta:visited { color: var(--km-white) !important; }
    .header-cta:hover { background: #2a5b00; color: var(--km-white) !important; } /* ccm-chosen: header CTA hover, a step darker than the brand green */
    .header-cta:active { top: 4px; box-shadow: none; color: var(--km-white) !important; }
    .header-cta:focus-visible { outline: 3px solid var(--km-focus); outline-offset: 2px; }
    .header-cta-icon { display: inline-flex; align-items: center; flex-shrink: 0; }
    .header-cta svg { display: block; color: var(--km-white); fill: var(--km-white); width: 22px; height: 22px; }
    .header-cta span { color: var(--km-white) !important; }

    /* ---- Translate button in the top strip ----
     * Sits beside the Online Services CTA. Borderless: just the flag and
     * caret, with a light grey wash on hover, so it stays quiet next to the
     * green CTA and the search box. The caret signals the dropdown. Padding
     * keeps a comfortable tap target. Triggers the .translate-flyout panel. */
    .header-translate {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 10px 12px;
      background: transparent;
      color: var(--km-grey-1) !important;
      border: none;
      border-radius: 4px;
      font-family: var(--font); font-size: 14px; font-weight: 700;
      cursor: pointer; line-height: 1.2; overflow-wrap: anywhere;
      transition: background 0.15s;
    }
    .header-translate:hover {
      background: var(--km-grey-5);
    }
    .header-translate:focus-visible {
      outline: 3px solid var(--km-focus); outline-offset: 2px;
    }
    .header-translate-flag {
      width: 22px; height: 16px; display: block;
      border-radius: 2px; flex-shrink: 0;
      box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
    }
    .header-translate-label { font-weight: 700; }
    .header-translate-caret { transition: transform 0.15s; flex-shrink: 0; }
    .header-translate[aria-expanded="true"] .header-translate-caret { transform: rotate(180deg); }

    /* Mobile drawer Translate button - sits below Online Services CTA */
    .mobile-drawer-translate {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%; margin-top: 12px;
      padding: 12px 16px;
      background: var(--km-white);
      color: var(--km-blue) !important;
      border: 2px solid var(--km-blue);
      border-radius: 6px;
      font-family: var(--font); font-size: 15px; font-weight: 700;
      cursor: pointer;
    }
    .mobile-drawer-translate:hover {
      background: var(--km-blue); color: var(--km-white) !important;
    }
    .mobile-drawer-translate:focus-visible {
      outline: 3px solid var(--km-focus); outline-offset: 2px;
    }
    .mobile-drawer-translate svg:first-child { flex-shrink: 0; }

    /* ---- Translate flyout (modal-style language picker) ---- */
    .translate-flyout {
      position: fixed; inset: 0;
      background: rgba(0, 30, 80, 0.55);
      z-index: 1000;
      overflow-y: auto;
      padding: 40px 20px;
    }
    .translate-flyout[hidden] { display: none; }
    body.km-translate-open { overflow: hidden; }
    .translate-flyout-inner {
      max-width: 920px; margin: 0 auto;
      background: var(--km-white);
      border-radius: 8px;
      padding: 28px 32px 32px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      animation: km-flyout-in 0.22s ease-out;
    }
    @keyframes km-flyout-in {
      from { opacity: 0; transform: translateY(-12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .translate-flyout-head {
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px; margin-bottom: 8px;
    }
    .translate-flyout-head h3 {
      font-size: 22px; font-weight: 700; margin: 0;
      color: var(--km-black);
    }
    .translate-flyout-close {
      background: transparent; border: 2px solid transparent;
      color: var(--km-grey-1); font-size: 28px; line-height: 1;
      cursor: pointer; padding: 4px 12px; border-radius: 4px;
      font-family: var(--font); font-weight: 400;
    }
    .translate-flyout-close:hover { background: var(--km-grey-5); color: var(--km-black); }
    .translate-flyout-close:focus-visible {
      outline: 3px solid var(--km-focus); outline-offset: 2px;
      background: var(--km-focus); color: var(--km-black);
    }
    .translate-flyout-note {
      font-size: 15px; line-height: 1.5; color: var(--km-black);
      margin: 0 0 20px; padding: 12px 14px;
      background: var(--km-yellow-tint); border-radius: 4px;
      border-left: 3px solid var(--km-warm-yellow);
    }
    .translate-flyout-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 6px;
    }
    .translate-tile {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 12px;
      background: var(--km-white);
      border: 1px solid var(--km-border);
      border-radius: 4px;
      cursor: pointer; text-align: left;
      font-family: var(--font); font-size: 14px; font-weight: 600;
      color: var(--km-black);
      transition: background 0.15s, border-color 0.15s;
    }
    .translate-tile:hover {
      background: var(--km-blue-tint); border-color: var(--km-blue);
    }
    .translate-tile:focus-visible {
      outline: 3px solid var(--km-focus); outline-offset: 1px;
    }
    .translate-tile--active {
      background: var(--km-blue); color: var(--km-white);
      border-color: var(--km-blue);
    }
    .translate-tile--active:hover { background: var(--km-dark-blue); color: var(--km-white); }
    .translate-tile-flag {
      width: 24px; height: 18px; display: block;
      border-radius: 2px; flex-shrink: 0;
      box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
      object-fit: cover;
    }
    .translate-tile-label {
      font-size: 14px; line-height: 1.3;
      overflow: hidden; text-overflow: ellipsis;
    }

    /* Hide Google Translate's banner that appears at top of page once
     * translation is active - we have our own header chrome. */
    body { top: 0 !important; }
    .skiptranslate, .goog-te-banner-frame { display: none !important; }

    @media (max-width: 768px) {
      .site-header-top .header-translate { display: none; }
      .translate-flyout { padding: 20px 12px; }
      .translate-flyout-inner { padding: 22px 18px 24px; }
      .translate-flyout-head h3 { font-size: 19px; }
      .translate-flyout-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    }

    /* ---- Row 2: NHS blue full-width nav (desktop) ---- */
    .site-header-nav {
      background: var(--km-blue);
      border-top: 1px solid rgba(255,255,255,0.12);
    }
    .site-header-nav .container { padding: 0 24px; }
    .primary-nav {
      list-style: none; margin: 0; padding: 0;
      display: flex; align-items: stretch;
      flex-wrap: wrap;
    }
    .primary-nav > li { display: flex; }
    .primary-nav > li > a {
      display: inline-flex; align-items: center;
      color: var(--km-white);
      padding: 16px 20px;
      text-decoration: none;
      font-size: 16px; font-weight: 400;
      border-bottom: 4px solid transparent;
      transition: background 0.15s, border-color 0.15s;
    }
    .primary-nav > li > a:hover,
    .primary-nav > li > a[aria-current="page"] {
      background: var(--km-dark-blue);
      border-bottom-color: var(--km-white);
      color: var(--km-white);
    }
    .primary-nav > li > a:focus {
      background: var(--km-focus); color: var(--km-black);
      outline: none; border-bottom-color: var(--km-black);
    }

    /* ---- Mobile toggle (hidden on desktop) ---- */
    .mobile-toggle {
      display: none;
      align-items: center; gap: 8px;
      background: var(--km-blue); border: none; color: var(--km-white);
      padding: 10px 16px; border-radius: 4px;
      cursor: pointer; font-family: var(--font);
      font-size: 15px; font-weight: 700;
      transition: background 0.15s;
    }
    .mobile-toggle:hover { background: var(--km-dark-blue); }
    .mobile-toggle:focus { outline: 3px solid var(--km-focus); outline-offset: 2px; }
    .mobile-toggle svg { display: block; }
    .mobile-toggle[aria-expanded="true"] .mobile-toggle-icon--open { display: none; }
    .mobile-toggle[aria-expanded="true"] .mobile-toggle-icon--close { display: inline-flex; }

    /* ---- Mobile drawer (hidden on desktop) ---- */
    .mobile-drawer {
      display: none;
      background: var(--km-white);
      border-top: 1px solid var(--km-grey-4);
    }
    .mobile-drawer[hidden] { display: none; }
    .mobile-drawer.is-open { display: block; }
    .mobile-drawer-inner {
      padding: 16px 20px 24px;
      max-width: var(--max-width); margin: 0 auto;
    }

    /* Mobile search reuses .header-search but full-width */
    .mobile-drawer-search {
      position: relative;
      display: flex; align-items: stretch;
      border: 2px solid var(--km-grey-1); border-radius: 4px;
      height: 48px; margin-bottom: 18px;
      background: var(--km-white);
    }
    .mobile-drawer-search:focus-within { border-color: var(--km-dark-blue); box-shadow: 0 0 0 1px var(--km-dark-blue); }
    .mobile-drawer-search input[type="search"] {
      border: none; outline: none;
      font-family: var(--font); font-size: 16px;
      padding: 0 14px; flex: 1; height: 100%;
      background: transparent; color: var(--km-black);
      -webkit-appearance: none;
      min-width: 0;
    }
    .mobile-drawer-search input[type="search"]::placeholder { color: var(--km-grey-1); }
    .mobile-drawer-search button {
      background: var(--km-blue); border: none; color: var(--km-white);
      padding: 0 18px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    .mobile-drawer-search button:focus { background: var(--km-focus); color: var(--km-black); outline: none; }
    .mobile-drawer-search .header-search-suggest { top: calc(100% + 4px); }

    /* Quick task tiles - 2x2 grid */
    .mobile-drawer-tasks {
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
      margin-bottom: 20px;
    }
    .mobile-drawer-task {
      display: flex; flex-direction: column; align-items: flex-start;
      gap: 8px; padding: 14px 14px;
      background: var(--km-grey-5);
      border: 1px solid var(--km-grey-4);
      border-radius: 6px;
      text-decoration: none;
      color: var(--km-black);
      font-size: 15px; font-weight: 700;
      transition: background 0.15s, border-color 0.15s;
      min-height: 80px;
    }
    .mobile-drawer-task:hover { background: var(--km-white); border-color: var(--km-blue); }
    .mobile-drawer-task:focus { outline: 3px solid var(--km-focus); outline-offset: 1px; }
    .mobile-drawer-task-icon {
      display: inline-flex; color: var(--km-blue);
    }

    /* Nav list - large tap targets */
    .mobile-drawer-nav ul {
      list-style: none; margin: 0; padding: 0;
      border-top: 1px solid var(--km-grey-4);
    }
    .mobile-drawer-nav li {
      border-bottom: 1px solid var(--km-grey-4);
    }
    .mobile-drawer-nav a {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 4px;
      text-decoration: none;
      color: var(--km-black);
      font-size: 17px; font-weight: 400;
      min-height: 52px;
      transition: background 0.15s;
    }
    .mobile-drawer-nav a:hover { background: var(--km-grey-5); padding-left: 12px; }
    .mobile-drawer-nav a:focus { outline: 3px solid var(--km-focus); outline-offset: -3px; }
    .mobile-drawer-nav-chevron {
      display: inline-flex; color: var(--km-grey-1);
    }

    /* Drawer footer - phone bar + CTA */
    .mobile-drawer-footer {
      margin-top: 20px;
      display: flex; flex-direction: column; gap: 12px;
    }
    .mobile-drawer-phone {
      display: flex; align-items: center; gap: 14px;
      padding: 14px 16px;
      background: var(--km-grey-5);
      border-radius: 6px;
      text-decoration: none;
      color: var(--km-black);
    }
    .mobile-drawer-phone:focus { outline: 3px solid var(--km-focus); }
    .mobile-drawer-phone-icon {
      display: inline-flex; color: var(--km-blue); flex-shrink: 0;
    }
    .mobile-drawer-phone-label {
      display: flex; flex-direction: column; line-height: 1.2;
    }
    .mobile-drawer-phone-sub {
      font-size: 14px; color: var(--km-grey-1);
    }
    .mobile-drawer-phone strong {
      font-size: 19px; color: var(--km-blue);
    }
    .mobile-drawer-cta {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      padding: 14px 16px;
      background: var(--km-green); color: var(--km-white) !important;
      text-decoration: none; border-radius: 6px;
      font-size: 16px; font-weight: 700;
    }
    .mobile-drawer-cta:hover,
    .mobile-drawer-cta:visited { background: var(--km-green-dark); color: var(--km-white) !important; }
    .mobile-drawer-cta:focus-visible { outline: 3px solid var(--km-focus); outline-offset: 2px; }
    .mobile-drawer-cta svg { color: var(--km-white) !important; stroke: var(--km-white); }

    /* Body scroll lock when drawer open */
    /* iOS Safari ignores overflow:hidden on body, so the drawer lock
     * is position:fixed with the scroll offset saved by JS into an
     * inline top value and restored on close. */
    body.km-drawer-open {
      position: fixed; overflow: hidden;
      width: 100%; left: 0; right: 0;
    }


    /* NHS notification banner (Service Manual v10, August 2025).
     * Content-width box with a blue frame and an Important header bar,
     * replacing the old slim full-bleed yellow strip: its 14px text sat
     * at the site's minimum size and was easy to skim straight past,
     * and NHS research found worded headings beat exclamation icons. */
    .notify-banner { padding: 20px 0 4px; }
    .notify-box { border: 4px solid var(--km-blue); background: var(--km-white); }
    .notify-box__header { background: var(--km-blue); padding: 8px 20px; }
    .notify-box__title { color: var(--km-white); font-size: 18px; font-weight: 700; margin: 0; line-height: 1.4; }
    .notify-box__content { padding: 16px 20px; }
    .notify-box__heading { font-weight: 700; font-size: 17px; line-height: 1.5; margin: 0; color: var(--km-black); }
    .notify-box__heading a { color: var(--km-link); }
    @media (min-width: 641px) { .notify-box__heading { font-size: 19px; } }

    /* NHS warning callout (Service Manual warning card variant), ported
     * from nhsuk-frontend v10: pale yellow #fff9c4 panel, #ffeb3b label
     * tab and border, NHS black text throughout. For very important or
     * time-critical content patients must not miss. Pair the label with
     * an .sr-only "Important:" prefix for screen readers. */
    .km-warning-callout {
      background: var(--km-yellow-pale); border: 1px solid #ffeb3b;
      padding: 0 24px 20px; margin: 0 0 40px;
    }
    .km-warning-callout__label {
      background: #ffeb3b; color: var(--km-black);
      display: inline-block; position: relative; left: -25px;
      margin: 0 0 8px; padding: 8px 24px;
      font-size: 18px; font-weight: 700; line-height: 1.4;
    }
    .km-warning-callout p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--km-black); }
    .km-warning-callout p:last-child { margin-bottom: 0; }
    @media (min-width: 641px) {
      .km-warning-callout__label { font-size: 20px; }
      .km-warning-callout p { font-size: 17px; }
    }

    /* NHS inset text: 8px brand-blue left border, for content that
     * needs to stand out without warning colouring. */
    .km-inset-text {
      border-left: 8px solid var(--km-blue);
      padding: 16px; margin: 24px 0;
    }
    .km-inset-text > :first-child { margin-top: 0; }
    .km-inset-text > :last-child { margin-bottom: 0; }
    @media (min-width: 641px) { .km-inset-text { padding: 20px 24px; margin: 32px 0; } }

    /* NHS hero with card (Service Manual hero component, ported from
     * nhsuk-frontend): solid brand-blue card hanging below the image
     * with the NHS arrow tail, subtle darkening overlay on the photo.
     * Converts the page-hero and km-page-hero families. Pinned Layer-3
     * style with !important because each template still carries its
     * old hero CSS inline, which these rules must out-rank; a later
     * cleanup pass can excise those dead blocks. */
    body.km-fullwidth .page-hero,
    body.km-fullwidth .km-page-hero {
      position: relative !important;
      overflow: visible !important;
      min-height: 200px !important;
      margin-bottom: 114px !important;
      background: var(--km-blue) !important;
    }
    body.km-fullwidth .page-hero-img,
    body.km-fullwidth .km-page-hero-img {
      position: absolute !important; inset: 0 !important;
      background-size: cover !important;
      min-height: 0 !important; height: auto !important;
    }
    body.km-fullwidth .page-hero-img::after,
    body.km-fullwidth .km-page-hero-img::after {
      content: '' !important; position: absolute !important; inset: 0 !important;
      background: rgba(0, 47, 92, 0.1) !important;
    }
    body.km-fullwidth .page-hero > .container,
    body.km-fullwidth .km-page-hero > .km-container {
      position: static !important; min-height: 0 !important;
      display: block !important;
      padding-top: 0 !important; padding-bottom: 0 !important;
    }
    body.km-fullwidth .hero-card,
    body.km-fullwidth .km-hero-card {
      box-sizing: border-box;
      position: relative !important; top: 70px !important;
      width: 85% !important; max-width: 35em !important;
      margin: 0 0 24px !important;
      padding: 24px !important;
      background: var(--km-blue) !important;
      color: #FFFFFF !important;
      border: 0 !important; border-radius: 0 !important;
      box-shadow: none !important;
      -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    }
    body.km-fullwidth .hero-card h1,
    body.km-fullwidth .km-hero-card h1 {
      margin: 0 0 12px !important;
      color: #FFFFFF !important;
      font-size: 32px !important; line-height: 1.2 !important; font-weight: 700 !important;
    }
    body.km-fullwidth .hero-card p,
    body.km-fullwidth .km-hero-card p {
      margin: 0 !important; color: #FFFFFF !important;
      font-size: 18px !important; line-height: 1.5 !important; opacity: 1 !important;
    }
    body.km-fullwidth .km-hero-arrow {
      display: block; position: absolute;
      bottom: -10px; left: 32px;
      width: 20px; height: 20px;
      overflow: hidden;
      transform: rotate(45deg);
    }
    body.km-fullwidth .km-hero-arrow::before,
    body.km-fullwidth .km-hero-arrow::after {
      content: ''; display: block; position: absolute; top: 0;
      width: 0; height: 0;
      transform: rotate(45deg);
      border: solid 32px var(--km-blue);
    }
    @media (min-width: 768px) {
      body.km-fullwidth .page-hero,
      body.km-fullwidth .km-page-hero {
        min-height: 320px !important;
        margin-bottom: 92px !important;
      }
      body.km-fullwidth .hero-card,
      body.km-fullwidth .km-hero-card {
        position: absolute !important; top: auto !important; bottom: -48px !important;
        width: auto !important; margin: 0 !important;
        padding: 24px 32px !important;
      }
      body.km-fullwidth .hero-card h1,
      body.km-fullwidth .km-hero-card h1 { font-size: 38px !important; }
      body.km-fullwidth .km-hero-arrow { left: 46px; }
    }
    @media screen and (forced-colors: active) {
      body.km-fullwidth .hero-card,
      body.km-fullwidth .km-hero-card {
        position: relative !important; top: 0 !important; bottom: 0 !important;
        margin: 0 !important; padding: 24px 0 0 !important;
      }
      body.km-fullwidth .km-hero-arrow { display: none; }
    }


    /* Footer - condensed 3-column layout (was 4 cols + trust strip
     * pre-v1.0.114). Brand row tightened, hours collapsed to single
     * line, trust strip merged into the brand row. */
    .site-footer { background: var(--km-grey-5); color: var(--km-black); border-top: 4px solid var(--km-blue); padding: 36px 0 20px; }

    /* Brand strip: logo lockup left, compliance pills right */
    .footer-brand {
      display: flex; align-items: center; justify-content: space-between;
      gap: 24px; flex-wrap: wrap;
      padding-bottom: 14px; margin-bottom: 24px;
      border-bottom: 1px solid var(--km-grey-4);
    }
    .footer-brand-pills {
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    }
    .footer-rating-pill {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--km-white); border: 1px solid var(--km-grey-4);
      padding: 5px 12px; border-radius: 20px; font-size: 14px;
      color: var(--km-black); text-decoration: none;
      transition: background 0.15s;
    }
    .footer-rating-pill:hover { background: var(--km-grey-4); color: var(--km-black); }
    .footer-rating-pill:visited { color: var(--km-black); }
    .footer-rating-pill svg { color: var(--km-green); flex-shrink: 0; }
    .footer-rating-pill strong { color: var(--km-black); font-weight: 700; }
    .footer-rating-pill--static { cursor: default; }

    /* 3-col link grid */
    .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; margin-bottom: 22px; }
    .footer-col h2 { font-size: 18px; font-weight: 700; margin-bottom: 12px; color: var(--km-black); }
    .footer-col p { font-size: 16px; line-height: 1.55; margin-bottom: 10px; }
    .footer-col ul { list-style: none; padding: 0; margin: 0; }
    .footer-col li { margin-bottom: 4px; }
    /* WCAG 2.5.8 - link clickable area sized to 24x24 minimum via
     * display:block + vertical padding. */
    .footer-col a {
        color: var(--km-dark-blue); text-decoration: underline;
        font-size: 16px;
        display: inline-block;
        padding: 4px 0;
        min-height: 24px;
    }
    .footer-col a:hover { color: var(--km-blue); }
    .footer-col a:visited { color: var(--km-dark-blue); }
    .footer-col a:focus { outline: 3px solid var(--km-focus); background: var(--km-focus); color: var(--km-black); opacity: 1; }

    /* Contact column specifics */
    .footer-col--contact .footer-phone a {
      font-size: 18px; font-weight: 700; text-decoration: none;
      display: inline-block; margin: 2px 0;
    }
    .footer-col--contact .footer-phone a:hover { text-decoration: underline; }
    .footer-col--contact .footer-hours-summary {
      margin-top: 8px;
      font-size: 14px; color: var(--km-grey-1); line-height: 1.5;
    }
    .footer-col--contact .footer-hours-summary a {
      display: block; font-size: 14px; margin-top: 4px;
      text-decoration: underline;
    }
    .footer-col--contact .footer-hours-summary a:hover { color: var(--km-blue); }

    /* Footer bottom: copyright + legal links inline */
    .footer-bottom {
      padding-top: 16px;
      border-top: 1px solid var(--km-grey-4);
      display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 14px;
    }
    .footer-bottom p { font-size: 14px; color: var(--km-grey-1); margin: 0; line-height: 1.55; }
    .footer-ods { display: inline-block; color: var(--km-grey-1); font-size: 14px; }
    .footer-links { display: flex; gap: 14px; flex-wrap: wrap; }
    /* WCAG 2.2 SC 2.5.8 Target Size (Minimum) requires 24x24 CSS px on
     * interactive elements. At 13px font-size with no padding the
     * footer links were ~20px tall - too small. Inline-block + padding
     * pushes the click area to 28px tall while keeping the visual
     * weight light. */
    .footer-links a {
        color: var(--km-dark-blue); text-decoration: underline;
        font-size: 14px;
        display: inline-block;
        padding: 6px 0;
        min-height: 24px;
    }
    .footer-links a:hover { color: var(--km-blue); }
    .footer-links a:visited { color: var(--km-dark-blue); }

    @media (max-width: 900px) {
      .footer-brand { gap: 18px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    }
    @media (max-width: 600px) {
      .site-footer { padding: 28px 0 18px; }
      .footer-brand { padding-bottom: 18px; margin-bottom: 20px; gap: 14px; }
      .footer-grid { grid-template-columns: 1fr; gap: 22px; margin-bottom: 18px; }
      .footer-col h2 { margin-bottom: 8px; }
      .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
    }


    /* ====================================================================
     * SERVICE ALERT BAR
     *
     * Fixed to the bottom of the window, sitewide, dismissible. Replaced
     * the in-flow .hp-alert strip on 25 Aug 2026. Sitewide because a
     * homepage-only strip is missed by anyone who arrives on a service
     * page from search, which is most people.
     *
     * z-index sits under the sticky header (100) and the cookie banner
     * so nothing important gets covered. The header is at the top and
     * this is at the bottom, so in practice they never meet.
     *
     * The script pads the body by the bar's measured height, so the
     * footer stays reachable rather than sitting underneath it.
     * ==================================================================== */

    .km-alert-bar {
      position: fixed; left: 0; right: 0; bottom: 0;
      z-index: 90;
      background: #336d00;
      color: var(--km-white);
      /* No white border. It was added in v1.0.281 when this strip sat
       * in flow under the photo hero and the green needed separating
       * from the dark end of the gradient. Fixed over ordinary page
       * content it just reads as a stray white line, and the shadow
       * already lifts the bar off the page. */
      box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.28);
      transform: translateY(100%);
      transition: transform 0.35s ease;
      /* Safety net against someone pasting an essay into the field. A
       * long notice scrolls inside the bar rather than taking over the
       * phone screen. */
      max-height: 40vh;
      overflow-y: auto;
    }
    .km-alert-bar.is-in { transform: none; }
    .km-alert-bar[hidden] { display: none; }
    /* One line on a desktop. The message truncates rather than wrapping
     * and the link sits outside it as its own flex child, so the way to
     * the full advice stays visible whatever the text length. Below
     * 900px it wraps instead: a phone has the vertical room and not the
     * horizontal. */
    /* Two classes deliberately. This element also carries .container, and
     * a later .container { padding: 0 24px } at equal specificity was winning
     * the cascade, so the bar rendered with no vertical padding at all.
     * Measured on the live site before this change: 0px top and bottom. */
    .km-alert-bar .km-alert-bar__inner {
      display: flex; align-items: center; gap: 12px;
      /* Vertical only. The horizontal gutter belongs to body.km-fullwidth
       * .container, which is (0,2,1) and outranks this rule, so writing a
       * horizontal value here would read as intent and do nothing. */
      padding-top: 14px; padding-bottom: 14px;
    }
    .km-alert-bar__icon {
      width: 22px; height: 22px; flex-shrink: 0;
      fill: var(--km-white);
    }
    .km-alert-bar__body {
      flex: 1 1 auto; min-width: 0; margin: 0;
      font-size: 16px; line-height: 1.45;
      color: var(--km-white);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .km-alert-bar__label { font-weight: 700; }
    .km-alert-bar__text { color: var(--km-white); }
    .km-alert-bar__link {
      flex-shrink: 0;
      color: var(--km-white); font-weight: 700; font-size: 16px;
      text-decoration: underline; text-underline-offset: 3px;
      white-space: nowrap;
    }
    /* The sitewide a:visited rule would drop this to purple on green,
     * which measures 1.6:1. Pinned, same as every other coloured
     * control on the site. */
    .km-alert-bar__link:hover,
    .km-alert-bar__link:visited { color: var(--km-white); }
    .km-alert-bar__link:focus-visible {
      outline: 3px solid var(--km-focus); outline-offset: 2px;
      color: var(--km-black); background: var(--km-focus);
      text-decoration: none;
    }
    .km-alert-bar__dismiss {
      flex-shrink: 0; width: 40px; height: 40px;
      display: inline-flex; align-items: center; justify-content: center;
      background: rgba(255, 255, 255, 0.12); border: 0; border-radius: 4px;
      cursor: pointer; padding: 0;
    }
    .km-alert-bar__dismiss svg { width: 20px; height: 20px; fill: var(--km-white); }
    .km-alert-bar__dismiss:hover { background: rgba(255, 255, 255, 0.24); }
    .km-alert-bar__dismiss:focus-visible {
      outline: 3px solid var(--km-focus); outline-offset: 2px;
    }

    /* Astra's back-to-top control is fixed to the same corner and ends
     * up half behind the bar. Lift it by the bar's measured height while
     * the bar is up. The height comes from the script, which sets
     * --km-alert-bar-h alongside the body padding. */
    body.km-alert-bar-open .ast-scroll-top,
    body.km-alert-bar-open #ast-scroll-top,
    body.km-alert-bar-open .ast-scroll-top-icon {
      bottom: calc(30px + var(--km-alert-bar-h, 0px));
    }

    /* No transition for anyone who has asked their system for less
     * motion. The bar still appears, it just doesn't slide. */
    @media (prefers-reduced-motion: reduce) {
      .km-alert-bar { transition: none; }
    }

    /* Narrow enough that one line would truncate to nothing useful.
     * Text and link wrap under the icon, dismiss stays top right. */
    @media (max-width: 900px) {
      .km-alert-bar .km-alert-bar__inner { flex-wrap: wrap; align-items: flex-start; padding-top: 16px; padding-bottom: 16px; gap: 8px; }
      .km-alert-bar__icon { margin-top: 2px; }
      /* Wraps, but clamped. Left to grow, a long notice runs to six
       * lines on a phone and the bar eats a quarter of the screen.
       * Three lines plus the link carries the point and gets someone to
       * the full advice. */
      .km-alert-bar__body {
        flex: 1 1 160px;
        white-space: normal; text-overflow: clip;
        font-size: 15px; line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      /* Row one is icon, message, close. The link wraps to row two on
       * its own. Source order puts the link before the close button, so
       * these two swap them rather than letting the close button drop to
       * a third row of its own. */
      .km-alert-bar__link { order: 4; flex: 1 1 100%; white-space: normal; }
      .km-alert-bar__dismiss { order: 3; }
    }

    /* ====================================================================
     * COOKIE CONSENT - NHS-pattern
     *   km-cookie-banner: shown at top of page on first visit, contains
     *     heading, body copy, three actions (accept/reject/choose).
     *   km-cookie-confirmation: post-action strip with hide button,
     *     auto-dismisses after 8s.
     *   km-cookie-settings (rendered on /cookies/): radio-button form.
     * ==================================================================== */

    .km-cookie-banner {
      background: var(--km-white);
      border-bottom: 4px solid var(--km-blue);
      padding: 20px 0 16px;
      color: var(--km-black);
    }
    .km-cookie-banner[hidden] { display: none; }
    .km-cookie-banner__heading {
      font-size: 22px; font-weight: 700;
      color: var(--km-black) !important; margin: 0 0 10px;
      line-height: 1.3;
    }
    .km-cookie-banner p {
      font-size: 16px; line-height: 1.5;
      color: var(--km-black) !important; margin: 0 0 8px;
      max-width: 720px;
    }
    .km-cookie-banner p:last-of-type { margin-bottom: 16px; }
    .km-cookie-banner a {
      color: var(--km-blue) !important; text-decoration: underline;
    }
    .km-cookie-banner a:hover { color: var(--km-dark-blue) !important; }
    .km-cookie-banner__actions {
      display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
    }
    /* Buttons hardened with body-scoped selector + !important so the
     * Astra parent theme's button colour (NHS-blue) can't override the
     * NHS-pattern green. Pre-v1.0.116 the !important alone wasn't
     * enough on some Astra versions whose button rules used `.wp-block-button`
     * or similar 0,2,0 specificity that beat ours at 0,1,0 with
     * !important on both sides. Body-scoped 0,1,1 + !important wins. */
    body .km-cookie-banner__btn {
      background: #336d00 !important;
      color: #FFFFFF !important;
      border: 2px solid #336d00 !important;
      padding: 10px 18px; border-radius: 4px;
      font-family: var(--font); font-size: 15px; font-weight: 700;
      cursor: pointer; line-height: 1.3;
      transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
      text-shadow: none !important;
    }
    body .km-cookie-banner__btn:hover {
      background: #1f4400 !important;
      border-color: #1f4400 !important;
      color: #FFFFFF !important;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }
    body .km-cookie-banner__btn:focus-visible {
      background: #ffeb3b !important;
      color: #212b32 !important;
      border-color: #ffeb3b !important;
      outline: 3px solid #212b32; outline-offset: 2px;
    }
    .km-cookie-banner__link {
      color: var(--km-blue) !important; font-weight: 700; font-size: 15px;
      text-decoration: underline; padding: 10px 4px;
    }
    .km-cookie-banner__link:hover { color: var(--km-dark-blue) !important; }
    .km-cookie-banner__link:focus-visible {
      outline: 3px solid var(--km-focus); outline-offset: 2px;
      background: var(--km-focus); color: var(--km-black) !important;
    }

    /* Confirmation strip after a banner action. Same green family but
     * subtler - thinner band, dismiss button on the right. */
    .km-cookie-confirmation {
      background: var(--km-green-tint-soft);
      border-bottom: 4px solid var(--km-green);
      padding: 14px 0;
    }
    .km-cookie-confirmation[hidden] { display: none; }
    .km-cookie-confirmation__inner {
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px; flex-wrap: wrap;
    }
    .km-cookie-confirmation__message {
      margin: 0; font-size: 15px; line-height: 1.5;
      color: var(--km-black); flex: 1; min-width: 240px;
    }
    .km-cookie-confirmation__hide {
      background: transparent; border: 2px solid transparent;
      color: var(--km-blue); font-family: var(--font);
      font-size: 15px; font-weight: 700;
      text-decoration: underline; cursor: pointer;
      padding: 8px 10px; border-radius: 4px;
    }
    .km-cookie-confirmation__hide:hover { color: var(--km-dark-blue); }
    .km-cookie-confirmation__hide:focus-visible {
      outline: 3px solid var(--km-focus); outline-offset: 2px;
      background: var(--km-focus); color: var(--km-black);
    }

    /* Settings page form (rendered inside template-cookies.php). */
    .km-cookie-settings {
      background: var(--km-white);
      border: 1px solid var(--km-border);
      border-top: 4px solid var(--km-blue);
      padding: 24px 28px; border-radius: 6px;
      margin-bottom: 28px;
    }
    .km-cookie-settings h2 {
      font-size: 22px; font-weight: 700;
      color: var(--km-black); margin: 0 0 8px;
    }
    .km-cookie-settings__intro {
      font-size: 15px; line-height: 1.6;
      color: var(--km-grey-1); margin: 0 0 20px;
    }
    .km-cookie-settings__category {
      padding: 16px 0; border-top: 1px solid var(--km-border);
    }
    .km-cookie-settings__category:first-of-type { border-top: none; padding-top: 0; }
    .km-cookie-settings__category h3 {
      font-size: 17px; font-weight: 700; margin: 0 0 6px;
      color: var(--km-black);
    }
    .km-cookie-settings__category p {
      font-size: 15px; line-height: 1.6;
      color: var(--km-grey-1); margin: 0 0 12px;
    }
    .km-cookie-settings__radios {
      display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
    }
    .km-cookie-settings__radio {
      display: flex; align-items: center; gap: 8px;
      font-size: 15px; cursor: pointer;
      padding: 6px 10px; border-radius: 4px;
    }
    .km-cookie-settings__radio input[type="radio"] {
      width: 20px; height: 20px;
      accent-color: var(--km-blue);
      cursor: pointer;
    }
    .km-cookie-settings__locked {
      font-size: 14px; color: var(--km-grey-1);
      font-style: italic;
    }
    .km-cookie-settings__save {
      margin-top: 20px;
      background: var(--km-green); color: var(--km-white) !important;
      border: 2px solid var(--km-green);
      padding: 12px 24px; border-radius: 4px;
      font-family: var(--font); font-size: 16px; font-weight: 700;
      cursor: pointer;
    }
    .km-cookie-settings__save:hover {
      background: var(--km-green-dark);
      border-color: var(--km-green-dark);
    }
    .km-cookie-settings__save:focus-visible {
      background: var(--km-focus); color: var(--km-black) !important;
      border-color: var(--km-focus);
      outline: 3px solid var(--km-black); outline-offset: 2px;
    }
    .km-cookie-saved {
      background: var(--km-green-tint-soft);
      border-left: 4px solid var(--km-green);
      padding: 16px 20px; border-radius: 4px;
      margin-bottom: 20px;
      color: var(--km-black); font-size: 15px;
    }
    .km-cookie-saved[hidden] { display: none; }
    .km-cookie-saved strong { color: var(--km-green-dark); }



/* Header + footer @media queries */
@media (max-width: 1024px) {
      .hero-layout { grid-template-columns: 1fr 340px; gap: 28px; padding: 40px 0; }
      .header-search input[type="search"] { width: 200px; }
      .actions-grid { grid-template-columns: repeat(2, 1fr); }
      .services-grid { grid-template-columns: repeat(2, 1fr); }
      .app-card { grid-template-columns: 1fr; }
      .app-visual { min-height: 260px; }
      .footer-grid { grid-template-columns: repeat(2, 1fr); }
      .lang-select { display: none; }
    }

@media (max-width: 768px) {
    .site-header-top-inner { gap: 12px; padding: 10px 18px; }
    .kiltearn-mark { height: 112px !important; }
    .header-logo .nhs-mark { height: 38px !important; }
    .logo-divider { height: 58px !important; }
    .header-logo { gap: 10px; }

    /* Hide desktop search + CTA + blue nav. Mobile toggle takes their place. */
    .site-header-top .header-search,
    .site-header-top .header-cta,
    .site-header-nav { display: none; }
    .mobile-toggle { display: inline-flex; }
    .mobile-search-row { display: block; }

    /* touch-action: manipulation removes the 300ms tap-delay that
     * older iOS Safari and some Android browsers still apply when
     * they're not certain the tap isn't a double-tap-to-zoom. */
    .mobile-toggle, .header-translate, .mobile-drawer-translate {
      touch-action: manipulation;
      -webkit-tap-highlight-color: rgba(0, 94, 184, 0.2);
    }

    /* Iconify the toggle on very narrow viewports but keep the word "Menu"
     * per NHS guidance until it genuinely runs out of room. */
    .mobile-toggle-label { display: inline; }

      .hero-layout { grid-template-columns: 1fr; gap: 24px; padding: 36px 0 0; min-height: auto; }
      .ot-card { border-radius: var(--radius) var(--radius) 0 0; margin: 0 -24px; padding: 24px; }

      .practice-grid { grid-template-columns: 1fr; }
      .app-visual { display: none; }
      .services-grid { grid-template-columns: 1fr; }
    }

@media (max-width: 480px) {
      .container { padding: 0 16px; }
      .actions-grid { grid-template-columns: 1fr; }
      .hero-actions { flex-direction: column; }
      .hero-actions .btn { justify-content: center; width: 100%; }
      .hero-trust { flex-direction: column; align-items: flex-start; gap: 8px; }
      .stats-row { grid-template-columns: 1fr 1fr; gap: 8px; }
      .stat-box { padding: 14px; }
      .stat-num { font-size: 24px; }
      .footer-grid { grid-template-columns: 1fr; gap: 20px; }
      .footer-bottom { flex-direction: column; text-align: center; }
      .footer-links { justify-content: center; }
      .btn { padding: 11px 20px; font-size: 15px; }
      .quick-actions, .contact-online, .app-section, .services-section, .practice-section { padding: 40px 0; }
      .ot-card { margin: 0 -16px; }
      /* At <=480 the toggle is icon-only - "Menu" word hidden to save room. */
      .mobile-toggle-label { display: none; }
      .mobile-toggle { padding: 10px 12px; }
    }

@media (max-width: 375px) {
      .container { padding: 0 12px; }
      .hero h1 { font-size: 24px; }
      .hero-sub { font-size: 14px; }
      .ot-card { margin: 0 -12px; padding: 20px 16px; }
      .ot-list li { font-size: 14px; }
      .action-card { padding: 20px 16px; }
      .action-card h3 { font-size: 15px; }
      .co-content { padding: 28px 20px; }
      .header-logo .nhs-mark { height: 32px !important; }
      .kiltearn-mark { height: 86px !important; }
      .logo-divider { height: 48px !important; }
      .footer-col h2 { font-size: 16px; }
    }