/* ==========================================================================
   MOBILE APP SHELL - Machu Picchu Travel Cataleya
   At the mobile breakpoint (<= 992px, same as the hamburger) the site
   behaves like an app: a fixed compact header, a bottom tab bar
   (template-parts/header/mobile-tabbar.php) and the menu as a bottom sheet.
   ========================================================================== */

.tayra-tabbar {
  display: none;
}

@media (max-width: 992px) {
  :root {
    --tayra-tabbar-h: 64px;
    --tayra-mhead-h: 72px;
  }

  /* ---------------- Fixed header ---------------- */
  .tayra-header--home,
  .tayra-header--inner {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: background-color 0.25s ease, box-shadow 0.25s ease, backdrop-filter 0.25s ease;
  }

  /* Home: transparent over the video, dark-green glass once scrolled
     (the logo and language button are white, so the bar stays dark). */
  body.tayra-scrolled .tayra-header--home {
    background: rgba(18, 52, 24, 0.86) !important;
    backdrop-filter: blur(12px) saturate(1.3);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  }

  /* Inner pages: white glass, content starts below the bar. */
  .tayra-header--inner {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  body.tayra-scrolled .tayra-header--inner {
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
  }

  body:not(.home) .site-wrapper {
    padding-top: var(--tayra-mhead-h);
  }

  /* Sticky in-page tabs (single tour) stick just below the fixed header. */
  .single-tour-nav {
    top: var(--tayra-mhead-h) !important;
  }

  /* The bottom bar has its own Menu button. */
  .tayra-header .tayra-nav-toggle {
    display: none !important;
  }

  /* Leave room for the tab bar at the end of the page. */
  body {
    padding-bottom: calc(var(--tayra-tabbar-h) + env(safe-area-inset-bottom, 0px));
  }

  /* ---------------- Bottom tab bar ---------------- */
  .tayra-tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    height: calc(var(--tayra-tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding: 0 0.25rem env(safe-area-inset-bottom, 0px);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border-top: 1px solid var(--tayra-color-border, #DFEADB);
    box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.08);
  }

  .tayra-tabbar .tayra-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: auto;
    height: var(--tayra-tabbar-h);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--tayra-color-muted, #64748B);
    font-family: var(--tayra-font-heading);
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease;
  }

  .tayra-tabbar .tayra-tab svg {
    width: 22px;
    height: 22px;
    padding: 3px 14px;
    box-sizing: content-box;
    border-radius: 999px;
    transition: background-color 0.2s ease;
  }

  .tayra-tabbar .tayra-tab.is-active,
  .tayra-tabbar .tayra-tab[aria-expanded="true"] {
    color: var(--tayra-color-primary-dark, #1E6B1A);
  }

  .tayra-tabbar .tayra-tab.is-active svg,
  .tayra-tabbar .tayra-tab[aria-expanded="true"] svg {
    background: #E3F5D6;
  }

  .tayra-tabbar .tayra-tab--wa {
    color: #1DA851;
  }

  /* Raised centre button: plan your trip */
  .tayra-tabbar .tayra-tab--cta {
    color: var(--tayra-color-secondary-dark, #E04BB1);
    justify-content: flex-end;
    padding-bottom: 9px;
  }

  .tayra-tabbar .tayra-tab-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-top: -26px;
    border-radius: 50%;
    border: 4px solid #FFFFFF;
    background: linear-gradient(135deg, var(--tayra-color-secondary, #FF6CD0), var(--tayra-color-secondary-dark, #E04BB1));
    color: #FFFFFF;
    box-shadow: 0 8px 20px rgba(224, 75, 177, 0.35);
  }

  .tayra-tabbar .tayra-tab--cta .tayra-tab-fab svg {
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
  }

  /* ---------------- WhatsApp widget ---------------- */
  /* The tab bar opens it, so the floating launcher is hidden; the chat
     card opens just above the bar. */
  .cataleya-wa-trigger-wrapper {
    display: none !important;
  }

  .cataleya-wa-widget {
    bottom: calc(var(--tayra-tabbar-h) + env(safe-area-inset-bottom, 0px)) !important;
  }

  .cataleya-wa-card {
    bottom: 12px !important;
  }

  /* ---------------- Menu as a bottom sheet ---------------- */
  .tayra-mobile-nav-panel {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    max-height: 86vh;
    border-radius: 22px 22px 0 0;
    transform: translateY(100%);
    box-shadow: 0 -16px 50px rgba(0, 0, 0, 0.25);
    padding-bottom: calc(var(--tayra-tabbar-h) + env(safe-area-inset-bottom, 0px));
  }

  .tayra-mobile-nav.is-open .tayra-mobile-nav-panel {
    transform: translateY(0);
  }

  .tayra-mobile-nav-head {
    position: relative;
    padding-top: 1.4rem;
  }

  /* Grabber handle */
  .tayra-mobile-nav-head::before {
    content: '';
    position: absolute;
    top: 0.55rem;
    left: 50%;
    width: 42px;
    height: 5px;
    margin-left: -21px;
    border-radius: 999px;
    background: var(--tayra-color-border, #DFEADB);
  }
}