/* ===================================================================
   Sallaum Lines — mobile / responsive hardening layer
   Loaded LAST (see functions.php: sallaum_enqueue_mobile_css) so it can
   correct fixed sizes, overflow and touch-target issues that the
   component sheets leave behind on small screens.
   Tokens only — no new colours or fonts.
   =================================================================== */

/* ---- 1. GLOBAL OVERFLOW + TEXT GUARDS --------------------------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, iframe, table { max-width: 100%; }
h1, h2, h3, h4, p, li, dd, dt, .t-hero, .t-xxl, .t-xl, .t-lg, .t-md,
.careers-hero__title, .page-hero-simple__title, .c2-title, .q2-title {
  overflow-wrap: break-word; word-break: normal;
}
/* Full-bleed helpers that use 100vw add a scrollbar's width on desktop
   and can overflow on mobile — clamp them. */
.esg-fullshot { width: 100%; margin-left: 0; }

/* ---- 2. TOUCH TARGETS + FORM CONTROLS --------------------------- */
@media (max-width: 900px) {
  .nav-toggle { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .sl-btn, .pos-tab, .svc-chip, .eu-chip, .c2-send, .q2-send, .c2-offices,
  .about-band__btn, .footer-nl-send { min-height: 44px; }
  .sl-news__nav, .other__nav { min-width: 44px; min-height: 44px; }
  /* 16px minimum stops iOS Safari zooming the page on focus. */
  input, select, textarea, .sl-input, .c2-control, .q2-control { font-size: 16px; }
  select, input[type="date"] { -webkit-appearance: none; appearance: none; background-image: none; }
}

/* ---- 3. HEADER + MOBILE MENU ------------------------------------ */
@media (max-width: 860px) {
  .site-header__inner { gap: 12px; }
  .site-header__logo img { height: 42px; }
  /* dvh keeps the panel correct while iOS chrome shows/hides */
  .mobile-menu { height: 100dvh; }
  .mobile-menu__nav { padding: 16px 0; gap: 0; }
  .m-link__label { font-size: clamp(24px, 6.2vw, 38px); }
  .mobile-menu__foot { gap: 16px; }
}
@media (max-width: 860px) and (max-height: 620px) {
  .mobile-menu__nav { margin: 18px 0 0; }
  .m-link { padding: 9px 2px; }
  .m-link__label { font-size: 22px; }
}

/* ---- 4. HOME HERO ----------------------------------------------- */
@media (max-width: 760px) {
  .hero { min-height: 88svh; }
  .hero__inner { padding-top: 104px; padding-bottom: 56px; }
  .hero__title { letter-spacing: -1px; }
  .hero__sub { font-size: 16px; margin-top: 20px; }
  .hero__actions { gap: 10px; margin-top: 26px; }
  .hero__actions .sl-btn { flex: 1 1 100%; justify-content: center; }
  .hero__scroll { display: none; }
}

/* ---- 5. SECTION HEROES + DISPLAY TYPE --------------------------- */
@media (max-width: 480px) {
  .careers-hero { padding: 128px 0 60px; }
  .careers-hero__title { font-size: clamp(40px, 13vw, 56px); letter-spacing: -1.5px; }
  .careers-hero__label, .page-hero-simple__label { font-size: 17px; gap: 14px; }
  .page-hero-simple { padding: 128px 0 58px; }
  .page-hero-simple__title { font-size: clamp(40px, 13vw, 56px); letter-spacing: -1.5px; }
  .page-hero { padding: 112px 0 60px; }
  .t-hero { font-size: 36px; }
  .t-xxl { font-size: 34px; }
  .t-xl { font-size: 30px; }
  .t-lg { font-size: 26px; }
  .t-md { font-size: 23px; }
  .block-text { padding: 60px 0; }
  .positions-section { padding: 60px 0; }
  .section, .section--tight { padding: 48px 0; }
}

/* ---- 6. BANDS THAT STAY MULTI-COLUMN TOO LONG ------------------- */
@media (max-width: 520px) {
  .metrics-bar { grid-template-columns: 1fr; }
  .metric { padding: 34px 16px; }
  .block-stats__grid { grid-template-columns: 1fr !important; }
  .bstat { border-left: none !important; padding: 26px 0; border-top: 1px solid rgba(255,255,255,.22); }
  .bstat:first-child { border-top: none; }
  .vessel-specs { grid-template-columns: 1fr; }
  .fleet-tbl tbody tr { grid-template-columns: 1fr; }
  .values-grid { margin-top: 34px; }
  .value-box { padding: 32px 26px 34px; }
  .value-box__title { font-size: 25px; }
  .esg-kn__card { min-height: 0; padding: 28px 24px; }
  .esg-kn__num { font-size: 46px; margin: 26px 0 12px; }
  .split-tile { height: 300px; }
  .wavemakers__media { height: 280px; }
  .svc__media { height: 240px; }
  .culture-banner { height: 380px; }
}

/* ---- 7. ROUTES MAP BAND ---------------------------------------- */
@media (max-width: 600px) {
  .eu { padding: 64px 0 72px; }
  .eu__mark { display: none; }
  .eu-node__label { font-size: 11px; padding: 3px 8px; }
  .eu-journey { margin-top: 56px; padding-top: 40px; }
  .eu-step__ic { width: 56px; height: 56px; margin-bottom: 14px; }
}

/* ---- 8. WIDE TABLES -------------------------------------------- */
@media (max-width: 860px) {
  .table-wrap, .fleet-tbl__wrap, .sched-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .entry-content table { display: block; overflow-x: auto; }
}

/* ---- 9. CONTACT / QUOTE SPLIT FORMS ---------------------------- */
@media (max-width: 700px) {
  .contact2, .quote2 { min-height: 0; }
  .contact2__left, .quote2__left { padding: 112px 22px 56px; }
  .contact2__right { padding: 44px 22px 64px; }
  .quote2__right { padding: 48px 22px 64px; }
  .c2-brand, .q2-brand { gap: 12px; }
  .c2-brand::before, .q2-brand::before { display: none; }
  .c2-brand { font-size: 20px; }
  .c2-title { margin: 22px 0 40px; }
  .q2-title { margin: 22px 0 32px; }
  .c2-details dd { font-size: 18px; }
  .c2-intro, .q2-lead { font-size: 17px; margin-bottom: 44px; }
  .c2-inquiry { margin-bottom: 28px; }
  .c2-required { margin-bottom: 40px; }
  .q2-required { margin-bottom: 36px; }
  .c2-field, .q2-field { margin-bottom: 30px; }
  .c2-field label, .q2-field label { font-size: 17px; margin-bottom: 8px; }
  .q2-radios { gap: 20px; flex-wrap: wrap; }
  .q2-point span { font-size: 16px; }
  .c2-offices { width: 100%; margin-top: 36px; padding: 17px 28px; font-size: 17px; }
  .c2-submit, .q2-submit { justify-content: stretch; }
  .c2-send, .q2-send { width: 100%; padding: 17px 28px; font-size: 17px; }
  .c2-done, .q2-done { justify-content: flex-start; }
}

/* ---- 10. CAREERS: JOB CARDS ------------------------------------ */
@media (max-width: 600px) {
  .pos-filter { gap: 8px; margin-bottom: 26px; }
  .pos-tab { padding: 10px 16px; }
  .job-card { padding: 18px; gap: 14px; align-items: flex-start; }
  .job-card:hover { transform: none; }
  .job-card__title { font-size: 18px; }
  .job-card__arrow { width: 38px; height: 38px; margin-top: 2px; }
}

/* ---- 11. CAREERS: APPLY MODAL AS A FULL-HEIGHT SHEET ----------- */
@media (max-width: 600px) {
  .modal-overlay { padding: 0; align-items: flex-end; }
  .apply-modal {
    max-width: 100%; width: 100%; height: 100dvh;
    border-radius: 0; display: flex; flex-direction: column;
  }
  .apply-modal .modal__head { padding: 18px 18px; flex: none; }
  .apply-modal .modal__title { font-size: 19px; line-height: 1.2; }
  .apply-modal .modal__close { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .apply-modal .modal__body { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .apply-form-wrap { padding: 20px 18px calc(28px + env(safe-area-inset-bottom)); }
  .aff { margin-bottom: 16px; }
  .apply-success { padding: 40px 24px; }
}

/* ---- 12. FOOTER ------------------------------------------------ */
@media (max-width: 600px) {
  .footer-top { padding: 44px 0 32px; }
  .footer-newsletter__mark { display: none; }
  .footer-nl-form { flex-wrap: wrap; gap: 12px; }
  .footer-nl-send { width: 100%; }
  .footer-follow__icons { flex-wrap: wrap; }
}

/* ---- 13. WP ADMIN BAR ON MOBILE -------------------------------- */
@media (max-width: 782px) {
  .admin-bar .mobile-menu { top: 46px; height: calc(100dvh - 46px); }
}