/* Sound Heal Speech & Hearing Clinic — shared site styles.
   Page content uses inline styles (ported from the design source);
   this file only holds the cross-page reset and responsive overrides. */

body { margin: 0; background: #F6F8F9; font-family: 'Public Sans', sans-serif; }
a { text-decoration: none; }
::selection { background: #CFE8ED; }
input::placeholder, textarea::placeholder { color: #9AA7B2; }

/* iOS Safari zooms the page in on focus if a form field's font-size is under 16px */
input, select, textarea { font-size: 16px; }

.nav-toggle { display: none; background: none; border: none; padding: 8px; margin: -8px; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* Tablet: collapse header nav into a toggleable dropdown, 4/3-col grids to 2 columns */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  /* the nav element carries an inline display/align-items/gap style, which beats external
     rules by specificity — !important is required here to actually override it */
  header nav.site-nav {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-bottom: 1px solid #E1E7EA;
    box-shadow: 0 16px 32px -16px rgba(20,51,92,0.22);
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 6px 0;
  }
  header nav.site-nav.nav-open { display: flex !important; }
  header nav.site-nav a {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 32px;
    border-bottom: 1px solid #F0F3F5;
  }

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

/* Mobile: single-column, stacked layout (overrides the tablet tier above at narrower widths) */
@media (max-width: 680px) {
  [style*="display:grid"][style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="border-radius:22px"][style*="overflow:hidden"] { height: 240px !important; }
  [style*="gap:18px;height:360px"] { height: auto !important; }
  [style*="gap:18px;height:360px"] > div { height: 200px !important; }
  .hdr-phone-text { display: none !important; }
  h1 { font-size: clamp(26px, 8vw, 36px) !important; line-height: 1.2 !important; }
  h2 { font-size: clamp(21px, 6vw, 27px) !important; }
}
@media (max-width: 640px) {
  .hdr-book-btn { display: none !important; }
}
@media (max-width: 600px) {
  [style*="max-width:1240px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="max-width:900px"] { padding-left: 20px !important; padding-right: 20px !important; }
  .mobile-cta { display: flex !important; }
  body { padding-bottom: 70px; }
}