/* Jayhawk Foot & Ankle - phone/tablet readability + tap targets (2026-10-15). Loaded last in <head> on every page.
   Layout/legibility only: no content is added, removed or reordered. */
@media (max-width: 599px) {
  /* hero subtitle: was 0.68rem (~11px) white-on-photo */
  .page-hero-sub { font-size: 0.8rem; line-height: 1.45; }
  /* city pages ("Podiatrist in <city>" heroes, text in the normal flow): the hero grows to fit the larger subtitle
     instead of letting it spill past the bottom edge (Leawood already spilled before this change) */
  .page-hero[aria-label^="Podiatrist in"] { height: auto; min-height: 240px; }
  /* "Accepting New Patients" pill: was 0.54rem (~8.6px) */
  .below-hero-pill { font-size: 0.7rem; padding: 0.3rem 0.7rem; }
  /* menu button: same size and look; an invisible 44px touch area around it (grows left/up/down, never off the screen) */
  .burger { position: relative; }
  .burger::after { content: ''; position: absolute; top: -8px; bottom: -8px; left: -9px; right: 0; }
  /* footer links: taller rows so a thumb hits the intended link */
  .footer-col a { padding: 0.32rem 0; margin-bottom: 0.1rem; }
  /* careers email badge: let the address wrap instead of pushing the page sideways */
  .career-email-badge { box-sizing: border-box; max-width: 100%; min-width: 0; flex-shrink: 1; flex-wrap: wrap; column-gap: 0.5rem; row-gap: 0.15rem; }
  .career-email-badge strong { overflow-wrap: anywhere; }
}
@media (min-width: 600px) and (max-width: 899px) {
  /* tablets: footer in two columns (careers had four, the last ran off the screen) */
  .footer-top { grid-template-columns: 1fr 1fr; }
}