/* ═══════════════════════════════════════════════════════════════
   CAPADEV — SHARED MOBILE RESPONSIVE
   Injected into every page. Uses CSS attribute selectors to
   override inline-styled grids without touching each page's HTML.
   ═══════════════════════════════════════════════════════════════ */

/* ── TABLET (≤900px): 3-col → 2-col ── */
@media (max-width: 900px) {
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── MOBILE (≤768px): stack everything ── */
@media (max-width: 768px) {

  /* Nav */
  .nav-inner { padding: 0 16px !important; height: 60px !important; }

  /* Wrap / container gutters */
  .wrap    { padding-left: 16px !important; padding-right: 16px !important; }
  .container { padding-left: 16px !important; padding-right: 16px !important; }
  div[style*="max-width:1280px"][style*="padding:0 24px"],
  div[style*="max-width:1200px"][style*="padding:0 24px"] {
    padding-left: 16px !important; padding-right: 16px !important;
  }

  /* ── Section padding ── */
  section[style*="padding:72px"],
  section[style*="padding:80px"],
  section[style*="padding:96px"] {
    padding-top:    52px !important;
    padding-bottom: 52px !important;
    padding-left:   16px !important;
    padding-right:  16px !important;
  }
  section[style*="padding:64px"],
  section[style*="padding:56px"] {
    padding-top:    44px !important;
    padding-bottom: 44px !important;
    padding-left:   16px !important;
    padding-right:  16px !important;
  }

  /* ── Footer: 4-col → 1-col ── */
  [style*="grid-template-columns:2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 44px 16px 28px !important;
  }

  /* ── Side-by-side content+image panels → stack ── */
  [style*="grid-template-columns:1fr 1.6fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* ── Clinician engagement tabs: horizontal scroll ── */
  #ce-tabs {
    white-space: nowrap !important;
    display: flex !important;
    flex-wrap: nowrap !important;
  }
  .tab-btn { white-space: nowrap !important; flex-shrink: 0 !important; }

  /* ── 3-col → 1-col ── */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"],
  [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── 4-col → 2×2 ── */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── 2-col → 1-col ──
     The semicolon after value prevents matching 3-col/4-col variants. */
  [style*="grid-template-columns:1fr 1fr;"],
  [style*="grid-template-columns: 1fr 1fr;"],
  [style$="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:3fr 2fr"],
  [style*="grid-template-columns:48% 52%"],
  [style*="grid-template-columns:.9fr 1.1fr"],
  [style*="grid-template-columns: .9fr 1.1fr"],
  [style*="grid-template-columns:1fr auto 1fr"],
  [style*="grid-template-columns:auto 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Hero section inside dark wrapper ── */
  [style*="grid-template-columns:48% 52%"] {
    padding: 40px 20px 32px !important;
    gap: 24px !important;
    min-height: auto !important;
  }

  /* ── Gap / padding tightening on cards ── */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(2,1fr)"] {
    gap: 16px !important;
  }
  [style*="grid-template-columns:1fr 1fr;"] {
    gap: 16px !important;
  }

  /* ── Card inner padding ── */
  [style*="padding:40px 40px 40px"] { padding: 24px 16px !important; }
  [style*="padding:32px 28px"]      { padding: 20px 16px !important; }
  [style*="padding:28px 32px"]      { padding: 20px 16px !important; }
  [style*="padding:30px 32px"]      { padding: 20px 16px !important; }

  /* ── Testimonial / dark cards ── */
  [style*="padding:28px 32px"] { padding: 20px 16px !important; }

  /* ── Engine converge (SVG connector) ── */
  .converge {
    transform: rotate(90deg) !important;
    min-width: 0 !important;
    padding: 4px 0 !important;
  }
  .converge svg { width: 70px !important; }

  /* ── Engine / problem grids already classed ── */
  .engine-diagram { grid-template-columns: 1fr !important; gap: 18px !important; }
  .problem-grid   { grid-template-columns: 1fr !important; gap: 28px !important; }
  .serve-grid     { grid-template-columns: 1fr !important; }
  .feat-grid      { grid-template-columns: 1fr !important; }
  .differentiator-grid { grid-template-columns: 1fr !important; }

  /* ── Metric counters ── */
  .metric-number { font-size: 38px !important; }

  /* ── Typography scale-down ── */
  h1 { font-size: clamp(26px, 6.5vw, 38px) !important; }
  h2 { font-size: clamp(22px, 5vw, 32px)   !important; }

  /* ── Overflow guard ── */
  body { overflow-x: hidden; }
  img  { max-width: 100%; height: auto; }

  /* ── Footer locations: flag + city / street detail ── */
.footer-loc { font-size: 13px; color: var(--ink-45); }
.footer-loc-detail { font-size: 13px; color: var(--ink-45); }
.footer-loc-dash   { color: var(--ink-45); }

@media (max-width: 768px) {
  .footer-loc-dash   { display: none; }
  .footer-loc-detail { display: block; padding-left: 24px; font-size: 12px; line-height: 1.45; margin-top: 1px; }
}

/* ── Cookie banner ── */
  #cookie-banner {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px 16px !important;
  }

  /* ── Full-width wrappers that use fixed inner padding ── */
  div[style*="padding:64px 24px"],
  div[style*="padding:72px 24px"],
  div[style*="padding:56px 24px"] {
    padding-left:  16px !important;
    padding-right: 16px !important;
  }

  /* ── Flex rows that don't wrap ── */
  .residency { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
}

/* ── Mobile menu: full-height overlay when open ── */
#mobile-menu.open {
  display: block;
  position: fixed !important;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  z-index: 49;
  background: #fff !important;
  border-top: 1px solid #E5E7EB;
}

/* ══════════════════════════════════════════
   MOBILE NAV — Logo + Accordion Menu
   ══════════════════════════════════════════ */

/* Smaller logo on mobile */
@media (max-width: 1024px) {
  .nav-logo img { width: 130px !important; height: auto !important; }
  .nav-inner    { height: 60px !important; }
}

/* Accordion wrapper */
.mob-nav-wrap {
  padding: 4px 20px 20px;
  display: flex;
  flex-direction: column;
}

/* Each accordion item */
.mob-acc { border-bottom: 1px solid #F0F4F8; }

/* Trigger button */
.mob-acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-dark, #0D2035);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.mob-acc-chevron { transition: transform .25s ease; flex-shrink: 0; }
.mob-acc-btn[aria-expanded="true"] .mob-acc-chevron { transform: rotate(180deg); }

/* Collapsible panel */
.mob-acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .32s ease;
}

/* Section header inside accordion */
.mob-acc-group {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #8A99A8;
  padding: 10px 0 4px 10px;
  text-transform: uppercase;
}

/* Sub-link inside accordion */
.mob-acc-link {
  display: block;
  padding: 9px 10px;
  font-size: 14px;
  color: var(--text-dark, #0D2035);
  text-decoration: none;
  border-radius: 6px;
  transition: background .15s;
}
.mob-acc-link:hover { background: #F5F8FA; }

/* Top-level direct links (News, About) */
.mob-top-link {
  display: block;
  padding: 15px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-dark, #0D2035);
  text-decoration: none;
  border-bottom: 1px solid #F0F4F8;
}

/* CTA row at bottom */
.mob-nav-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

/* ── EXTRA SMALL (≤480px) ── */
@media (max-width: 480px) {
  .metric-number { font-size: 30px !important; }
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Footer locations info stack tighter */
  [style*="grid-template-columns:2fr 1fr 1fr 1fr"] {
    padding: 36px 14px 24px !important;
  }
}

/* ── Footer — colors ─────────────────────────────────────────────────────── */
footer a                                    { color: rgba(255,255,255,0.65) !important; }
footer p                                    { color: rgba(255,255,255,0.55) !important; }
.footer-loc,
.footer-loc-city,
.footer-loc-detail,
.footer-loc-dash                            { color: rgba(255,255,255,0.55) !important; }

/* Description + email */
footer .footer-grid > div:first-child > p  { font-size: 15px !important; }
footer .footer-grid > div:first-child > a  { font-size: 15px !important; }
/* Space between logo and description */
footer .footer-grid > div:first-child .brand { margin-bottom: 16px !important; display: block !important; }

/* Column titles: bigger, remove em-dash line, tighter tracking so long titles stay on one line */
footer .eyebrow                             { font-size: 14px !important;
                                              letter-spacing: 0.08em !important;
                                              margin-bottom: 20px !important; }
footer .eyebrow::before                     { display: none !important; }

/* Footer grid: full width, equal padding matching column gap */
footer .footer-grid                         { max-width: none !important;
                                              margin: 0 !important;
                                              padding-left: 32px !important;
                                              padding-right: 32px !important;
                                              gap: 32px !important;
                                              grid-template-columns: 2fr 1fr 1.4fr 1fr !important; }

/* ── Footer mobile: must come AFTER the desktop rule above to win ── */
@media (max-width: 768px) {
  footer .footer-grid                       { grid-template-columns: 1fr !important;
                                              padding: 44px 16px 28px !important;
                                              gap: 32px !important; }
}