/* site3 mobile-friendly overrides — only kicks in below md (768px). Desktop unaffected. */

/* Mobile menu drawer (injected by /js/mobile-nav.js) */
#site3-mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
#site3-mobile-drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

#site3-mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(82vw, 320px);
  height: 100vh;
  background: #fff;
  z-index: 91;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#site3-mobile-drawer.open { transform: translateX(0); }

#site3-mobile-drawer .drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e5e7eb;
}
#site3-mobile-drawer .drawer-title {
  font-weight: 600;
  font-size: 1.05rem;
  color: #111827;
}
#site3-mobile-drawer .drawer-close {
  background: none;
  border: 0;
  padding: 0.25rem;
  font-size: 1.5rem;
  line-height: 1;
  color: #4b5563;
  cursor: pointer;
}

#site3-mobile-drawer nav {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
}
#site3-mobile-drawer nav a {
  display: block;
  padding: 0.875rem 1.25rem;
  color: #1f2937;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  border-bottom: 1px solid #f3f4f6;
}
#site3-mobile-drawer nav a:hover,
#site3-mobile-drawer nav a:active { background: #f9fafb; color: #0066cc; }
#site3-mobile-drawer nav a.is-active { color: #0066cc; background: #eff6ff; }

body.site3-drawer-open { overflow: hidden; }

/* Mobile-only layout adjustments below md (768px). */
@media (max-width: 767px) {
  /* The fixed header has h-16 (64px). Push body content down so it isn't hidden. */
  /* Most pages have pt-16 already on the main content; but some hero sections lap under header. */

  /* Container side padding overrides for tight mobile */
  .max-w-\[1920px\].mx-auto.px-8,
  .max-w-7xl.mx-auto.px-4.sm\:px-6.lg\:px-8,
  .max-w-7xl.mx-auto.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Tame oversized hero text on mobile */
  h1.text-4xl, h1.text-5xl, h1.text-6xl {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
    line-height: 1.2;
  }
  h2.text-3xl, h2.text-4xl, h2.text-5xl {
    font-size: clamp(1.5rem, 6vw, 1.875rem);
    line-height: 1.25;
  }
  h3.text-2xl, h3.text-3xl {
    font-size: clamp(1.25rem, 5vw, 1.5rem);
  }

  /* Hero sections: reduce vertical padding so they fit the viewport better. */
  .hero-bg, section.hero, [class*="hero"] {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  /* Forms & inputs: full width, prevent iOS zoom-on-focus */
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="password"], input[type="search"], textarea, select {
    font-size: 16px !important;
    width: 100%;
    box-sizing: border-box;
  }

  /* Buttons that were inline-flex with nowrap: allow wrap */
  .whitespace-nowrap { white-space: normal; }

  /* Tables: horizontal scroll if too wide */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Ensure images in articles don't overflow */
  img { max-width: 100%; height: auto; }

  /* Hide elements explicitly marked desktop-only */
  .desktop-only { display: none !important; }

  /* Footer columns stack on mobile */
  footer .grid { gap: 1.5rem; }
}

/* Hamburger button touch target — left padding 0 so the gap to its neighbour
   matches the other icon-to-icon gaps (otherwise the hamburger looked further away).
   Right padding 4px keeps a small breath before the viewport edge. */
button.md\:hidden { min-width: 0; min-height: 32px; padding-left: 0; padding-right: 4px; }

@media (max-width: 767px) {
  /* ─── Stop horizontal page overflow ─────────────────────────────────
     Some pages (notably the home page partner-logos row) use
     `w-[calc(12.5%-0.5rem)] min-w-[80px]` for 8 columns — that needs
     ≥640px and forces the document wider than a phone viewport, which
     in turn pushes the fixed header content (and the hamburger) past
     the right edge of the screen. Convert 8-col → 3-col on mobile. */
  .min-w-\[80px\] { min-width: 0 !important; }
  .w-\[calc\(12\.5\%-0\.5rem\)\] { width: calc(33.333% - 0.5rem) !important; }
  /* Defensive belt: html/body never wider than the viewport on mobile */
  html, body { overflow-x: clip; }

  /* ─── Header right-edge alignment (all pages) ──────────────────────
     Left padding stays comfortable (16px), right padding shrunk to 4px so
     the hamburger sits very close to the viewport edge.
     Logo can shrink; right utility area never shrinks; hamburger pinned last. */
  header > div.max-w-\[1920px\] {
    padding-left: 1rem !important;
    padding-right: 0.5rem !important;
  }
  header > div > .flex.items-center:first-child { min-width: 0; flex-shrink: 1; }
  header > div > .flex.items-center:last-child  { flex-shrink: 0; }
  header button.md\:hidden { order: 99; }
  /* Tighten gap between right-side utility icons (Tailwind space-x-6 = 24px) on mobile */
  header .space-x-6 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.5rem !important; }
}