/* Global responsive styles for SSHHZ site.
   Activated below 880px (tablet) and 640px (phone). Mobile-first overrides
   that flatten grids, collapse the desktop nav into a drawer, shrink type,
   and let edge-padded sections re-flow with viewport width. */

/* Mobile drawer-nav toggle — hidden by default, shown only on narrow widths */
.mobile-nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 8px;
  margin: -8px;
}
.mobile-nav-toggle svg { display: block; }

/* Mobile drawer itself — hidden on desktop, only revealed inside the @media block */
#mnav-drawer { display: none; }
.mnav-close { display: none; }

@media (max-width: 880px) {
  /* Page-wide: kill the wide 56px gutter */
  body, html { overflow-x: hidden; }

  /* Header / nav --------------------------------------------------------- */
  header[role="banner"], body > div > div > header,
  div#root > div > header {
    padding: 14px 20px !important;
    flex-wrap: wrap !important;
    row-gap: 8px !important;
  }
  /* Long firm-name lockup shrinks */
  header a > div > div { font-size: 14px !important; }
  /* Desktop nav links hide; we render a drawer instead */
  header nav { display: none !important; }
  .mobile-nav-toggle { display: inline-flex !important; align-items: center; }
  body.mnav-open { overflow: hidden !important; }
  body.mnav-open #mnav-drawer { transform: translateX(0) !important; }
  #mnav-drawer {
    position: fixed; inset: 0; z-index: 100; transform: translateX(100%);
    transition: transform .25s ease;
    background: #0a1838; color: #fdf7e6;
    padding: 28px 24px 40px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 22px;
    font-family: var(--sans);
  }
  #mnav-drawer .mnav-close {
    display: block !important;
    position: absolute; top: 18px; right: 18px;
    background: transparent; border: 0; color: inherit; cursor: pointer;
  }
  #mnav-drawer h2 { font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
    color: #1d8a9e; margin: 0; font-weight: 700; }
  #mnav-drawer a.mnav-link {
    color: #fdf7e6; text-decoration: none; font-size: 22px; font-weight: 600;
    letter-spacing: -0.015em; padding: 10px 0; border-bottom: 1px solid rgba(253,247,230,.12);
  }
  #mnav-drawer .mnav-cta {
    margin-top: 12px; background: #1d8a9e; color: #fdf7e6;
    padding: 14px 18px; text-decoration: none; font-weight: 700; font-size: 14px;
    text-align: center; letter-spacing: .02em;
  }

  /* Sections — collapse big horizontal padding -------------------------- */
  section, footer { padding-left: 20px !important; padding-right: 20px !important; }

  /* Two-column / three-column grids collapse to single column */
  div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  /* Practice rows: 80px | title | desc | arrow → drop the index + arrow cols */
  a.c-row, a.d-row {
    grid-template-columns: 60px 1fr !important;
    gap: 14px !important;
    padding: 18px 20px !important;
  }
  a.c-row > div:nth-child(3), a.d-row > div:nth-child(3),
  a.c-row > div:nth-child(4), a.d-row > div:nth-child(4) {
    grid-column: 2 / -1 !important;
    font-size: 14px !important;
  }
  a.c-row > div:nth-child(4), a.d-row > div:nth-child(4) {
    display: none !important;
  }

  /* Big display type comes down a notch */
  h1 { font-size: clamp(34px, 9vw, 56px) !important; line-height: 1.02 !important; }
  h2 { font-size: clamp(28px, 7.5vw, 44px) !important; line-height: 1.05 !important; }

  /* Footer stack */
  footer > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding-bottom: 24px !important;
  }
  footer > div[style*="font-size: clamp(40px"] { font-size: 56px !important; }

  /* Forms — full-width inputs */
  input, select, textarea, button { font-size: 16px !important; /* prevents iOS zoom */ }
  form > div[style*="grid"] { grid-template-columns: 1fr !important; }

  /* Sticky nav uses too much vertical real estate on phones */
  header[style*="position: sticky"] { position: static !important; }
}

@media (max-width: 540px) {
  section, footer { padding-left: 16px !important; padding-right: 16px !important; }
  header[role="banner"], body > div > div > header,
  div#root > div > header { padding: 12px 16px !important; }
  /* Bigger CTA phone numbers wrap nicely */
  a[href^="tel:"][style*="font-size: 38px"],
  a[href^="tel:"][style*="font-size: 32px"] { font-size: 28px !important; }
}