/* SDS Web Services: mobile + layout fixes layered on top of the compiled Tailwind build */

/* The base stylesheet scales the whole site to 140%, which is far too large on
   phones and pushes the desktop header off-screen. Scale up gradually instead. */
html { font-size: 100%; }
@media (min-width: 640px)  { html { font-size: 106.25%; } }
@media (min-width: 1024px) { html { font-size: 112.5%; } }
@media (min-width: 1280px) { html { font-size: 125%; } }
@media (min-width: 1600px) { html { font-size: 140%; } }

/* Never allow sideways scrolling */
html, body { max-width: 100%; overflow-x: clip; }
img, svg, video { max-width: 100%; height: auto; }

/* Grid/flex children default to min-width:auto, which lets long content
   force a single-column mobile grid wider than the screen. */
.grid > * { min-width: 0; }
header nav a, header nav button { white-space: nowrap; }

/* Long emails, URLs and headings wrap instead of overflowing */
h1, h2, h3, h4, p, li, a, span, label { overflow-wrap: break-word; }
a[href^="mailto:"], a[href^="tel:"] { overflow-wrap: anywhere; }

/* Prevent iOS zoom-on-focus (needs >=16px) */
@media (max-width: 1023px) {
  input, select, textarea { font-size: 16px !important; }
}

/* Mobile navigation panel */
.sds-mobile-menu {
  position: absolute; right: 0; top: 3.25rem; z-index: 50;
  width: min(18rem, calc(100vw - 2rem));
  border: 1px solid #e5e7eb;
  border-radius: .5rem; background: #fff; padding: .75rem;
  box-shadow: 0 18px 45px rgba(16, 42, 67, .14);
}
.sds-mobile-menu[hidden] { display: none; }
.sds-mobile-menu .grid a {
  display: flex; align-items: center; min-height: 2.75rem; border-radius: .375rem;
  padding: .625rem .75rem; font-size: .875rem; font-weight: 600; color: #5f6877;
}
.sds-mobile-menu .grid a:hover { background: #eaf2ff; color: #2563eb; }
.sds-mobile-menu .grid a[aria-current="page"] { color: #2563eb; background: #eaf2ff; }
.sds-mobile-cta {
  margin-top: .75rem; display: flex; min-height: 2.75rem; width: 100%;
  align-items: center; justify-content: center; border-radius: .375rem;
  background: #102a43; padding: .625rem 1rem; font-size: .875rem; font-weight: 600; color: #fff;
}
.sds-mobile-cta:hover { background: #0b2037; }

/* Modal content columns */
@media (min-width: 640px) {
  .sds-modal-grid.has-side { grid-template-columns: 1.1fr .9fr; }
}

@media (max-width: 639px) {
  /* Comfortable tap targets in the footer */
  footer .flex-wrap a { display: inline-flex; align-items: center; min-height: 2.5rem; }
  footer .flex-wrap { row-gap: .25rem; }
  /* Stacked CTA buttons span the full width */
  main .flex-col > a.inline-flex, main .flex-col > button.inline-flex { width: 100%; }
  /* Category pills: smaller gaps so more fit per row */
  [aria-label="Browse services by category"] { gap: .5rem; }
}

@media (max-width: 639px) {
  #sds-modal-title { font-size: 1.5rem; line-height: 1.2; overflow-wrap: normal; hyphens: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* Desktop header: keep logo, links and CTA on one row between 1024px and 1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
  header nav .lg\:flex { gap: 1.25rem; }
  header nav > .flex > a.sm\:inline-flex { padding-left: .875rem; padding-right: .875rem; }
}
header nav > a { flex-shrink: 0; }