/*
 * Mobile UX / contact navigation, 2026-09-30.
 * Append after the existing 20260930-quality-v1 global CSS and the updated
 * component CSS. This file deliberately contains no reset or theme changes.
 * Source: verified app/globals.css; component module styles ship separately.
 */

/* Header and homepage safe areas. */
@media (max-width: 1179px) {
  .site-header-main {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
}

@media (min-width: 640px) and (max-width: 1179px) {
  .site-header-main,
  .home-panorama .home-hero-content {
    padding-left: max(32px, env(safe-area-inset-left, 0px));
    padding-right: max(32px, env(safe-area-inset-right, 0px));
  }
}

/* Mobile menu keeps its full content width and safe close target. */
.site-mobile-menu[data-side='right'] {
  width: min(92vw, 430px);
  max-width: 430px;
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.site-mobile-menu [data-slot='sheet-close'] {
  right: max(8px, env(safe-area-inset-right, 0px));
}

/* Same viewport rule as CHAT_MOBILE_QUERY in the updated client components. */
nav[data-mobile-tab-bar] {
  display: none;
}

@media (max-width: 767px), (max-width: 1023px) and (max-height: 600px) {
  :root {
    --mobile-tab-bar-height: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  body:has(nav[data-mobile-tab-bar]) {
    padding-bottom: var(--mobile-tab-bar-height);
  }

  body:has(nav[data-mobile-tab-bar]) > footer {
    padding-bottom: 0.5rem;
  }

  nav[data-mobile-tab-bar] {
    display: block;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
}

/* The two search pickers remain inside short or notched viewports. */
[data-search-popover] {
  max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}

@media (max-width: 639px), (max-width: 1023px) and (max-height: 600px) {
  .hero-search-positioner {
    position: fixed !important;
    top: auto !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    left: max(12px, env(safe-area-inset-left, 0px)) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    width: auto !important;
    transform: none !important;
    display: flex;
    justify-content: center;
  }
}

/* Homepage adjustments relative to the active baseline, up to 639px. */
@media (max-width: 639px) {
  .home-panorama .home-hero-content {
    padding-left: max(10px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
  }

  .home-panorama-intro {
    padding: 20px 12px 16px;
  }

  .home-panorama [data-landing-search] fieldset button,
  .home-panorama [data-landing-search] summary {
    min-height: 44px;
  }

  .home-panorama [data-landing-search] button[type='submit'] {
    background: #087ca6;
  }

  .home-panorama [data-landing-search] button[type='submit']:hover {
    background: #086589;
  }
}

@media (max-width: 359px) {
  .home-panorama-intro {
    padding-top: 16px;
  }

  .home-panorama-intro h1 {
    font-size: 28px;
  }
}

/*
 * Four utilities used by the updated TSX that the active baseline does not
 * contain. Preserve Tailwind's layer and media conditions; scope each rule
 * to its owning component instead of importing the new global stylesheet.
 */
@layer utilities {
  .site-header-main .shrink {
    flex-shrink: 1;
  }

  @media (min-width: 360px) {
    #kreuzfahrtsuche .min-\[360px\]\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 40rem) {
    .site-header-main .sm\:shrink-0 {
      flex-shrink: 0;
    }
  }

  @media (min-width: 48rem) {
    .site-header-main .md\:inline-flex {
      display: inline-flex;
    }
  }
}