/* ============================================================
   MENU-FIXES.CSS  —  Automation Expo 2027
   Load AFTER menu.css:
   <link rel="stylesheet" href="css/menu-fixes.css">

   Fixes header/menu layout on every device size.
   ⚠ Does NOT change any hover effect or desktop design.
   ============================================================ */

/* ------------------------------------------------------------
   1. BODY OFFSET — must always equal strip + navbar height
   Desktop:  48 + 92 + 2 = 142px (set in menu.css)
   Tablet:   48 + 88 + 2 = 138px
   Mobile:   40 + 76 + 2 = 118px
------------------------------------------------------------ */
@media (max-width: 1250px) {
  body {
    padding-top: 138px;
  }
}

@media (max-width: 650px) {
  body {
    padding-top: 118px;
  }

  /* Blue strip is 40px on mobile — header must sit right under it */
  .expo-header {
    top: 40px;
  }
}

/* ------------------------------------------------------------
   2. OPEN MOBILE MENU — scrollable, never taller than screen
------------------------------------------------------------ */
@media (max-width: 1250px) {
  .expo-menu.menu-open {
    max-height: calc(100vh - 138px - 90px); /* screen − header − action bar */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

@media (max-width: 650px) {
  .expo-menu.menu-open {
    max-height: calc(100vh - 118px - 90px);
  }
}

/* ------------------------------------------------------------
   3. ACTION BUTTONS — pinned bar at the bottom of the screen
   when the mobile menu is open (was overlapping the navbar
   because position:absolute had no top value)
------------------------------------------------------------ */
@media (max-width: 1250px) {
  /* Hamburger / close (X) button must ALWAYS stay on top
     and clickable — nothing can cover it */
  .mobile-menu-btn {
    position: relative;
    z-index: 100001;
  }

  .expo-actions.actions-open {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 99997;
    background: #24135c;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.3);
  }

  /* Buttons share one row on tablets */
  .expo-actions.actions-open a {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Yellow bounce animation off while docked (avoids jitter) */
  .expo-actions.actions-open .btn-yellow {
    animation: none;
  }
}

@media (max-width: 650px) {
  .expo-actions.actions-open {
    gap: 8px;
    padding: 12px 15px 14px;
  }

  /* Stack full-width on phones (matches your existing rule) */
  .expo-actions.actions-open a {
    flex: 1 1 100%;
  }
}

/* ------------------------------------------------------------
   4. VERY SMALL PHONES  (up to 380px)
------------------------------------------------------------ */
@media (max-width: 380px) {
  .expo-logo img {
    width: 155px;
  }

  .mobile-menu-btn {
    width: 42px;
    height: 40px;
    font-size: 19px;
  }

  .expo-actions.actions-open a {
    height: 44px;
    font-size: 14px;
  }
}

/* ------------------------------------------------------------
   5. PHONE LANDSCAPE — menu still scrollable when the
   screen is short (e.g. 380px tall in landscape)
------------------------------------------------------------ */
@media (max-width: 950px) and (orientation: landscape) {
  .expo-menu.menu-open {
    max-height: calc(100vh - 118px - 70px);
  }

  .expo-actions.actions-open {
    padding: 8px 15px 10px;
  }

  .expo-actions.actions-open a {
    height: 40px;
    flex: 1 1 auto;
  }
}

/* ------------------------------------------------------------
   6. DESKTOP SAFETY — menu never wraps between 1251–1400px
   (tightest range before the hamburger appears)
------------------------------------------------------------ */
@media (max-width: 1400px) and (min-width: 1251px) {
  .expo-navbar {
    gap: 14px;
  }

  .expo-menu {
    gap: 16px;
  }

  .menu-item > a {
    font-size: 15px;
  }

  .expo-actions a {
    height: 48px;
    font-size: 15px;
  }

  .btn-preview {
    min-width: 145px;
    padding: 0 14px;
  }

  .btn-yellow {
    min-width: 170px;
    padding: 0 14px;
  }

  .btn-register {
    min-width: 205px;
  }

  .expo-logo {
    width: 280px;
    min-width: 280px;
  }

  .expo-logo img {
    width: 200px;
  }
}

/* ------------------------------------------------------------
   7. SMALL PHONE LOGO - keep room for the centre CTA button
------------------------------------------------------------ */
@media (max-width: 380px) {
  .expo-logo img {
    width: 128px;
  }
}

/* =========================================================
   PHONE TESTIMONIAL ARROWS - side by side under the slider
========================================================= */
@media (max-width: 767px) {
  .testimonialSwiper {
    padding-bottom: 78px;
  }

  .testimonial-arrow {
    position: absolute;
    top: auto;
    bottom: 8px;
    transform: none;
    width: 46px;
    height: 46px;
  }

  .testimonial-prev {
    left: 50%;
    right: auto;
    margin-left: -54px;
  }

  .testimonial-next {
    left: 50%;
    right: auto;
    margin-left: 8px;
  }

  .testimonial-arrow:hover,
  .testimonial-arrow:active {
    transform: none;
    background: #0A1650;
  }
}
/* ------------------------------------------------------------
   8. CURRENT PAGE HIGHLIGHT (set by js/menu-loader.js)
------------------------------------------------------------ */
.expo-menu a.active-link {
  color: #ffcc00;
}

.expo-menu .menu-item.active-parent > a {
  color: #ffcc00;
}

/* ------------------------------------------------------------
   9. MOBILE PANEL SAFETY - hamburger always tappable
------------------------------------------------------------ */
@media (max-width: 1250px) {
  .expo-navbar .mobile-menu-btn {
    position: relative;
    z-index: 100001;
  }

  .expo-menu.menu-open {
    z-index: 99999;
  }

  body.nav-open {
    overflow: hidden;
  }
}