/* ──────────────────────────────────────────────────────────────────
   North Eastern Surgical — shared site-wide overrides
   Loaded AFTER each page's inline <style> block, so these rules win
   on cascade order (or via !important where the inline rules already
   used !important). The home page's inline CSS duplicates some of
   these rules; that's harmless — the values are identical.
   ────────────────────────────────────────────────────────────────── */

/* ── REFERRAL FORM — single column on mobile ── */
@media (max-width: 700px) {
  .ref-form-row { grid-template-columns: 1fr !important; }
}

/* ── HEADER NAV — demoted, no background-fill on hover, blue underline active ── */
.tab-btn {
  padding: 0.45rem 0.6rem;
  border-radius: 0;
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  background: transparent;
  color: var(--text-mid);
  transition: color var(--tr);
}
.tab-btn:hover {
  background: transparent;
  color: var(--blue);
}
.tab-btn.active {
  background: transparent;
  color: var(--blue);
  font-weight: 500;
}
.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0.6rem;
  right: 0.6rem;
  height: 2px;
  background: var(--blue);
  border-radius: 1px;
}

/* Neutralize the old loud Contact pill — fall back to regular tab styling */
.tab-refer {
  background: transparent !important;
  color: var(--text-mid) !important;
  font-weight: 400 !important;
  margin-left: 0 !important;
}
.tab-refer:hover {
  background: transparent !important;
  color: var(--blue) !important;
}
.tab-refer.active {
  background: transparent !important;
  color: var(--blue) !important;
  font-weight: 500 !important;
}
.tab-refer::after {
  display: block !important;
}

/* ── HEADER CTA — persistent Request Appointment button ── */
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--blue);
  color: #fff !important;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-family: var(--ff-b);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--tr), box-shadow var(--tr), transform var(--tr);
  box-shadow: 0 2px 8px rgba(43,91,168,0.18);
  flex-shrink: 0;
}
.header-cta:hover {
  background: var(--blue-mid);
  box-shadow: 0 4px 14px rgba(43,91,168,0.28);
  transform: translateY(-1px);
}

/* ── MOBILE HAMBURGER — proper 48×48 tap target ── */
.mob-toggle {
  padding: 12px;
  min-width: 48px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.mob-toggle:hover { background: var(--bg-soft); }
.mob-toggle:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.mob-toggle svg {
  width: 26px;
  height: 26px;
}

/* ── MOBILE DROPDOWN — larger tap targets, anchor to header bottom ── */
.mob-dropdown {
  padding: 0.75rem 1rem 1.25rem;
  gap: 4px;
}
.mob-dropdown .tab-btn {
  text-align: left;
  border-radius: 8px;
  padding: 1rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  min-height: 52px;
  display: flex;
  align-items: center;
  color: var(--text);
}
.mob-dropdown .tab-btn::after { display: none; }
.mob-dropdown .tab-btn:hover {
  background: var(--bg-soft);
  color: var(--blue);
}
.mob-dropdown .tab-btn.active {
  background: var(--bg-soft);
  color: var(--blue);
}

/* ── MOBILE STICKY BOTTOM ACTION BAR (Call + Book) ── */
.mobile-cta-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 18px rgba(43,91,168,0.1);
  padding: 0.55rem 0.6rem calc(0.55rem + env(safe-area-inset-bottom, 0));
  gap: 0.5rem;
  z-index: 90;
}
.mobile-cta {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 0.5rem;
  border-radius: 8px;
  font-family: var(--ff-b);
  font-size: 0.93rem;
  font-weight: 600;
  text-decoration: none;
  min-height: 50px;
  line-height: 1;
}
.mobile-cta-call {
  background: var(--bg-soft);
  color: var(--blue);
  border: 1px solid var(--border);
}
.mobile-cta-call:hover { background: var(--border); }
.mobile-cta-book {
  background: var(--blue);
  color: #fff;
}
.mobile-cta-book:hover { background: var(--blue-mid); }
.mobile-cta svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ── RESPONSIVE OVERRIDES ── */
@media (max-width: 900px) {
  .header-inner { padding: 0.75rem 1rem !important; }
  .tab-nav { display: none !important; }
  .header-cta { display: none !important; }
  .mob-toggle { display: inline-flex !important; }
  .mob-dropdown {
    position: absolute !important;
    top: 100% !important;
    padding-bottom: 1.25rem !important;
  }
  .mobile-cta-bar { display: flex; }
  body { padding-bottom: 82px; }
}

/* ──────────────────────────────────────────────────────────────────
   SITE-WIDE TEAL CLEANUP
   Teal is restricted to the home-page hero pill only. Every other
   teal accent across the site is neutralized to either blue (the
   institutional accent), muted neutrals (for labels), or kept
   semantically when teal genuinely marks "info/positive" state.
   ────────────────────────────────────────────────────────────────── */

/* Eyebrow — the small accent label above page titles */
.eyebrow { color: var(--blue) !important; }
.eyebrow::before { background: var(--blue) !important; }
/* On dark page-hero gradient backgrounds, use a lighter contrasting accent */
.page-hero .eyebrow { color: rgba(255,255,255,0.7) !important; }
.page-hero .eyebrow::before { background: rgba(255,255,255,0.5) !important; }
.spa-hero .eyebrow { color: rgba(255,255,255,0.7) !important; }
.spa-hero .eyebrow::before { background: rgba(255,255,255,0.5) !important; }

/* About-page timeline year + quote block */
.tl-y { color: var(--blue) !important; }
.about-quote {
  border-left-color: var(--blue) !important;
  background: var(--bg-soft) !important;
}

/* Conditions landing — condition card hover */
.cond-btn:hover {
  background: var(--bg-soft) !important;
  border-color: var(--blue) !important;
}

/* Section labels that previously used teal-dk */
.sec-label { color: var(--blue) !important; }

/* Conditions detail page — sidebar guide label */
.cond-guide-label { color: var(--text-mid) !important; }

/* Conditions detail page — section heading border */
.cond-sec-heading { border-bottom-color: var(--border) !important; }

/* Hospital role badge (About > Hospital affiliations) */
.hosp-role {
  color: var(--blue) !important;
  background: var(--bg-soft) !important;
  border-color: rgba(43,91,168,0.2) !important;
}

/* Referrer page step titles */
.ref-step-title { color: var(--blue) !important; }

/* Referrer page CTA panel — phone number colour */
.ref-cta-right .phone { color: #7FB3D3 !important; }
.ref-cta-right .phone:hover { color: #b8d4e6 !important; }

/* Resources page — section nav + guide tag */
.res-nav-btn.active {
  color: var(--blue) !important;
  border-left-color: var(--blue) !important;
}
.res-guide-tag { color: var(--text-mid) !important; }
.res-guide-icon {
  background: linear-gradient(135deg, #dceef8, #eaf1fb) !important;
}

/* Resources page — info alerts (was teal-bg) become neutral info-blue */
.res-alert.info {
  background: #eaf1fb !important;
  border-color: rgba(43,91,168,0.18) !important;
}

/* Resources page — checklist markers (were teal squares) */
.checklist li::before { color: var(--blue) !important; }

/* Resources page — extended prep card variant */
.prep-card-extended {
  border-color: rgba(43,91,168,0.25) !important;
  background: #eaf1fb !important;
}
.prep-card-extended .prep-card-title { color: var(--blue) !important; }
.prep-card-extended .prep-card-dl {
  color: var(--blue) !important;
  background: rgba(43,91,168,0.1) !important;
}
.prep-card-extended:hover { border-color: var(--blue) !important; }

/* Info card variant labelled "teal" — rename's behaviour, keep the class for back-compat */
.info-card.teal {
  border-left-color: var(--blue) !important;
  background: #eaf1fb !important;
}

/* Submit button disabled state was teal — make it a clearer muted grey */
.btn-sub:disabled { background: var(--muted) !important; }

/* On the resources sidebar's mobile horizontal layout */
@media (max-width: 900px) {
  .res-nav-btn.active { border-bottom-color: var(--blue) !important; }
}

/* ──────────────────────────────────────────────────────────────────
   AFFILIATION STRIP — uniform logo sizes + continuous ticker
   All logos render at a consistent 40px height / 160px max-width.
   JS wraps the set in .affil-ticker-wrap and duplicates it so a CSS
   keyframe animation creates a seamless infinite horizontal scroll
   on all screen sizes.
   ────────────────────────────────────────────────────────────────── */
.affil-band-inner img {
  height: 40px !important;
  max-width: 160px !important;
  width: auto !important;
  object-fit: contain !important;
  opacity: 0.72;
  filter: grayscale(15%);
  flex-shrink: 0;
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.affil-band-inner img:hover { opacity: 1 !important; filter: grayscale(0%) !important; }

/* ── Ticker — all screen sizes ── */
.affil-band {
  position: relative;
  overflow: hidden;
}
/* Fade edges */
.affil-band::before,
.affil-band::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.affil-band::before {
  left: 0;
  background: linear-gradient(to right, #fff 0%, transparent 100%);
}
.affil-band::after {
  right: 0;
  background: linear-gradient(to left, #fff 0%, transparent 100%);
}
/* Ticker wrapper — JS adds this class */
.affil-ticker-wrap {
  display: flex;
  width: max-content;
  animation: affil-scroll 28s linear infinite;
}
.affil-ticker-wrap:hover,
.affil-ticker-wrap.paused {
  animation-play-state: paused;
}
/* Each duplicated set of logos */
.affil-ticker-set {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 3.5rem !important;
  padding: 0 1.75rem !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  /* Override any max-width / margin / width that inline CSS sets on .affil-band-inner */
  max-width: none !important;
  width: max-content !important;
  margin: 0 !important;
}
@keyframes affil-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ──────────────────────────────────────────────────────────────────
   FOOTER — align with the new header nav and compact for mobile.
   The persistent header CTA already routes to /contact/, so we
   hide the Contact tab from the footer nav. Privacy Policy stays
   as a legal link. Mobile sizing tightens up so the footer doesn't
   take a big chunk of the screen.
   ────────────────────────────────────────────────────────────────── */

/* Hide the Contact link in footer nav so it mirrors the header (no
   Contact tab; the Request Appointment CTA covers that path). */
.ft-links a[href$="contact/index.html"],
.ft-links a[href$="contact/"] { display: none !important; }

/* Mobile footer compactness */
@media (max-width: 900px) {
  footer { padding: 1.25rem 1rem !important; }
  .footer-inner {
    flex-direction: column !important;
    text-align: center !important;
    gap: 0.85rem !important;
  }
  .ft-logo img { height: 36px !important; }
  .ft-links {
    justify-content: center !important;
    gap: 0.75rem 1rem !important;
    row-gap: 0.5rem !important;
  }
  .ft-links a { font-size: 0.75rem !important; }
  .ft-copy { font-size: 0.65rem !important; }
  .ft-disclaimer {
    margin-top: 0.5rem !important;
    padding: 0.65rem 1rem 0 !important;
    font-size: 0.65rem !important;
    line-height: 1.5 !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   GLOBAL — kill any horizontal scroll at the html level.
   Some pages have fixed-pixel-width elements that exceed the mobile
   viewport (e.g. a 300px profile photo on the referrers contact panel,
   wide map iframes on the contact page). Body has overflow-x:hidden
   but fixed-position elements escape body's clipping; setting it on
   html as well clips horizontal overflow at the document root.
   ────────────────────────────────────────────────────────────────── */
html { overflow-x: hidden !important; }
@media (max-width: 900px) {
  html, body { max-width: 100vw !important; overflow-x: hidden !important; }
  /* The dark contact panel on the referrers page has a 300px square photo —
     too wide for narrow phones. Constrain it to its container. */
  .ref-cta img[src*="profile-photo"] { max-width: 100% !important; width: auto !important; max-height: 220px !important; }
  /* The .ref-cta panel itself can have wide padding on narrow screens. */
  .ref-cta { padding: 1.5rem 1.25rem !important; }
  /* Hospital cards on contact page use a hard-coded 3-column grid
     (140px logo + 1fr info + 45% map). At narrow viewports that grid
     is wider than its container and the whole page gets horizontal
     scroll. Collapse to single column on mobile. */
  div[style*="grid-template-columns:140px 1fr 45%"],
  div[style*="grid-template-columns: 140px 1fr 45%"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  /* Also clip any other grid that hard-codes a multi-column layout
     wider than the viewport. */
  .hosp-card, .hosp-grid > .card { overflow: hidden !important; }
}

/* ──────────────────────────────────────────────────────────────────
   MOBILE STICKY BAR — defensive positioning
   The bar should always sit at the very bottom of the viewport. Some
   pages with forms (contact, referrers) reported the bar drifting
   away from the bottom — likely iOS Safari stacking-context quirks
   when overflow-x:hidden is on body. Force own composite layer and
   higher z-index so it always sits above other content.
   ────────────────────────────────────────────────────────────────── */
.mobile-cta-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  overflow: hidden !important;   /* clip any content that exceeds the bar */
  z-index: 100 !important;
  transform: translateZ(0);
  will-change: transform;
}
/* Allow flex children to shrink below their intrinsic content size — without
   this, a long "Request Appointment" label forces the buttons wider than
   their share of the bar, which overflows the viewport and creates
   horizontal scroll. */
.mobile-cta-bar .mobile-cta {
  min-width: 0 !important;
  flex: 1 1 0 !important;
  overflow: hidden !important;
}
/* Shrink button typography slightly on narrow phones so the labels fit
   comfortably without truncation. */
@media (max-width: 420px) {
  .mobile-cta-bar { padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom, 0)) !important; gap: 0.4rem !important; }
  .mobile-cta-bar .mobile-cta { font-size: 0.85rem !important; padding: 0.75rem 0.25rem !important; gap: 0.35rem !important; }
  .mobile-cta-bar .mobile-cta svg { width: 16px !important; height: 16px !important; }
}

/* Conditions landing — category colour for "general surgery" cards.
   Originally teal vs blue to distinguish from "colorectal". Text labels
   already differentiate the sections; collapse to a single blue accent. */
.section-heading-bar.general { background: var(--blue) !important; }
.cond-card.general .cond-card-label { color: var(--blue) !important; }
.cond-card.general .cond-link { color: var(--blue) !important; }

/* Scroll-margin so anchor links (e.g. #referral-form) don't get hidden
   under the sticky header when jumped to from other pages. */
#referral-form { scroll-margin-top: 100px; }
@media (max-width: 900px) { #referral-form { scroll-margin-top: 88px; } }

/* Bulletproof CTA link colour. Some pages (procedures, resources, blog
   posts) have a global 'a { color: var(--blue) }' or 'a:hover { color: … }'
   rule in their inline CSS. Even though .header-cta uses !important,
   different pseudo-class specificity can cause subtle quirks across
   browsers. Lock it down with element-tagged selectors covering every
   link state. */
a.header-cta,
a.header-cta:link,
a.header-cta:visited,
a.header-cta:hover,
a.header-cta:focus,
a.header-cta:active {
  color: #fff !important;
  font-weight: 600 !important;
  font-family: var(--ff-b) !important;
  text-decoration: none !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}
a.mobile-cta-book,
a.mobile-cta-book:link,
a.mobile-cta-book:visited,
a.mobile-cta-book:hover,
a.mobile-cta-book:focus,
a.mobile-cta-book:active {
  color: #fff !important;
  text-decoration: none !important;
}
a.mobile-cta-call,
a.mobile-cta-call:link,
a.mobile-cta-call:visited,
a.mobile-cta-call:hover,
a.mobile-cta-call:focus,
a.mobile-cta-call:active {
  color: var(--blue) !important;
  text-decoration: none !important;
}