/* ==========================================================================
   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;
}

/* 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;
  }
}

/* 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;
  }
}


/* --------------------------------------------------------------------------
   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;
}