/* ==========================================================================
   NHS DESIGN SYSTEM — GP Surgery Elementor Template
   ==========================================================================
   Concept A (overall layout, hero, nav, icon card grid, footer) combined
   with Concept B's bordered content-box treatment for page-content sections
   (About Us / Help Us to Help You) — white background, subtle border,
   no grey section backdrop.

   HOW TO USE THIS FILE IN ELEMENTOR
   ----------------------------------
   1. Anything with a native Elementor control (widget background colour,
      button colour, heading font) — set it via Site Settings > Global
      Colors / Global Fonts using the values in ELEMENTOR-SETUP-GUIDE.md.
      Those controls generate their own CSS and don't need this file.
   2. Anything bespoke (hero overlay, coloured notices, icon cards, the
      content-box/sidebar pattern, facilities row) — build it with a plain
      Elementor Container/widget, then add the matching "gpw-" class below
      in that element's Advanced tab > CSS Classes field. This file styles
      those classes. The guide has the full element-to-class map.
   3. Responsive sizing is handled with CSS custom properties that get
      redefined at 1024px and 767px — matching Elementor's default Tablet
      and Mobile breakpoints. If Site Settings > Layout > Breakpoints has
      been customised (the live sites show "additional_custom_breakpoints"
      is enabled), update the two media query values below to match.
   ========================================================================== */


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

:root {

  /* --- NHS colour palette (source: nhsidentity guidelines) --- */
  --nhs-dark-blue:     #003087;
  --nhs-blue:          #005EB8;   /* Primary — dominant brand colour */
  --nhs-bright-blue:   #0072CE;
  --nhs-light-blue:    #41B6E6;
  --nhs-aqua-blue:     #00A9CE;

  --nhs-black:         #231F20;
  --nhs-dark-grey:     #425563;
  --nhs-mid-grey:      #768692;
  --nhs-pale-grey:     #E8EDEE;
  --white:             #FFFFFF;

  --nhs-dark-green:    #006747;
  --nhs-green:         #009639;
  --nhs-aqua-green:    #00A499;

  --nhs-red:           #DA291C;  /* Emergency Services Red — urgent notices only */
  --nhs-warm-yellow:   #FFB81C;  /* highlight / informational notices only */

  /* --- Derived / support tones (not in the official swatches, mixed from
         NHS Pale Grey so borders read as "subtle" rather than decorative) --- */
  --gpw-border:        #D7E0E4;
  --gpw-notice-red-bg:    #FCEAE8;   /* kept for anywhere a flat fallback is needed */
  --gpw-notice-yellow-bg: #FFF6E6;
  --gpw-icon-bg-accent:   #E6F5EC;   /* was a hardcoded hex on .gpw-facility — now a token */

  /* --- Gradients. All subtle by design — tints/shades of the same hue, never
         a jump between unrelated colours, so nothing reads as "loud" or
         competes with the NHS blue+white emphasis rule. --- */
  --gpw-gradient-hero-overlay:  linear-gradient(120deg, rgba(0,48,135,0.82), rgba(0,94,184,0.55));
  --gpw-gradient-hero-fallback: linear-gradient(135deg, var(--nhs-blue), var(--nhs-dark-blue));
  --gpw-gradient-section-alt:   linear-gradient(180deg, var(--white), var(--nhs-pale-grey));
  --gpw-gradient-card:          linear-gradient(180deg, var(--white) 60%, #F4F8F9 100%);
  --gpw-gradient-icon:          radial-gradient(circle at 35% 30%, #FFFFFF, var(--nhs-pale-grey));
  --gpw-gradient-icon-accent:   radial-gradient(circle at 35% 30%, #FFFFFF, var(--gpw-icon-bg-accent));
  --gpw-gradient-notice-urgent: linear-gradient(135deg, #FDF1EF, #FAE1DE);
  --gpw-gradient-notice-info:   linear-gradient(135deg, #FFFAF0, #FFF0D6);
  --gpw-gradient-footer:        linear-gradient(180deg, var(--nhs-dark-blue) 60%, var(--nhs-black) 100%);
  --gpw-gradient-btn-brand:     linear-gradient(135deg, var(--nhs-blue), var(--nhs-bright-blue));
  --gpw-gradient-btn-brand-hover: linear-gradient(135deg, var(--nhs-bright-blue), var(--nhs-blue));

  /* --- Role tokens: change these, not the raw colours above, when applying
         styles. Keeps the "NHS Blue + white dominant" emphasis rule in one
         place. --- */
  --gpw-color-primary:      var(--nhs-blue);
  --gpw-color-primary-dark: var(--nhs-dark-blue);
  --gpw-color-text:         var(--nhs-black);
  --gpw-color-text-muted:   var(--nhs-dark-grey);
  --gpw-color-accent:       var(--nhs-dark-green);
  --gpw-color-surface:      var(--white);
  --gpw-color-surface-alt:  var(--nhs-pale-grey);

  /* --- Font stacks. Frutiger is registered via @font-face in functions.php;
         until licensed font files are added, these fall back to Segoe UI. --- */
  --gpw-font-body:    'Frutiger', 'Frutiger LT W01 55 Roman', 'Segoe UI', Arial, sans-serif;
  --gpw-font-heading: 'Frutiger', 'Frutiger LT W01 65 Bold', 'Segoe UI', Arial, sans-serif;

  /* --- Type scale: DESKTOP values (>1024px). Redefined at the two
         breakpoints below. --- */
  --gpw-size-h1:      44px;
  --gpw-size-h2:      28px;
  --gpw-size-h3:      20px;
  --gpw-size-h4:      18px;
  --gpw-size-h5:      16px;
  --gpw-size-h6:      15px;
  --gpw-size-body:    17px;
  --gpw-size-small:   15px;
  --gpw-size-nav:     17px;
  --gpw-size-button:  16px;

  /* --- Line height --- */
  --gpw-leading-tight:  1.15;  /* H1 */
  --gpw-leading-snug:   1.25;  /* H2 / H3 */
  --gpw-leading-normal: 1.6;   /* body copy — generous for older/low-vision readers */
  --gpw-leading-relaxed:1.7;   /* footer / small print */

  /* --- Letter spacing --- */
  --gpw-tracking-normal: normal;
  --gpw-tracking-wide:   0.02em; /* buttons, nav links — improves legibility at bold weight */

  /* --- Spacing scale (8px base unit) --- */
  --gpw-space-1: 8px;
  --gpw-space-2: 16px;
  --gpw-space-3: 24px;
  --gpw-space-4: 32px;
  --gpw-space-6: 48px;
  --gpw-space-8: 64px;

  /* --- Layout --- */
  --gpw-container-max: 1320px;
  --gpw-gutter: 32px;
  --gpw-radius: 10px;

  /* --- Vertical rhythm for plain WordPress-editor content (paragraphs,
         lists, headings typed straight into the editor rather than built
         with Elementor widgets). Kept separate from --gpw-space-3 so it can
         be tuned independently of grid/layout gaps. --- */
  --gpw-content-gap: 24px;
}

/* Tablet — matches Elementor default Tablet breakpoint (≤1024px) */
@media (max-width: 1024px) {
  :root {
    --gpw-size-h1:     34px;
    --gpw-size-h2:     24px;
    --gpw-size-h3:     19px;
    --gpw-size-h4:     17px;
    --gpw-size-h5:     16px;
    --gpw-size-h6:     14px;
    --gpw-size-body:   16.5px;
    --gpw-size-small:  14.5px;
    --gpw-size-nav:    16px;
    --gpw-size-button: 16px;
    --gpw-gutter:      24px;
    --gpw-content-gap: 20px;
  }
}

/* Mobile — matches Elementor default Mobile breakpoint (≤767px) */
@media (max-width: 767px) {
  :root {
    --gpw-size-h1:     28px;
    --gpw-size-h2:     22px;
    --gpw-size-h3:     18px;
    --gpw-size-h4:     16px;
    --gpw-size-h5:     15px;
    --gpw-size-h6:     14px;
    --gpw-size-body:   16px;   /* never go below 16px — WCAG / elderly-patient readability floor */
    --gpw-size-small:  14px;
    --gpw-size-nav:    16px;
    --gpw-size-button: 15px;
    --gpw-gutter:      16px;
    --gpw-content-gap: 18px;
  }
}


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

body {
  font-family: var(--gpw-font-body);
  font-size: var(--gpw-size-body);
  line-height: var(--gpw-leading-normal);
  letter-spacing: var(--gpw-tracking-normal);
  color: var(--gpw-color-text);
  background: var(--gpw-color-surface);
}

h1, h2, h3, h4, h5, h6, .gpw-heading {
  font-family: var(--gpw-font-heading);
  font-weight: 700;
  margin: 0 0 0.5em 0;
  color: var(--gpw-color-primary-dark);
}
h1 { font-size: var(--gpw-size-h1); line-height: var(--gpw-leading-tight); letter-spacing: var(--gpw-tracking-normal); }
h2 { font-size: var(--gpw-size-h2); line-height: var(--gpw-leading-snug);  letter-spacing: var(--gpw-tracking-normal); }
h3 { font-size: var(--gpw-size-h3); line-height: var(--gpw-leading-snug);  letter-spacing: var(--gpw-tracking-normal); }
/* H4–H6: shorter, smaller headings (sub-section titles inside content boxes,
   card/eyebrow labels). Line-height opens up as size drops so bold text at
   small sizes doesn't feel cramped; H5/H6 get a touch of positive tracking
   for the same reason nav/buttons do — small bold text reads better slightly
   opened up. */
h4 { font-size: var(--gpw-size-h4); line-height: 1.3; letter-spacing: var(--gpw-tracking-normal); }
h5 { font-size: var(--gpw-size-h5); line-height: 1.4; letter-spacing: 0.01em; }
h6 { font-size: var(--gpw-size-h6); line-height: 1.4; letter-spacing: var(--gpw-tracking-wide); }

a { color: var(--gpw-color-primary); }
a:hover { text-decoration-thickness: 2px; }

/* Visible, high-contrast focus state for keyboard users — required for an
   elderly/assisted-technology patient audience, not just a nice-to-have. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.elementor-item:focus-visible {
  outline: 3px solid var(--nhs-warm-yellow);
  outline-offset: 2px;
}


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

.gpw-container {
  max-width: var(--gpw-container-max);
  margin: 0 auto;
  padding-left: var(--gpw-gutter);
  padding-right: var(--gpw-gutter);
}

.gpw-section {
  padding-top: var(--gpw-space-6);
  padding-bottom: var(--gpw-space-6);
}

/* Explicitly NOT used for the About Us / Help Us content boxes — those sit
   on plain white with a border (see 3.7 Content Boxes) per Chris's brief. */
.gpw-section--alt {
  background: var(--gpw-color-surface-alt);
}
/* Same use case (e.g. the Disabled Facilities strip) but with a whisper of
   depth instead of a flat block — swap the class on the Container to try it. */
.gpw-section--alt-gradient {
  background: var(--gpw-gradient-section-alt);
}


/* --------------------------------------------------------------------------
   3.1 HEADER
   -------------------------------------------------------------------------- */

.gpw-header {
  border-bottom: 1px solid var(--gpw-border);
}
.gpw-badge {
  display: inline-block;
  background: var(--gpw-color-primary);
  color: var(--white);
  font-family: var(--gpw-font-heading);
  font-size: 20px;
  letter-spacing: 1px;
  padding: 7px 12px;
  border-radius: 6px;
}
.gpw-practice-name {
  font-family: var(--gpw-font-heading);
  font-size: 26px;
  color: var(--gpw-color-text);
}
.gpw-practice-address {
  color: var(--gpw-color-primary);
  font-size: var(--gpw-size-small);
  margin-top: 2px;
}

/* Header search box — previously unstyled. Wrap the Search widget/form in a
   Container or HTML widget with this class; targets a standard input+button
   pair inside it. */
.gpw-search {
  display: flex;
  border: 2px solid var(--gpw-color-text-muted);
  border-radius: 6px;
  overflow: hidden;
}
.gpw-search input[type="search"],
.gpw-search input[type="text"] {
  border: 0;
  padding: 12px 14px;
  font-size: var(--gpw-size-body);
  font-family: var(--gpw-font-body);
  flex: 1;
  min-width: 160px;
}
.gpw-search input:focus-visible {
  outline: 3px solid var(--nhs-warm-yellow);
  outline-offset: -3px; /* inset, since the input has no room outside its own border */
}
.gpw-search button {
  background: var(--gpw-color-primary);
  border: 0;
  color: var(--white);
  padding: 0 18px;
  cursor: pointer;
  font-size: var(--gpw-size-body);
  font-family: var(--gpw-font-heading);
}
.gpw-search button:hover { background: var(--gpw-color-primary-dark); }


/* --------------------------------------------------------------------------
   3.2 NAVIGATION
   Targets Elementor Pro's Nav Menu widget classes. Add the "gpw-nav" class
   to the Container that holds the Nav Menu widget.
   -------------------------------------------------------------------------- */

.gpw-nav {
  background: var(--gpw-color-primary);
}
.gpw-nav .elementor-nav-menu,
.gpw-nav nav ul {
  display: flex;
}
.gpw-nav .elementor-item,
.gpw-nav nav a {
  color: var(--white) !important;
  text-decoration: none;
  font-family: var(--gpw-font-heading);
  font-size: var(--gpw-size-nav);
  letter-spacing: var(--gpw-tracking-wide);
  padding: 20px 26px;
  border-bottom: 4px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.gpw-nav .elementor-item:hover,
.gpw-nav .elementor-item-active {
  background: var(--gpw-color-primary-dark);
  border-bottom-color: var(--white);
}
/* Mobile hamburger toggle + dropdown panel (Elementor Pro Nav Menu widget) */
.gpw-nav .elementor-menu-toggle {
  color: var(--white);
}
.gpw-nav .elementor-nav-menu--dropdown {
  background: var(--gpw-color-primary-dark);
}
.gpw-nav .elementor-nav-menu--dropdown .elementor-item {
  display: block;
  padding: var(--gpw-space-2) var(--gpw-space-3);
  border-bottom: 1px solid rgba(255,255,255,0.15);
}


/* --------------------------------------------------------------------------
   3.3 HERO
   -------------------------------------------------------------------------- */

/* IMPORTANT — how the hero background actually works:
   Set your photo as the Container's own native Elementor background image,
   exactly as before. Do NOT also try to add a gradient via Elementor's
   background controls on the same element — this class supplies the
   contrast overlay through a ::before pseudo-element sitting on its own
   layer ABOVE the photo, so Elementor's background-image (the photo) and
   this file's overlay never fight over the same CSS property. Earlier
   builds of this file put the gradient directly on .gpw-hero's own
   background-image, which Elementor's photo control would have silently
   overwritten — this structure fixes that. */
.gpw-hero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  overflow: hidden;      /* keeps the ::before contained to the hero's box */
  color: var(--white);
  background-color: var(--gpw-color-primary-dark); /* shows briefly while the photo loads, and if it fails */
  background-size: cover;
  background-position: center;
}
.gpw-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--gpw-gradient-hero-overlay);
  z-index: 1;
}
/* No-photo variant — add this alongside .gpw-hero instead of setting an
   Elementor background image, for practices without decent photography. */
.gpw-hero--no-photo {
  background-image: var(--gpw-gradient-hero-fallback);
}
.gpw-hero__inner {
  position: relative;   /* sits above the ::before overlay */
  z-index: 2;
  max-width: 640px;
}
.gpw-hero h1 { color: var(--white); margin-bottom: var(--gpw-space-2); }
.gpw-hero p  { font-size: 19px; margin-bottom: var(--gpw-space-4); max-width: 520px; }

.gpw-btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 6px;
  font-family: var(--gpw-font-heading);
  font-size: var(--gpw-size-button);
  letter-spacing: var(--gpw-tracking-wide);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
/* On the hero (dark background) */
.gpw-btn--primary   { background: var(--white); color: var(--gpw-color-primary-dark); }
.gpw-btn--secondary { background: transparent; color: var(--white); border: 2px solid var(--white); }
.gpw-btn--primary:hover   { background: var(--nhs-pale-grey); }
.gpw-btn--secondary:hover { background: rgba(255,255,255,0.12); }

/* General-purpose CTA buttons for use anywhere OUTSIDE the hero — on a white
   page background, content box, or card. Previously missing: the hero
   buttons above only make sense on a dark background. */
.gpw-btn--brand {
  background: var(--gpw-gradient-btn-brand);
  color: var(--white);
}
.gpw-btn--brand:hover { background: var(--gpw-gradient-btn-brand-hover); }
.gpw-btn--outline {
  background: transparent;
  color: var(--gpw-color-primary);
  border: 2px solid var(--gpw-color-primary);
}
.gpw-btn--outline:hover { background: var(--nhs-pale-grey); }


/* --------------------------------------------------------------------------
   3.4 NOTICES
   -------------------------------------------------------------------------- */

.gpw-notice {
  border-left: 6px solid var(--nhs-red);
  background: var(--gpw-gradient-notice-urgent);
  padding: var(--gpw-space-2) var(--gpw-space-3);
  margin-bottom: var(--gpw-space-2);
  border-radius: 0 6px 6px 0;
}
.gpw-notice--info {
  border-left-color: var(--nhs-warm-yellow);
  background: var(--gpw-gradient-notice-info);
}
/* Flat fallback, if a specific page ever needs to turn the gradient off */
.gpw-notice--flat          { background: var(--gpw-notice-red-bg); }
.gpw-notice--info.gpw-notice--flat { background: var(--gpw-notice-yellow-bg); }
.gpw-notice h3 { font-size: 17px; color: var(--gpw-color-text); margin-bottom: 4px; }
.gpw-notice p  { margin: 0; font-size: var(--gpw-size-small); color: var(--gpw-color-text-muted); }


/* --------------------------------------------------------------------------
   3.5 QUICK-ACCESS CARD GRID (Concept A)
   -------------------------------------------------------------------------- */

.gpw-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gpw-space-3);
}
@media (max-width: 1024px) { .gpw-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .gpw-card-grid { grid-template-columns: 1fr; } }

.gpw-card {
  background: var(--gpw-gradient-card);
  border-radius: var(--gpw-radius);
  box-shadow: 0 2px 10px rgba(0,48,135,0.08);
  padding: var(--gpw-space-3);
  border-top: 4px solid var(--gpw-color-primary);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.gpw-card:hover {
  box-shadow: 0 6px 18px rgba(0,48,135,0.14);
  transform: translateY(-2px);
}
.gpw-card__icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--gpw-gradient-icon);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--gpw-space-2);
}
.gpw-card__icon svg { width: 26px; height: 26px; stroke: var(--gpw-color-primary); fill: none; stroke-width: 2; }
.gpw-card h3 { margin-bottom: 8px; }
.gpw-card p  { font-size: var(--gpw-size-small); color: var(--gpw-color-text-muted); margin: 0 0 14px; }
.gpw-card__link {
  color: var(--gpw-color-accent);
  font-family: var(--gpw-font-heading);
  font-size: var(--gpw-size-small);
  text-decoration: none;
}


/* --------------------------------------------------------------------------
   3.6 FACILITIES ROW
   -------------------------------------------------------------------------- */

.gpw-facilities { display: flex; gap: var(--gpw-space-4); flex-wrap: wrap; }
.gpw-facility { text-align: center; flex: 1; min-width: 160px; }
.gpw-facility .gpw-card__icon { margin: 0 auto 12px; background: var(--gpw-gradient-icon-accent); }
.gpw-facility .gpw-card__icon svg { stroke: var(--gpw-color-accent); }
.gpw-facility p { color: var(--gpw-color-text); font-size: var(--gpw-size-small); margin: 0; }


/* --------------------------------------------------------------------------
   3.7 CONTENT BOXES — Concept B treatment
   Used for About Us / Help Us to Help You and similar page-content sections.
   Sits on the PLAIN WHITE page background (do not wrap in .gpw-section--alt)
   — the border alone provides definition, per Chris's preference.
   -------------------------------------------------------------------------- */

.gpw-content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--gpw-space-3);
  align-items: start;
}
@media (max-width: 1024px) { .gpw-content-grid { grid-template-columns: 1fr; } }

.gpw-content-box {
  background: var(--white);
  border: 1px solid var(--gpw-border);
  border-radius: var(--gpw-radius);
  padding: var(--gpw-space-3);
}
.gpw-content-box + .gpw-content-box { margin-top: var(--gpw-space-3); }
.gpw-content-box h2 { font-size: var(--gpw-size-h2); }
.gpw-content-box ul { padding-left: 20px; color: var(--gpw-color-text-muted); }
.gpw-content-box li { margin-bottom: 8px; }

/* Sidebar variant — Quick Links / Opening Hours / Emergency, matching the
   pattern already live on the Rosehall site. */
.gpw-sidebar-card {
  background: var(--white);
  border: 1px solid var(--gpw-border);
  border-radius: var(--gpw-radius);
  padding: var(--gpw-space-3);
}
.gpw-sidebar-card + .gpw-sidebar-card { margin-top: var(--gpw-space-2); }
.gpw-sidebar-card h4 {
  font-size: 14px; text-transform: uppercase; letter-spacing: var(--gpw-tracking-wide);
  color: var(--gpw-color-primary-dark); margin-bottom: 14px;
}
.gpw-sidebar-card ul { list-style: none; padding: 0; margin: 0; }
.gpw-sidebar-card li { margin-bottom: 10px; }
.gpw-sidebar-card a { color: var(--gpw-color-accent); font-family: var(--gpw-font-heading); font-size: var(--gpw-size-small); text-decoration: none; }
.gpw-sidebar-card--emergency { background: var(--gpw-gradient-notice-urgent); border-color: #f3c6c1; }
.gpw-sidebar-card--emergency h4 { color: var(--nhs-red); }


/* --------------------------------------------------------------------------
   3.8 FOOTER
   -------------------------------------------------------------------------- */

.gpw-footer {
  background: var(--gpw-gradient-footer);
  color: var(--white);
  margin-top: var(--gpw-space-3);
}
.gpw-footer h4 {
  font-size: 16px; color: var(--nhs-light-blue);
  text-transform: uppercase; letter-spacing: var(--gpw-tracking-wide);
  margin-bottom: 14px;
}
.gpw-footer p, .gpw-footer a {
  color: #DCE6F2; font-size: var(--gpw-size-small);
  text-decoration: none; line-height: var(--gpw-leading-relaxed);
}
.gpw-footer a:hover { text-decoration: underline; }
.gpw-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  text-align: center;
  padding: var(--gpw-space-2);
  font-size: 13px;
  color: #9FB4D8;
}


/* --------------------------------------------------------------------------
   3.9 WYSIWYG / PLAIN EDITOR CONTENT
   -------------------------------------------------------------------------- */

/* This is the wrapper WordPress/Elementor puts around content typed straight
   into the editor rather than built with Elementor widgets — deliberately
   the easier path for non-technical practice staff to edit day-to-day
   (notices, front-page content, most inner-page sections all work this way
   on this template). Confirmed by inspecting the live site: this content is
   rendered through Elementor's Posts widget, whose content wrapper class is
   `.elementor-post__text` — that's the one that actually matters here.
   `.entry-content` (classic WP theme content wrapper) and `.gpw-wysiwyg`
   (add by hand to any other Text/HTML widget) are included as a safety net
   in case a page is ever built a different way. */

.elementor-post__text,
.entry-content,
.gpw-wysiwyg {
  font-family: var(--gpw-font-body);
  font-size: var(--gpw-size-body);
  line-height: var(--gpw-leading-normal);
  color: var(--gpw-color-text);
}

/* Trim leading/trailing space so this drops cleanly into a notice box or
   .gpw-content-box without an extra gap above the first line or below the
   last — matters because these wrappers usually sit inside another
   padded container. */
.elementor-post__text > *:first-child,
.entry-content > *:first-child,
.gpw-wysiwyg > *:first-child { margin-top: 0 !important; }
.elementor-post__text > *:last-child,
.entry-content > *:last-child,
.gpw-wysiwyg > *:last-child { margin-bottom: 0 !important; }

/* Paragraphs. !important is deliberate here — the one place in this file
   it is — because WordPress's block-library stylesheet and Elementor's own
   defaults both ship a paragraph font-size/margin that otherwise wins
   regardless of load order, which is exactly why the front-page content
   box currently reads slightly off-theme. */
.elementor-post__text p,
.entry-content p,
.gpw-wysiwyg p {
  font-family: var(--gpw-font-body) !important;
  font-size: var(--gpw-size-body) !important;
  line-height: var(--gpw-leading-normal) !important;
  color: var(--gpw-color-text);
  margin: 0 0 var(--gpw-content-gap) 0;
}

/* Headings typed directly into content. Confirmed on the live Appointments
   page: these currently render with 0 top margin, so a heading that follows
   a paragraph has nothing separating it — this restores normal breathing
   room without touching the H1–H6 type scale itself (colour/size/weight
   still come from the global h1–h6 rules in section 2). */
.elementor-post__text h1, .entry-content h1, .gpw-wysiwyg h1,
.elementor-post__text h2, .entry-content h2, .gpw-wysiwyg h2,
.elementor-post__text h3, .entry-content h3, .gpw-wysiwyg h3,
.elementor-post__text h4, .entry-content h4, .gpw-wysiwyg h4,
.elementor-post__text h5, .entry-content h5, .gpw-wysiwyg h5,
.elementor-post__text h6, .entry-content h6, .gpw-wysiwyg h6 {
  margin-top: var(--gpw-space-4);
  margin-bottom: var(--gpw-space-2);
}

/* Lists — the reported bug, confirmed on the live site: a <ul>/<ol> was
   rendering with margin-bottom: 0, so a paragraph immediately after a list
   had no gap above it at all (0 + 0 = the list and the next paragraph sat
   flush against each other). Fixing the list's own bottom margin fixes
   every instance of this sitewide, not just the one example on the front
   page — any content editor who types a numbered or bulleted list gets
   correct spacing automatically from here on. */
.elementor-post__text ul, .entry-content ul, .gpw-wysiwyg ul,
.elementor-post__text ol, .entry-content ol, .gpw-wysiwyg ol {
  margin: 0 0 var(--gpw-content-gap) 0 !important;
  padding-left: 1.4em;
}
.elementor-post__text li, .entry-content li, .gpw-wysiwyg li {
  margin-bottom: 8px;
  line-height: var(--gpw-leading-normal);
}
/* Nested lists sit closer to their parent item than to the next paragraph */
.elementor-post__text li > ul, .entry-content li > ul, .gpw-wysiwyg li > ul,
.elementor-post__text li > ol, .entry-content li > ol, .gpw-wysiwyg li > ol {
  margin: 8px 0 0 0 !important;
}
/* Small branded touch — markers pick up NHS Blue instead of default black */
.elementor-post__text li::marker, .entry-content li::marker, .gpw-wysiwyg li::marker {
  color: var(--gpw-color-primary);
}

/* Links inside prose read better underlined than the site's chrome links
   (nav/card links are deliberately not underlined) — underlining signals
   "this is a link within text" the way patients expect. */
.elementor-post__text a, .entry-content a, .gpw-wysiwyg a {
  color: var(--gpw-color-primary);
}
.elementor-post__text a:hover, .entry-content a:hover, .gpw-wysiwyg a:hover {
  color: var(--gpw-color-primary-dark);
  text-decoration-thickness: 2px;
}

.elementor-post__text strong, .entry-content strong, .gpw-wysiwyg strong,
.elementor-post__text b, .entry-content b, .gpw-wysiwyg b {
  font-weight: 700;
}

/* Blockquote — for pulled-out patient-facing callouts or quoted guidance */
.elementor-post__text blockquote, .entry-content blockquote, .gpw-wysiwyg blockquote {
  margin: 0 0 var(--gpw-content-gap) 0;
  padding: var(--gpw-space-2) var(--gpw-space-3);
  border-left: 4px solid var(--gpw-color-primary);
  background: var(--nhs-pale-grey);
  border-radius: 0 6px 6px 0;
  color: var(--gpw-color-text-muted);
  font-style: italic;
}
.elementor-post__text blockquote p:last-child,
.entry-content blockquote p:last-child,
.gpw-wysiwyg blockquote p:last-child { margin-bottom: 0; }

/* Tables — e.g. a fees schedule or clinic timetable typed into a page.
   Raw HTML tables don't reflow on narrow screens; wrap wide ones in a
   <div style="overflow-x:auto"> when editing, this only handles styling. */
.elementor-post__text table, .entry-content table, .gpw-wysiwyg table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--gpw-content-gap) 0;
  font-size: var(--gpw-size-small);
}
.elementor-post__text th, .entry-content th, .gpw-wysiwyg th {
  background: var(--nhs-pale-grey);
  color: var(--gpw-color-primary-dark);
  font-family: var(--gpw-font-heading);
  text-align: left;
  padding: 10px 14px;
  border-bottom: 2px solid var(--gpw-border);
}
.elementor-post__text td, .entry-content td, .gpw-wysiwyg td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--gpw-border);
}

/* Images dropped straight into the editor, plus the classic WP alignment
   and caption classes (still produced by the block editor's image block) */
.elementor-post__text img, .entry-content img, .gpw-wysiwyg img {
  max-width: 100%;
  height: auto;
  border-radius: var(--gpw-radius);
  margin-bottom: var(--gpw-content-gap);
}
.elementor-post__text .wp-caption-text, .entry-content .wp-caption-text, .gpw-wysiwyg .wp-caption-text,
.elementor-post__text figcaption, .entry-content figcaption, .gpw-wysiwyg figcaption {
  font-size: var(--gpw-size-small);
  color: var(--gpw-color-text-muted);
  text-align: center;
  margin-top: 8px;
}
.elementor-post__text .alignleft, .entry-content .alignleft, .gpw-wysiwyg .alignleft {
  float: left; margin: 0 var(--gpw-space-3) var(--gpw-space-2) 0;
}
.elementor-post__text .alignright, .entry-content .alignright, .gpw-wysiwyg .alignright {
  float: right; margin: 0 0 var(--gpw-space-2) var(--gpw-space-3);
}
.elementor-post__text .aligncenter, .entry-content .aligncenter, .gpw-wysiwyg .aligncenter {
  display: block; margin-left: auto; margin-right: auto;
}
/* Floated images fighting for space against short line lengths on mobile
   reads worse than just stacking them — drop the float below tablet. */
@media (max-width: 767px) {
  .elementor-post__text .alignleft, .entry-content .alignleft, .gpw-wysiwyg .alignleft,
  .elementor-post__text .alignright, .entry-content .alignright, .gpw-wysiwyg .alignright {
    float: none; margin-left: 0; margin-right: 0;
  }
}

.elementor-post__text hr, .entry-content hr, .gpw-wysiwyg hr {
  border: 0;
  border-top: 1px solid var(--gpw-border);
  margin: var(--gpw-space-4) 0;
}

.elementor-post__text dl, .entry-content dl, .gpw-wysiwyg dl {
  margin: 0 0 var(--gpw-content-gap) 0;
}
.elementor-post__text dt, .entry-content dt, .gpw-wysiwyg dt {
  font-family: var(--gpw-font-heading);
  font-weight: 700;
  color: var(--gpw-color-primary-dark);
}
.elementor-post__text dd, .entry-content dd, .gpw-wysiwyg dd {
  margin: 0 0 8px 0;
  color: var(--gpw-color-text-muted);
}