@import url('/assets/sst-visual-consistency.css?v=20261014-2339');
@import url('/assets/sst-perf-a11y.css?v=20261014-2339');

html {
  max-width: 100%;
  overflow-x: clip;
}

/**
 * SkyStayTravel — Phase 1 foundation (mobile app shell + minimal footer).
 * Load after sst-footer-premium.css and sst-header-brand.css.
 */

/* Logo mark sizing — visual treatment lives in sst-header-brand.css */
.sst-logo-mark {
  width: 38px;
  height: 38px;
  min-width: 38px;
}

/* —— App-like mobile top bar —— */
@media (max-width: 760px) {
  /* Standard nav: logo + burger as direct children (not travel-services wrapper) */
  body > nav:not(.sst-ts-nav):not(.sst-ts-chips) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    height: var(--sst-nav-h, 54px) !important;
    min-height: var(--sst-nav-h, 54px) !important;
    max-height: var(--sst-nav-h, 54px) !important;
    padding: 0 12px !important;
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    z-index: 300;
  }

  body.sst-page-flights,
  body.sst-page-sky22,
  body.sst-page-tours,
  body.sst-page-car-rental,
  body.sst-page-travel-services,
  body.sst-page-package-holidays,
  body.sst-page-holiday-matcher,
  body.sst-page-route,
  body.sst-page-flights-hub,
  body.sst-dest-page,
  body.sst-page-home,
  body.sst-page-trip-brief {
    padding-top: 0 !important;
  }

  body.sst-page-static {
    padding-top: 0 !important;
  }

  body:not(.sst-page-home):not(.sst-page-flights):not(.sst-page-sky22):not(.sst-page-tours):not(.sst-page-car-rental):not(.sst-page-travel-services):not(.sst-page-package-holidays):not(.sst-page-holiday-matcher):not(.sst-page-route):not(.sst-dest-page):not(.sst-page-static):not(.sst-page-articles-hub):not(.sst-page-stays-hub):not(.sst-page-support-sub):not(.sst-page-article):not(.sst-page-trip-brief):not(:has(> section.hero:first-child)):not(:has(> .sst-dest-hero:first-child)):not(:has(> .pkg-hero:first-of-type)):not(:has(> .sst-hm-page-hero:first-child)) {
    padding-top: var(--sst-nav-h, 54px) !important;
  }

  body:has(> nav),
  body:has(> header.nav) {
    padding-top: 0 !important;
  }

  body.sst-page-home > nav {
    height: var(--sst-nav-h, 54px) !important;
    min-height: var(--sst-nav-h, 54px) !important;
    max-height: var(--sst-nav-h, 54px) !important;
  }

  body.sst-page-home > .hero {
    margin-top: 0 !important;
    padding-top: var(--sst-nav-h, 54px) !important;
  }

  body.sst-page-flights,
  body.sst-page-sky22,
  body.sst-page-tours,
  body.sst-page-car-rental,
  body.sst-page-travel-services,
  body.sst-page-package-holidays,
  body.sst-page-holiday-matcher,
  body.sst-page-route,
  body.sst-page-static,
  body.sst-page-articles-hub {
    --sst-nav-h: 54px;
  }

  body > nav:not(.sst-ts-nav) .nav-links {
    display: none !important;
  }

  body > nav:not(.sst-ts-nav) .menu-btn {
    display: flex !important;
    justify-self: end;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 10px;
    font-size: 1.15rem;
    line-height: 1;
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    color: #fff !important;
    cursor: pointer;
  }

  body > nav:not(.sst-ts-nav) a.brand,
  body > nav:not(.sst-ts-nav) a.sst-brand,
  body > nav:not(.sst-ts-nav) a.logo.sst-brand {
    justify-self: start;
    min-width: 0;
    /* Leave room for Ask chip + burger (was 52px burger-only) */
    max-width: calc(100% - 108px);
  }

  body > nav:not(.sst-ts-nav) > .nav-r {
    grid-column: 2 !important;
    justify-self: end;
    max-width: none;
  }

  /* Travel services: brand + burger live inside .nav-inner */
  nav.sst-ts-nav {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    z-index: 300;
    height: var(--sst-nav-h, 54px) !important;
    min-height: var(--sst-nav-h, 54px) !important;
    max-height: var(--sst-nav-h, 54px) !important;
    padding: 0 !important;
    display: block !important;
    box-sizing: border-box;
    background: linear-gradient(180deg, #0770e3 0%, #0668cf 52%, #0557b0 100%) !important;
  }

  nav.sst-ts-nav .nav-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    height: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box;
  }

  nav.sst-ts-nav .nav-brand {
    justify-self: start;
    min-width: 0;
    max-width: calc(100% - 108px);
  }

  nav.sst-ts-nav .nav-inner > .nav-r {
    grid-column: 2 !important;
    justify-self: end;
  }

  nav.sst-ts-nav .menu-btn {
    display: flex !important;
    justify-self: end;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 10px;
    font-size: 1.15rem;
    line-height: 1;
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    color: #fff !important;
    cursor: pointer;
  }

  .brand-tagline,
  .logo-tag,
  .nav-sub {
    display: none !important;
  }

  /* Homepage: search-first — trim hero chrome on small screens */
  body.sst-page-home .hero-content {
    padding-top: 56px !important;
  }

  body.sst-page-home .hero-boarding {
    display: none !important;
  }

  body.sst-page-home .hero-atlas {
    opacity: 0.12 !important;
  }

  body.sst-page-home .sst-newsletter-home {
    padding-top: 12px !important;
    padding-bottom: 14px !important;
  }

  /* —— Minimal mobile footer (legal row only) —— */
  footer .footer-grid,
  footer .sst-footer-newsletter,
  footer .fg {
    display: none !important;
  }

  footer .sst-footer-copyline,
  footer .sst-fbot-copy,
  footer .footer-bottom,
  footer .fbot,
  footer .footer-bottom .sst-social,
  footer .fbot .sst-social,
  footer .sst-fbot-with-social .sst-social {
    display: none !important;
  }

  footer,
  body.sst-page-home footer,
  body.sst-page-route footer,
  body.sst-page-route footer:has(.fg),
  body.sst-page-flights footer:has(.fg),
  body.sst-page-sky22 footer:has(.fg),
  body.sst-page-tours footer:has(.fg),
  footer.sst-footer-commercial,
  footer.sst-footer-premium {
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  footer .sst-footer-mobile-legal {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box !important;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom, 0px)) !important;
    font-size: 0.74rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin: 0 !important;
  }

  footer .sst-footer-mobile-legal a {
    color: #ffd166;
    font-weight: 700;
    text-decoration: none;
  }

  footer .sst-footer-mobile-legal a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  footer .sst-footer-mobile-sep {
    opacity: 0.45;
    user-select: none;
  }

  footer .wrap {
    padding: 0 !important;
    max-width: none !important;
  }

  footer .footer-bottom,
  footer .fbot {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }
}

@media (min-width: 761px) {
  footer .sst-footer-mobile-legal {
    display: none !important;
  }
}

/* Travel services — brand left, burger right (all viewports) */
nav.sst-ts-nav .nav-inner {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

nav.sst-ts-nav .nav-brand {
  justify-self: start;
  min-width: 0;
}

nav.sst-ts-nav .menu-btn {
  justify-self: end;
  margin-left: 0;
}

/* Legacy route header (header.nav) — prefer body.sst-page-route + nav.sst-route-nav */
body:has(> header.nav),
body.sst-page-route {
  padding-top: 0 !important;
}

@media (max-width: 760px) {
  body:has(> header.nav),
  body.sst-page-route {
    padding-top: 0 !important;
  }

  body.sst-page-route > nav.sst-route-nav,
  body.sst-page-route > nav.sst-commercial-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 12px !important;
    z-index: 300;
    box-sizing: border-box;
    background: linear-gradient(180deg, #0770e3 0%, #0668cf 52%, #0557b0 100%) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    height: var(--sst-nav-h, 52px) !important;
    min-height: var(--sst-nav-h, 52px) !important;
    max-height: var(--sst-nav-h, 52px) !important;
  }

  body.sst-page-route > nav.sst-route-nav .menu-btn,
  body.sst-page-route > nav.sst-commercial-nav .menu-btn {
    display: flex !important;
    justify-self: end;
  }

  header.nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 300;
    box-sizing: border-box;
    background: linear-gradient(180deg, #0770e3 0%, #0668cf 52%, #0557b0 100%) !important;
  }

  header.nav .nav-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 52px;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box;
  }

  header.nav .logo,
  header.nav .sst-brand {
    min-width: 0;
    flex: 1 1 auto;
  }

  header.nav nav {
    display: none !important;
  }

  body:has(> header.nav) > .hero {
    padding-top: 52px !important;
    box-sizing: border-box;
  }

  header.nav .nav-inner nav {
    display: none !important;
  }
}