/* ============================================================
   OX TAXIS — shared responsive fixes
   Loaded on all 7 pages, after animations.css.
   ============================================================ */

/* ---- Prevent horizontal scroll/pan (Ken Burns transform on the
   hero image can otherwise inflate documentElement.scrollWidth
   even though it's visually clipped by the header). Uses `clip`
   not `hidden` — `overflow-x: hidden` on html/body turns them into
   a scroll container, which silently breaks `position: sticky` on
   the nav (it stops sticking and scrolls away). `clip` blocks the
   horizontal overflow the same way without that side effect. ---- */
html, body {
  overflow-x: clip;
  max-width: 100%;
}

/* ---- Mobile nav menu ---- */
#mobile-menu-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#mobile-menu-btn {
  min-width: 44px;
  min-height: 44px;
}
#mobile-menu-panel a,
#mobile-menu-panel button {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* ---- Accordion panels (Home "Focused Sector Support",
   B2B "Who We Work With") — unreadable squished on touch/mobile
   AND tablet widths (headings clip in the narrow collapsed panels;
   tablets are touch-primary so :hover isn't reliable anyway).
   Stack them instead, up to the lg breakpoint. ---- */
@media (max-width: 1023px) {
  #services-accordion,
  #sectors-accordion {
    flex-direction: column !important;
    min-height: auto !important;
  }
  .service-panel,
  .sector-panel {
    flex: none !important;
    width: 100% !important;
    height: 220px !important;
  }
  .sector-panel {
    /* longest sector card (NHS/Research) needs more room than the
       Home services accordion — fixed 220px clipped its heading */
    height: 250px !important;
  }
  .svc-extra,
  .sector-extra {
    opacity: 1 !important;
    height: auto !important;
  }
  .svc-img,
  .sector-img {
    opacity: 0.35 !important;
    transform: none !important;
  }
}