/**
 * K12 Mobile-Specific Styles
 * Handles mobile viewport corrections, responsive layouts, and device-specific fixes
 */

/* ===== VIEWPORT HEIGHT FIX (100dvh vs 100vh) ===== */
/* Use dynamic viewport height for proper mobile address bar handling */
:root {
  --viewport-height: 100dvh;
  --safe-viewport-height: 100dvh;
  /* Mobile bottom nav (Airbnb-style) */
  --bottom-nav-height: 58px;
  --bottom-nav-safe-area: env(safe-area-inset-bottom, 0px);
  --z-bottom-nav: 1030;
}

/* Mobile viewport fix for address bar on iOS/Android */
html {
  height: 100dvh;
  height: 100%;
}

body {
  min-height: 100dvh;
  min-height: 100%;
  overflow-x: clip;
}

/* ===== SEARCH MODAL FIXES ===== */
.k12-airbnb-search-modal__stack {
  /* Increased from 105px to accommodate "Who" button on mobile */
  max-height: 161px !important;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.k12-airbnb-search-modal__item {
  min-height: 44px; /* Touch target minimum */
  display: flex;
  align-items: center;
  padding: 8px 12px;
}

/* ===== BOTTOM SHEET MOBILE FIXES ===== */
@media (max-width: 767px) {
  .k12-bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100dvh;
    max-height: 100dvh;
    z-index: 1040;
  }

  .k12-bottom-sheet__content {
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ===== MOBILE CARD LAYOUT FIXES ===== */
.k12-school-card {
  position: relative;
  z-index: 1;
}

.k12-school-card__image {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
}

.k12-school-card__content {
  padding: 12px;
  background: white;
}

/* ===== CAROUSEL MOBILE FIXES ===== */
.k12-smart-carousel {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.k12-smart-carousel__track {
  display: flex;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.k12-smart-carousel__track img {
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  display: block;
}

/* ===== HERO MODAL MOBILE FIXES ===== */
.hero-search-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  background: white;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.hero-search-modal__header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
  padding: 12px;
  border-bottom: 1px solid #e1e1e1;
}

.hero-search-modal__close {
  width: 32px;
  height: 32px;
  min-width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 24px;
  padding: 0;
}

/* ===== MOBILE NAVIGATION (Airbnb-style) ===== */
@media (max-width: 767px) {
  .k12-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    height: calc(var(--bottom-nav-height) + var(--bottom-nav-safe-area));
    padding-bottom: var(--bottom-nav-safe-area);
    background: #ffffff;
    border-top: 1px solid #ebebeb;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 0;
    z-index: var(--z-bottom-nav);
    transition: transform 0.25s ease, opacity 0.25s ease;
    will-change: transform, opacity;
  }

  /* Back-compat: allow both old (.hidden) and new (body class) hide modes */
  .k12-bottom-nav.hidden,
  body.k12-bottom-nav-hidden .k12-bottom-nav {
    opacity: 0;
    transform: translateY(120%);
    pointer-events: none;
  }

  .k12-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding: 3px 12px;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    color: #717171;
    transition: color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .k12-bottom-nav__item:active {
    color: #222222;
  }

  .k12-bottom-nav__item.is-active,
  .k12-bottom-nav__item.active {
    color: #2AC8C8;
  }

  .k12-bottom-nav__icon {
    width: 24px;
    height: 24px;
    margin-bottom: 3px;
  }

  .k12-bottom-nav__icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    stroke: none;
  }

  .k12-bottom-nav__icon--stroke svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
  }

  .k12-bottom-nav__icon--image {
    margin-bottom: 0;
  }

  .k12-bottom-nav__logo-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
  }

  .k12-bottom-nav__label {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
  }

  /* On landing, bottom nav replaces the hamburger menu (match /k12/s behavior) */
  body.k12-landing-page .hero-nav-menu-btn,
  body.k12-landing-page .navbar-toggler,
  body.k12-landing-page .mobile-menu-toggle {
    display: none !important;
  }
}

/* ===== MOBILE FILTER MODAL FIXES ===== */
.k12-filter-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1045;
  background: white;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.k12-filter-modal__header {
  position: sticky;
  top: 0;
  background: white;
  padding: 12px;
  border-bottom: 1px solid #e1e1e1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
}

.k12-filter-modal__title {
  font-size: 18px;
  font-weight: 600;
}

.k12-filter-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 24px;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== MOBILE TOUCH TARGETS ===== */
  @media (max-width: 767px) {
    /* Ensure all clickable elements meet minimum touch target size (44px) */
    button,
    a[role="button"],
    input[type="checkbox"],
    input[type="radio"],
    select {
      min-height: 44px;
      min-width: 44px;
    }

    /* Marker-card controls are visually sized like Airbnb (28px circles). */
    .k12-marker-card-heart-btn,
    .k12-airbnb-map-close {
      min-height: 28px;
      min-width: 28px;
    }

    /* Mobile-specific spacing */
    .k12-search-modal {
      padding-bottom: 60px; /* Account for bottom nav */
    }

  /* Fix for bottom sheet cards */
  .k12-bottom-sheet__card {
    margin-bottom: 8px;
  }

  /* Prevent text selection on tap */
  .k12-card-image,
  .k12-carousel {
    -webkit-user-select: none;
    user-select: none;
  }

  /* Mobile font sizes */
  h1 {
    font-size: 20px;
  }

  h2 {
    font-size: 18px;
  }

  h3 {
    font-size: 16px;
  }

  /* Mobile padding/margin overrides */
  .container {
    padding: 12px;
  }

  /* Hide desktop-only elements */
  .desktop-only {
    display: none !important;
  }
}

/* ===== TABLET ADJUSTMENTS (768px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
  .k12-search-modal {
    width: 90vw;
    max-width: 600px;
  }

  /* Prevent mobile-only UI from bleeding into tablet/desktop layouts */
  .mobile-only {
    display: none !important;
  }

  .k12-bottom-nav {
    display: none !important;
  }
}

/* ===== DESKTOP LAYOUT (1025px+) ===== */
@media (min-width: 1025px) {
  /* Hide mobile-only elements on desktop */
  .mobile-only {
    display: none !important;
  }

  /* Show desktop layout */
  .k12-search-modal {
    position: absolute;
    width: auto;
    max-width: none;
  }

  /* Prevent mobile bottom nav from bleeding into desktop layouts */
  .k12-bottom-nav {
    display: none !important;
  }
}

/* ===== SAFE AREA INSETS (iPhone notch/statusbar) ===== */
@supports (padding: max(0px)) {
  body {
    padding-top: max(0px, env(safe-area-inset-top));
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }

  .k12-bottom-nav {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
    height: calc(60px + max(0px, env(safe-area-inset-bottom)));
  }

  .hero-search-modal__header {
    padding-top: max(12px, calc(env(safe-area-inset-top) + 12px));
  }
}

/* ===== ACCESSIBILITY FIXES ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .k12-smart-carousel__track {
    transition: none;
  }

  .k12-bottom-sheet {
    transition: none;
  }
}

/* ===== PRINT STYLES ===== */
@media print {
  .k12-bottom-nav,
  .hero-search-modal,
  .k12-filter-modal {
    display: none;
  }

  body {
    min-height: auto;
  }
}