/* Shared header, menu and phone/laptop layout fixes — loaded on every page after the page's own styles.
   Menu grouping agreed with David 2026-10-09: Services ⌄ · Company ⌄ · TOM AI · Contact · phone · Business account. */

/* ---------- Desktop header ---------- */
#main-nav .logo { flex-shrink: 0; margin-right: 28px; }
#main-nav .nav-links { gap: 26px; }
#main-nav .nav-links a { white-space: nowrap; }

/* Clear arrow on the two menus that open */
.nav-item-dropdown > a::after {
  content: "" !important; display: inline-block !important; width: 7px; height: 7px; margin-left: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg); opacity: 1 !important; font-size: 0; transition: transform .2s;
}
.nav-item-dropdown:hover > a::after,
.nav-item-dropdown:focus-within > a::after,
.nav-item-dropdown.open > a::after { transform: translateY(0) rotate(225deg); }

/* Tap (touch screens) opens the menu the same way hover does */
.nav-item-dropdown.open .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-dropdown a.dd-all {
  font-weight: 600; color: #2EC4B6; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px 6px 0 0; margin-bottom: 4px;
}
.nav-sep { width: 1px; height: 26px; background: rgba(255, 255, 255, 0.15); flex-shrink: 0; }
#main-nav .nav-links a.nav-phone { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #fff; }
#main-nav .nav-links a.nav-phone svg { flex-shrink: 0; }
#main-nav .nav-links a.nav-req { padding: 10px 16px !important; }

/* Menu button is a real button (keyboard + screen readers) */
button.nav-hamburger { background: none; border: 0; padding: 10px; margin: -10px; cursor: pointer; }
.nav-hamburger:focus-visible,
.mobile-dropdown-toggle:focus-visible,
.nav-item-dropdown > a:focus-visible { outline: 2px solid #2EC4B6; outline-offset: 3px; border-radius: 4px; }

/* Below 1180px the full header no longer fits on one line: use the menu button instead */
@media (max-width: 1180px) {
  #main-nav .nav-links { display: none; }
  #main-nav .nav-hamburger { display: flex; }
}

/* ---------- Phone / tablet menu ---------- */
.mobile-menu {
  top: var(--xm-nav-h, 70px);
  max-height: calc(100vh - var(--xm-nav-h, 70px));
  max-height: calc(100dvh - var(--xm-nav-h, 70px));
  overflow-y: auto; overscroll-behavior: contain;
}
.mobile-menu-item-dropdown { display: flex; flex-direction: column; }
.mobile-menu .mobile-dropdown-toggle { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu .mobile-dropdown-toggle::after {
  content: "" !important; width: 8px; height: 8px; margin: 0 6px 0 12px; opacity: 1 !important;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg); transition: transform .2s;
}
.mobile-menu .mobile-dropdown-toggle.open::after { transform: translateY(2px) rotate(225deg); }
.mobile-menu .mobile-dropdown { max-height: none; }
.mobile-menu .nav-cta { text-align: center; }

/* First section on a page sitting directly under the fixed header needs room for it (Coverage page) */
#uk-national-coverage.xm-page-top { padding-top: 156px; }
@media (max-width: 768px) { #uk-national-coverage.xm-page-top { padding-top: 124px; } }
/* Services, Business, Tracking and Contact pages: same breathing room under the header */
section.xm-page-top { padding-top: 152px; }
@media (max-width: 768px) { section.xm-page-top { padding-top: 136px; } }

/* ---------- Content cut off on narrow screens (found by the 2026-10-09 scans) ---------- */
/* Homepage "Why choose us" stats cards: tablets (side-by-side layout) and phones */
@media (max-width: 1100px) {
  .why-visual { padding: 28px 22px; }
  .why-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .why-stat-box { min-width: 0; }
  .wstat-num { font-size: clamp(22px, 3.2vw, 34px); }
}
/* Medical page hero: let the text column shrink; smaller headline on the smallest phones */
.med-hero .container > * { min-width: 0; }
@media (max-width: 400px) {
  .med-hero h1 { font-size: clamp(30px, 10vw, 42px); }
}
@media (max-width: 600px) {
  /* Homepage "Why choose us" stats cards */
  .why-visual { padding: 24px 18px; }
  .why-stats-grid { gap: 12px; }
  .why-stat-box { padding: 18px 14px; }
  .wstat-num { font-size: clamp(22px, 7vw, 34px); }
  /* TOM page headline and stat bar */
  .tom-hero-title { font-size: clamp(34px, 11vw, 60px); }
  .tom-console-footer { flex-wrap: wrap; gap: 12px 20px; }
  /* Sustainability headline */
  .sus-hero h1 { font-size: clamp(32px, 10.5vw, 56px); }
}