/* ================================================================
   NAAS CARDIOLOGY & ENDOCRINOLOGY — SHARED MOBILE STYLESHEET
   Supplements per-page inline media queries.
   Linked just before </head> so it loads after page <style> blocks.
================================================================ */

/* ── 1080px: fix sections missing horizontal padding reduction ── */
@media (max-width: 1080px) {
  #services,
  #glp1-article,
  #team {
    padding-left: 36px;
    padding-right: 36px;
  }
}

/* ── 768px: collapse grids and fix padding ───────────────────── */
@media (max-width: 768px) {

  /* index.html — services, GLP-1 article, team sections */
  #services {
    padding: 70px 22px;
  }

  #glp1-article {
    padding: 70px 22px;
  }

  #team {
    padding: 70px 22px;
  }

  /* index.html — about pillars: 2-col → 1-col */
  .about-pillars {
    grid-template-columns: 1fr;
  }

  /* index.html — services section */
  .services-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .svc-card {
    padding: 32px 28px;
  }

  /* index.html — GLP-1 article body: 2-col → 1-col */
  .article-body {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .article-lead {
    padding: 20px 22px;
    margin-bottom: 36px;
  }

  /* index.html — article CTA: flex row → column */
  .article-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
    gap: 20px;
  }

  /* index.html — team grid: 2-col → 1-col */
  .team-grid {
    grid-template-columns: 1fr;
  }

  .team-card {
    padding: 32px;
  }

  /* legal/policy pages — tighten side padding */
  .policy-body {
    padding: 48px 22px 60px;
  }
}

/* ── Fixed nav scroll offset (nav = 72-75px tall, 88px gives clearance) ─ */
section[id] {
  scroll-margin-top: 88px;
}

/* ── WCAG AA contrast improvements ──────────────────────────────────── */
/* --text-soft was #8888A8 (3.4:1 on white) → #5E5E7A (6.5:1) */
/* --gold-muted was #9C7228 (3.8:1 on white) → #8A5F1A (5.3:1) */
:root {
  --text-soft: #5E5E7A;
  --gold-muted: #8A5F1A;
}

/* .section-tag: ~10px text needs 4.5:1; gold (#C4903C) = 2.77:1 on white ❌ */
/* Darken for light backgrounds; restore on dark sections via :has() */
.section-tag {
  color: #7A5A18; /* 5.9:1 on white */
}
section:has(.section-title.light) .section-tag {
  color: var(--gold);  /* restore on dark navy sections */
}

/* .section-tag.teal: teal-light (#14A882) = 2.84:1 on white ❌ */
.section-tag.teal {
  color: #0A6654; /* 6.5:1 on white */
}
section:has(.section-title.light) .section-tag.teal {
  color: var(--teal-light, #14A882); /* restore on dark sections */
}

/* .section-title em: decorative italic in large headings, needs 3:1 on white */
/* gold (#C4903C) = 2.77:1 ❌ → darker gold = 3.95:1 ✅ */
.section-title em {
  color: #9E7420;
}
.section-title.light em {
  color: var(--gold-light, #D4A84B); /* restore on dark sections */
}

/* ── Cookie Banner (base styles, shared across all pages) ───── */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999;
  background: rgba(9,22,42,0.97);
  backdrop-filter: blur(12px);
  border-top: 2px solid rgba(196,144,60,0.4);
  display: none;
}
.cookie-banner-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 18px 24px;
}
.cookie-banner-inner p {
  flex: 1;
  min-width: 220px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  margin: 0;
}
.cookie-banner-inner p a { color: #C4903C; text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-btn {
  padding: 10px 22px;
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s;
}
.cookie-btn:hover { opacity: 0.85; }
.cookie-btn--outline {
  background: transparent;
  border: 1px solid rgba(196,144,60,0.5);
  color: rgba(255,255,255,0.75);
}
.cookie-btn--gold { background: #C4903C; color: #fff; }

/* ── More targeted light-background gold fixes ───────────────── */

/* back-link in policy pages (always in light policy-body) */
.back-link { color: #7A5A18; }
.back-link:hover { color: #5C4210; }

/* policy-label in policies.html (white .policy-header accordion) */
.policy-label { color: #7A5A18; }

/* section-label + test-badge in cardiac-tests.html (light section bg) */
.section-label,
.test-badge { color: #7A5A18; }

/* cond-spec in referrers.html (#conditions has cream background) */
.cond-spec { color: #7A5A18; }

/* section h2 em on light content sections (≥32px = large text, #9E7420 = 4.22:1 ✅) */
.section h2 em { color: #9E7420; }
/* restore gold-light for dark CTA sections */
.cta-section h2 em { color: var(--gold-light); }

/* ── 480px: small phone tweaks ───────────────────────────────── */
@media (max-width: 480px) {

  /* Cookie banner — stack buttons below text */
  .cookie-banner-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .cookie-actions {
    width: 100%;
    justify-content: flex-start;
  }

  /* CTA buttons — full width on very small screens */
  .btn-primary,
  .btn-outline-light {
    width: 100%;
    text-align: center;
    display: block;
  }

  /* Article warning box padding */
  .article-warning {
    padding: 24px 20px;
  }

  /* Team card reduced padding */
  .team-card {
    padding: 24px 20px;
  }
}