/* ==========================================================================
   WEBICIOUS GP SURGERY STANDARD THEME: DESIGN SYSTEM  (v1.0.0)
   ==========================================================================
   Layout reference: gp-surgery-website.co.uk ("Standard" template).
   Palette: NHS Identity colour guidelines (england.nhs.uk/nhsidentity).

   HOW THIS FILE WORKS WITH ELEMENTOR
   1. Global Colours / Global Fonts come from the NHS Global Kit
      (Appearance > NHS Global Kit). The values below mirror that kit.
   2. Bespoke components are applied by adding a "wgps-" class in an
      element's Advanced > CSS Classes field. See README.md for the map.
   3. Breakpoints: 1024px (tablet) and 767px (mobile), Elementor defaults.
      If Site Settings > Layout > Breakpoints are customised, update the
      media queries in section 1 and wherever "@media" appears below.
   4. !important is used ONLY where Elementor's default-global widget styles
      would otherwise win a specificity tie (nav, search, dark-context text).
      Each instance is commented.

   CONTENTS
    1. Tokens
    2. Base and typography (H1-H6, body)
    3. Layout
    4. Header, brand and search
    5. Primary navigation
    6. Hero with overlapping panel
    7. Notices (high / medium / low)
    8. Service cards (front-page quick links)
    9. News cards (green outline)
   10. Content boxes, icon lists, opening hours
   11. Buttons
   12. Footer and dark contexts
   13. Post content (prose)
   14. Single post, archive, pagination, forms
   15. Accessibility: focus, skip link, motion, forced colours
   16. Print
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* NHS Identity palette: Level 1 blues */
  --nhs-dark-blue:    #003087;
  --nhs-blue:         #005EB8;
  --nhs-bright-blue:  #0072CE;
  --nhs-light-blue:   #41B6E6;
  --nhs-aqua-blue:    #00A9CE;
  /* Level 2 neutrals */
  --nhs-black:        #231F20;
  --nhs-dark-grey:    #425563;
  --nhs-mid-grey:     #768692;
  --nhs-pale-grey:    #E8EDEE;
  --nhs-white:        #FFFFFF;
  /* Level 3 support greens */
  --nhs-dark-green:   #006747;
  --nhs-green:        #009639;
  --nhs-light-green:  #78BE20;
  --nhs-aqua-green:   #00A499;
  /* Level 4 highlights (use minimally) */
  --nhs-purple:       #330072;
  --nhs-dark-pink:    #7C2855;
  --nhs-pink:         #AE2573;
  --nhs-dark-red:     #8A1538;
  --nhs-red:          #DA291C;   /* Emergency Services Red: high notices only */
  --nhs-orange:       #ED8B00;
  --nhs-warm-yellow:  #FFB81C;
  --nhs-yellow:       #FAE100;   /* nav active marker and focus state */

  /* UI tints (tints of palette colours are permitted by the guidelines) */
  --wgps-border:            #D2DBDE;  /* NHS Pale Grey, one step darker */
  --wgps-notice-high-bg:    #FCEAE8;  /* Emergency Services Red, ~10% */
  --wgps-notice-medium-bg:  #FFF4DC;  /* NHS Warm Yellow, ~15% */
  --wgps-notice-low-bg:     #E6EFF8;  /* NHS Blue, ~10% */
  --wgps-hero-overlay:      linear-gradient(90deg, rgba(0, 48, 135, 0.72), rgba(0, 94, 184, 0.5));

  /* Role tokens: components reference these, not raw palette values */
  --wgps-color-heading:  var(--nhs-dark-blue);
  --wgps-color-text:     var(--nhs-black);
  --wgps-color-muted:    var(--nhs-dark-grey);
  --wgps-color-link:     var(--nhs-blue);
  --wgps-color-brand:    var(--nhs-blue);
  --wgps-color-accent:   var(--nhs-dark-green);
  --wgps-color-surface:  var(--nhs-white);
  --wgps-color-footer:   var(--nhs-dark-blue);
  --wgps-color-focus:    var(--nhs-yellow);

  /* Fonts. Frutiger is registered by functions.php only when the licensed
     files exist; until then the stack falls through to Segoe UI / Arial. */
  --wgps-font-body:    'Frutiger', 'Frutiger LT W01 55 Roman', 'Segoe UI', Arial, sans-serif;
  --wgps-font-heading: 'Frutiger', 'Frutiger LT W01 65 Bold', 'Segoe UI', Arial, sans-serif;

  /* Type scale: DESKTOP (>1024px). H6 never drops below body size: small
     bold headings below body size read as errors to low-vision users. */
  --wgps-size-h1:     40px;
  --wgps-size-h2:     30px;
  --wgps-size-h3:     24px;
  --wgps-size-h4:     20px;
  --wgps-size-h5:     18px;
  --wgps-size-h6:     17px;
  --wgps-size-body:   17px;
  --wgps-size-small:  15px;   /* floor for any readable text */
  --wgps-size-nav:    17px;
  --wgps-size-phone:  24px;
  --wgps-size-brand:  26px;

  /* Line height: generous body leading for older / low-vision readers;
     headings tighten as they grow. */
  --wgps-leading-body: 1.65;
  --wgps-leading-h1:   1.2;
  --wgps-leading-h2:   1.25;
  --wgps-leading-h3:   1.3;
  --wgps-leading-h4:   1.35;
  --wgps-leading-h5:   1.4;
  --wgps-leading-h6:   1.45;

  /* Spacing: 8px base */
  --wgps-space-1:  8px;
  --wgps-space-2:  16px;
  --wgps-space-3:  24px;
  --wgps-space-4:  32px;
  --wgps-space-5:  40px;
  --wgps-space-6:  48px;
  --wgps-space-8:  64px;

  /* Paragraph / block rhythm inside post content (relative to text size) */
  --wgps-content-gap: 1.2em;

  /* Layout */
  --wgps-container-max:  1140px;  /* matches kit container_width */
  --wgps-gutter:         24px;
  --wgps-section-space:  var(--wgps-space-8);
  --wgps-grid-gap:       var(--wgps-space-4);
  --wgps-radius-sm:      4px;
  --wgps-radius-news:    6px;
  --wgps-card-pad:       24px;
  --wgps-hero-min-h:     240px;
  --wgps-hero-overlap:   120px;   /* how far the blue panel rises into the hero */
  --wgps-tap-min:        48px;    /* minimum touch target */
}

/* Tablet (<=1024px) */
@media (max-width: 1024px) {
  :root {
    --wgps-size-h1:    34px;
    --wgps-size-h2:    26px;
    --wgps-size-h3:    21px;
    --wgps-size-h4:    19px;
    --wgps-size-h5:    17px;
    --wgps-size-h6:    16.5px;
    --wgps-size-body:  16.5px;
    --wgps-size-nav:   16px;
    --wgps-size-phone: 22px;
    --wgps-size-brand: 24px;
    --wgps-section-space: var(--wgps-space-6);
    --wgps-grid-gap:   var(--wgps-space-3);
    --wgps-hero-min-h: 200px;
    --wgps-hero-overlap: 80px;
  }
}

/* Mobile (<=767px) */
@media (max-width: 767px) {
  :root {
    --wgps-size-h1:    28px;
    --wgps-size-h2:    23px;
    --wgps-size-h3:    20px;
    --wgps-size-h4:    18px;
    --wgps-size-h5:    17px;
    --wgps-size-h6:    16px;
    --wgps-size-body:  16px;    /* never below 16px */
    --wgps-size-small: 15px;
    --wgps-size-phone: 20px;
    --wgps-size-brand: 21px;
    --wgps-gutter:     16px;
    --wgps-section-space: var(--wgps-space-5);
    --wgps-grid-gap:   var(--wgps-space-3);
    --wgps-card-pad:   20px;
    --wgps-hero-min-h: 160px;
    --wgps-hero-overlap: 48px;
  }
}


/* --------------------------------------------------------------------------
   2. BASE AND TYPOGRAPHY
   -------------------------------------------------------------------------- */

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

body {
  font-family: var(--wgps-font-body);
  font-size: var(--wgps-size-body);
  line-height: var(--wgps-leading-body);
  color: var(--wgps-color-text);
  background: var(--wgps-color-surface);
  overflow-wrap: break-word;   /* long URLs/emails never force sideways scroll */
  -webkit-font-smoothing: antialiased;
}

/* Headings. Each sets --wgps-lh so Elementor's Heading widget (which forces
   line-height:1 on .elementor-heading-title) can pick the right value up. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--wgps-font-heading);
  font-weight: 700;
  color: var(--wgps-color-heading);
  margin: 0 0 0.5em;
  text-wrap: balance;          /* avoids single-word last lines on headings */
}
h1 { --wgps-lh: var(--wgps-leading-h1); font-size: var(--wgps-size-h1); line-height: var(--wgps-lh); letter-spacing: -0.005em; }
h2 { --wgps-lh: var(--wgps-leading-h2); font-size: var(--wgps-size-h2); line-height: var(--wgps-lh); }
h3 { --wgps-lh: var(--wgps-leading-h3); font-size: var(--wgps-size-h3); line-height: var(--wgps-lh); }
h4 { --wgps-lh: var(--wgps-leading-h4); font-size: var(--wgps-size-h4); line-height: var(--wgps-lh); }
h5 { --wgps-lh: var(--wgps-leading-h5); font-size: var(--wgps-size-h5); line-height: var(--wgps-lh); }
h6 { --wgps-lh: var(--wgps-leading-h6); font-size: var(--wgps-size-h6); line-height: var(--wgps-lh); color: var(--wgps-color-text); }

.elementor-heading-title {
  line-height: var(--wgps-lh, 1.25);
}

/* Utility classes to style any element as a given heading level while
   keeping the correct semantic tag (e.g. an H2 that looks like an H4). */
.wgps-h1 { font-size: var(--wgps-size-h1); line-height: var(--wgps-leading-h1); }
.wgps-h2 { font-size: var(--wgps-size-h2); line-height: var(--wgps-leading-h2); }
.wgps-h3 { font-size: var(--wgps-size-h3); line-height: var(--wgps-leading-h3); }
.wgps-h4 { font-size: var(--wgps-size-h4); line-height: var(--wgps-leading-h4); }

p {
  margin: 0 0 var(--wgps-content-gap);
}

.wgps-lead {
  font-size: calc(var(--wgps-size-body) * 1.18);
  line-height: 1.55;
}
.wgps-small,
small {
  font-size: var(--wgps-size-small);
  line-height: 1.6;
}

a {
  color: var(--wgps-color-link);
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--nhs-dark-blue);
  text-decoration-thickness: 3px;
}

strong, b { font-weight: 700; }

/* Superscript/subscript without disturbing line spacing */
sub, sup { font-size: 0.75em; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */

.wgps-container {
  width: 100%;
  max-width: calc(var(--wgps-container-max) + (var(--wgps-gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--wgps-gutter);
  box-sizing: border-box;
}

.wgps-section {
  padding-block: var(--wgps-section-space);
}
.wgps-section--tight { padding-block: var(--wgps-space-4); }
.wgps-section--alt   { background: var(--nhs-pale-grey); }

/* Generic responsive grids for non-Elementor markup (Elementor containers
   and Loop Grid have their own column controls). */
.wgps-grid-3,
.wgps-service-grid,
.wgps-news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wgps-grid-gap);
}
.wgps-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wgps-grid-gap);
}
@media (max-width: 1024px) {
  .wgps-grid-3,
  .wgps-service-grid,
  .wgps-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .wgps-grid-3,
  .wgps-grid-2,
  .wgps-service-grid,
  .wgps-news-grid { grid-template-columns: 1fr; }
}

/* Section title above a grid ("Surgery news and information") */
.wgps-section-title {
  margin-bottom: var(--wgps-space-3);
}


/* --------------------------------------------------------------------------
   4. HEADER, BRAND AND SEARCH
   -------------------------------------------------------------------------- */

.wgps-header {
  background: var(--nhs-white);
  padding-block: var(--wgps-space-3);
}

/* NHS logo: keep at 100% solid colour, never below 32px tall (guidelines). */
.wgps-nhs-logo img,
img.wgps-nhs-logo {
  display: block;
  height: 40px;
  width: auto;
}
@media (max-width: 767px) {
  .wgps-nhs-logo img,
  img.wgps-nhs-logo { height: 32px; }
}

.wgps-practice-name,
.wgps-practice-name .elementor-heading-title {
  font-family: var(--wgps-font-heading);
  font-size: var(--wgps-size-brand);
  font-weight: 700;
  line-height: 1.2;
  color: var(--nhs-black);
  margin: var(--wgps-space-1) 0 2px;
}
.wgps-practice-name a {
  color: inherit;
  text-decoration: none;
}
.wgps-practice-name a:hover { text-decoration: underline; }

.wgps-practice-address,
.wgps-practice-address p {
  font-size: var(--wgps-size-small);
  line-height: 1.5;
  color: var(--nhs-blue);
  margin: 0;
}

/* Search: works with Elementor Pro Search Form, WordPress core search form,
   or a plain input + button inside any element with .wgps-search.
   !important on colours: Elementor applies the kit's Secondary colour to
   the submit button by default, which would otherwise win. */
.wgps-search form:not(.elementor-search-form),
.wgps-search .elementor-search-form__container {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: var(--wgps-tap-min);
  border: 2px solid var(--nhs-dark-grey) !important;
  border-radius: 0 !important;
  background: var(--nhs-white) !important;
  overflow: hidden;
}
.wgps-search label { flex: 1; display: flex; margin: 0; }
.wgps-search input[type="search"],
.wgps-search input[type="text"],
.wgps-search .elementor-search-form__input {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  padding: 0 var(--wgps-space-2) !important;
  font-family: var(--wgps-font-body) !important;
  font-size: var(--wgps-size-body) !important;
  color: var(--nhs-black) !important;
  background: transparent !important;
}
.wgps-search input::placeholder { color: var(--nhs-dark-grey); opacity: 1; }
.wgps-search button,
.wgps-search input[type="submit"],
.wgps-search .elementor-search-form__submit {
  flex: 0 0 auto;
  min-width: var(--wgps-tap-min);
  padding: 0 var(--wgps-space-2);
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--nhs-blue) !important;
  color: var(--nhs-white) !important;
  font-family: var(--wgps-font-heading);
  font-size: var(--wgps-size-body);
  font-weight: 700;
  cursor: pointer;
}
.wgps-search .elementor-search-form__submit svg { fill: var(--nhs-white) !important; width: 22px; height: 22px; }
.wgps-search button:hover,
.wgps-search input[type="submit"]:hover,
.wgps-search .elementor-search-form__submit:hover { background: var(--nhs-dark-blue) !important; }


/* --------------------------------------------------------------------------
   5. PRIMARY NAVIGATION
   Add "wgps-nav" to the full-width Container holding the Nav Menu widget.
   Widget settings: Pointer = None; leave colours at default.
   !important on colours: Elementor's default-global Nav Menu colours tie on
   specificity and can load later than this file.
   -------------------------------------------------------------------------- */

.wgps-nav {
  background: var(--nhs-blue) !important;
}

.wgps-nav .elementor-nav-menu--main .elementor-item,
.wgps-nav .menu > li > a {
  color: var(--nhs-white) !important;
  background: transparent;
  font-family: var(--wgps-font-heading);
  font-size: var(--wgps-size-nav);
  font-weight: 400;
  line-height: 1.3;
  text-decoration: none;
  padding-block: 14px 10px;   /* 10 + 4px marker keeps text optically centred */
  border-bottom: 4px solid transparent !important;
  transition: background-color 0.15s ease;
}

/* Remove Elementor pointer animations; this theme uses its own marker. */
.wgps-nav .elementor-nav-menu--main .elementor-item::before,
.wgps-nav .elementor-nav-menu--main .elementor-item::after {
  display: none !important;
}

.wgps-nav .elementor-nav-menu--main .elementor-item:hover,
.wgps-nav .menu > li > a:hover {
  background: var(--nhs-dark-blue) !important;
  color: var(--nhs-white) !important;
}

/* Current page: NHS Yellow underline, as on the reference site */
.wgps-nav .elementor-nav-menu--main .elementor-item-active,
.wgps-nav .elementor-nav-menu--main .current-menu-item > .elementor-item,
.wgps-nav .elementor-nav-menu--main .current-menu-ancestor > .elementor-item,
.wgps-nav .menu > .current-menu-item > a {
  border-bottom-color: var(--nhs-yellow) !important;
}

/* Desktop dropdown sub-menus */
.wgps-nav .elementor-nav-menu--main .sub-menu {
  background: var(--nhs-dark-blue) !important;
  border: 0;
  min-width: 240px;
}
.wgps-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item {
  color: var(--nhs-white) !important;
  background: transparent !important;
  font-size: var(--wgps-size-nav);
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.wgps-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item:hover {
  background: var(--nhs-blue) !important;
}

/* Mobile toggle (hamburger) */
.wgps-nav .elementor-menu-toggle {
  min-width: var(--wgps-tap-min);
  min-height: var(--wgps-tap-min);
  background: transparent !important;
  color: var(--nhs-white) !important;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--wgps-radius-sm);
}
.wgps-nav .elementor-menu-toggle svg { fill: var(--nhs-white) !important; }

/* Mobile dropdown panel */
.wgps-nav .elementor-nav-menu--dropdown {
  background: var(--nhs-dark-blue) !important;
}
.wgps-nav .elementor-nav-menu--dropdown .elementor-item,
.wgps-nav .elementor-nav-menu--dropdown .elementor-sub-item {
  color: var(--nhs-white) !important;
  background: transparent !important;
  font-size: var(--wgps-size-nav) !important;
  line-height: 1.4;
  padding: 14px var(--wgps-space-3) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  border-left: 4px solid transparent;
}
.wgps-nav .elementor-nav-menu--dropdown .elementor-item-active {
  border-left-color: var(--nhs-yellow);
}
.wgps-nav .elementor-nav-menu--dropdown .elementor-item:hover,
.wgps-nav .elementor-nav-menu--dropdown .elementor-sub-item:hover {
  background: var(--nhs-blue) !important;
}


/* --------------------------------------------------------------------------
   6. HERO WITH OVERLAPPING PANEL
   Build as two sibling Containers:
     [.wgps-hero]        full width, photo set as its Elementor background
     [boxed Container]   holding [.wgps-hero-panel] (H1 + phone number)
   The panel's negative top margin pulls it up over the photo.
   -------------------------------------------------------------------------- */

.wgps-hero {
  position: relative;
  isolation: isolate;                 /* keeps the overlay under content */
  min-height: var(--wgps-hero-min-h);
  background-color: var(--nhs-dark-blue);
  background-size: cover;
  background-position: center;
}

/* NHS Blue wash over the photo. Every property is set explicitly because
   Elementor containers also use ::before (for their own overlay control)
   with a default opacity of 0.5. Leave Elementor's overlay control unset. */
.wgps-hero::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  background: var(--wgps-hero-overlay);
  opacity: 1;
  mix-blend-mode: normal;
  pointer-events: none;
}
.wgps-hero > * {
  position: relative;
  z-index: 1;
}
/* Practices without suitable photography: solid brand gradient instead */
.wgps-hero--no-photo {
  background-image: linear-gradient(120deg, var(--nhs-dark-blue), var(--nhs-blue));
}
.wgps-hero--no-photo::before { display: none; }

.wgps-hero-panel {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 640px;
  box-sizing: border-box;
  margin-top: calc(var(--wgps-hero-overlap) * -1);
  padding: var(--wgps-space-4) var(--wgps-space-5) var(--wgps-space-5);
  background: var(--nhs-blue);
  color: var(--nhs-white);
  --padding-top: var(--wgps-space-4);       /* Elementor container vars */
  --padding-right: var(--wgps-space-5);
  --padding-bottom: var(--wgps-space-5);
  --padding-left: var(--wgps-space-5);
}
.wgps-hero-panel h1,
.wgps-hero-panel .elementor-heading-title {
  margin-bottom: var(--wgps-space-2);
}
.wgps-hero-panel p { margin-bottom: var(--wgps-space-1); }
.wgps-hero-panel p:last-child { margin-bottom: 0; }

/* Phone number: the single most-used piece of information on a GP site.
   Mark it up as <a href="tel:..."> so it dials on mobile. */
.wgps-hero-panel__tel,
.wgps-hero-panel a[href^="tel:"] {
  font-family: var(--wgps-font-heading);
  font-size: var(--wgps-size-phone);
  font-weight: 700;
  line-height: 1.3;
  color: var(--nhs-white) !important;
  text-decoration: none;
}
.wgps-hero-panel a[href^="tel:"]:hover { text-decoration: underline; }

@media (max-width: 767px) {
  .wgps-hero-panel {
    max-width: none;
    padding: var(--wgps-space-3);
    --padding-top: var(--wgps-space-3);
    --padding-right: var(--wgps-space-3);
    --padding-bottom: var(--wgps-space-3);
    --padding-left: var(--wgps-space-3);
  }
}


/* --------------------------------------------------------------------------
   7. NOTICES: HIGH / MEDIUM / LOW
   Three ways to apply:
     a) Static: add "wgps-notice wgps-notice--high" (or --medium / --low)
        to a Container holding a Heading and Text Editor widget.
     b) Posts widget / Loop Grid / Loop Carousel: add "wgps-notices" to the
        widget. Each post becomes a notice, and its priority comes from its
        post category slug: notice-high, notice-medium or notice-low.
        No category = medium.
     c) Or add the modifier class to the Loop Item template's Container.
   Priority is conveyed by colour AND a text label (WCAG 1.4.1).
   -------------------------------------------------------------------------- */

.wgps-notice,
.wgps-notices .elementor-post,
.wgps-notices .e-loop-item {
  /* Default = medium */
  --wgps-n-accent:   var(--nhs-warm-yellow);
  --wgps-n-bg:       var(--wgps-notice-medium-bg);
  --wgps-n-title:    var(--nhs-black);
  --wgps-n-label-bg: var(--nhs-warm-yellow);
  --wgps-n-label-fg: var(--nhs-black);
  --wgps-n-label:    "Important";

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  box-sizing: border-box;
  padding: var(--wgps-space-2) var(--wgps-space-3) var(--wgps-space-2) calc(var(--wgps-space-3) - 2px);
  background: var(--wgps-n-bg);
  border-left: 6px solid var(--wgps-n-accent);
  border-radius: 0;
  color: var(--nhs-black);
  --padding-top: var(--wgps-space-2);        /* Elementor container vars */
  --padding-bottom: var(--wgps-space-2);
  --padding-left: calc(var(--wgps-space-3) - 2px);
  --padding-right: var(--wgps-space-3);
  --gap: 4px;
  --row-gap: 4px;
}

.wgps-notice + .wgps-notice { margin-top: var(--wgps-space-2); }

/* Priority label */
.wgps-notice::before,
.wgps-notices .elementor-post::before,
.wgps-notices .e-loop-item::before {
  content: var(--wgps-n-label);
  align-self: flex-start;
  display: inline-block;
  margin-bottom: 2px;
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--wgps-n-label-bg);
  color: var(--wgps-n-label-fg);
  font-family: var(--wgps-font-heading);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}
.wgps-notice--no-label::before { display: none; }

/* High: Emergency Services Red. Use for service disruption only. */
.wgps-notice--high,
.wgps-notices .category-notice-high {
  --wgps-n-accent:   var(--nhs-red);
  --wgps-n-bg:       var(--wgps-notice-high-bg);
  --wgps-n-title:    var(--nhs-dark-red);
  --wgps-n-label-bg: var(--nhs-red);
  --wgps-n-label-fg: var(--nhs-white);
  --wgps-n-label:    "Urgent";
}
/* Medium: NHS Warm Yellow (explicit class, same as default) */
.wgps-notice--medium,
.wgps-notices .category-notice-medium {
  --wgps-n-accent:   var(--nhs-warm-yellow);
  --wgps-n-bg:       var(--wgps-notice-medium-bg);
  --wgps-n-title:    var(--nhs-black);
  --wgps-n-label-bg: var(--nhs-warm-yellow);
  --wgps-n-label-fg: var(--nhs-black);
  --wgps-n-label:    "Important";
}
/* Low: NHS Blue. General information, campaigns, clinics. */
.wgps-notice--low,
.wgps-notices .category-notice-low {
  --wgps-n-accent:   var(--nhs-blue);
  --wgps-n-bg:       var(--wgps-notice-low-bg);
  --wgps-n-title:    var(--nhs-dark-blue);
  --wgps-n-label-bg: var(--nhs-blue);
  --wgps-n-label-fg: var(--nhs-white);
  --wgps-n-label:    "Information";
}

/* Notice title (static heading, Posts widget title, or Loop heading) */
.wgps-notice :is(h2, h3, h4, .elementor-heading-title, .elementor-post__title),
.wgps-notices :is(h2, h3, h4, .elementor-heading-title, .elementor-post__title),
.wgps-notice .elementor-widget-heading .elementor-heading-title,
.wgps-notices .elementor-widget-heading .elementor-heading-title {
  font-family: var(--wgps-font-heading);
  font-size: var(--wgps-size-h4);
  line-height: var(--wgps-leading-h4);
  color: var(--wgps-n-title);
  margin: 0 0 4px;
}
.wgps-notice :is(h2, h3, h4, .elementor-heading-title, .elementor-post__title) a,
.wgps-notices :is(h2, h3, h4, .elementor-heading-title, .elementor-post__title) a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.wgps-notice :is(h2, h3, h4, .elementor-heading-title, .elementor-post__title) a:hover,
.wgps-notices :is(h2, h3, h4, .elementor-heading-title, .elementor-post__title) a:hover {
  text-decoration-thickness: 3px;
}

/* Notice body: full body size. The reference site's ~13px is too small. */
.wgps-notice :is(p, li, .elementor-widget-text-editor),
.wgps-notices :is(p, li, .elementor-post__excerpt, .elementor-widget-text-editor) {
  font-size: var(--wgps-size-body);
  line-height: var(--wgps-leading-body);
  color: var(--nhs-black);
}
.wgps-notice p:last-child,
.wgps-notices p:last-child { margin-bottom: 0; }

/* Posts widget: strip padding it adds around text inside a notice */
.wgps-notices .elementor-post__text { padding: 0; margin: 0; }
.wgps-notices .elementor-post__thumbnail__link { display: none; }  /* notices are text-only */


/* --------------------------------------------------------------------------
   8. SERVICE CARDS (front-page quick links)
   Structure (Elementor):
     Container .wgps-service-card        (Direction: column, no padding)
       Image widget .wgps-service-card__image
       Container .wgps-service-card__body
         Heading widget .wgps-service-card__title  (with Link set)
         Text Editor .wgps-service-card__text
   The title's link is stretched over the whole card: one large tap target,
   one tab stop, one screen-reader announcement.
   -------------------------------------------------------------------------- */

.wgps-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  padding: 0;
  background: var(--nhs-white);
  border: 1px solid var(--nhs-blue);
  border-top: 5px solid var(--nhs-dark-blue);
  border-radius: 0;
  transition: border-color 0.15s ease;
  --position: relative;                     /* Elementor container vars */
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --gap: 0px;
  --row-gap: 0px;
  --flex-direction: column;
}
.wgps-service-card:hover {
  border-color: var(--nhs-dark-blue);
}

/* Image strip: wide and shallow (4:1), edge to edge */
.wgps-service-card .wgps-service-card__image,
.wgps-service-card .wgps-service-card__image .elementor-widget-container {
  margin: 0;
  line-height: 0;
}
.wgps-service-card .wgps-service-card__image img,
.wgps-service-card img.wgps-service-card__image {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  aspect-ratio: 4 / 1;
  object-fit: cover;
  border-radius: 0;
}

.wgps-service-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--wgps-space-2);
  flex: 1;
  padding: 20px var(--wgps-card-pad) var(--wgps-card-pad);
  --padding-top: 20px;                      /* Elementor container vars */
  --padding-right: var(--wgps-card-pad);
  --padding-bottom: var(--wgps-card-pad);
  --padding-left: var(--wgps-card-pad);
  --gap: var(--wgps-space-2);
  --row-gap: var(--wgps-space-2);
}

/* Title with the green circular arrow from the reference design */
.wgps-service-card__title,
.wgps-service-card__title .elementor-heading-title,
.wgps-service-card .wgps-service-card__title .elementor-heading-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--wgps-font-heading);
  font-size: var(--wgps-size-h4);
  line-height: var(--wgps-leading-h4);
  color: var(--nhs-blue);
}
/* Only draw the arrow once when the class is on the Heading widget wrapper */
.wgps-service-card__title:not(.elementor-widget)::before,
.wgps-service-card__title .elementor-heading-title::before {
  content: "";
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--nhs-dark-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.wgps-service-card__title a {
  color: inherit;
  text-decoration: none;
}
.wgps-service-card:hover .wgps-service-card__title a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.wgps-service-card__text,
.wgps-service-card__text p {
  margin: 0;
  font-size: var(--wgps-size-body);
  line-height: var(--wgps-leading-body);
  color: var(--nhs-black);
}

/* Stretched link (front end only, so the Elementor editor stays editable).
   Intermediate wrappers are set to position:static so the link's ::after
   resolves against the card itself. */
body:not(.elementor-editor-active) .wgps-service-card :is(.wgps-service-card__body, .elementor-widget, .elementor-widget-container, .e-con-inner) {
  position: static;
  --position: static;
}
body:not(.elementor-editor-active) .wgps-service-card .wgps-service-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.wgps-service-card:focus-within {
  outline: 4px solid var(--wgps-color-focus);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   9. NEWS CARDS (green outline, prominent top border, small radius)
   Carried over from the Webicious GP theme. Apply either:
     - "wgps-news" on a Posts widget (Classic or Cards skin) or Loop Grid, or
     - "wgps-news-card" on a Loop Item template's top Container.
   -------------------------------------------------------------------------- */

.wgps-news-card,
.wgps-news .elementor-post,
.wgps-news .e-loop-item {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;                   /* clips thumbnail to the radius */
  background: var(--nhs-white);
  border: 1px solid var(--nhs-green);
  border-top: 6px solid var(--nhs-dark-green);
  border-radius: var(--wgps-radius-news);
  --position: relative;
}

/* Neutralise the Cards skin's own box so borders are not doubled */
.wgps-news .elementor-post__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.wgps-news .elementor-post__badge,
.wgps-news .elementor-post__avatar { display: none; }

/* Posts widget thumbnails keep Elementor's own Image Ratio control. */
.wgps-news-card__image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}
.wgps-news .elementor-post__thumbnail__link { margin-bottom: 0 !important; }

.wgps-news-card__body,
.wgps-news .elementor-post__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--wgps-space-1);
  padding: 20px var(--wgps-card-pad) var(--wgps-card-pad);
}

.wgps-news-card__title,
.wgps-news .elementor-post__title,
.wgps-news .elementor-post__title a {
  margin: 0;
  font-family: var(--wgps-font-heading);
  font-size: var(--wgps-size-h4) !important;   /* Posts widget sets its own size */
  line-height: var(--wgps-leading-h4);
  color: var(--nhs-dark-blue) !important;
}
.wgps-news-card__title a,
.wgps-news .elementor-post__title a {
  color: inherit;
  text-decoration: none;
}
.wgps-news-card:hover .wgps-news-card__title a,
.wgps-news .elementor-post:hover .elementor-post__title a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.wgps-news-card__date,
.wgps-news .elementor-post__meta-data,
.wgps-news .elementor-post-date {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--wgps-size-small) !important;
  line-height: 1.5;
  color: var(--nhs-dark-grey) !important;
}

.wgps-news-card__excerpt,
.wgps-news .elementor-post__excerpt p {
  margin: 0;
  font-size: var(--wgps-size-body);
  line-height: var(--wgps-leading-body);
  color: var(--nhs-black);
}

.wgps-news .elementor-post__read-more,
.wgps-news-card__more {
  margin-top: auto;                   /* pins "Read more" to the card bottom */
  padding-top: var(--wgps-space-1);
  font-family: var(--wgps-font-heading);
  font-size: var(--wgps-size-body) !important;
  font-weight: 700;
  color: var(--nhs-dark-green) !important;
  text-decoration: none;
}

/* Stretched title link, front end only (see section 8) */
body:not(.elementor-editor-active) .wgps-news :is(.elementor-post__text, .elementor-post__card, .elementor-widget, .elementor-widget-container, .e-con-inner),
body:not(.elementor-editor-active) .wgps-news-card :is(.wgps-news-card__body, .elementor-widget, .elementor-widget-container, .e-con, .e-con-inner) {
  position: static;
  --position: static;
}
body:not(.elementor-editor-active) :is(.wgps-news-card__title, .wgps-news .elementor-post__title) a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.wgps-news-card:focus-within,
.wgps-news .elementor-post:focus-within,
.wgps-news .e-loop-item:focus-within {
  outline: 4px solid var(--wgps-color-focus);
  outline-offset: 2px;
}
/* overflow:hidden would clip an inset outline; the outline sits outside the
   card box so it is unaffected. */


/* --------------------------------------------------------------------------
   10. CONTENT BOXES, ICON LISTS, OPENING HOURS
   -------------------------------------------------------------------------- */

/* Bordered white box for About Us / Help Us to Help You style sections */
.wgps-content-box {
  box-sizing: border-box;
  padding: var(--wgps-space-4);
  background: var(--nhs-white);
  border: 1px solid var(--wgps-border);
  border-radius: var(--wgps-radius-sm);
  --padding-top: var(--wgps-space-4);
  --padding-right: var(--wgps-space-4);
  --padding-bottom: var(--wgps-space-4);
  --padding-left: var(--wgps-space-4);
}
/* Stacked boxes in normal flow; grid/flex parents space with gap instead */
:not(.wgps-grid-2, .wgps-grid-3, .e-con, .e-con-inner) > .wgps-content-box + .wgps-content-box { margin-top: var(--wgps-space-3); }
.wgps-content-box > :first-child { margin-top: 0; }
.wgps-content-box > :last-child  { margin-bottom: 0; }
.wgps-content-box h2 a,
.wgps-content-box .elementor-heading-title a {
  color: var(--nhs-blue);
  text-decoration: none;
}
.wgps-content-box h2 a:hover,
.wgps-content-box .elementor-heading-title a:hover { text-decoration: underline; }
@media (max-width: 767px) {
  .wgps-content-box {
    padding: var(--wgps-space-3) var(--wgps-space-2);
    --padding-top: var(--wgps-space-3);
    --padding-right: var(--wgps-space-2);
    --padding-bottom: var(--wgps-space-3);
    --padding-left: var(--wgps-space-2);
  }
}

/* Icon list (e.g. Disabled Facilities): Elementor Icon List widget or a
   plain <ul class="wgps-icon-list"> with an <svg> in each <li>. */
.wgps-icon-list,
.wgps-icon-list .elementor-icon-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wgps-icon-list li,
.wgps-icon-list .elementor-icon-list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  font-size: var(--wgps-size-body);
  line-height: var(--wgps-leading-body);
}
.wgps-icon-list li > svg,
.wgps-icon-list .elementor-icon-list-icon svg {
  flex: 0 0 auto;
  width: 22px !important;
  height: 22px;
  margin-top: 0.2em;
  fill: var(--nhs-dark-green) !important;
}
.wgps-icon-list .elementor-icon-list-icon i { color: var(--nhs-dark-green) !important; font-size: 22px; }
.wgps-icon-list .elementor-icon-list-text { color: var(--nhs-black); }

/* Opening hours: <table class="wgps-hours"> with day in <th>, times in <td> */
.wgps-hours {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wgps-size-body);
  line-height: 1.5;
}
.wgps-hours th,
.wgps-hours td {
  padding: 6px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--wgps-border);
  border-bottom-color: color-mix(in srgb, currentColor 20%, transparent);
}
.wgps-hours th { font-weight: 700; padding-right: var(--wgps-space-2); white-space: nowrap; }
.wgps-hours td { text-align: right; }
table.wgps-hours tbody tr > :is(th, td) { background: none; }
.wgps-hours tr:last-child th,
.wgps-hours tr:last-child td { border-bottom: 0; }


/* --------------------------------------------------------------------------
   11. BUTTONS
   NHS.UK-style: solid fill with a 4px bottom shadow that "presses" on click.
   Add the class to an Elementor Button widget (Advanced > CSS Classes),
   or to an <a>/<button>.
   -------------------------------------------------------------------------- */

.wgps-btn:not(.elementor-widget),
.elementor-widget.wgps-btn .elementor-button,
.wgps-prose .wp-block-button__link,
.entry-content .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: var(--wgps-tap-min);
  box-sizing: border-box;
  padding: 12px 24px 10px;
  margin-bottom: 4px;                 /* room for the shadow */
  border: 2px solid transparent;
  border-radius: var(--wgps-radius-sm);
  background: var(--nhs-blue);
  color: var(--nhs-white);
  box-shadow: 0 4px 0 var(--nhs-dark-blue);
  font-family: var(--wgps-font-heading);
  font-size: var(--wgps-size-body);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.wgps-btn:not(.elementor-widget):hover,
.elementor-widget.wgps-btn .elementor-button:hover,
.wgps-prose .wp-block-button__link:hover,
.entry-content .wp-block-button__link:hover {
  background: var(--nhs-dark-blue);
  color: var(--nhs-white);
}
.wgps-btn:not(.elementor-widget):active,
.elementor-widget.wgps-btn .elementor-button:active {
  transform: translateY(4px);
  box-shadow: none;
}

/* Secondary: white with NHS Blue outline, for a second action */
.wgps-btn--secondary:not(.elementor-widget),
.elementor-widget.wgps-btn--secondary .elementor-button {
  background: var(--nhs-white);
  color: var(--nhs-blue);
  border-color: var(--nhs-blue);
  box-shadow: 0 4px 0 var(--nhs-blue);
}
.wgps-btn--secondary:not(.elementor-widget):hover,
.elementor-widget.wgps-btn--secondary .elementor-button:hover {
  background: var(--wgps-notice-low-bg);
  color: var(--nhs-dark-blue);
}

/* Reverse: for dark backgrounds (hero panel, footer) */
.wgps-btn--reverse:not(.elementor-widget),
.elementor-widget.wgps-btn--reverse .elementor-button {
  background: var(--nhs-white);
  color: var(--nhs-dark-blue);
  box-shadow: 0 4px 0 var(--nhs-dark-grey);
}
.wgps-btn--reverse:not(.elementor-widget):hover,
.elementor-widget.wgps-btn--reverse .elementor-button:hover {
  background: var(--nhs-pale-grey);
  color: var(--nhs-dark-blue);
}


/* --------------------------------------------------------------------------
   12. FOOTER AND DARK CONTEXTS
   .wgps-footer: full-width Container, NHS Dark Blue.
   .wgps-on-dark: apply to any other dark-background Container.
   Text colours use raised specificity (and !important on widget colours)
   because Elementor's default Heading/Text colours target the same
   elements and would render dark-on-dark.
   -------------------------------------------------------------------------- */

.wgps-footer {
  background: var(--wgps-color-footer) !important;
  color: var(--nhs-white);
  padding-top: var(--wgps-space-6);
  font-size: var(--wgps-size-body);
  line-height: var(--wgps-leading-body);
}
.wgps-footer h4,
.wgps-footer .elementor-widget-heading .elementor-heading-title {
  font-size: var(--wgps-size-h5);
  line-height: var(--wgps-leading-h5);
  margin-bottom: var(--wgps-space-2);
}
.wgps-footer p,
.wgps-footer .elementor-widget-text-editor p { margin-bottom: 0.4em; }

.wgps-footer__bottom {
  margin-top: var(--wgps-space-5);
  padding-block: var(--wgps-space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: var(--wgps-size-small);
  color: var(--nhs-pale-grey);
}
.wgps-footer__bottom img {
  max-height: 36px;
  width: auto;
}

/* Shared dark-context text colours */
:is(.wgps-footer, .wgps-on-dark, .wgps-hero-panel) :is(h1, h2, h3, h4, h5, h6),
:is(.wgps-footer, .wgps-on-dark, .wgps-hero-panel) .elementor-widget-heading .elementor-heading-title {
  color: var(--nhs-white) !important;
}
:is(.wgps-footer, .wgps-on-dark, .wgps-hero-panel) :is(p, li, td, th, .elementor-widget-text-editor),
:is(.wgps-footer, .wgps-on-dark, .wgps-hero-panel) .elementor-widget-icon-list .elementor-icon-list-text {
  color: var(--nhs-white) !important;
}
:is(.wgps-footer, .wgps-on-dark, .wgps-hero-panel) a {
  color: var(--nhs-white);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
:is(.wgps-footer, .wgps-on-dark, .wgps-hero-panel) a:hover {
  color: var(--nhs-white);
  text-decoration-thickness: 3px;
}
:is(.wgps-footer, .wgps-on-dark) .elementor-widget-icon-list .elementor-icon-list-icon svg {
  fill: var(--nhs-light-blue) !important;
}
:is(.wgps-footer, .wgps-on-dark) .elementor-widget-icon-list .elementor-icon-list-icon i {
  color: var(--nhs-light-blue) !important;
}
/* Footer policy menu (Nav Menu widget, vertical layout) */
.wgps-footer .elementor-nav-menu .elementor-item {
  color: var(--nhs-white) !important;
  padding: 4px 0 !important;
  text-decoration: underline;
}
.wgps-footer .elementor-nav-menu .elementor-item::before,
.wgps-footer .elementor-nav-menu .elementor-item::after { display: none !important; }
.wgps-footer__bottom,
.wgps-footer__bottom p { color: var(--nhs-pale-grey) !important; }


/* --------------------------------------------------------------------------
   13. POST CONTENT (PROSE)
   Applies to WordPress post/page content wherever it renders:
     .wgps-prose                             (manual / this theme's templates)
     .entry-content, .page-content           (WordPress / Hello Elementor)
     .elementor-widget-theme-post-content    (Theme Builder "Post Content")
     .elementor-widget-text-editor           (Text Editor widget)
     .elementor-post__text                   (Posts widget)
   Font size and colour are inherited from the wrapper, so an editor's
   widget-level Typography setting still works.
   -------------------------------------------------------------------------- */

:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor, .elementor-post__text) {
  line-height: var(--wgps-leading-body);
}

/* Readable measure for long-form content (~70 characters per line) */
.wgps-prose--measure { max-width: 72ch; }

/* Trim outer margins so content sits flush inside padded boxes */
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor, .elementor-post__text) :is(.elementor-widget-container, .elementor-text-editor) > :first-child,
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor, .elementor-post__text) > :first-child { margin-top: 0; }
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor, .elementor-post__text) :is(.elementor-widget-container, .elementor-text-editor) > :last-child,
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor, .elementor-post__text) > :last-child { margin-bottom: 0; }

/* Block rhythm */
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor, .elementor-post__text) :is(p, ul, ol, dl, blockquote, table, figure, pre, details, .wp-block-table, .wp-block-image) {
  margin-top: 0;
  margin-bottom: var(--wgps-content-gap);
}

/* Headings: generous space above to group them with the text that follows */
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor, .elementor-post__text) :is(h1, h2) {
  margin-top: 1.4em;
  margin-bottom: 0.5em;
}
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor, .elementor-post__text) :is(h3, h4, h5, h6) {
  margin-top: 1.5em;
  margin-bottom: 0.4em;
}
/* A sub-heading directly under a heading needs less separation */
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor, .elementor-post__text) :is(h1, h2, h3, h4, h5) + :is(h2, h3, h4, h5, h6) {
  margin-top: 0.6em;
}

/* Links in running text: always underlined; NHS.UK hover/visited colours */
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) a {
  color: var(--wgps-color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) a:visited {
  color: var(--nhs-purple);
}
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) a:hover {
  color: var(--nhs-dark-pink);
  text-decoration-thickness: 3px;
}

/* Lists */
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor, .elementor-post__text) :is(ul, ol) {
  padding-left: 1.5em;
}
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor, .elementor-post__text) li {
  margin-bottom: 0.5em;
  padding-left: 0.2em;
}
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor, .elementor-post__text) li > :is(ul, ol) {
  margin-top: 0.5em;
  margin-bottom: 0;
}
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor, .elementor-post__text) li > :is(ul, ol) > li:last-child {
  margin-bottom: 0;
}
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor, .elementor-post__text) li::marker {
  color: var(--nhs-blue);
}
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor, .elementor-post__text) ol > li::marker {
  font-weight: 700;
}

/* Blockquote: not italic (italics reduce legibility for low-vision and
   dyslexic readers). */
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) :is(blockquote, .wp-block-quote) {
  margin-left: 0;
  margin-right: 0;
  padding: var(--wgps-space-2) var(--wgps-space-3);
  border-left: 6px solid var(--nhs-blue);
  background: var(--nhs-pale-grey);
  font-style: normal;
  color: var(--nhs-black);
}
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) blockquote > p { margin-bottom: 0.6em; }
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) blockquote > :last-child { margin-bottom: 0; }
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) blockquote cite {
  display: block;
  margin-top: var(--wgps-space-1);
  font-size: var(--wgps-size-small);
  font-style: normal;
  color: var(--nhs-dark-grey);
}

/* Tables. Gutenberg wraps tables in figure.wp-block-table, which scrolls
   horizontally on narrow screens; wrap classic-editor tables in
   <div class="wgps-table-scroll"> for the same behaviour. */
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) :is(.wp-block-table, .wgps-table-scroll) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wgps-size-body);
  line-height: 1.5;
}
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) :is(th, td) {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border: 0;
  border-bottom: 1px solid var(--wgps-border);
}
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) thead th {
  background: var(--nhs-pale-grey);
  color: var(--nhs-dark-blue);
  font-family: var(--wgps-font-heading);
  font-weight: 700;
  border-bottom: 2px solid var(--nhs-blue);
}
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) caption,
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) .wp-block-table figcaption {
  caption-side: bottom;
  padding-top: var(--wgps-space-1);
  font-size: var(--wgps-size-small);
  color: var(--nhs-dark-grey);
  text-align: left;
}

/* Images and captions */
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) img {
  max-width: 100%;
  height: auto;
  border-radius: var(--wgps-radius-sm);
}
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) figure {
  margin-left: 0;
  margin-right: 0;
}
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) :is(figcaption, .wp-caption-text, .wp-element-caption) {
  margin-top: var(--wgps-space-1);
  font-size: var(--wgps-size-small);
  line-height: 1.5;
  color: var(--nhs-dark-grey);
  text-align: left;
}
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) .alignleft {
  float: left;
  margin: 0.3em var(--wgps-space-3) var(--wgps-space-2) 0;
  max-width: 50%;
}
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) .alignright {
  float: right;
  margin: 0.3em 0 var(--wgps-space-2) var(--wgps-space-3);
  max-width: 50%;
}
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 767px) {
  :is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) :is(.alignleft, .alignright) {
    float: none;
    max-width: 100%;
    margin: 0 0 var(--wgps-space-2);
  }
}
/* Contain floats so following sections don't wrap around them */
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content)::after {
  content: "";
  display: table;
  clear: both;
}

/* Horizontal rule */
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) :is(hr, .wp-block-separator) {
  border: 0;
  border-top: 1px solid var(--wgps-border);
  margin: var(--wgps-space-5) 0;
  opacity: 1;
}

/* Definition lists (e.g. clinic name / details) */
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) dt {
  font-family: var(--wgps-font-heading);
  font-weight: 700;
  color: var(--nhs-dark-blue);
}
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) dd {
  margin: 0 0 var(--wgps-space-2);
}

/* Inline semantics */
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) mark {
  background: var(--nhs-yellow);
  color: var(--nhs-black);
  padding: 0 0.15em;
}
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) :is(code, kbd) {
  font-family: Consolas, 'Courier New', monospace;
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  background: var(--nhs-pale-grey);
  border-radius: 3px;
}
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) pre {
  overflow-x: auto;
  padding: var(--wgps-space-2);
  background: var(--nhs-pale-grey);
  border-radius: var(--wgps-radius-sm);
  font-size: 0.9em;
  line-height: 1.5;
}
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) pre code { padding: 0; background: none; }

/* Expanders (Gutenberg Details block or raw <details>): useful for FAQs.
   Styled after the NHS.UK "details" component. */
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) details > summary {
  display: inline-block;
  position: relative;
  padding-left: 1.4em;
  color: var(--nhs-blue);
  text-decoration: underline;
  cursor: pointer;
  list-style: none;
}
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) details > summary::-webkit-details-marker { display: none; }
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) details > summary::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.45em;
  border-style: solid;
  border-width: 0.4em 0 0.4em 0.55em;   /* right-pointing triangle */
  border-color: transparent transparent transparent currentColor;
}
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) details[open] > summary::before {
  border-width: 0.55em 0.4em 0 0.4em;   /* down-pointing triangle */
  border-color: currentColor transparent transparent transparent;
  top: 0.55em;
}
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) details[open] > summary {
  margin-bottom: var(--wgps-space-1);
}
:is(.wgps-prose, .entry-content, .page-content, .elementor-widget-theme-post-content, .elementor-widget-text-editor) details > :not(summary) {
  padding-left: var(--wgps-space-2);
  border-left: 4px solid var(--wgps-border);
}

/* Inline notices inside post content reuse the notice component:
   <div class="wgps-notice wgps-notice--low"> in a Custom HTML block. */


/* --------------------------------------------------------------------------
   14. SINGLE POST, ARCHIVE, PAGINATION, FORMS
   -------------------------------------------------------------------------- */

.wgps-single__header { margin-bottom: var(--wgps-space-3); }
.wgps-single__title  { margin-bottom: var(--wgps-space-1); }

/* Post date / meta. Works for this theme's templates and Elementor's
   Post Info widget (class "wgps-post-meta" on the widget). */
.wgps-post-meta,
.wgps-post-meta .elementor-icon-list-text {
  margin: 0;
  font-size: var(--wgps-size-small) !important;
  line-height: 1.5;
  color: var(--nhs-dark-grey) !important;
}

.wgps-single__image {
  margin: 0 0 var(--wgps-space-4);
}
.wgps-single__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--wgps-radius-sm);
}

.wgps-archive__header { margin-bottom: var(--wgps-space-4); }

/* Pagination: WordPress core and Elementor Posts widget */
.wgps-pagination,
.wgps-pagination .nav-links,
.elementor-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wgps-space-1);
  align-items: center;
  margin-top: var(--wgps-space-5);
}
.wgps-pagination .page-numbers,
.wgps-pagination .post-page-numbers,
.elementor-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--wgps-tap-min);
  min-height: var(--wgps-tap-min);
  padding: 0 14px;
  box-sizing: border-box;
  border: 2px solid var(--nhs-blue);
  border-radius: var(--wgps-radius-sm);
  color: var(--nhs-blue);
  font-family: var(--wgps-font-heading);
  font-weight: 700;
  text-decoration: none;
}
.wgps-pagination .page-numbers.current,
.wgps-pagination .post-page-numbers.current,
.elementor-pagination .page-numbers.current {
  background: var(--nhs-blue);
  color: var(--nhs-white);
}
.wgps-pagination .page-numbers.dots,
.elementor-pagination .page-numbers.dots { border-color: transparent; }
.wgps-pagination a.page-numbers:hover,
.elementor-pagination a.page-numbers:hover { background: var(--wgps-notice-low-bg); }

/* Forms on this theme's own templates (404/search) and anything wrapped in
   .wgps-form. Scoped so plugin forms keep their own styling. */
:is(.wgps-fallback, .wgps-form) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], input[type="number"], select, textarea) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: var(--wgps-tap-min);
  padding: 8px 12px;
  border: 2px solid var(--nhs-dark-grey);
  border-radius: 0;
  background: var(--nhs-white);
  color: var(--nhs-black);
  font-family: var(--wgps-font-body);
  font-size: var(--wgps-size-body);
  line-height: 1.4;
}
:is(.wgps-fallback, .wgps-form) label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
}
.wgps-fallback .search-form {
  display: flex;
  gap: var(--wgps-space-1);
  max-width: 560px;
  margin-bottom: var(--wgps-space-3);
}
.wgps-fallback .search-form label { flex: 1; margin: 0; }
.wgps-fallback .search-submit:hover { background: var(--nhs-dark-blue); color: var(--nhs-white); }
.wgps-fallback .search-submit {
  min-height: var(--wgps-tap-min);
  padding: 0 20px;
  border: 0;
  background: var(--nhs-blue);
  color: var(--nhs-white);
  font-family: var(--wgps-font-heading);
  font-size: var(--wgps-size-body);
  font-weight: 700;
  cursor: pointer;
}


/* --------------------------------------------------------------------------
   15. ACCESSIBILITY
   Kept at the end of the file on purpose: focus rules must win ties with
   component link colours declared above.
   -------------------------------------------------------------------------- */

/* NHS.UK focus pattern: NHS Yellow fill, black underline bar, black text.
   The transparent outline keeps a visible ring in Windows High Contrast. */
a:focus-visible {
  outline: 3px solid transparent;
  outline-offset: 0;
  background-color: var(--wgps-color-focus) !important;
  color: var(--nhs-black) !important;
  box-shadow: 0 -2px var(--wgps-color-focus), 0 4px var(--nhs-black);
  text-decoration: none !important;
}
a:focus-visible svg { fill: var(--nhs-black) !important; }

:is(button, input[type="submit"], input[type="button"], .elementor-button, .wgps-btn:not(.elementor-widget), summary, .elementor-menu-toggle):focus-visible {
  outline: 3px solid transparent;
  background-color: var(--wgps-color-focus) !important;
  color: var(--nhs-black) !important;
  box-shadow: 0 4px 0 var(--nhs-black) !important;
}
:is(button, .elementor-search-form__submit, .elementor-menu-toggle):focus-visible svg { fill: var(--nhs-black) !important; }

:is(input:not([type="submit"]):not([type="button"]), select, textarea):focus-visible {
  outline: 3px solid var(--wgps-color-focus);
  outline-offset: 0;
  box-shadow: inset 0 0 0 2px var(--nhs-black);
}
/* Search box: ring the whole control rather than the borderless input */
.wgps-search form:not(.elementor-search-form):focus-within,
.wgps-search .elementor-search-form__container:focus-within {
  outline: 3px solid var(--wgps-color-focus);
  outline-offset: 0;
  border-color: var(--nhs-black) !important;
}
.wgps-search input:focus-visible { outline: 0; box-shadow: none; }

/* White-text links forced with !important above: restore black on yellow */
.wgps-nav .elementor-nav-menu--main .elementor-item:focus-visible,
.wgps-nav .elementor-nav-menu--main .elementor-sub-item:focus-visible,
.wgps-nav .elementor-nav-menu--dropdown .elementor-item:focus-visible,
.wgps-nav .elementor-nav-menu--dropdown .elementor-sub-item:focus-visible,
.wgps-footer .elementor-nav-menu .elementor-item:focus-visible,
.wgps-hero-panel a[href^="tel:"]:focus-visible {
  background-color: var(--wgps-color-focus) !important;
  color: var(--nhs-black) !important;
}

/* Stretched-link cards already show a card-level outline; keep the title
   highlight but avoid a second underline bar across the card. */
.wgps-service-card__title a:focus-visible,
.wgps-news .elementor-post__title a:focus-visible,
.wgps-news-card__title a:focus-visible { box-shadow: none; }

/* Skip link (Hello Elementor outputs .skip-link) */
.skip-link:focus,
.skip-link:focus-visible {
  background: var(--wgps-color-focus) !important;
  color: var(--nhs-black) !important;
  padding: 12px 20px;
  font-family: var(--wgps-font-heading);
  font-weight: 700;
  z-index: 100000;
}

.screen-reader-text:not(:focus) {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* Respect the OS "reduce motion" setting */
@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;
  }
}

/* Windows High Contrast / forced colours: tints and fills disappear, so
   restore structural borders and keep the notice label readable. */
@media (forced-colors: active) {
  .wgps-notice,
  .wgps-notices .elementor-post,
  .wgps-notices .e-loop-item,
  .wgps-content-box,
  .wgps-service-card,
  .wgps-news-card,
  .wgps-news .elementor-post {
    border: 1px solid CanvasText;
  }
  .wgps-notice::before,
  .wgps-notices .elementor-post::before,
  .wgps-notices .e-loop-item::before {
    border: 1px solid CanvasText;
  }
  .wgps-nav .elementor-item-active { text-decoration: underline; }
}


/* --------------------------------------------------------------------------
   16. PRINT
   Patients print pages (registration steps, clinic times). Drop chrome,
   print in black on white, show where links go.
   -------------------------------------------------------------------------- */

@media print {
  .wgps-nav,
  .wgps-search,
  .wgps-hero,
  .wgps-footer .elementor-nav-menu,
  .skip-link { display: none !important; }

  body { font-size: 12pt; color: #000; background: #fff; }
  .wgps-hero-panel { margin-top: 0; background: none; color: #000; padding: 0; }
  .wgps-hero-panel :is(h1, p, a, .elementor-heading-title) { color: #000 !important; }
  .wgps-footer { background: none !important; color: #000; }
  .wgps-footer :is(h1, h2, h3, h4, h5, h6, p, li, a, .elementor-heading-title, .elementor-widget-text-editor) { color: #000 !important; }
  .wgps-notice,
  .wgps-notices .elementor-post { border: 1px solid #000; border-left-width: 6px; break-inside: avoid; }
  :is(.wgps-prose, .entry-content, .elementor-widget-theme-post-content) a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }
  .wgps-service-card,
  .wgps-news-card { break-inside: avoid; }
}