/* ==========================================================================
   WEBICIOUS ALDER: DESIGN SYSTEM (1.2.2)
   ==========================================================================
   One stylesheet, enqueued by inc/enqueue.php after Hello Elementor's and
   Elementor's CSS. Also loaded into the Classic Editor (inc/setup.php).

   Sections
     1. Tokens
     2. Elementor globals lock
     3. Base: body, headings, buttons
     4. Accessibility base: focus, skip link, landmark, motion
     5. wb-prose: Classic Editor content
     6. Components (class contract, docs/class-contract.md section 4)
     7. Header classes inherited from 1.0.0 (reworked in roadmap phase 3)

   Design source: the agreed Alder design specification (Webicious project
   doc "claude/alder-design-spec.md", 31 October 2026).

   Specificity strategy (no !important except where commented):
   - Base rules are scoped "body.wb-theme", which outranks the Elementor
     kit's ".elementor-kit-N h3" but loses to per-widget settings
     (".elementor-N .elementor-element.elementor-element-x ..."). So the
     theme sets the defaults and any widget setting still wins until the
     widget settings are removed (roadmap principle 2).
   - Prose rules are prefixed "html" for the same reason.
   - Component rules are scoped ".wb-theme" and, on containers, ".e-con":
     ".wb-theme .e-con.wb-card" (0,3,0) outranks Elementor's own container
     rules such as ".e-con-full, .e-con > .e-con-inner" whatever the load
     order. Container spacing is set through Elementor's own variables
     (--padding-top, --row-gap, --content-width) so editor and theme agree.
   - Accent edges and notice icons are background layers, not ::before:
     Elementor uses ".e-con::before" for background overlays.

   Breakpoints: tablet ≤1023px, mobile ≤767px (decision, 31 October 2026).
   Elementor's tablet breakpoint must be 1023 to match: Appearance ›
   Webicious Alder sets it.

   Every colour is an NHS identity colour (decisions 9.3), or one of the
   pale background tints agreed in decision 12.4. Contrast ratios are noted
   next to the role tokens.
   ========================================================================== */


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

:root {

  /* --- NHS identity palette. Fixed: identical in every Webicious theme. --- */
  --nhs-dark-blue:   #003087;
  --nhs-blue:        #005EB8;
  --nhs-bright-blue: #0072CE;
  --nhs-light-blue:  #41B6E6;
  --nhs-aqua-blue:   #00A9CE;
  --nhs-black:       #231F20;
  --nhs-dark-grey:   #425563;
  --nhs-mid-grey:    #768692;   /* Borders and decoration only: 3.75:1 on white */
  --nhs-pale-grey:   #E8EDEE;
  --nhs-dark-green:  #006747;
  --nhs-green:       #009639;   /* Icons and large text only: 3.87:1 on white */
  --nhs-aqua-green:  #00A499;
  --nhs-red:         #DA291C;   /* Emergency and High notices only */
  --nhs-warm-yellow: #FFB81C;   /* Medium notices, black text only */
  --white:           #FFFFFF;

  /* --- Background tints (decision 12.4). Backgrounds only: never text,
         icons or accents. NHS Black on any tint is above 14:1. --- */
  --wb-tint-blue:        #EBF2F9;  /* NHS Blue 8%. NHS Blue text on it 5.80:1 */
  --wb-tint-blue-strong: #DBE8F5;  /* NHS Blue 14%. Reserved */
  --wb-tint-aqua:        #EBF8F7;  /* Aqua Green 8%. Reserved */
  --wb-tint-yellow:      #FFF7E4;  /* Warm Yellow 12%. Medium notices */

  /* --- Colour roles. Use these in rules, not the palette directly. --- */
  --wb-color-primary:      var(--nhs-blue);       /* 6.38:1 on white */
  --wb-color-primary-dark: var(--nhs-dark-blue);  /* 11.85:1 on white */
  --wb-color-text:         var(--nhs-black);      /* 16.1:1 on white */
  --wb-color-text-muted:   var(--nhs-dark-grey);  /* 7.75:1 on white, 6.56:1 on pale grey */
  --wb-color-accent:       var(--nhs-dark-green); /* 6.93:1 on white */
  --wb-color-surface:      var(--white);
  --wb-color-surface-alt:  var(--nhs-pale-grey);
  --wb-color-border:       var(--nhs-pale-grey);
  --wb-color-border-strong: var(--nhs-mid-grey);
  --wb-color-on-dark:      var(--white);          /* 11.85:1 on Dark Blue */
  --wb-color-on-dark-muted: var(--nhs-pale-grey); /* 10.03:1 on Dark Blue */
  --wb-color-urgent:       var(--nhs-red);        /* White text 4.87:1 */
  --wb-border:             var(--wb-color-border); /* 1.0.0 name, kept */

  /* Translucent white for rules and hover fills on dark backgrounds. */
  --wb-on-dark-rule:       rgba(255, 255, 255, 0.22);
  --wb-on-dark-hover:      rgba(255, 255, 255, 0.14);

  /* --- Buttons (base Elementor buttons; wb-button roles in section 6) --- */
  --wb-btn-bg:          var(--nhs-blue);      /* White text 6.38:1 */
  --wb-btn-bg-hover:    var(--nhs-dark-blue); /* White text 11.85:1 */
  --wb-btn-text:        var(--white);
  --wb-btn-border:      var(--nhs-dark-blue);

  /* --- Focus: a dark ring with a white gap, visible on light and dark. --- */
  --wb-focus-ring:   var(--nhs-black);
  --wb-focus-gap:    var(--white);
  --wb-focus-width:  3px;
  --wb-focus-offset: 3px;

  /* --- Links (spec 3.6). Body-text links are underlined (WCAG 1.4.1). --- */
  --wb-link-underline:       1px;
  --wb-link-underline-hover: 3px;
  --wb-link-offset:          3px;

  /* --- Gradients. White text only on the hero gradient (Dark Blue → Blue →
         Bright Blue, lowest 4.89:1). The accent is decoration only, never
         behind text (decision 12.1, option C "NHS spectrum"). --- */
  --wb-gradient-brand:  linear-gradient(135deg, var(--nhs-dark-blue), var(--nhs-blue));
  --wb-gradient-hero:   linear-gradient(120deg, var(--nhs-dark-blue) 0%, var(--nhs-blue) 58%, var(--nhs-bright-blue) 100%);
  --wb-gradient-hero-texture: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 46px);
  --wb-gradient-accent: linear-gradient(90deg, var(--nhs-dark-blue) 0%, var(--nhs-blue) 35%, var(--nhs-aqua-green) 70%, var(--nhs-warm-yellow) 100%);
  --wb-gradient-section-tint: linear-gradient(180deg, var(--white) 0%, var(--wb-tint-blue) 100%);
  --wb-gradient-section-soft: linear-gradient(180deg, var(--wb-tint-blue) 0%, var(--nhs-pale-grey) 100%);

  /* --- Shadows (tinted with NHS Dark Blue) --- */
  --wb-shadow:        0 1px 2px rgba(0, 48, 135, 0.06), 0 6px 20px rgba(0, 48, 135, 0.10);
  --wb-shadow-lifted: 0 2px 4px rgba(0, 48, 135, 0.08), 0 14px 32px rgba(0, 48, 135, 0.16);

  /* --- Fonts. Frutiger is only defined when the practice's licensed files
         are in uploads/fonts (inc/fonts.php); otherwise Arial is used. --- */
  --wb-font-family:  "Frutiger", Arial, sans-serif;
  --wb-font-body:    var(--wb-font-family);
  --wb-font-heading: var(--wb-font-family);
  --wb-weight-regular: 400;
  --wb-weight-bold:    700;

  /* --- Type scale, desktop (≥1024px). 15px is the floor for any text. --- */
  --wb-size-h1:     42px;  /* Page title in the inner-page banner */
  --wb-size-h2:     28px;  /* Content heading */
  --wb-size-h3:     22px;  /* Card, news and content subheading */
  --wb-size-h4:     19px;
  --wb-size-h5:     17px;
  --wb-size-h6:     15px;
  --wb-size-body:   19px;
  --wb-size-text:   17px;  /* Card text, lists, notice text */
  --wb-size-meta:   16px;  /* Dates, breadcrumbs, labels in buttons */
  --wb-size-small:  15px;  /* Smallest: notes and pill labels */
  --wb-size-nav:    17px;
  --wb-size-button: 18px;
  --wb-size-hero:          52px;
  --wb-size-lead:          22px;
  --wb-size-section-title: 32px;
  --wb-size-card-title:    21px;  /* Sidebar cards, emergency card */
  --wb-size-notice-title:  21px;
  --wb-size-notice-low-title: 19px;
  --wb-size-call:          32px;  /* 999 and 111 */
  --wb-size-practice-name: 26px;  /* Header band (1.2.1) */

  --wb-leading-tight:   1.15;
  --wb-leading-heading: 1.2;
  --wb-leading-snug:    1.25;
  --wb-leading-normal:  1.55;  /* Generous for older and low-vision readers */
  --wb-leading-relaxed: 1.7;
  --wb-tracking-normal: normal;
  --wb-tracking-wide:   0.02em;

  /* --- Spacing scale: 4, 8, 12, 16, 24, 32, 40, 48, 64px --- */
  --wb-space-0-5: 4px;
  --wb-space-1:   8px;
  --wb-space-1-5: 12px;
  --wb-space-2:   16px;
  --wb-space-3:   24px;
  --wb-space-4:   32px;
  --wb-space-5:   40px;
  --wb-space-6:   48px;
  --wb-space-8:   64px;

  /* --- Layout --- */
  --wb-container-max: 1200px;
  --wb-gutter:        32px;
  /* Width of a Boxed container's content: the container less its gutters. */
  --wb-content-max:   calc(var(--wb-container-max) - 2 * var(--wb-gutter));
  --wb-grid-gap:      var(--wb-space-3);  /* Cards, sidebar cards, news */
  --wb-content-gap:   var(--wb-space-4);  /* Content and sidebar */
  --wb-section-pad:   var(--wb-space-8);
  --wb-radius:        12px;
  --wb-radius-small:  8px;
  --wb-radius-pill:   999px;
  --wb-border-width:  1px;
  --wb-measure:       70ch;  /* Comfortable line length for prose */
  --wb-sticky-offset: 0px;   /* Set to the sticky header height if one is added */

  /* --- Component measures --- */
  --wb-edge:            6px;   /* Accent edge: cards, news, footer, hero */
  --wb-edge-thin:       5px;   /* Accent edge: sidebar cards; title rule */
  --wb-edge-notice:     8px;   /* Medium notice left edge */
  --wb-title-rule:      72px;  /* Section-title underline length */
  --wb-button-height:   52px;
  --wb-button-border:   2px;
  --wb-row-height:      48px;  /* Sidebar link rows */
  --wb-toc-row-height:  40px;
  --wb-call-height:     68px;  /* 999 and 111 buttons */
  --wb-icon-circle:     56px;
  --wb-icon-size:       28px;  /* Card icons, notice icons */
  --wb-icon-inline:     22px;  /* Icons beside titles and in rows */
  --wb-icon-small:      18px;  /* Date icon */
  --wb-hero-lead-max:   600px;

  --wb-card-padding:         34px 28px 28px;
  --wb-content-box-padding:  40px 44px;
  --wb-sidebar-card-padding: 30px 24px 22px;
  --wb-notice-padding-y:     22px;
  --wb-notice-padding-x:     26px;
  --wb-notice-low-padding:   20px 22px;
  --wb-toc-padding:          24px 28px;
  --wb-emergency-head-padding: 16px 24px;
  --wb-emergency-body-padding: 20px 24px 24px;
  --wb-hero-padding-top:     76px;
  --wb-hero-padding-bottom:  88px;
  --wb-banner-padding-top:   28px;
  --wb-banner-padding-bottom: 40px;
  --wb-footer-padding-top:   62px;  /* 6px edge + 56px */
  --wb-footer-bottom-padding: 20px 0 28px;
  /* Header band and nav (1.2.1) */
  --wb-header-padding-y:     22px;
  --wb-logo-height:          56px;   /* Logo fits a 160 x 56px box */
  --wb-logo-max-width:       160px;
  --wb-search-width:         380px;
  --wb-brand-min:            280px;  /* Below this the search wraps under */
  --wb-search-height:        48px;
  --wb-nav-item-padding:     16px 14px;
  --wb-nav-indicator:        4px;    /* Active item: Warm Yellow bar */
  --wb-toggle-height:        52px;
  --wb-toggle-icon:          24px;
  --wb-search-border:        var(--nhs-mid-grey);  /* 1.2.2: 3.75:1, meets WCAG 1.4.11 (3:1) */
  --wb-notice-gap:           var(--wb-space-2);    /* 1.2.2: notices 16px apart */
  /* Notices section (1.2.1): tighter than a standard section */
  --wb-notices-pad-top:      var(--wb-space-5);
  --wb-notices-pad-bottom:   var(--wb-space-1);

  /* --- Motion --- */
  --wb-transition: 0.2s ease;
  --wb-lift:       3px;  /* Cards rise on hover */
  --wb-nudge:      4px;  /* Arrows slide on hover */
  --wb-hover-dim:  brightness(0.92);  /* 999 and 111 buttons on hover */

  /* --- Icons: SVG masks, painted in currentColor or a token colour by the
         component. Stroke icons on a 24px grid. --- */
  --wb-icon-arrow:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
  --wb-icon-chevron:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --wb-icon-warning:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
  --wb-icon-info:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
  --wb-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  --wb-icon-link:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E");
  --wb-icon-document: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E");
  --wb-icon-clock:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
  --wb-icon-list:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E");
  /* Notice icons are background images (no pseudo-element is free on an
     Elementor container), so their colour is part of the image. */
  --wb-icon-warning-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
  --wb-icon-info-black:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231F20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
  --wb-icon-arrow-blue:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005EB8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
}

/* Tablet: ≤1023px */
@media (max-width: 1023px) {
  :root {
    --wb-size-h1:   36px;
    --wb-size-hero: 44px;
    --wb-size-nav:  16px;
    --wb-section-pad: 56px;
    --wb-hero-padding-top:    60px;
    --wb-hero-padding-bottom: 72px;
  }
}

/* Mobile: ≤767px. Body 17px; nothing below 15px. */
@media (max-width: 767px) {
  :root {
    --wb-size-h1:     30px;
    --wb-size-h2:     24px;
    --wb-size-h3:     20px;
    --wb-size-h4:     18px;
    --wb-size-h5:     16px;
    --wb-size-body:   17px;
    --wb-size-hero:   34px;
    --wb-size-lead:   19px;
    --wb-size-section-title: 26px;
    --wb-size-notice-title:  19px;
    --wb-gutter:      20px;
    --wb-section-pad: 40px;
    --wb-card-padding:        28px 22px 22px;
    --wb-content-box-padding: 26px 20px;
    --wb-notice-padding-y:    18px;
    --wb-notice-padding-x:    18px;
    --wb-hero-padding-top:    44px;
    --wb-hero-padding-bottom: 56px;
    --wb-banner-padding-top:    20px;
    --wb-banner-padding-bottom: 32px;
    --wb-size-practice-name: 21px;
    --wb-header-padding-y:   16px;
    --wb-logo-height:        44px;
    --wb-notices-pad-top:    var(--wb-space-3);
    --wb-notices-pad-bottom: 0px;
  }
}


/* --------------------------------------------------------------------------
   2. ELEMENTOR GLOBALS LOCK (decisions 7.1)
   Forces Elementor's system colours and fonts to the theme tokens, so the
   site is right even if Site Settings hold other values. The attribute
   selector outranks the kit's own ".elementor-kit-N" rule. Only the four
   system colours and fonts are locked: custom globals have site-specific
   IDs until the kit importer gives every site shared IDs (roadmap 1.3).
   Turn off with the webicious_alder_lock_elementor_globals filter.
   -------------------------------------------------------------------------- */

body.wb-lock-globals[class*="elementor-kit-"] {
  --e-global-color-primary:   var(--wb-color-primary);
  --e-global-color-secondary: var(--wb-color-primary-dark);
  --e-global-color-text:      var(--wb-color-text);
  --e-global-color-accent:    var(--wb-color-accent);

  /* Elementor appends ", Sans-serif" after these, so the full stack applies. */
  --e-global-typography-primary-font-family:   "Frutiger", Arial;
  --e-global-typography-secondary-font-family: "Frutiger", Arial;
  --e-global-typography-text-font-family:      "Frutiger", Arial;
  --e-global-typography-accent-font-family:    "Frutiger", Arial;
  --e-global-typography-primary-font-weight:   700;
  --e-global-typography-text-font-weight:      400;
}


/* --------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */

body.wb-theme {
  font-family: var(--wb-font-body);
  font-size: var(--wb-size-body);
  font-weight: var(--wb-weight-regular);
  line-height: var(--wb-leading-normal);
  letter-spacing: var(--wb-tracking-normal);
  color: var(--wb-color-text);
  background: var(--wb-color-surface);
}

/* Headings. Fixes the kit's H3/H4 (Source Sans 3, with H4 larger than H3)
   and keeps one scale across the site. */
body.wb-theme :is(h1, h2, h3, h4, h5, h6),
body.wb-theme .wb-heading {
  font-family: var(--wb-font-heading);
  font-weight: var(--wb-weight-bold);
  color: var(--wb-color-primary-dark);
  margin: 0 0 0.5em;
}
body.wb-theme h1 { font-size: var(--wb-size-h1); line-height: var(--wb-leading-tight); }
body.wb-theme h2 { font-size: var(--wb-size-h2); line-height: var(--wb-leading-snug); }
body.wb-theme h3 { font-size: var(--wb-size-h3); line-height: var(--wb-leading-snug); }
body.wb-theme h4 { font-size: var(--wb-size-h4); line-height: 1.3; }
body.wb-theme h5 { font-size: var(--wb-size-h5); line-height: 1.4; }
body.wb-theme h6 { font-size: var(--wb-size-h6); line-height: 1.4; }

/* Buttons. The kit made every button NHS Green with white text, 3.87:1,
   which fails AA (audit section 4.3). Each selector mirrors the kit's
   selector plus one type selector ("body"), so it just outranks the kit
   while per-widget button settings and components such as tabs still win. */
body[class*="elementor-kit-"] button,
body[class*="elementor-kit-"] .elementor-button,
body[class*="elementor-kit-"] input[type="button"],
body[class*="elementor-kit-"] input[type="submit"] {
  background-color: var(--wb-btn-bg);
  color: var(--wb-btn-text);
  border-color: var(--wb-btn-border);
  font-family: var(--wb-font-heading);
}
body[class*="elementor-kit-"] button:hover,
body[class*="elementor-kit-"] button:focus,
body[class*="elementor-kit-"] .elementor-button:hover,
body[class*="elementor-kit-"] .elementor-button:focus,
body[class*="elementor-kit-"] input[type="button"]:hover,
body[class*="elementor-kit-"] input[type="button"]:focus,
body[class*="elementor-kit-"] input[type="submit"]:hover,
body[class*="elementor-kit-"] input[type="submit"]:focus {
  background-color: var(--wb-btn-bg-hover);
  color: var(--wb-btn-text);
  border-color: var(--wb-btn-border);
}


/* --------------------------------------------------------------------------
   4. ACCESSIBILITY BASE (roadmap 1.4)
   -------------------------------------------------------------------------- */

/* Anchor targets and focused elements clear any sticky header (WCAG 2.4.11). */
html { scroll-padding-top: calc(var(--wb-sticky-offset) + var(--wb-space-2)); }

/* Focus: 3px dark ring, 3px white gap. The gap is a box-shadow filling the
   outline offset, so the ring shows on white, blue and dark-blue
   backgrounds alike. !important is needed because Elementor and its add-ons
   set "outline: none" in widget CSS with higher specificity; a visible focus
   indicator is a WCAG requirement (2.4.7), so it must always win.
   Elements focused only by script (tabindex="-1", such as <main> after the
   skip link) are excluded. The admin bar keeps WordPress's own styling. */
body.wb-theme :focus-visible:not([tabindex="-1"]):not(:where(#wpadminbar *)) {
  outline: var(--wb-focus-width) solid var(--wb-focus-ring) !important;
  outline-offset: var(--wb-focus-offset) !important;
  box-shadow: 0 0 0 var(--wb-focus-offset) var(--wb-focus-gap) !important;
}
body.wb-theme [tabindex="-1"]:focus { outline: none; }

/* Skip link: Hello prints it; it now has a target (<main id="content">,
   inc/accessibility.php). NHS pattern: yellow with black text, 9.41:1. */
body.wb-theme .skip-link:focus {
  position: fixed;
  top: var(--wb-space-1);
  left: var(--wb-space-1);
  z-index: 100000;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  padding: var(--wb-space-1) var(--wb-space-2);
  background: var(--nhs-warm-yellow);
  color: var(--nhs-black);
  font-family: var(--wb-font-heading);
  font-size: var(--wb-size-body);
  font-weight: var(--wb-weight-bold);
  text-decoration: underline;
}

/* Elementor entrance animations. Elementor hides animated elements until
   its script runs the animation, so with a slow or failed script the
   content (including the hero H1) never shows. Show them immediately and
   skip the animation. Turn off with the
   webicious_alder_disable_entrance_animations filter. */
body.wb-no-entrance-animations .elementor-invisible { visibility: visible; }
body.wb-no-entrance-animations .elementor-element.animated { animation-name: none; }

/* Respect a reduced-motion preference everywhere (WCAG 2.3.3).
   !important overrides animation and transition values set by any widget. */
@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;
  }
}


/* --------------------------------------------------------------------------
   5. wb-prose: CLASSIC EDITOR CONTENT (roadmap 1.2, decisions section 3)
   Staff can't add classes, so bare tags are styled here, and only inside
   this scope. Add the "wb-prose" class to Post Content and Text Editor
   widgets. Also covers Hello's fallback ".page-content" and the Classic
   Editor itself (".mce-content-body"), so the editor matches the site.
   -------------------------------------------------------------------------- */

html :is(.wb-prose, .page-content, .mce-content-body) {
  font-family: var(--wb-font-body);
  font-size: var(--wb-size-body);
  line-height: var(--wb-leading-normal);
  color: var(--wb-color-text);
}

html :is(.wb-prose, .page-content, .mce-content-body) :is(h2, h3, h4) {
  font-family: var(--wb-font-heading);
  font-weight: var(--wb-weight-bold);
  color: var(--wb-color-primary-dark);
  margin: 1.5em 0 0.5em;
}
html :is(.wb-prose, .page-content, .mce-content-body) h2 { font-size: var(--wb-size-h2); line-height: var(--wb-leading-snug); }
html :is(.wb-prose, .page-content, .mce-content-body) h3 { font-size: var(--wb-size-h3); line-height: var(--wb-leading-snug); }
html :is(.wb-prose, .page-content, .mce-content-body) h4 { font-size: var(--wb-size-h4); line-height: 1.3; }
html :is(.wb-prose, .page-content, .mce-content-body) > :first-child { margin-top: 0; }

html :is(.wb-prose, .page-content, .mce-content-body) p {
  margin: 0 0 var(--wb-space-2);
  max-width: var(--wb-measure);
}

/* Lists. Hello's reset sets list margin-bottom to 0, so a paragraph after a
   list sat right against it (learnings 4.4). */
html :is(.wb-prose, .page-content, .mce-content-body) :is(ul, ol) {
  margin: 0 0 var(--wb-space-2);
  padding-left: 1.5em;
  max-width: var(--wb-measure);
}
html :is(.wb-prose, .page-content, .mce-content-body) ul { list-style: disc; }
html :is(.wb-prose, .page-content, .mce-content-body) ol { list-style: decimal; }
html :is(.wb-prose, .page-content, .mce-content-body) li { margin-bottom: var(--wb-space-1); }
html :is(.wb-prose, .page-content, .mce-content-body) li > :is(ul, ol) { margin: var(--wb-space-1) 0 0; }

/* Links: underlined in body text, so they don't rely on colour (WCAG 1.4.1). */
html :is(.wb-prose, .page-content, .mce-content-body) a {
  color: var(--wb-color-primary);
  text-decoration: underline;
  text-decoration-thickness: var(--wb-link-underline);
  text-underline-offset: var(--wb-link-offset);
}
html :is(.wb-prose, .page-content, .mce-content-body) a:hover {
  color: var(--wb-color-primary-dark);
  text-decoration-thickness: var(--wb-link-underline-hover);
}

html :is(.wb-prose, .page-content, .mce-content-body) strong { font-weight: var(--wb-weight-bold); }

/* Images and WordPress alignment classes. On phones every alignment stacks. */
html :is(.wb-prose, .page-content, .mce-content-body) img { max-width: 100%; height: auto; }
html :is(.wb-prose, .page-content, .mce-content-body) .alignleft {
  float: left;
  margin: 0.25em var(--wb-space-3) var(--wb-space-2) 0;
}
html :is(.wb-prose, .page-content, .mce-content-body) .alignright {
  float: right;
  margin: 0.25em 0 var(--wb-space-2) var(--wb-space-3);
}
html :is(.wb-prose, .page-content, .mce-content-body) .aligncenter {
  display: block;
  margin: 0 auto var(--wb-space-2);
}
html :is(.wb-prose, .page-content) .alignnone { margin: 0 0 var(--wb-space-2); }
html :is(.wb-prose, .page-content)::after { content: ""; display: table; clear: both; }

html :is(.wb-prose, .page-content, .mce-content-body) .wp-caption { max-width: 100%; }
html :is(.wb-prose, .page-content, .mce-content-body) :is(.wp-caption-text, figcaption) {
  margin-top: var(--wb-space-1);
  font-size: var(--wb-size-small);
  color: var(--wb-color-text-muted);
}

@media (max-width: 767px) {
  html :is(.wb-prose, .page-content) :is(.alignleft, .alignright) {
    float: none;
    display: block;
    margin: 0 0 var(--wb-space-2);
  }
}

html :is(.wb-prose, .page-content, .mce-content-body) blockquote {
  margin: 0 0 var(--wb-space-3);
  padding: var(--wb-space-2) var(--wb-space-3);
  border-left: 6px solid var(--wb-color-primary);
  background: var(--wb-color-surface-alt);
  max-width: var(--wb-measure);
}
html :is(.wb-prose, .page-content, .mce-content-body) blockquote > :last-child { margin-bottom: 0; }

/* Tables. inc/content.php wraps each table in .wb-table-wrap so wide tables
   scroll on phones instead of squashing (WCAG 1.4.10). The table resets
   undo Hello's zebra stripes and hover tints. */
html :is(.wb-prose, .page-content) .wb-table-wrap {
  margin: 0 0 var(--wb-space-3);
  overflow-x: auto;
}
html :is(.wb-prose, .page-content, .mce-content-body) table {
  width: 100%;
  min-width: 480px;
  margin: 0 0 var(--wb-space-3);
  border-collapse: collapse;
  font-size: var(--wb-size-body);
}
html :is(.wb-prose, .page-content) .wb-table-wrap > table { margin-bottom: 0; }
html :is(.wb-prose, .page-content, .mce-content-body) :is(th, td) {
  padding: var(--wb-space-1) var(--wb-space-2);
  border: 1px solid var(--wb-color-border-strong);
  text-align: left;
  vertical-align: top;
  background: var(--wb-color-surface);
}
html :is(.wb-prose, .page-content, .mce-content-body) th {
  font-weight: var(--wb-weight-bold);
  background: var(--wb-color-surface-alt);
}
html :is(.wb-prose, .page-content, .mce-content-body) tr:hover > :is(th, td) { background-color: inherit; }
/* 1.2.1: Hello's zebra and hover tints (table tbody > tr:nth-child(odd) > td,
   specificity 0,1,4) outranked the cell rules above (0,1,2). These repeat
   the cell backgrounds at 0,1,5 so odd rows and hovered rows stay plain. */
html :is(.wb-prose, .page-content, .mce-content-body) table tbody > tr > td { background-color: var(--wb-color-surface); }
html :is(.wb-prose, .page-content, .mce-content-body) table tbody > tr > th { background-color: var(--wb-color-surface-alt); }

html :is(.wb-prose, .page-content, .mce-content-body) hr {
  margin: var(--wb-space-4) 0;
  border: 0;
  border-top: 1px solid var(--wb-color-border-strong);
}


/* --------------------------------------------------------------------------
   6. COMPONENTS (class contract, docs/class-contract.md section 4)
   Built from the agreed design specification, 1.2.0. Every widget's Style
   tab stays empty: Elementor holds layout and content, this file the look.
   Classes go in Advanced › CSS Classes. Elementor puts a widget's class on
   its outer wrapper, so rules target Elementor's inner elements (for
   example ".wb-button .elementor-button"). Rules use descendant selectors,
   so they work with and without Elementor's ".elementor-widget-container"
   wrapper (removed by the "optimised markup" feature).
   -------------------------------------------------------------------------- */

/* Shared icon helper. An icon is a pseudo-element painted in currentColor
   through an SVG mask; each component sets --wb-icon. */
.wb-theme .wb-sidebar-card__title .elementor-heading-title::before,
.wb-theme .wb-toc .elementor-toc__header-title::before,
.wb-theme .e-con.wb-card .elementor-icon-box-title::after,
.wb-theme .wb-link-list .menu-item > a::after,
.wb-theme .wb-link-list .e-loop-item .elementor-heading-title > a::after,
.wb-theme .wb-news-card__date .elementor-icon-list-item::before,
.wb-theme .wb-emergency__head::before {
  content: "";
  flex: none;
  display: inline-block;
  width: var(--wb-icon-inline);
  height: var(--wb-icon-inline);
  background-color: currentColor;
  -webkit-mask: var(--wb-icon) center / contain no-repeat;
          mask: var(--wb-icon) center / contain no-repeat;
}


/* 6.1 SECTION ------------------------------------------------------------- */
/* On a Boxed container. Spacing comes from the class: leave Elementor's
   padding empty. The content width follows the 1200px container. */
.wb-theme .e-con.wb-section {
  --padding-top: var(--wb-section-pad);
  --padding-bottom: var(--wb-section-pad);
  --padding-left: var(--wb-gutter);
  --padding-right: var(--wb-gutter);
  --content-width: min(100%, var(--wb-content-max));
}
.wb-theme .e-con.wb-section--white { background-color: var(--wb-color-surface); }
.wb-theme .e-con.wb-section--tint  { background-image: var(--wb-gradient-section-tint); }
.wb-theme .e-con.wb-section--soft  { background-image: var(--wb-gradient-section-soft); }
/* Notices 16px apart (1.2.2). Elementor Pro's Loop Grid gap is a Style-tab
   setting (default 30px), read from --grid-row-gap; any Loop Grid whose
   items are notices gets the gap from the theme, wherever it is placed. */
.wb-theme .elementor-loop-container:has(> .e-loop-item > .wb-notice) {
  --grid-row-gap: var(--wb-notice-gap);
}

/* Notices section (1.2.1): 40px top, 8px bottom (24px and 0 on mobile), so
   the notices sit close to the hero and the cards below. Use with
   wb-section--white. The extra class outranks Elementor's per-element CSS. */
.wb-theme .e-con.wb-section.wb-section--notices {
  --padding-top: var(--wb-notices-pad-top);
  --padding-bottom: var(--wb-notices-pad-bottom);
}

/* Section head: a row holding the title and an optional button. */
.wb-theme .e-con.wb-section__head {
  --padding-top: 0;
  --padding-bottom: 0;
  --padding-left: 0;
  --padding-right: 0;
  --container-widget-width: auto;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--wb-space-2);
  margin-block-end: var(--wb-space-4);
}

/* Section title (Heading widget, H2): accent underline from CSS. */
.wb-theme .wb-section__title .elementor-heading-title {
  margin: 0;
  font-size: var(--wb-size-section-title);
  line-height: var(--wb-leading-heading);
  color: var(--wb-color-primary-dark);
}
.wb-theme .wb-section__title .elementor-heading-title::after {
  content: "";
  display: block;
  width: var(--wb-title-rule);
  height: var(--wb-edge-thin);
  margin-top: var(--wb-space-1-5);
  border-radius: var(--wb-radius-pill);
  background-image: var(--wb-gradient-accent);
}


/* 6.2 CONTENT AND SIDEBAR GRID -------------------------------------------- */
/* Put .wb-content-grid on the section's container (Boxed or Full Width),
   with two child containers: .wb-content-grid__main and
   .wb-content-grid__sidebar. A Boxed container wraps its children in a
   hidden .e-con-inner, so the grid goes on that wrapper; a Full Width
   container holds its children directly (1.1.1). Stacks below 1024px. */
.wb-theme .e-con-full.wb-content-grid,
.wb-theme .e-con-boxed.wb-content-grid > .e-con-inner {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--wb-content-gap);
  align-items: start;
}

/* Main column and sidebar: cards stacked 24px apart. */
.wb-theme .e-con.wb-content-grid__main,
.wb-theme .e-con.wb-content-grid__sidebar {
  --padding-top: 0;
  --padding-bottom: 0;
  --padding-left: 0;
  --padding-right: 0;
}
.wb-theme .e-con-full:is(.wb-content-grid__main, .wb-content-grid__sidebar),
.wb-theme .e-con-boxed:is(.wb-content-grid__main, .wb-content-grid__sidebar) > .e-con-inner {
  display: flex;
  flex-direction: column;
  gap: var(--wb-grid-gap);
}

@media (max-width: 1023px) {
  .wb-theme .e-con-full.wb-content-grid,
  .wb-theme .e-con-boxed.wb-content-grid > .e-con-inner { grid-template-columns: minmax(0, 1fr); }

  /* Tablet: sidebar cards two across. */
  .wb-theme .e-con-full.wb-content-grid__sidebar,
  .wb-theme .e-con-boxed.wb-content-grid__sidebar > .e-con-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}
@media (max-width: 767px) {
  .wb-theme .e-con-full.wb-content-grid__sidebar,
  .wb-theme .e-con-boxed.wb-content-grid__sidebar > .e-con-inner { grid-template-columns: minmax(0, 1fr); }
}


/* 6.3 NOTICES ------------------------------------------------------------- */
/* Loop Item container: .wb-notice plus --high, --medium or --low.
   Elements: Post Title .wb-notice__title, Post Excerpt .wb-notice__text.
   The icon (High, Medium) and the "Notice" label (Low) come from CSS. */
.wb-theme .e-con.wb-notice {
  --padding-top: var(--wb-notice-padding-y);
  --padding-bottom: var(--wb-notice-padding-y);
  --padding-right: var(--wb-notice-padding-x);
  /* Room on the left for the icon. */
  --padding-left: calc(var(--wb-notice-padding-x) + var(--wb-icon-size) + var(--wb-space-2));
  --border-radius: var(--wb-radius);
  border-radius: var(--wb-radius);
  gap: var(--wb-space-1);
  background-repeat: no-repeat;
  background-position: var(--wb-notice-padding-x) var(--wb-notice-padding-y), 0 0;
  background-size: var(--wb-icon-size) var(--wb-icon-size), auto;
}

/* High: NHS Red, white text (4.87:1), warning icon. Elementor's widget
   defaults read the global colours, so they are re-pointed to white here. */
.wb-theme .e-con.wb-notice--high {
  --e-global-color-primary: var(--white);
  --e-global-color-text: var(--white);
  background-image: var(--wb-icon-warning-white);
  background-color: var(--wb-color-urgent);
  color: var(--white);
}

/* Medium: yellow tint, 8px Warm Yellow edge, black text, info icon. */
.wb-theme .e-con.wb-notice--medium {
  background-image: var(--wb-icon-info-black);
  background-color: var(--wb-tint-yellow);
  border-left: var(--wb-edge-notice) solid var(--nhs-warm-yellow);
  color: var(--wb-color-text);
}

/* Low (sidebar): white card, NHS Blue edge, shadow, no icon. */
.wb-theme .e-con.wb-notice--low {
  padding: var(--wb-notice-low-padding);
  background-image: none;
  background-color: var(--wb-color-surface);
  border-left: var(--wb-edge) solid var(--wb-color-primary);
  box-shadow: var(--wb-shadow);
  color: var(--wb-color-text);
}

.wb-theme .wb-notice__title .elementor-heading-title {
  margin: 0;
  font-size: var(--wb-size-notice-title);
  line-height: var(--wb-leading-heading);
  color: var(--wb-color-primary-dark);
}
.wb-theme .wb-notice--high .wb-notice__title .elementor-heading-title { color: var(--white); }
.wb-theme .wb-notice--medium .wb-notice__title .elementor-heading-title { color: var(--wb-color-text); }
.wb-theme .wb-notice--low .wb-notice__title .elementor-heading-title { font-size: var(--wb-size-notice-low-title); }

/* "Notice" pill label above a Low notice's title. */
.wb-theme .wb-notice--low .wb-notice__title .elementor-heading-title::before {
  content: "Notice";
  display: block;
  width: fit-content;
  margin-bottom: var(--wb-space-1);
  padding: 2px 10px;
  border-radius: var(--wb-radius-pill);
  background: var(--wb-tint-blue);
  color: var(--wb-color-primary-dark);  /* 10.4:1 on the tint */
  font-size: var(--wb-size-small);
  letter-spacing: var(--wb-tracking-wide);
  line-height: var(--wb-leading-normal);
}

.wb-theme .wb-notice__text {
  font-size: var(--wb-size-text);
  line-height: var(--wb-leading-normal);
  color: inherit;
}
.wb-theme .wb-notice--high .wb-notice__text { color: var(--white); }
.wb-theme .wb-notice--low .wb-notice__text {
  font-size: var(--wb-size-meta);
  color: var(--wb-color-text-muted);
}
/* The excerpt's own paragraph margin would unbalance the padding. */
.wb-theme .wb-notice__text :where(*):last-child { margin-bottom: 0; }


/* 6.4 QUICK-LINK CARD ----------------------------------------------------- */
/* Grid: .wb-card-grid (1.1.1) on the container holding the cards.
   Card: a container with HTML Tag "a (link)" and the link set on it, class
   .wb-card, holding one Icon Box with NO link. The whole card is one link
   and one tab stop. */
.wb-theme .e-con-full.wb-card-grid,
.wb-theme .e-con-boxed.wb-card-grid > .e-con-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wb-grid-gap);
}
.wb-theme .e-con-full.wb-card-grid {
  --padding-top: 0;
  --padding-bottom: 0;
  --padding-left: 0;
  --padding-right: 0;
}
@media (max-width: 1023px) {
  .wb-theme .e-con-full.wb-card-grid,
  .wb-theme .e-con-boxed.wb-card-grid > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .wb-theme .e-con-full.wb-card-grid,
  .wb-theme .e-con-boxed.wb-card-grid > .e-con-inner { grid-template-columns: minmax(0, 1fr); }
}

.wb-theme .e-con.wb-card {
  --border-radius: var(--wb-radius);
  padding: var(--wb-card-padding);
  border-radius: var(--wb-radius);
  /* Accent edge as a background layer: it follows the rounded corners. */
  background: var(--wb-gradient-accent) top / 100% var(--wb-edge) no-repeat, var(--wb-color-surface);
  box-shadow: var(--wb-shadow);
  color: var(--wb-color-text);
  text-decoration: none;
  transition: box-shadow var(--wb-transition), transform var(--wb-transition);
}
.wb-theme .e-con.wb-card:hover {
  box-shadow: var(--wb-shadow-lifted);
  transform: translateY(calc(-1 * var(--wb-lift)));
}

/* Icon Box inside the card: left-aligned. With Icon Position "Top",
   Elementor sets "align-items: unset !important" on the wrapper, so the
   icon is aligned with text-align instead. */
.wb-theme .e-con.wb-card .elementor-icon-box-wrapper {
  gap: var(--wb-space-1-5);
  text-align: start;
}
.wb-theme .e-con.wb-card .elementor-icon-box-icon { margin: 0; }
.wb-theme .e-con.wb-card .elementor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wb-icon-circle);
  height: var(--wb-icon-circle);
  border-radius: 50%;
  background: var(--wb-tint-blue);
  color: var(--wb-color-primary);
  fill: var(--wb-color-primary);
  font-size: var(--wb-icon-size);
}
.wb-theme .e-con.wb-card .elementor-icon svg {
  width: var(--wb-icon-size);
  height: var(--wb-icon-size);
}
.wb-theme .e-con.wb-card .elementor-icon-box-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wb-space-1-5);
  margin: 0 0 var(--wb-space-1-5);
  font-size: var(--wb-size-h3);
  line-height: var(--wb-leading-heading);
  color: var(--wb-color-primary-dark);
}
/* Arrow after the title; slides right on hover. */
.wb-theme .e-con.wb-card .elementor-icon-box-title::after {
  --wb-icon: var(--wb-icon-arrow);
  color: var(--wb-color-primary);
  transition: transform var(--wb-transition);
}
.wb-theme .e-con.wb-card:hover .elementor-icon-box-title::after {
  transform: translateX(var(--wb-nudge));
}
.wb-theme .e-con.wb-card .elementor-icon-box-description {
  margin: 0;
  font-size: var(--wb-size-text);
  line-height: var(--wb-leading-normal);
  color: var(--wb-color-text-muted);
}


/* 6.5 PAGE CONTENT BLOCK -------------------------------------------------- */
/* Loop Item container .wb-content-box; Post Title .wb-content-box__title
   (H2, no link); Post Content .wb-prose. */
.wb-theme .e-con.wb-content-box {
  --border-radius: var(--wb-radius);
  padding: var(--wb-content-box-padding);
  border-radius: var(--wb-radius);
  background: var(--wb-color-surface);
  box-shadow: var(--wb-shadow);
  gap: var(--wb-space-2);
}
.wb-theme .wb-content-box__title .elementor-heading-title {
  margin: 0;
  font-size: var(--wb-size-h2);
  line-height: var(--wb-leading-heading);
  color: var(--wb-color-primary-dark);
}


/* 6.6 TABLE OF CONTENTS --------------------------------------------------- */
/* Elementor Pro Table of Contents widget, class .wb-toc. The widget is
   styled through its own variables (zeroed here) and its inner classes.
   Unverified until tested on the site: Elementor Pro's CSS is not public. */
.wb-theme .wb-toc {
  /* Pro paints the panel from these variables, on the widget or on its
     inner container depending on Elementor's markup setting; both are set
     to the same values so either way the panel looks the same. */
  --box-background-color: var(--wb-tint-blue);
  --box-border-width: 0px;
  --box-border-radius: var(--wb-radius);
  --box-padding: 0px;
  --separator-width: 0px;
  --header-color: var(--wb-color-primary-dark);
  --item-text-color: var(--wb-color-primary);
  --item-text-hover-color: var(--wb-color-primary-dark);
  --item-text-decoration: none;
  --item-text-hover-decoration: underline;
  --marker-color: var(--wb-color-primary);
  --toc-body-max-height: none;
  padding: var(--wb-toc-padding);
  border-radius: var(--wb-radius);
  background: var(--wb-tint-blue);
}
.wb-theme .wb-toc .elementor-toc__header {
  display: flex;
  padding: 0;
  margin: 0 0 var(--wb-space-1);
  border: 0;
}
.wb-theme .wb-toc .elementor-toc__header-title {
  display: flex;
  align-items: center;
  gap: var(--wb-space-1-5);
  margin: 0;
  font-size: var(--wb-size-h4);
  line-height: var(--wb-leading-heading);
  color: var(--wb-color-primary-dark);
}
.wb-theme .wb-toc .elementor-toc__header-title::before {
  --wb-icon: var(--wb-icon-list);
  color: var(--wb-color-primary);
}
.wb-theme .wb-toc .elementor-toc__body {
  padding: 0;
  max-height: none;
  overflow: visible;
}
.wb-theme .wb-toc .elementor-toc__list-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wb-space-0-5) var(--wb-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.wb-theme .wb-toc .elementor-toc__list-item { margin: 0; }
.wb-theme .wb-toc .elementor-toc__list-item-text {
  display: flex;
  align-items: center;
  min-height: var(--wb-toc-row-height);
  font-size: var(--wb-size-text);
  font-weight: var(--wb-weight-bold);
  line-height: var(--wb-leading-snug);
  color: var(--wb-color-primary);
  text-decoration: none;
}
.wb-theme .wb-toc .elementor-toc__list-item-text:hover {
  color: var(--wb-color-primary-dark);
  text-decoration: underline;
  text-decoration-thickness: var(--wb-link-underline);
  text-underline-offset: var(--wb-link-offset);
}
@media (max-width: 767px) {
  .wb-theme .wb-toc .elementor-toc__list-wrapper { grid-template-columns: minmax(0, 1fr); }
}


/* 6.7 SIDEBAR CARD AND LINK LIST ------------------------------------------ */
/* Container .wb-sidebar-card plus --links, --related or --hours (sets the
   title icon). Heading H2 .wb-sidebar-card__title. Links: .wb-link-list on
   a WordPress "Navigation Menu" widget or on a Loop Grid. */
.wb-theme .e-con.wb-sidebar-card {
  --border-radius: var(--wb-radius);
  padding: var(--wb-sidebar-card-padding);
  border-radius: var(--wb-radius);
  background: var(--wb-gradient-accent) top / 100% var(--wb-edge-thin) no-repeat, var(--wb-color-surface);
  box-shadow: var(--wb-shadow);
  gap: var(--wb-space-1);
}
.wb-theme .wb-sidebar-card__title .elementor-heading-title {
  display: flex;
  align-items: center;
  gap: var(--wb-space-1-5);
  margin: 0;
  font-size: var(--wb-size-card-title);
  line-height: var(--wb-leading-heading);
  color: var(--wb-color-primary-dark);
}
.wb-theme .wb-sidebar-card__title .elementor-heading-title::before {
  color: var(--wb-color-primary);
  display: none;
}
.wb-theme .wb-sidebar-card--links   { --wb-card-icon: var(--wb-icon-link); }
.wb-theme .wb-sidebar-card--related { --wb-card-icon: var(--wb-icon-document); }
.wb-theme .wb-sidebar-card--hours   { --wb-card-icon: var(--wb-icon-clock); }
.wb-theme :is(.wb-sidebar-card--links, .wb-sidebar-card--related, .wb-sidebar-card--hours) .wb-sidebar-card__title .elementor-heading-title::before {
  --wb-icon: var(--wb-card-icon);
  display: inline-block;
}

/* Link list: 48px rows, dividers, chevron, no underline. */
.wb-theme .wb-link-list :is(.menu, .elementor-loop-container) {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wb-theme .wb-link-list :is(.menu-item, .e-loop-item) { margin: 0; }
.wb-theme .wb-link-list :is(.menu-item, .e-loop-item) + :is(.menu-item, .e-loop-item) {
  border-top: var(--wb-border-width) solid var(--wb-color-border);
}
.wb-theme .wb-link-list .menu-item > a,
.wb-theme .wb-link-list .e-loop-item .elementor-heading-title > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wb-space-1-5);
  min-height: var(--wb-row-height);
  margin: 0 calc(-1 * var(--wb-space-1));
  padding: var(--wb-space-1);
  border-radius: var(--wb-radius-small);
  font-size: var(--wb-size-text);
  font-weight: var(--wb-weight-bold);
  line-height: var(--wb-leading-snug);
  color: var(--wb-color-primary);
  text-decoration: none;
}
.wb-theme .wb-link-list .menu-item > a:hover,
.wb-theme .wb-link-list .e-loop-item .elementor-heading-title > a:hover {
  background: var(--wb-tint-blue);
  color: var(--wb-color-primary-dark);
}
.wb-theme .wb-link-list .menu-item > a::after,
.wb-theme .wb-link-list .e-loop-item .elementor-heading-title > a::after {
  --wb-icon: var(--wb-icon-chevron);
}
/* Loop Grid inside a link list: the Loop Item's own container adds no space. */
.wb-theme .wb-link-list .e-loop-item .e-con {
  --padding-top: 0;
  --padding-bottom: 0;
  --padding-left: 0;
  --padding-right: 0;
}


/* 6.8 EMERGENCY CARD ------------------------------------------------------ */
/* Container .wb-emergency holding an HTML widget with the fixed markup in
   docs/class-contract.md (replaced by the gp-core shortcode later). */
.wb-theme .e-con.wb-emergency {
  --padding-top: 0;
  --padding-bottom: 0;
  --padding-left: 0;
  --padding-right: 0;
  --border-radius: var(--wb-radius);
  --overflow: hidden;
  overflow: hidden;
  border-radius: var(--wb-radius);
  background: var(--wb-color-surface);
  box-shadow: var(--wb-shadow);
}
.wb-theme .wb-emergency__head {
  display: flex;
  align-items: center;
  gap: var(--wb-space-1-5);
  padding: var(--wb-emergency-head-padding);
  background: var(--wb-color-urgent);
  color: var(--white);
}
.wb-theme .wb-emergency__head::before { --wb-icon: var(--wb-icon-warning); }
.wb-theme .wb-emergency__title {
  margin: 0;
  font-size: var(--wb-size-card-title);
  line-height: var(--wb-leading-heading);
  color: var(--white);
}
.wb-theme .wb-emergency__body {
  display: flex;
  flex-direction: column;
  gap: var(--wb-space-1-5);
  padding: var(--wb-emergency-body-padding);
}
.wb-theme .wb-emergency__call {
  display: flex;
  align-items: center;
  gap: var(--wb-space-2);
  min-height: var(--wb-call-height);
  padding: var(--wb-space-1-5) var(--wb-space-2);
  border-radius: var(--wb-radius-small);
  color: var(--white);
  text-decoration: none;
}
.wb-theme .wb-emergency__call:hover,
.wb-theme .wb-emergency__call:focus { color: var(--white); filter: var(--wb-hover-dim); }
.wb-theme .wb-emergency__call--999 { background-color: var(--wb-color-urgent); }  /* 4.87:1 */
.wb-theme .wb-emergency__call--111 { background-color: var(--wb-color-primary); } /* 6.38:1 */
.wb-theme .wb-emergency__number {
  font-size: var(--wb-size-call);
  font-weight: var(--wb-weight-bold);
  line-height: 1;
}
.wb-theme .wb-emergency__label {
  font-size: var(--wb-size-meta);
  font-weight: var(--wb-weight-bold);
  line-height: var(--wb-leading-snug);
}
.wb-theme .wb-emergency__text {
  margin: 0;
  font-size: var(--wb-size-text);
  line-height: var(--wb-leading-normal);
  color: var(--wb-color-text);
}
.wb-theme .wb-emergency__link {
  color: var(--wb-color-primary);
  text-decoration: underline;
  text-decoration-thickness: var(--wb-link-underline);
  text-underline-offset: var(--wb-link-offset);
}
.wb-theme .wb-emergency__link:hover {
  color: var(--wb-color-primary-dark);
  text-decoration-thickness: var(--wb-link-underline-hover);
}


/* 6.9 OPENING HOURS ------------------------------------------------------- */
/* Table .wb-hours, output by the gp-core [webicious_gp_hours] shortcode
   (task 2.4) inside a .wb-sidebar-card--hours card. The resets undo Hello's
   table borders, zebra stripes and hover tints. */
.wb-theme .wb-hours {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  font-size: var(--wb-size-text);
}
.wb-theme .wb-hours :is(.wb-hours__day, .wb-hours__time) {
  padding: var(--wb-space-1);
  border: 0;
  border-top: var(--wb-border-width) solid var(--wb-color-border);
  background: transparent;
  line-height: var(--wb-leading-snug);
  color: var(--wb-color-text);
  text-align: start;
  vertical-align: top;
}
.wb-theme .wb-hours .wb-hours__day { font-weight: var(--wb-weight-bold); }
.wb-theme .wb-hours .wb-hours__time { font-weight: var(--wb-weight-regular); text-align: end; }
.wb-theme .wb-hours .wb-hours__row:first-child :is(.wb-hours__day, .wb-hours__time) { border-top: 0; }
.wb-theme .wb-hours .wb-hours__row--today :is(.wb-hours__day, .wb-hours__time) { background: var(--wb-tint-blue); }
.wb-theme .wb-hours__note {
  margin: var(--wb-space-1-5) 0 0;
  font-size: var(--wb-size-small);
  color: var(--wb-color-text-muted);
}


/* 6.10 NEWS CARD ---------------------------------------------------------- */
/* Loop Item container .wb-news-card; Post Info (date) .wb-news-card__date;
   Post Title (H3, linked) .wb-news-card__title; Post Excerpt
   .wb-news-card__text. The title link covers the card; "Read more" and the
   date icon come from CSS. */
.wb-theme .e-con.wb-news-card {
  --border-radius: var(--wb-radius);
  --height: 100%;
  padding: var(--wb-card-padding);
  border-radius: var(--wb-radius);
  background: var(--wb-gradient-accent) top / 100% var(--wb-edge) no-repeat, var(--wb-color-surface);
  box-shadow: var(--wb-shadow);
  gap: var(--wb-space-1-5);
  transition: box-shadow var(--wb-transition), transform var(--wb-transition);
}
.wb-theme .e-con.wb-news-card:hover {
  box-shadow: var(--wb-shadow-lifted);
  transform: translateY(calc(-1 * var(--wb-lift)));
}
/* "Read more" with an arrow, pinned to the bottom of the card. Decorative:
   the title link already names the article. */
.wb-theme .e-con.wb-news-card::after {
  content: "Read more";
  display: block;
  width: fit-content;
  margin-top: auto;
  padding-right: calc(var(--wb-icon-inline) + var(--wb-space-1));
  background: var(--wb-icon-arrow-blue) right center / var(--wb-icon-inline) no-repeat;
  font-size: var(--wb-size-text);
  font-weight: var(--wb-weight-bold);
  color: var(--wb-color-primary);
}

.wb-theme .wb-news-card__date :is(.elementor-post-info, .elementor-icon-list-items) {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wb-theme .wb-news-card__date .elementor-icon-list-item {
  display: flex;
  align-items: center;
  gap: var(--wb-space-1);
  margin: 0;
  font-size: var(--wb-size-meta);
  color: var(--wb-color-text-muted);
}
.wb-theme .wb-news-card__date .elementor-icon-list-item::before {
  --wb-icon: var(--wb-icon-calendar);
  width: var(--wb-icon-small);
  height: var(--wb-icon-small);
}
/* The widget's own icon is replaced by the CSS icon above. */
.wb-theme .wb-news-card__date .elementor-icon-list-icon { display: none; }
.wb-theme .wb-news-card__date .elementor-icon-list-text {
  padding: 0;
  font-size: var(--wb-size-meta);
  color: var(--wb-color-text-muted);
}

.wb-theme .wb-news-card__title .elementor-heading-title {
  margin: 0;
  font-size: var(--wb-size-h3);
  line-height: var(--wb-leading-heading);
  color: var(--wb-color-primary-dark);
}
.wb-theme .wb-news-card__title .elementor-heading-title a {
  color: inherit;
  text-decoration: none;
}
/* Stretched link: the whole card is clickable through the title link. */
.wb-theme .wb-news-card__title .elementor-heading-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.wb-theme .wb-news-card__text {
  font-size: var(--wb-size-text);
  line-height: var(--wb-leading-normal);
  color: var(--wb-color-text-muted);
}
.wb-theme .wb-news-card__text :where(*):last-child { margin-bottom: 0; }


/* 6.11 BUTTONS ------------------------------------------------------------ */
/* Button widget with .wb-button plus one role. The rules style
   ".elementor-button" inside the widget. Each hover rule outranks the base
   button rule in section 3 ("body[class*=elementor-kit-] ...:hover"). */
.wb-theme .wb-button .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wb-space-1-5);
  min-height: var(--wb-button-height);
  padding: var(--wb-space-1-5) var(--wb-space-3);
  border: var(--wb-button-border) solid transparent;
  border-radius: var(--wb-radius-small);
  font-family: var(--wb-font-heading);
  font-size: var(--wb-size-button);
  font-weight: var(--wb-weight-bold);
  line-height: var(--wb-leading-heading);
  text-decoration: none;
  transition: background-color var(--wb-transition), color var(--wb-transition);
}
.wb-theme .wb-button .elementor-button-icon svg { width: 1em; height: 1em; fill: currentColor; }

/* Primary: NHS Blue, white text (6.38:1); hover Dark Blue (11.85:1). */
.wb-theme .wb-button--primary .elementor-button {
  background-color: var(--wb-color-primary);
  border-color: var(--wb-color-primary);
  color: var(--white);
}
.wb-theme .wb-button--primary .elementor-button:is(:hover, :focus) {
  background-color: var(--wb-color-primary-dark);
  border-color: var(--wb-color-primary-dark);
  color: var(--white);
}

/* Secondary: white, NHS Blue border and text; hover blue tint. */
.wb-theme .wb-button--secondary .elementor-button {
  background-color: var(--wb-color-surface);
  border-color: var(--wb-color-primary);
  color: var(--wb-color-primary);
}
.wb-theme .wb-button--secondary .elementor-button:is(:hover, :focus) {
  background-color: var(--wb-tint-blue);
  border-color: var(--wb-color-primary);
  color: var(--wb-color-primary-dark);
}

/* On dark (hero): white, Dark Blue text; hover Pale Grey. */
.wb-theme .wb-button--on-dark .elementor-button {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--wb-color-primary-dark);
}
.wb-theme .wb-button--on-dark .elementor-button:is(:hover, :focus) {
  background-color: var(--nhs-pale-grey);
  border-color: var(--nhs-pale-grey);
  color: var(--wb-color-primary-dark);
}

/* On dark, outline: white border and text; hover translucent white. */
.wb-theme .wb-button--on-dark-outline .elementor-button {
  background-color: transparent;
  border-color: var(--white);
  color: var(--white);
}
.wb-theme .wb-button--on-dark-outline .elementor-button:is(:hover, :focus) {
  background-color: var(--wb-on-dark-hover);
  border-color: var(--white);
  color: var(--white);
}


/* 6.12 HERO (Home) AND BANNER (inner pages) ------------------------------- */
/* Boxed containers in the header templates (roadmap phase 3). Hero gradient
   with fine diagonal lines and a 6px accent bottom edge, all as background
   layers. Elementor's widget defaults are re-pointed to white inside. */
.wb-theme .e-con:is(.wb-hero, .wb-banner) {
  --e-global-color-primary: var(--white);
  --e-global-color-text: var(--white);
  --padding-left: var(--wb-gutter);
  --padding-right: var(--wb-gutter);
  --content-width: min(100%, var(--wb-content-max));
  background:
    var(--wb-gradient-accent) bottom / 100% var(--wb-edge) no-repeat,
    var(--wb-gradient-hero-texture),
    var(--wb-gradient-hero);
  color: var(--white);
}
.wb-theme .e-con.wb-hero {
  --padding-top: var(--wb-hero-padding-top);
  --padding-bottom: var(--wb-hero-padding-bottom);
  --row-gap: var(--wb-space-2);
}
.wb-theme .wb-hero__title .elementor-heading-title {
  margin: 0;
  font-size: var(--wb-size-hero);
  line-height: var(--wb-leading-tight);
  color: var(--white);
}
.wb-theme .wb-hero__lead {
  max-width: var(--wb-hero-lead-max);
  margin-bottom: var(--wb-space-2);
  font-size: var(--wb-size-lead);
  line-height: var(--wb-leading-normal);
  color: var(--white);
}
.wb-theme .wb-hero__lead :where(*):last-child { margin-bottom: 0; }
.wb-theme .e-con.wb-hero__actions {
  --padding-top: 0;
  --padding-bottom: 0;
  --padding-left: 0;
  --padding-right: 0;
  --container-widget-width: auto;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--wb-space-2);
}

.wb-theme .e-con.wb-banner {
  --padding-top: var(--wb-banner-padding-top);
  --padding-bottom: var(--wb-banner-padding-bottom);
  --row-gap: var(--wb-space-1-5);
}
.wb-theme .wb-banner__title .elementor-heading-title {
  margin: 0;
  font-size: var(--wb-size-h1);
  line-height: var(--wb-leading-heading);
  color: var(--white);
}
/* Breadcrumbs come from SEOPress, whose markup has no classes on its
   links, so "a" is targeted here (documented exception to contract rule 2). */
.wb-theme .wb-banner__crumbs {
  font-size: var(--wb-size-meta);
  color: var(--white);
}
.wb-theme .wb-banner__crumbs a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-thickness: var(--wb-link-underline);
  text-underline-offset: var(--wb-link-offset);
}
.wb-theme .wb-banner__crumbs a:hover {
  color: var(--white);
  text-decoration-thickness: var(--wb-link-underline-hover);
}

@media (max-width: 767px) {
  /* Hero buttons run full width on phones. */
  .wb-theme .e-con.wb-hero__actions > .wb-button,
  .wb-theme .e-con.wb-hero__actions .wb-button .elementor-button { width: 100%; }
}


/* 6.13 FOOTER ------------------------------------------------------------- */
/* Boxed container .wb-footer: NHS Dark Blue, 6px accent top edge, white
   text. Children: .wb-footer__columns (44 / 28 / 28) and .wb-footer__bottom.
   Menus are WordPress "Navigation Menu" widgets; footer text links are
   targeted as "a" because widget markup has no link classes (documented
   exception to contract rule 2). */
.wb-theme .e-con.wb-footer {
  --e-global-color-primary: var(--white);
  --e-global-color-text: var(--white);
  --padding-top: var(--wb-footer-padding-top);
  --padding-bottom: 0;
  --padding-left: var(--wb-gutter);
  --padding-right: var(--wb-gutter);
  --content-width: min(100%, var(--wb-content-max));
  --row-gap: 0;
  background: var(--wb-gradient-accent) top / 100% var(--wb-edge) no-repeat, var(--nhs-dark-blue);
  color: var(--wb-color-on-dark);
  font-size: var(--wb-size-text);
}
.wb-theme .wb-footer a:where(:not(.elementor-button)) {
  color: var(--wb-color-on-dark);
  text-decoration: none;
}
.wb-theme .wb-footer a:where(:not(.elementor-button)):hover {
  color: var(--wb-color-on-dark);
  text-decoration: underline;
  text-decoration-thickness: var(--wb-link-underline);
  text-underline-offset: var(--wb-link-offset);
}
.wb-theme .wb-footer .elementor-widget-text-editor { color: var(--wb-color-on-dark); }
.wb-theme .wb-footer .menu {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wb-theme .wb-footer .menu-item { margin: 0 0 var(--wb-space-1); }

.wb-theme .e-con:is(.wb-footer__columns, .wb-footer__bottom) {
  --padding-top: 0;
  --padding-bottom: 0;
  --padding-left: 0;
  --padding-right: 0;
}
.wb-theme .e-con-full.wb-footer__columns,
.wb-theme .e-con-boxed.wb-footer__columns > .e-con-inner {
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 28fr) minmax(0, 28fr);
  gap: var(--wb-space-5);
}
/* Column containers inside the grid add no space of their own. */
.wb-theme .wb-footer__columns .e-con {
  --padding-top: 0;
  --padding-bottom: 0;
  --padding-left: 0;
  --padding-right: 0;
}
.wb-theme .wb-footer__title .elementor-heading-title {
  margin: 0 0 var(--wb-space-1-5);
  font-size: var(--wb-size-h4);
  line-height: var(--wb-leading-heading);
  color: var(--wb-color-on-dark);
}

/* Opening hours in the footer: white, no dividers or tint; times aligned
   to the right so the column closes on the page edge. */
.wb-theme .wb-footer .wb-hours :is(.wb-hours__day, .wb-hours__time) {
  padding: var(--wb-space-0-5) 0;
  border: 0;
  background: transparent;
  color: var(--wb-color-on-dark);
}
.wb-theme .wb-footer .wb-hours__note { color: var(--wb-color-on-dark); }

/* Bottom bar: © line and the Small print menu. */
.wb-theme .e-con.wb-footer__bottom {
  --container-widget-width: auto;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--wb-space-2);
  margin-block-start: var(--wb-space-6);
  padding: var(--wb-footer-bottom-padding);
  border-top: var(--wb-border-width) solid var(--wb-on-dark-rule);
  font-size: var(--wb-size-meta);
  color: var(--wb-color-on-dark);
  text-align: start;
}
.wb-theme .wb-footer__bottom :where(p):last-child { margin-bottom: 0; }
.wb-theme .wb-footer__small-print .menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wb-space-1) var(--wb-space-3);
}
.wb-theme .wb-footer__small-print .menu-item { margin: 0; }

@media (max-width: 1023px) {
  /* Tablet: first column full width, the other two side by side. */
  .wb-theme .e-con-full.wb-footer__columns,
  .wb-theme .e-con-boxed.wb-footer__columns > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb-theme .e-con-full.wb-footer__columns > :first-child,
  .wb-theme .e-con-boxed.wb-footer__columns > .e-con-inner > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .wb-theme .e-con-full.wb-footer__columns,
  .wb-theme .e-con-boxed.wb-footer__columns > .e-con-inner { grid-template-columns: minmax(0, 1fr); }
}


/* 6.14 HEADER BAND (1.2.1) ------------------------------------------------ */
/* White band: logo, practice name and address on the left, search on the
   right. Structure (class contract, "Header band"):
     Container (Boxed, Row, Wrap)              .wb-header
     ├── Container (Full Width)                .wb-header__brand
     │   ├── Image                             .wb-header__logo
     │   ├── Heading (HTML Tag: div)           .wb-practice-name
     │   └── Heading (HTML Tag: div)           .wb-practice-address
     └── Search (Elementor Pro)                .wb-search
   The brand container is a grid: the logo spans two rows, the name sits
   above the address, so no extra container is needed for the text.
   Selectors include .wb-header so they outrank Elementor's per-element CSS
   (0,3,0) if a width was set in the editor. */
.wb-theme .e-con.wb-header {
  --padding-top: var(--wb-header-padding-y);
  --padding-bottom: var(--wb-header-padding-y);
  --padding-left: var(--wb-gutter);
  --padding-right: var(--wb-gutter);
  --content-width: min(100%, var(--wb-content-max));
  --row-gap: var(--wb-space-2);
  --column-gap: var(--wb-space-3);
  background-color: var(--wb-color-surface);
}

/* Brand: logo | name / address. */
.wb-theme .wb-header .e-con.wb-header__brand {
  --display: grid;
  --width: auto;
  --padding-top: 0;
  --padding-bottom: 0;
  --padding-left: 0;
  --padding-right: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--wb-space-2);
  row-gap: var(--wb-space-0-5);
  /* Grows into the space the search leaves; a long practice name wraps
     onto a second line rather than pushing the search below. */
  flex: 1 1 var(--wb-brand-min);
  width: auto;
  min-width: 0;
}
.wb-theme .wb-header .e-con.wb-header__brand > .elementor-widget {
  width: auto;
  max-width: 100%;
  margin: 0;
}
.wb-theme .wb-header .wb-header__logo {
  grid-column: 1;
  grid-row: 1 / span 2;
  line-height: 0;
}
/* Width and height both auto with two maximums: the logo keeps its shape
   and fits a 160 x 56px box (44px high on phones). */
.wb-theme .wb-header .wb-header__logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: var(--wb-logo-max-width);
  max-height: var(--wb-logo-height);
}
.wb-theme .wb-header .wb-practice-name {
  grid-column: 2;
  align-self: end;
}
.wb-theme .wb-header .wb-practice-address {
  grid-column: 2;
  align-self: start;
}
/* Elementor colours and sizes the Heading's inner title, not its wrapper,
   so the rules target .elementor-heading-title. */
.wb-theme .wb-practice-name .elementor-heading-title {
  margin: 0;
  font-family: var(--wb-font-heading);
  font-size: var(--wb-size-practice-name);
  font-weight: var(--wb-weight-bold);
  line-height: var(--wb-leading-heading);
  color: var(--wb-color-text);
}
.wb-theme .wb-practice-address .elementor-heading-title {
  margin: 0;
  font-family: var(--wb-font-body);
  font-size: var(--wb-size-meta);
  font-weight: var(--wb-weight-regular);
  line-height: var(--wb-leading-snug);
  color: var(--wb-color-text-muted);
}

/* Search: Elementor Pro's Search widget (Elementor 3.24+; it replaced the
   Search Form widget). The widget is styled through its own custom
   properties, declared on .elementor-widget-search; these declarations sit
   on the same element with higher specificity. Input and button join into
   one control: 2px Dark Grey border, NHS Blue button. */
.wb-theme .wb-header .elementor-widget-search.wb-search {
  --container-widget-width: var(--wb-search-width);
  --container-widget-flex-grow: 0;
  --e-search-input-color: var(--wb-color-text);
  --e-search-input-border-color: var(--wb-search-border);
  --e-search-input-border-radius: var(--wb-radius-small) 0 0 var(--wb-radius-small);
  --e-search-input-padding-block-start: var(--wb-space-1);
  --e-search-input-padding-block-end: var(--wb-space-1);
  --e-search-input-padding-inline-start: var(--wb-space-1-5);
  --e-search-input-padding-inline-end: var(--wb-space-1-5);
  --e-search-placeholder-color: var(--wb-color-text-muted);
  --e-search-icon-label-color: var(--wb-color-text-muted);
  --e-search-submit-color: var(--white);
  --e-search-icon-submit-color: var(--white);
  --e-search-submit-background-color: var(--wb-color-primary);
  --e-search-submit-border-radius: 0 var(--wb-radius-small) var(--wb-radius-small) 0;
  --e-search-submit-padding: 0 var(--wb-space-2);
  --e-search-submit-margin-inline-start: 0px;
  flex: 0 1 var(--wb-search-width);
  width: var(--wb-search-width);
  max-width: 100%;
}
.wb-theme .wb-search .e-search-form { display: flex; width: 100%; }
.wb-theme .wb-search .e-search-input-wrapper { flex: 1 1 auto; min-width: 0; }
.wb-theme .wb-search .e-search-input {
  width: 100%;
  min-height: var(--wb-search-height);
  border: var(--wb-border-width) solid var(--wb-search-border);
  border-right-width: 0;
  background-color: var(--wb-color-surface);
  font-family: var(--wb-font-body);
  font-size: var(--wb-size-text);
  /* Hello's reset animates "all" on inputs; focus shows at once instead. */
  transition: none;
}
/* 1.2.2: focus turns the field's border NHS Blue and 2px thick (1px border
   plus a 1px inner line, so nothing moves), in place of the theme's
   black-and-white focus ring on this one field. The change from 1px Mid
   Grey to 2px NHS Blue (6.38:1) keeps focus clearly visible (WCAG 2.4.7).
   !important and the extra classes beat the theme-wide focus rule, which
   is itself !important (section 4). */
body.wb-theme .wb-search .e-search-input:is(:focus, :focus-visible) {
  border-color: var(--wb-color-primary);
  outline: none !important;
  box-shadow: inset 0 0 0 var(--wb-border-width) var(--wb-color-primary) !important;
}
.wb-theme .wb-search .e-search-submit {
  flex: 0 0 auto;
  min-height: var(--wb-search-height);
  border: 0;
  font-family: var(--wb-font-heading);
  font-size: var(--wb-size-text);
  font-weight: var(--wb-weight-bold);
  transition: background-color var(--wb-transition);
}
.wb-theme .wb-search .e-search-submit:is(:hover, :focus-visible) {
  background-color: var(--wb-color-primary-dark);
  color: var(--white);
}

@media (max-width: 767px) {
  /* Search drops under the brand and runs full width. */
  .wb-theme .wb-header .elementor-widget-search.wb-search {
    --container-widget-width: 100%;
    flex-basis: 100%;
    width: 100%;
  }
}


/* 6.15 MAIN NAVIGATION (1.2.1) -------------------------------------------- */
/* Boxed container .wb-nav holding Elementor Pro's Nav Menu widget (not the
   newer "Menu" widget). NHS Blue bar, 7 items spread across the width,
   white bold text, Dark Blue on hover, a 4px Warm Yellow bar under the
   current page. Below the Nav Menu's breakpoint (Tablet, 1023px) the
   widget shows its toggle, labelled "Menu". */
.wb-theme .e-con.wb-nav {
  --padding-top: 0;
  --padding-bottom: 0;
  --padding-left: var(--wb-gutter);
  --padding-right: var(--wb-gutter);
  --content-width: min(100%, var(--wb-content-max));
  background-color: var(--wb-color-primary);
}
.wb-theme .wb-nav .elementor-widget-nav-menu { width: 100%; }
.wb-theme .wb-nav .elementor-nav-menu--main { width: 100%; }
.wb-theme .wb-nav .elementor-nav-menu--main > .elementor-nav-menu {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: 100%;
}
/* !important: Elementor Pro prints the link colour from the kit's global
   colours, with hover and active variants of varying specificity. */
.wb-theme .wb-nav .elementor-nav-menu--main .elementor-item {
  padding: var(--wb-nav-item-padding);
  border-bottom: var(--wb-nav-indicator) solid transparent;
  background-color: transparent;
  color: var(--white) !important;
  font-family: var(--wb-font-heading);
  font-size: var(--wb-size-nav);
  font-weight: var(--wb-weight-regular);  /* 1.2.2: regular, was bold */
  line-height: var(--wb-leading-heading);
  text-decoration: none;
  transition: background-color var(--wb-transition), border-color var(--wb-transition);
}
.wb-theme .wb-nav .elementor-nav-menu--main .elementor-item:is(:hover, :focus-visible) {
  background-color: var(--wb-color-primary-dark);
}
.wb-theme .wb-nav .elementor-nav-menu--main .elementor-item.elementor-item-active {
  border-bottom-color: var(--nhs-warm-yellow);
}
/* Elementor's hover "pointer" lines are pseudo-elements; the theme's
   indicator is the border, so whatever Pointer is set to is hidden. */
.wb-theme .wb-nav .elementor-item::before,
.wb-theme .wb-nav .elementor-item::after { display: none; }

/* Toggle (tablet and mobile): white icon plus the word "Menu". The
   widget's own aria-label stays the accessible name. */
/* 1.2.2: on the left, as in the wireframe. The widget's Toggle Align
   default prints "margin: 0 auto" in the page CSS at 0,4,0; body.wb-theme
   lifts this rule to 0,4,1. */
body.wb-theme .wb-nav .elementor-widget-nav-menu .elementor-menu-toggle {
  margin-left: 0;
  margin-right: auto;
}
.wb-theme .wb-nav .elementor-menu-toggle {
  --nav-menu-icon-size: var(--wb-toggle-icon);
  --nav-menu-icon-color: var(--white);
  justify-content: flex-start;
  gap: var(--wb-space-1-5);
  min-height: var(--wb-toggle-height);
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--white);
}
.wb-theme .wb-nav .elementor-menu-toggle :is(svg, .e-font-icon-svg) { fill: currentColor; }
.wb-theme .wb-nav .elementor-menu-toggle::after {
  content: "Menu";
  font-family: var(--wb-font-heading);
  font-size: var(--wb-size-button);
  font-weight: var(--wb-weight-bold);
  line-height: 1;
}

/* Dropdown (opened by the toggle): Dark Blue list, white items with dividers,
   the current page marked by a Warm Yellow bar on the left. */
.wb-theme .wb-nav .elementor-nav-menu--dropdown {
  background-color: var(--wb-color-primary-dark);
}
.wb-theme .wb-nav .elementor-nav-menu--dropdown .elementor-item {
  display: block;
  padding: var(--wb-space-2) var(--wb-space-3);
  border-bottom: var(--wb-border-width) solid var(--wb-on-dark-rule);
  background-color: transparent;
  color: var(--white) !important; /* Beats the widget's dropdown link colour. */
  font-family: var(--wb-font-heading);
  font-size: var(--wb-size-nav);
  font-weight: var(--wb-weight-regular);  /* 1.2.2: regular, as the main nav */
  text-decoration: none;
}
.wb-theme .wb-nav .elementor-nav-menu--dropdown .elementor-item:is(:hover, :focus-visible) {
  background-color: var(--wb-color-primary);
}
.wb-theme .wb-nav .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
  box-shadow: inset var(--wb-nav-indicator) 0 0 var(--nhs-warm-yellow);
}


/* --------------------------------------------------------------------------
   7. CLASSES INHERITED FROM 1.0.0, NOT YET REVIEWED
   Not part of the class contract (docs/class-contract.md section 5).
   wb-header, wb-practice-name, wb-practice-address, wb-search and wb-nav
   moved to sections 6.14 and 6.15 in 1.2.1.
   -------------------------------------------------------------------------- */

/* Layout */
.wb-container {
  max-width: var(--wb-container-max);
  margin: 0 auto;
  padding-left: var(--wb-gutter);
  padding-right: var(--wb-gutter);
}
.wb-badge {
  display: inline-block;
  background: var(--wb-color-primary);
  color: var(--white);
  font-family: var(--wb-font-heading);
  font-size: 20px;
  padding: 7px 12px;
  border-radius: var(--wb-radius-small);
}