/* ================================================================
   TRANSPORT MOBILE MENU - FINAL SOLID + SCROLL SAFE 2026
   Scope: Transport layout, mobile/zoom viewport <= 860px only.
   Desktop >= 861px is untouched.
   ================================================================ */
@media (max-width:860px){
  body.home-layout-transport,
  body.layout-transport,
  body.transport-layout,
  body[data-home-layout="transport"],
  body[data-layout="transport"]{
    --tm-navy:#0b3552;
    --tm-navy-2:#123f5d;
    --tm-text:#102f46;
    --tm-subtext:#173b52;
    --tm-surface:#f4f8fb;
    --tm-card:#ffffff;
    --tm-sub:#eaf3f7;
    --tm-border:#c7d8e2;
    --tm-accent:#58a9bd;
  }

  /* Compact mobile bar: fully opaque. */
  body.home-layout-transport #mainNavigation,
  body.layout-transport #mainNavigation,
  body.transport-layout #mainNavigation,
  body[data-home-layout="transport"] #mainNavigation,
  body[data-layout="transport"] #mainNavigation{
    background:var(--tm-navy)!important;
    background-image:none!important;
    opacity:1!important;
    filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    mix-blend-mode:normal!important;
    border-color:#1c607f!important;
  }

  body.home-layout-transport #mainNavigation .main-menu-shell,
  body.layout-transport #mainNavigation .main-menu-shell,
  body.transport-layout #mainNavigation .main-menu-shell,
  body[data-home-layout="transport"] #mainNavigation .main-menu-shell,
  body[data-layout="transport"] #mainNavigation .main-menu-shell{
    background:var(--tm-navy)!important;
    background-image:none!important;
    opacity:1!important;
  }

  /* HOME + hamburger buttons. */
  body.home-layout-transport #mainNavigation .mobile-home-button,
  body.layout-transport #mainNavigation .mobile-home-button,
  body.transport-layout #mainNavigation .mobile-home-button,
  body[data-home-layout="transport"] #mainNavigation .mobile-home-button,
  body[data-layout="transport"] #mainNavigation .mobile-home-button{
    background:#fff!important;
    background-image:none!important;
    color:var(--tm-navy)!important;
    -webkit-text-fill-color:var(--tm-navy)!important;
    border:1px solid #dce8f0!important;
    opacity:1!important;
    box-shadow:0 4px 14px rgba(0,0,0,.22)!important;
  }
  body.home-layout-transport #mainNavigation .mobile-home-button *,
  body.layout-transport #mainNavigation .mobile-home-button *,
  body.transport-layout #mainNavigation .mobile-home-button *,
  body[data-home-layout="transport"] #mainNavigation .mobile-home-button *,
  body[data-layout="transport"] #mainNavigation .mobile-home-button *{
    color:var(--tm-navy)!important;
    -webkit-text-fill-color:var(--tm-navy)!important;
  }
  body.home-layout-transport #mainNavigation .mobile-home-button__icon,
  body.layout-transport #mainNavigation .mobile-home-button__icon,
  body.transport-layout #mainNavigation .mobile-home-button__icon,
  body[data-home-layout="transport"] #mainNavigation .mobile-home-button__icon,
  body[data-layout="transport"] #mainNavigation .mobile-home-button__icon{
    background:var(--tm-navy)!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
  }
  body.home-layout-transport #mainNavigation .mobile-home-button__icon *,
  body.layout-transport #mainNavigation .mobile-home-button__icon *,
  body.transport-layout #mainNavigation .mobile-home-button__icon *,
  body[data-home-layout="transport"] #mainNavigation .mobile-home-button__icon *,
  body[data-layout="transport"] #mainNavigation .mobile-home-button__icon *{
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
  }

  body.home-layout-transport #mainNavigation .mobile-menu-toggle,
  body.layout-transport #mainNavigation .mobile-menu-toggle,
  body.transport-layout #mainNavigation .mobile-menu-toggle,
  body[data-home-layout="transport"] #mainNavigation .mobile-menu-toggle,
  body[data-layout="transport"] #mainNavigation .mobile-menu-toggle{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    background:#fff!important;
    background-image:none!important;
    border:1px solid #dce8f0!important;
    opacity:1!important;
    box-shadow:0 4px 14px rgba(0,0,0,.22)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  body.home-layout-transport #mainNavigation .mobile-menu-toggle-bar,
  body.layout-transport #mainNavigation .mobile-menu-toggle-bar,
  body.transport-layout #mainNavigation .mobile-menu-toggle-bar,
  body[data-home-layout="transport"] #mainNavigation .mobile-menu-toggle-bar,
  body[data-layout="transport"] #mainNavigation .mobile-menu-toggle-bar{
    background:var(--tm-navy)!important;
  }

  /* Right drawer. Use viewport-safe height and make this element itself scroll. */
  body.home-layout-transport #mainNavigation .primary-menu-host,
  body.layout-transport #mainNavigation .primary-menu-host,
  body.transport-layout #mainNavigation .primary-menu-host,
  body[data-home-layout="transport"] #mainNavigation .primary-menu-host,
  body[data-layout="transport"] #mainNavigation .primary-menu-host{
    position:fixed!important;
    inset:0 0 0 auto!important;
    width:min(94vw,420px)!important;
    max-width:420px!important;
    height:100vh!important;
    height:100svh!important;
    height:100dvh!important;
    max-height:100vh!important;
    max-height:100dvh!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    transform:translate3d(105%,0,0)!important;
    transition:transform .22s ease!important;
    visibility:hidden!important;
    pointer-events:none!important;
    background:var(--tm-surface)!important;
    background-image:none!important;
    color:var(--tm-text)!important;
    -webkit-text-fill-color:var(--tm-text)!important;
    opacity:1!important;
    filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    mix-blend-mode:normal!important;
    isolation:isolate!important;
    contain:none!important;
    border:0!important;
    border-left:1px solid #b9ceda!important;
    border-radius:0!important;
    box-shadow:-20px 0 50px rgba(2,24,40,.38)!important;
    z-index:10003!important;
    touch-action:pan-y!important;
  }
  body.home-layout-transport #mainNavigation.menu-open .primary-menu-host,
  body.layout-transport #mainNavigation.menu-open .primary-menu-host,
  body.transport-layout #mainNavigation.menu-open .primary-menu-host,
  body[data-home-layout="transport"] #mainNavigation.menu-open .primary-menu-host,
  body[data-layout="transport"] #mainNavigation.menu-open .primary-menu-host{
    transform:translate3d(0,0,0)!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  /* Header stays fixed visually; menu content below it is the scroll container. */
  body.home-layout-transport #mainNavigation .mobile-menu-panel-head,
  body.layout-transport #mainNavigation .mobile-menu-panel-head,
  body.transport-layout #mainNavigation .mobile-menu-panel-head,
  body[data-home-layout="transport"] #mainNavigation .mobile-menu-panel-head,
  body[data-layout="transport"] #mainNavigation .mobile-menu-panel-head{
    position:absolute!important;
    top:0!important;
    left:0!important;
    right:0!important;
    z-index:5!important;
    display:flex!important;
    min-height:88px!important;
    height:88px!important;
    padding:18px 64px 14px 20px!important;
    margin:0!important;
    box-sizing:border-box!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    background:var(--tm-navy)!important;
    background-image:none!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    opacity:1!important;
    border:0!important;
    border-bottom:4px solid var(--tm-accent)!important;
    box-shadow:0 5px 14px rgba(4,33,51,.16)!important;
  }
  body.home-layout-transport #mainNavigation .mobile-menu-panel-head *,
  body.layout-transport #mainNavigation .mobile-menu-panel-head *,
  body.transport-layout #mainNavigation .mobile-menu-panel-head *,
  body[data-home-layout="transport"] #mainNavigation .mobile-menu-panel-head *,
  body[data-layout="transport"] #mainNavigation .mobile-menu-panel-head *{
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
  }
  body.home-layout-transport #mainNavigation .mobile-menu-panel-note,
  body.layout-transport #mainNavigation .mobile-menu-panel-note,
  body.transport-layout #mainNavigation .mobile-menu-panel-note,
  body[data-home-layout="transport"] #mainNavigation .mobile-menu-panel-note,
  body[data-layout="transport"] #mainNavigation .mobile-menu-panel-note{
    color:#d9edf5!important;
    -webkit-text-fill-color:#d9edf5!important;
  }

  /* The ROOT list is the scrollport. This fixes mouse-wheel at 200%+ desktop zoom. */
  body.home-layout-transport #mainNavigation .primary-menu-host>.menu-root,
  body.layout-transport #mainNavigation .primary-menu-host>.menu-root,
  body.transport-layout #mainNavigation .primary-menu-host>.menu-root,
  body[data-home-layout="transport"] #mainNavigation .primary-menu-host>.menu-root,
  body[data-layout="transport"] #mainNavigation .primary-menu-host>.menu-root,
  body.home-layout-transport #mainNavigation .primary-menu-host>.sf-menu,
  body.layout-transport #mainNavigation .primary-menu-host>.sf-menu,
  body.transport-layout #mainNavigation .primary-menu-host>.sf-menu,
  body[data-home-layout="transport"] #mainNavigation .primary-menu-host>.sf-menu,
  body[data-layout="transport"] #mainNavigation .primary-menu-host>.sf-menu{
    position:absolute!important;
    top:88px!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    display:block!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:14px 14px 30px!important;
    box-sizing:border-box!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-gutter:stable!important;
    touch-action:pan-y!important;
    background:var(--tm-surface)!important;
    background-image:none!important;
    color:var(--tm-text)!important;
    -webkit-text-fill-color:var(--tm-text)!important;
    opacity:1!important;
  }

  /* Visible scrollbar on desktop zoom, unobtrusive on mobile. */
  body.layout-transport #mainNavigation .primary-menu-host>.menu-root,
  body.transport-layout #mainNavigation .primary-menu-host>.menu-root,
  body.home-layout-transport #mainNavigation .primary-menu-host>.menu-root{
    scrollbar-width:thin;
    scrollbar-color:#7fa8ba #e5eef3;
  }
  body.layout-transport #mainNavigation .primary-menu-host>.menu-root::-webkit-scrollbar,
  body.transport-layout #mainNavigation .primary-menu-host>.menu-root::-webkit-scrollbar,
  body.home-layout-transport #mainNavigation .primary-menu-host>.menu-root::-webkit-scrollbar{width:9px}
  body.layout-transport #mainNavigation .primary-menu-host>.menu-root::-webkit-scrollbar-track,
  body.transport-layout #mainNavigation .primary-menu-host>.menu-root::-webkit-scrollbar-track,
  body.home-layout-transport #mainNavigation .primary-menu-host>.menu-root::-webkit-scrollbar-track{background:#e5eef3}
  body.layout-transport #mainNavigation .primary-menu-host>.menu-root::-webkit-scrollbar-thumb,
  body.transport-layout #mainNavigation .primary-menu-host>.menu-root::-webkit-scrollbar-thumb,
  body.home-layout-transport #mainNavigation .primary-menu-host>.menu-root::-webkit-scrollbar-thumb{background:#7fa8ba;border-radius:99px}

  /* Root rows: explicit text color AND webkit text fill. */
  body.home-layout-transport #mainNavigation .menu-root>li,
  body.layout-transport #mainNavigation .menu-root>li,
  body.transport-layout #mainNavigation .menu-root>li,
  body[data-home-layout="transport"] #mainNavigation .menu-root>li,
  body[data-layout="transport"] #mainNavigation .menu-root>li{
    position:relative!important;
    margin:0 0 8px!important;
    padding:0!important;
    background:transparent!important;
  }

  body.home-layout-transport #mainNavigation .menu-root>li>a,
  body.layout-transport #mainNavigation .menu-root>li>a,
  body.transport-layout #mainNavigation .menu-root>li>a,
  body[data-home-layout="transport"] #mainNavigation .menu-root>li>a,
  body[data-layout="transport"] #mainNavigation .menu-root>li>a,
  body.home-layout-transport #mainNavigation .sf-menu>li>a,
  body.layout-transport #mainNavigation .sf-menu>li>a,
  body.transport-layout #mainNavigation .sf-menu>li>a{
    min-height:50px!important;
    padding:11px 52px 11px 12px!important;
    display:flex!important;
    align-items:center!important;
    border:1px solid var(--tm-border)!important;
    border-radius:12px!important;
    background:var(--tm-card)!important;
    background-image:none!important;
    color:var(--tm-text)!important;
    -webkit-text-fill-color:var(--tm-text)!important;
    opacity:1!important;
    text-shadow:none!important;
    box-shadow:0 2px 8px rgba(23,62,91,.08)!important;
    font-weight:700!important;
    line-height:1.3!important;
    text-decoration:none!important;
  }
  body.home-layout-transport #mainNavigation .menu-root>li>a *,
  body.layout-transport #mainNavigation .menu-root>li>a *,
  body.transport-layout #mainNavigation .menu-root>li>a *,
  body[data-home-layout="transport"] #mainNavigation .menu-root>li>a *,
  body[data-layout="transport"] #mainNavigation .menu-root>li>a *{
    color:var(--tm-text)!important;
    -webkit-text-fill-color:var(--tm-text)!important;
    text-shadow:none!important;
  }
  body.home-layout-transport #mainNavigation .menu-root>li>a:hover,
  body.layout-transport #mainNavigation .menu-root>li>a:hover,
  body.transport-layout #mainNavigation .menu-root>li>a:hover,
  body.home-layout-transport #mainNavigation .menu-root>li>a:focus,
  body.layout-transport #mainNavigation .menu-root>li>a:focus,
  body.transport-layout #mainNavigation .menu-root>li>a:focus{
    background:#e8f2f7!important;
    color:#08263a!important;
    -webkit-text-fill-color:#08263a!important;
    border-color:#77aebf!important;
  }

  body.home-layout-transport #mainNavigation .menu-icon-badge,
  body.layout-transport #mainNavigation .menu-icon-badge,
  body.transport-layout #mainNavigation .menu-icon-badge{
    background:#dcecf3!important;
    color:#0b4a68!important;
    -webkit-text-fill-color:#0b4a68!important;
    border:1px solid #bed7e2!important;
    opacity:1!important;
  }
  body.home-layout-transport #mainNavigation .menu-icon-badge *,
  body.layout-transport #mainNavigation .menu-icon-badge *,
  body.transport-layout #mainNavigation .menu-icon-badge *{
    color:#0b4a68!important;
    -webkit-text-fill-color:#0b4a68!important;
  }

  body.home-layout-transport #mainNavigation .mobile-submenu-toggle,
  body.layout-transport #mainNavigation .mobile-submenu-toggle,
  body.transport-layout #mainNavigation .mobile-submenu-toggle{
    position:absolute!important;
    top:8px!important;
    right:8px!important;
    z-index:3!important;
    width:36px!important;
    height:36px!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid #c1d5df!important;
    border-radius:9px!important;
    background:#e7f1f5!important;
    color:#0b4260!important;
    -webkit-text-fill-color:#0b4260!important;
    opacity:1!important;
  }
  body.home-layout-transport #mainNavigation li.open>.mobile-submenu-toggle,
  body.layout-transport #mainNavigation li.open>.mobile-submenu-toggle,
  body.transport-layout #mainNavigation li.open>.mobile-submenu-toggle{
    background:#0b486c!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    border-color:#0b486c!important;
  }

  /* Submenus are also fully opaque. */
  body.home-layout-transport #mainNavigation .menu-sub,
  body.layout-transport #mainNavigation .menu-sub,
  body.transport-layout #mainNavigation .menu-sub,
  body.home-layout-transport #mainNavigation .menu-root li ul,
  body.layout-transport #mainNavigation .menu-root li ul,
  body.transport-layout #mainNavigation .menu-root li ul{
    margin:6px 0 2px 12px!important;
    padding:8px 0 2px 10px!important;
    background:var(--tm-sub)!important;
    background-image:none!important;
    opacity:1!important;
    border:0!important;
    border-left:3px solid #68a7bc!important;
    border-radius:0 0 10px 10px!important;
    box-shadow:none!important;
  }

  body.home-layout-transport #mainNavigation .menu-sub li>a,
  body.layout-transport #mainNavigation .menu-sub li>a,
  body.transport-layout #mainNavigation .menu-sub li>a,
  body.home-layout-transport #mainNavigation .sf-menu li ul li>a,
  body.layout-transport #mainNavigation .sf-menu li ul li>a,
  body.transport-layout #mainNavigation .sf-menu li ul li>a{
    min-height:44px!important;
    margin:0 0 6px!important;
    padding:9px 45px 9px 11px!important;
    display:flex!important;
    align-items:center!important;
    border:1px solid #d0dfe7!important;
    border-radius:9px!important;
    background:#fff!important;
    background-image:none!important;
    color:var(--tm-subtext)!important;
    -webkit-text-fill-color:var(--tm-subtext)!important;
    opacity:1!important;
    text-shadow:none!important;
    font-weight:600!important;
    text-decoration:none!important;
    box-shadow:none!important;
  }
  body.home-layout-transport #mainNavigation .menu-sub li>a *,
  body.layout-transport #mainNavigation .menu-sub li>a *,
  body.transport-layout #mainNavigation .menu-sub li>a *{
    color:var(--tm-subtext)!important;
    -webkit-text-fill-color:var(--tm-subtext)!important;
    text-shadow:none!important;
  }

  /* Overlay is dark but the drawer is above it and opaque. */
  body.home-layout-transport .mobile-menu-overlay,
  body.layout-transport .mobile-menu-overlay,
  body.transport-layout .mobile-menu-overlay,
  body[data-home-layout="transport"] .mobile-menu-overlay,
  body[data-layout="transport"] .mobile-menu-overlay{
    background:#061d2d!important;
    opacity:0!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  body.home-layout-transport.mobile-menu-lock .mobile-menu-overlay,
  body.layout-transport.mobile-menu-lock .mobile-menu-overlay,
  body.transport-layout.mobile-menu-lock .mobile-menu-overlay,
  body[data-home-layout="transport"].mobile-menu-lock .mobile-menu-overlay,
  body[data-layout="transport"].mobile-menu-lock .mobile-menu-overlay{
    opacity:.68!important;
  }

  body.home-layout-transport #mainNavigation.menu-open .mobile-menu-toggle,
  body.layout-transport #mainNavigation.menu-open .mobile-menu-toggle,
  body.transport-layout #mainNavigation.menu-open .mobile-menu-toggle{
    position:fixed!important;
    top:18px!important;
    right:16px!important;
    z-index:10006!important;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    background:#fff!important;
    border:1px solid #d3e1e8!important;
  }
}