/* Careers IT — site-wide mobile usability fixes (Oct 2026).
 * Loaded last on every front-end page by careers_it_mobile_fixes_enqueue()
 * in careers-it-assets.php. Desktop layout is untouched: every rule is
 * inside a max-width media query. */

@media (max-width: 960px) {
  /* Nav search panel was absolutely positioned at right:-40px with a 360px
     width, pushing ~24px past the right edge on phones and causing sideways
     scrolling on EVERY page (even while hidden). Pin it to the viewport. */
  .nav-search-panel {
    position: fixed !important;
    top: 96px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
  }
  /* 16px stops iOS Safari auto-zooming when the field is focused */
  .nav-search-panel input,
  .cit-booking input,
  .cit-booking select,
  .cit-booking textarea { font-size: 16px !important; }

  /* Belt-and-braces: never allow sideways page scroll */
  html, body { overflow-x: clip; max-width: 100%; }
  img, video, iframe, svg, table { max-width: 100%; }
  img { height: auto; }
}

@media (max-width: 640px) {
  /* Tap targets: footer, breadcrumb, related-course and study-mode links
     were 17-21px tall (Google's guideline is ~48px incl. spacing). */
  footer .foot-col li { margin-bottom: 2px; }
  footer .foot-col a,
  .cit-breadcrumb a,
  .cit-related-list a,
  a.cit-mode-link,
  a.cp-back,
  a.cit-cc-mail {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 0;
  }
  footer .foot-col ul[style*="grid"] { row-gap: 0; }
  button.cit-sc-price { min-height: 44px; padding: 10px 14px; }
  input[type="checkbox"], input[type="radio"] {
    width: 22px; height: 22px; min-width: 22px;
  }

  /* Legibility: 8-10px labels bumped to a readable minimum */
  .cd-section-label, .cd-info-key, .qual-chip, .cit-cf-label,
  .cb-section-label, .course-popular-badge, .acard-label, .cp-label {
    font-size: 11.5px !important;
  }
  .stat-lbl { font-size: 10px !important; }
}