/* ============================================================
   MENU-FIXES.CSS  —  Automation Expo South 2028
   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.
   ============================================================ */

/* ------------------------------------------------------------
   0. HEIGHT TOKENS
   Every offset below is derived from these three numbers, so a
   header height change only has to be edited in one place.
------------------------------------------------------------ */
:root {
  --strip-h: 48px;        /* blue event strip                       */
  --nav-h: 92px;          /* main navbar                            */
  --hairline: 2px;        /* bottom border under the navbar         */
  --actionbar-h: 96px;    /* docked button bar when the menu is open */
  --header-offset: calc(var(--strip-h) + var(--nav-h) + var(--hairline));
}

@media (max-width: 1250px) {
  :root {
    --nav-h: 88px;
  }
}

@media (max-width: 650px) {
  :root {
    --strip-h: 40px;
    --nav-h: 76px;
    /* buttons stack full-width on phones, so the bar is taller.
       Now 3 stacked buttons (Brochure, Free Visitor Registration,
       Book Your Stall) instead of 2, so the bar needs more height. */
    --actionbar-h: 190px;
  }
}

/* Short landscape screens: the bar is compressed (see section 5) */
@media (max-width: 950px) and (orientation: landscape) {
  :root {
    --actionbar-h: 70px;
  }
}

/* ------------------------------------------------------------
   1. BODY OFFSET — always equals strip + navbar height
------------------------------------------------------------ */
@media (max-width: 1250px) {
  body {
    padding-top: var(--header-offset);
  }

  /* Header sits directly under the strip at whatever height it is */
  .expo-header {
    top: var(--strip-h);
  }
}

/* ------------------------------------------------------------
   2. OPEN MOBILE MENU — scrollable, never taller than screen
   100dvh keeps this correct while mobile browser chrome
   collapses; 100vh stays as the fallback.
------------------------------------------------------------ */
@media (max-width: 1250px) {
  .expo-menu.menu-open {
    max-height: calc(100vh - var(--header-offset) - var(--actionbar-h));
    max-height: calc(100dvh - var(--header-offset) - var(--actionbar-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 99998;
  }

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

/* ------------------------------------------------------------
   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) must ALWAYS stay on top and clickable */
  .expo-navbar .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;
    /* above the menu panel, so a long menu can never cover it */
    z-index: 99999;
    background: #24135c;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.3);
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }

  /* 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 calc(14px + env(safe-area-inset-bottom));
  }

  /* Stack full-width on phones */
  .expo-actions.actions-open a {
    flex: 1 1 100%;
  }
}

/* ------------------------------------------------------------
   4. VERY SMALL PHONES (up to 380px)
   Single block — the old file set .expo-logo img twice here
   (155px, then 128px) and only the last one ever applied.
------------------------------------------------------------ */
@media (max-width: 380px) {
  /* keeps room for the centre CTA button */
  .expo-logo img {
    width: 128px;
  }

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

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

/* ------------------------------------------------------------
   5. PHONE LANDSCAPE — compressed button bar on short screens.
   The menu height now follows --actionbar-h automatically.
------------------------------------------------------------ */
@media (max-width: 950px) and (orientation: landscape) {
  .expo-actions.actions-open {
    padding: 8px 15px calc(10px + env(safe-area-inset-bottom));
  }

  .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: 10px;
  }

  .expo-menu {
    gap: 12px;
  }

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

  .expo-actions {
    gap: 6px;
  }

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

  /* Now 3 action buttons (Brochure, Free Visitor Registration,
     Book Your Stall) instead of 2 in this already-tight range,
     so each one needs to give up some min-width/padding. */
  .btn-preview {
    min-width: 115px;
    padding: 0 10px;
  }

  .btn-yellow {
    min-width: 140px;
    padding: 0 10px;
  }

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

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

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

/* =========================================================
   7. 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,
.expo-menu .menu-item.active-parent > a {
  color: #ffcc00;
}

/* ============================================================
   9. MOBILE SUB-MENU (Special Zones)
============================================================ */
@media (max-width: 1250px) {
  /* Flex alignment so the arrow sits on the right */
  ul.dropdown-menu li.has-submenu > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }

  /* Active dark background ONLY when the sub-menu is open */
  ul.dropdown-menu li.has-submenu.sub-open > a {
    background: linear-gradient(90deg, #570061 0%, #35135c 48%, #003a82 100%) !important;
    color: #ffffff !important;
  }

  /* Base state: hidden by crushing max-height to 0 */
  ul.dropdown-menu .sub-dropdown-menu {
    display: block !important;
    position: static !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    box-shadow: none;
    transform: none;
    transition: max-height 0.35s ease-in-out, opacity 0.3s ease-in-out,
      padding 0.3s ease, margin 0.3s ease;
    background: #1d0e4a !important;
  }

  /* Open state */
  ul.dropdown-menu li.has-submenu.sub-open > ul.sub-dropdown-menu {
    max-height: 400px;
    opacity: 1;
    visibility: visible;
    padding: 5px 0 5px 15px !important;
    margin-top: 5px !important;
  }

  /* Child links inside the dark dropdown */
  ul.dropdown-menu li.has-submenu > ul.sub-dropdown-menu > li > a {
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 10px 15px 10px 0 !important;
  }

  ul.dropdown-menu li.has-submenu > ul.sub-dropdown-menu > li:last-child > a {
    border-bottom: none !important;
  }

  /* Smooth arrow rotation */
  ul.dropdown-menu li.has-submenu > a i {
    transition: transform 0.3s ease;
  }

  ul.dropdown-menu li.has-submenu.sub-open > a i {
    transform: rotate(90deg);
  }
}

/* The double-tap bug came from the desktop hover style firing on the
   first tap. Gate it behind a real pointer instead of overriding it. */
@media (max-width: 1250px) and (hover: hover) and (pointer: fine) {
  ul.dropdown-menu li.has-submenu > a:hover {
    padding-left: 16px !important;
    background: #ffffff !important;
    color: #222222 !important;
  }
}

/* ------------------------------------------------------------
   10. TOUCH RESPONSIVENESS
   Kills the 300ms tap delay and double-tap-to-zoom on the menu.
------------------------------------------------------------ */
@media (max-width: 1250px) {
  .expo-menu a,
  .mobile-menu-btn,
  .mobile-cta {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.12);
  }
}

/* ============================================================
   11. TOP STRIP DROPDOWN & ACCENT BUTTON (OVERRIDE FIXES)
============================================================ */
.event-strip {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  overflow: visible !important; /* Prevents dropdown clipping */
  z-index: 100000 !important;
}

.event-track-wrapper {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}

.topbar-hover-dropdown {
  position: relative !important;
  z-index: 100001 !important;
  margin-left: 10px;
  padding-right: 15px;
  flex-shrink: 0;
}

.topbar-accent-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: #ffca05 !important;
  color: #111111 !important;
  border: 1px solid #ffca05 !important;
  font-family: inherit;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 5px 14px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.topbar-accent-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* 1. FORCE HIDE ON HOVER: Overrides any hover rules in menu.css */
.topbar-hover-dropdown:hover .dropdown-menu,
.topbar-hover-dropdown .dropdown-menu {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  position: absolute !important;
  top: 100% !important;
  right: 15px !important;
  left: auto !important;
  
  /* 2. FIX TEXT CUTOFF: Allow container to fit the text width dynamically */
  width: max-content !important;
  max-width: calc(100vw - 30px) !important;
  min-width: 240px !important;
  
  list-style: none !important;
  background: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 8px 0 !important;
  margin-top: 5px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
  z-index: 100002 !important;
}

/* 3. STRICT CLICK DISPLAY: Only visible when JS adds '.show' */
.topbar-hover-dropdown .dropdown-menu.show,
.topbar-hover-dropdown:hover .dropdown-menu.show {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.topbar-hover-dropdown .dropdown-item {
  display: block !important;
  padding: 10px 16px !important;
  color: #222222 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  
  /* Prevents line breaks cutting off long names like "Automation Expo South – Chennai" */
  white-space: nowrap !important;
  word-break: normal !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

.topbar-menu-divider {
  height: 1px;
  margin: 4px 0;
  border: 0;
  background: rgba(0, 0, 0, 0.12);
}

/* Background hover styling on button/items without triggering the dropdown toggle */
@media (hover: hover) and (pointer: fine) {
  .topbar-accent-btn:hover {
    background: #ffffff !important;
    color: #21145c !important;
    border-color: #ffffff !important;
  }

  .topbar-hover-dropdown .dropdown-item:hover {
    background: #24135c !important;
    color: #ffffff !important;
  }
}

@media (max-width: 480px) {
  .topbar-hover-dropdown {
    margin-left: 6px;
    padding-right: 10px;
  }

  .topbar-accent-btn {
    font-size: 11px !important;
    padding: 4px 9px !important;
  }

  .topbar-hover-dropdown .dropdown-menu {
    right: 10px !important;
    min-width: 200px !important;
  }
}

/* ------------------------------------------------------------
   12. ACCESSIBILITY BASELINE
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .expo-menu.menu-open,
  ul.dropdown-menu .sub-dropdown-menu,
  ul.dropdown-menu li.has-submenu > a i,
  .expo-actions .btn-yellow {
    transition: none !important;
    animation: none !important;
  }
}







/* ============================================================
   13. TOP STRIP DROPDOWN — SHOW-STATE HARDENING
   menu.css gives every .dropdown-menu a translateY(12px) idle
   transform that the topbar rules never reset, so the open panel
   was drifting 12px low. Also keeps the panel above the navbar
   and guarantees it is hit-testable.
============================================================ */
.topbar-hover-dropdown .dropdown-menu.show,
.topbar-hover-dropdown:hover .dropdown-menu.show {
  transform: none !important;
  pointer-events: auto !important;
}

.topbar-hover-dropdown .dropdown-menu {
  pointer-events: none;
}

/* The accent button must sit above the marquee track in every case */
.topbar-accent-btn {
  position: relative !important;
  z-index: 2 !important;
}

/* The marquee must never steal a tap meant for the button */
.event-track-wrapper,
.event-track {
  pointer-events: none;
}


/* ============================================================
   CONCURRENT EVENTS — FINAL CLICK FIX
============================================================ */

#concurrentEvents {
  position: relative !important;
  z-index: 100005 !important;
}

#siteSwitchDropdown {
  position: relative !important;
  z-index: 100006 !important;
  pointer-events: auto !important;
}

#siteSwitchMenu {
  position: absolute !important;
  top: calc(100% + 5px) !important;
  right: 0 !important;
  left: auto !important;

  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;

  transform: none !important;
  pointer-events: none !important;

  z-index: 100007 !important;
}

#siteSwitchMenu.show {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

#siteSwitchMenu a {
  position: relative !important;
  z-index: 100008 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* ============================================================
   15. CONCURRENT EVENTS - DESIGN PASS
   Brings the top-strip button into the same vocabulary as
   .btn-yellow / .btn-preview: pill radius, 700 weight, the
   #ffca05 -> #ffffff + #21145c hover, and a lift on hover.

   Height is capped to fit inside .event-strip (48px desktop,
   40px <=650px), so it reads as a real button without
   crowding the strip.

   NOTE: hover must never open the panel. Only the .show class
   added by js/menu-loader.js does that. The hover rules below
   are colour only.
============================================================ */

.topbar-accent-btn {
  height: 36px !important;
  padding: 0 18px !important;
  gap: 8px !important;

  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  line-height: 1 !important;

  border-radius: 50px !important;
  border: 2px solid #ffca05 !important;
  background: #ffca05 !important;
  color: #111111 !important;

  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22) !important;
  transition: background 0.25s ease, color 0.25s ease,
              border-color 0.25s ease, transform 0.25s ease,
              box-shadow 0.25s ease !important;
}

/* Chevron: slightly larger, and it turns over when the panel opens */
.topbar-accent-btn .fa-chevron-down {
  font-size: 12px !important;
  margin-left: 0 !important;
  transition: transform 0.25s ease;
}

.topbar-accent-btn[aria-expanded="true"] .fa-chevron-down {
  transform: rotate(180deg);
}

/* Open state keeps the button visually tied to the panel below it */
.topbar-accent-btn[aria-expanded="true"] {
  background: #ffffff !important;
  color: #21145c !important;
  border-color: #ffffff !important;
}

@media (hover: hover) and (pointer: fine) {
  .topbar-accent-btn:hover {
    background: #ffffff !important;
    color: #21145c !important;
    border-color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 9px 18px rgba(0, 0, 0, 0.25) !important;
  }
}

.topbar-accent-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22) !important;
}

/* ---- Panel, matched to the main nav dropdowns ---- */
#siteSwitchMenu {
  border-radius: 12px !important;
  padding: 8px 0 !important;
  margin-top: 8px !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25) !important;
}

#siteSwitchMenu .dropdown-item {
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 11px 18px !important;
}

@media (hover: hover) and (pointer: fine) {
  #siteSwitchMenu .dropdown-item:hover {
    padding-left: 23px !important;
    color: #ffffff !important;
    background: #24135c !important;
  }
}

/* ---- Strip is 40px here, so scale down but keep the shape ---- */
@media (max-width: 650px) {
  .topbar-accent-btn {
    height: 30px !important;
    padding: 0 13px !important;
    font-size: 12px !important;
    gap: 6px !important;
  }

  .topbar-accent-btn .fa-chevron-down {
    font-size: 10px !important;
  }
}

@media (max-width: 480px) {
  .topbar-accent-btn {
    height: 28px !important;
    padding: 0 11px !important;
    font-size: 11px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar-accent-btn,
  .topbar-accent-btn .fa-chevron-down {
    transition: none !important;
  }
  .topbar-accent-btn:hover {
    transform: none !important;
  }
}

/* ============================================================
   16. CONCURRENT EVENTS - HOVER TO OPEN
   Opens on hover for mouse users. Clicking is no longer the
   trigger on desktop.

   Scoped to (hover: hover) and (pointer: fine) on purpose:
   phones and tablets have no hover state, so on those devices
   nothing here applies and the tap handler in menu-loader.js
   takes over instead. Without that split the panel would be
   unreachable on mobile.

   :focus-within is included so keyboard users can Tab to the
   button and reach the links.
============================================================ */

@media (hover: hover) and (pointer: fine) {

  #concurrentEvents:hover #siteSwitchMenu,
  #concurrentEvents:focus-within #siteSwitchMenu,
  #siteSwitchMenu:hover {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  /* Invisible bridge across the 8px gap between the button and the
     panel. Without it the panel closes while the cursor travels
     down to the links. */
  #siteSwitchMenu::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
    background: transparent;
  }

  /* Widen the hit area slightly so small cursor drifts don't close it */
  #concurrentEvents {
    padding-bottom: 4px !important;
  }

  #concurrentEvents:hover .topbar-accent-btn .fa-chevron-down,
  #concurrentEvents:focus-within .topbar-accent-btn .fa-chevron-down {
    transform: rotate(180deg);
  }

  /* The button adopts its open look while the panel is showing */
  #concurrentEvents:hover .topbar-accent-btn,
  #concurrentEvents:focus-within .topbar-accent-btn {
    background: #ffffff !important;
    color: #21145c !important;
    border-color: #ffffff !important;
  }

  /* The lift belongs to the button alone, not the whole widget -
     moving the button up mid-hover would shift the panel too. */
  .topbar-accent-btn:hover {
    transform: none !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22) !important;
  }
}