/* ===========================================================================
   Shared surface + local-SEO system for the condition pages.

   Two jobs:
   1. The SEO blocks themselves (breadcrumb, clinic NAP + map, credentials,
      reviews) — markup lives in each page, styling lives here.
   2. A normalisation layer. The pages grew separately, so top-level blocks
      had landed on five different column widths (900 / 1104 / 1152 / 1192 /
      1240px), six corner radii (0 / 15 / 22 / 25 / 35 / 40px) and four border
      weights (0 / 1 / 2 / 3px). Everything below pulls them onto one column
      and one card surface.

   This file is linked LAST in <head>, after each page's inline <style>, so
   equal-specificity rules here win without needing !important.
   =========================================================================== */

:root{
  --gj-col: 1240px;          /* one content column for every top-level block */
  --gj-gap: 44px;            /* vertical rhythm between blocks              */
  --gj-pad: 40px;            /* card padding                                */
  --gj-r: 20px;              /* card radius                                 */
  --gj-r-lg: 26px;           /* hero — one step up, so hierarchy survives   */
  --gj-r-sm: 14px;           /* inner elements: cards, images, FAQ rows     */
  --gj-hair: rgba(15,23,42,.10);
  --gj-sh: 0 1px 2px rgba(15,23,42,.04), 0 10px 28px rgba(15,23,42,.06);
  --gj-sh-lg: 0 2px 4px rgba(15,23,42,.05), 0 18px 46px rgba(15,23,42,.09);
  --gj-sh-sm: 0 1px 2px rgba(15,23,42,.04), 0 4px 14px rgba(15,23,42,.05);
}

.gj-seo{ --gj-accent: var(--primary, #2563eb);
         --gj-accent-dark: var(--primary-dark, #1d4ed8);
         --gj-ink: var(--text-dark, #1f2937);
         --gj-muted: var(--text-light, #64748b); }

/* ---------------------------------------------------------------- column -- */
/* .container capped content at 1200 - its own padding while the hero and the
   SEO blocks ran to 1240. Drop the cap here and let each block set the width,
   so every edge lines up. Scoped to .page-content so the header/footer
   containers are untouched. */
.page-content > .container{ max-width: none; padding-left: 0; padding-right: 0; }

/* The blocks sit at four different depths depending on the page: inside
   .page-content, inside a page-specific wrapper, inside .container, or as a
   direct child of <body>. Each of those contributed its own side padding, so
   identical max-widths still produced different edges. Move the gutter onto
   the blocks themselves and zero it on every ancestor, and the column resolves
   to the same box no matter where a block sits. This file is only linked from
   the condition pages, so zeroing body padding here cannot reach the rest of
   the site. */
body, .page-content, .sacro-wrapper{
  padding-left: 0; padding-right: 0;
}
/* tennis.html and cts.html wrap the entire page in one big white card
   (max-width 1350, 3rem padding, 40px radius, heavy shadow). Every block inside
   now carries its own surface, so that outer card is just a second frame that
   also inset those pages' content by 48px against every other page. Flatten it
   — the breadcrumb's own top padding already clears the fixed header. The
   !important matches theirs in a mobile media query further down those pages. */
.te-wrapper, .cts-wrapper{
  max-width: none !important; margin: 0 auto !important; padding: 0 !important;
  background: none !important; border-radius: 0 !important; box-shadow: none !important;
}
.page-content > .container, .cts-wrapper > .container,
.te-wrapper > .container, .sacro-wrapper > .container{
  max-width: none; padding-left: 0; padding-right: 0;
}

.gj-breadcrumb.gj-breadcrumb,
.hero-section.hero-section,
.gj-creds.gj-creds,
.gj-nap.gj-nap,
.gj-reviews.gj-reviews,
.credentials-box.credentials-box,
.nap-section.nap-section,
.content-section.content-section,
.videos-section.videos-section,
.cta-section.cta-section,
#cp-reviews{
  max-width: var(--gj-col);
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 40px);
}

/* ----------------------------------------------------------- card surface -- */
.content-section.content-section,
.gj-creds.gj-creds,
.gj-nap.gj-nap,
.gj-reviews.gj-reviews,
.credentials-box.credentials-box,
.nap-section.nap-section,
#cp-reviews{
  border: 1px solid var(--gj-hair);
  border-radius: var(--gj-r);
  box-shadow: var(--gj-sh);
  padding: var(--gj-pad);
  margin-top: 0;
  margin-bottom: var(--gj-gap);
  background: #fff;
}

.hero-section.hero-section{
  border: 1px solid var(--gj-hair);
  border-radius: var(--gj-r-lg);
  box-shadow: var(--gj-sh-lg);
  margin-bottom: var(--gj-gap);
}

.videos-section.videos-section{
  border: 1px solid var(--gj-hair);
  border-radius: var(--gj-r);
  box-shadow: var(--gj-sh);
  padding: var(--gj-pad);
  margin-top: 0;
  margin-bottom: var(--gj-gap);
}

.cta-section.cta-section{          /* gradient fill — a border would muddy it */
  border-radius: var(--gj-r);
  padding: var(--gj-pad);
  margin-top: 0;
  margin-bottom: var(--gj-gap);
}

/* ---------------------------------------------------------- inner surfaces -- */
.medical-image-container.medical-image-container{
  border: 1px solid var(--gj-hair);
  border-radius: var(--gj-r-sm);
  box-shadow: var(--gj-sh-sm);
  padding: 24px;
}
.medical-image-container img,
.info-card.info-card, .video-card.video-card, .faq-item.faq-item,
.gj-rev-card, .gj-map.gj-map, .toggle-container{
  border-radius: var(--gj-r-sm);
}
.faq-item.faq-item{ border-width: 1px; }
.info-card.info-card{ box-shadow: var(--gj-sh-sm); }

/* --------------------------------------------------------------- the header -- */
/* .header is position:fixed with no edge of its own, so it floated over the
   tinted page with nothing separating the two. A hairline and a shadow that
   only deepens once you have scrolled reads as deliberate. */
.header{ border-bottom: 1px solid var(--gj-hair); box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.header.scrolled{ box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.07); }

/* ----------------------------------------------------------- breadcrumb ---- */
/* .header is fixed (82px desktop, ~120px once the logo wraps on phones) and the
   page content starts at 0, so the first element in the flow must clear it. */
.gj-breadcrumb{ padding: 96px 4px 0; font-size: .95em; color: var(--gj-muted);
  font-family: 'Poppins', system-ui, sans-serif; margin-bottom: 18px; }
.gj-breadcrumb ol{ list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin: 0; padding: 0; }
.gj-breadcrumb li::before,
.page-content .gj-breadcrumb li::before,
.gj-nap li::before, .gj-creds li::before, .gj-reviews li::before,
.page-content .gj-creds li::before{ content: none !important; padding: 0 !important; }
.gj-breadcrumb li, .gj-creds li{ position: static !important; padding-left: 0 !important; }
.gj-breadcrumb li + li::before,
.page-content .gj-breadcrumb li + li::before{ content: '\203A' !important; position: static !important;
  margin-right: .5em; color: var(--gj-accent); font-weight: 900; }
.gj-breadcrumb a{ color: var(--gj-accent-dark); text-decoration: none; font-weight: 600; }
.gj-breadcrumb a:hover{ text-decoration: underline; }
.gj-breadcrumb [aria-current]{ font-weight: 700; color: var(--gj-ink); }

/* --------------------------------------------------------- H1 + subheading -- */
.gj-h1-alt{ font-size: .62em; display: inline-block; font-weight: 700; }
.hero-sub-h2{ font-size: 1.3em; font-weight: 700; color: var(--gj-accent-dark); margin: 0 0 .5em; }

/* ------------------------------------------------------------ credentials -- */
.gj-creds h2, .credentials-box h2{ font-size: 1.2em; font-weight: 800; color: var(--gj-accent);
  margin: 0 0 .6em; display: flex; align-items: center; gap: .5em; }
.gj-creds p, .credentials-box p{ margin: 0 0 .6em; font-size: .98em; line-height: 1.75; color: var(--gj-ink); }
.gj-creds ul, .cred-list{ display: flex; flex-wrap: wrap; gap: .5em; margin: .9em 0 0; padding: 0; list-style: none; }
.gj-creds li, .cred-list li{ background: var(--gj-accent); color: #fff;
  padding: .38em 1em; border-radius: 30px; font-size: .84em; font-weight: 600; letter-spacing: .01em; }

/* ---------------------------------------------------------------- the NAP -- */
.gj-nap-grid, .nap-grid{ display: grid; grid-template-columns: 1.05fr 1fr; gap: 2em; align-items: start; }
.gj-nap h2, .nap-card h2{ font-size: 1.55em; font-weight: 800; color: var(--gj-accent); margin: 0 0 .7em; line-height: 1.25; }
.gj-nap address, .nap-card address{ font-style: normal; font-size: 1em; line-height: 1.8; color: var(--gj-ink); }
.gj-nap address strong, .nap-card address strong{ display: block; font-size: 1.06em; color: var(--gj-accent-dark); }
.gj-nap-row, .nap-row{ display: flex; align-items: flex-start; gap: .7em; margin: .65em 0; }
.gj-nap-row i, .nap-row i{ color: var(--gj-accent); margin-top: .35em; min-width: 1.1em; }
.gj-nap a, .nap-card a{ color: var(--gj-accent-dark); font-weight: 600; text-decoration: none; }
.gj-nap a:hover, .nap-card a:hover{ text-decoration: underline; }
.gj-nap-actions, .nap-actions{ display: flex; flex-wrap: wrap; gap: .7em; margin-top: 1.4em; }
.gj-btn, .nap-btn{ display: inline-block; padding: .78em 1.5em; border-radius: 12px; font-weight: 700; font-size: .95em;
  text-decoration: none; background: var(--gj-accent); color: #fff !important; border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease; }
.gj-btn.ghost, .nap-btn.ghost{ background: #fff; color: var(--gj-accent-dark) !important; border-color: var(--gj-hair); }
.gj-btn:hover, .nap-btn:hover{ transform: translateY(-2px); box-shadow: var(--gj-sh-sm); text-decoration: none; }
.gj-map, .nap-map{ overflow: hidden; min-height: 340px; border: 1px solid var(--gj-hair); }
.gj-map iframe, .nap-map iframe{ width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
.gj-nap-note, .nap-note{ margin-top: 1.3em; font-size: .92em; color: var(--gj-muted); line-height: 1.7; }

/* ---------------------------------------------------------------- reviews -- */
.gj-reviews h2, #cp-reviews h2{ font-size: 1.55em; font-weight: 800; color: var(--gj-accent); margin: 0 0 .3em; }
.gj-rev-sub{ color: var(--gj-muted); margin: 0 0 1.5em; }
.gj-rev-grid, .reviews-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 1.2em; }
.gj-rev-card, .review-card{ background: #fff; border: 1px solid var(--gj-hair); border-radius: var(--gj-r-sm);
  padding: 1.4em; box-shadow: none; transition: box-shadow .25s ease, transform .25s ease; }
.gj-rev-card:hover, .review-card:hover{ transform: translateY(-3px); box-shadow: var(--gj-sh-sm); border-color: var(--gj-hair); }
.gj-rev-stars, .review-stars{ color: #f59e0b; font-size: 1.02em; letter-spacing: .08em; }
.gj-rev-text, .review-text{ margin: .7em 0 1em; font-size: .95em; line-height: 1.7; color: var(--gj-ink); }
.gj-rev-author, .review-author{ font-size: .86em; font-weight: 700; color: var(--gj-muted); }
.gj-rev-foot{ margin-top: 1.4em; font-size: .9em; color: var(--gj-muted); }

/* ------------------------------------------------------------- responsive -- */
@media (max-width: 900px){
  :root{ --gj-pad: 24px; --gj-gap: 28px; }
  .gj-nap-grid, .nap-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 768px){
  :root{ --gj-r: 16px; --gj-r-lg: 18px; --gj-r-sm: 12px; }
  .gj-breadcrumb{ padding-top: 134px; font-size: .85em; }
  .hero-sub-h2{ font-size: 1.08em; }
  .gj-nap-actions .gj-btn, .nap-actions .nap-btn{ width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce){
  .gj-btn, .nap-btn, .gj-rev-card, .review-card{ transition: none; }
}
