/**
 * Phones only: floating capsule navbar on inner pages (matches the homepage
 * .gt-header__inner pill in assets/css/responsive-mobile.css), and no
 * overscroll bounce/stretch past the footer.
 *
 * Loaded last in <head> so it wins over the page and shared mobile styles.
 * Selectors use :not(#gt-floating-header) to outrank page-specific header rules.
 * No backdrop-filter / transform on the bars: either would turn them into the
 * containing block of the position:fixed menu drawer inside them.
 */
@media (max-width: 768px) {
  html,
  body {
    overscroll-behavior-y: none;
  }

  /* ─── Outer header: transparent strip that holds the pill ─── */
  body header.header:not(#gt-floating-header),
  body header.header:not(#gt-floating-header).is-solid,
  body.gt-nav-open header.header:not(#gt-floating-header) {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* ─── Pill: header with .header__inner (industry, company, legal pages) ─── */
  body header.header:not(#gt-floating-header):not([data-sms-header]) {
    padding: max(12px, env(safe-area-inset-top, 0px)) 16px 0 !important;
  }

  body header.header:not(#gt-floating-header):not([data-sms-header]) .header__inner {
    min-height: 50px !important;
    height: auto !important;
    padding: 8px 18px !important;
    max-width: 100%;
    margin: 0;
  }

  /* ─── Pill: header that is itself the bar (SMS-style product pages, About Us) ─── */
  body header.header:not(#gt-floating-header)[data-sms-header] {
    top: max(12px, env(safe-area-inset-top, 0px)) !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    max-width: none !important;
    min-height: 50px !important;
    height: auto !important;
    padding: 8px 18px !important;
  }

  body header.header:not(#gt-floating-header)[data-sms-header]::before {
    display: none !important;
  }

  /* Shared pill look (homepage .gt-header.is-solid .gt-header__inner) */
  body header.header:not(#gt-floating-header):not([data-sms-header]) .header__inner,
  body header.header:not(#gt-floating-header)[data-sms-header],
  body header.header:not(#gt-floating-header)[data-sms-header].is-solid,
  body.gt-nav-open header.header:not(#gt-floating-header)[data-sms-header] {
    border-radius: 999px !important;
    background: rgba(9, 10, 44, 0.94) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow:
      inset 0 1px 2px rgba(255, 255, 255, 0.35),
      inset 0 -1px 2px rgba(0, 0, 0, 0.2) !important;
    box-sizing: border-box;
  }

  /* ─── Logo: homepage white logo at homepage size ─── */
  body header.header:not(#gt-floating-header) .header__logo {
    display: block;
    width: 120px;
    height: 37px;
    background: url("../../../assets/images/icons/logo.webp") no-repeat left center / contain;
  }

  body header.header:not(#gt-floating-header) .header__logo img {
    visibility: hidden !important;
  }

  body header.header:not(#gt-floating-header)[data-sms-header] .logo {
    width: 120px;
  }

  body header.header:not(#gt-floating-header)[data-sms-header] .logo__img {
    width: 120px !important;
    max-width: 120px !important;
    height: auto !important;
  }

  /* ─── Hamburger: white lines on the dark pill ─── */
  body header.header:not(#gt-floating-header) .nav-toggle span {
    background-color: #fff !important;
  }

  /* ─── Menu drawer: floats under the pill, same inset ─── */
  body header.header:not(#gt-floating-header) .nav,
  body header.header:not(#gt-floating-header) .nav[data-sms-nav],
  body header.header:not(#gt-floating-header) .header__nav {
    top: calc(max(12px, env(safe-area-inset-top, 0px)) + 70px) !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - max(12px, env(safe-area-inset-top, 0px)) - 86px) !important;
    border-radius: 20px !important;
    overflow-y: auto;
  }
}