/* =====================================================================
   Techvizo Megamenu – Frontend Styles
   =====================================================================

   Structure:
   1. Shared base (all breakpoints)
   2. Desktop-only  (.tvzp-menu__desktop)
   3. Mobile-only   (.tvzp-menu__mobile-nav)
   ===================================================================== */

/* ── 1. SHARED BASE ─────────────────────────────────────────────────── */

/* Caret (the ▾ inside <a>) */
.tvzp-megamenu__caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 5px;
  vertical-align: middle;
  border-top: 4px solid currentColor;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  transition: transform 0.2s ease;
}

/* Badge */
.tvzp-megamenu__badge {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: middle;
  position: relative;
  line-height: 1.6;
}
.tvzp-megamenu__badge-caret {
  position: absolute;
  left: 50%;
  bottom: -5px;
  margin-left: -4px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid;
}

/* Icon */
.tvzp-megamenu__icon {
  margin-right: 6px;
  vertical-align: middle;
  font-size: 1em;
}

/* Ajax loading placeholder */
.tvzp-megamenu__ajax-placeholder {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.tvzp-megamenu__ajax-placeholder::before {
  content: "";
  width: 28px;
  height: 28px;
  border: 3px solid #e5e7eb;
  border-top-color: #1e40af;
  border-radius: 50%;
  animation: tvzp-mm-spin 0.7s linear infinite;
}
@keyframes tvzp-mm-spin {
  to { transform: rotate(360deg); }
}

/* Empty notice */
.tvzp-megamenu__empty-notice {
  padding: 30px;
  color: #6b7280;
  text-align: center;
  font-size: 13px;
}
.tvzp-megamenu__empty-notice a {
  color: #1e40af;
}

/* ── 2. DESKTOP ONLY ────────────────────────────────────────────────── */

/* ── Desktop: fix layout broken by .tvzp-menu__mobile-item-row wrapper ──
   The walker always outputs the row div (needed by mobile JS), so on desktop
   we must:
   1. Make the row itself behave like an inline-flex anchor replacement.
   2. Match the same color / font as the plain li > a rule in tvzp-widgets.css.
   3. Kill the ::after arrow — the walker's own <span.tvzp-megamenu__caret>
      is the only indicator we want.
   4. Hide the toggle <button> (mobile-only control).
   5. Keep the panel visible via opacity/visibility even if JS sets [hidden].
*/

/* 1. Row wrapper – stretch to fill the li, behave like the anchor */
.tvzp-menu__desktop .tvzp-megamenu__item > .tvzp-menu__mobile-item-row {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
}

/* 2. Anchor inside the row – match .tvzp-menu__list > li > a exactly */
.tvzp-menu__desktop .tvzp-megamenu__item > .tvzp-menu__mobile-item-row > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  color: var(--tvzp-green-900);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  transition: color 0.2s ease, background-color 0.2s ease,
              border-color 0.2s ease, opacity 0.2s ease;
}

/* 3. Kill ::after arrow on both possible anchor positions */
.tvzp-menu__desktop .tvzp-megamenu__item > a::after,
.tvzp-menu__desktop .tvzp-megamenu__item > .tvzp-menu__mobile-item-row > a::after {
  display: none !important;
}

/* 4. Hide the mobile-only toggle button on desktop */
.tvzp-menu__desktop .tvzp-megamenu__item > .tvzp-menu__mobile-item-row > .tvzp-menu__submenu-toggle {
  display: none !important;
}

/* 5. Desktop panel: neutralise any JS-set [hidden] so hover CSS can take over */
.tvzp-menu__desktop .tvzp-megamenu__item--mega > .tvzp-megamenu__panel[hidden] {
  display: block !important;
}

/* Rotate caret when open.
   Anchor may be a direct child or inside .tvzp-menu__mobile-item-row. */
.tvzp-menu__desktop .tvzp-megamenu__item--mega:hover .tvzp-megamenu__caret,
.tvzp-menu__desktop .tvzp-megamenu__item--mega.is-open .tvzp-megamenu__caret,
.tvzp-menu__desktop .tvzp-megamenu__item--has-dropdown:hover .tvzp-megamenu__caret,
.tvzp-menu__desktop .tvzp-megamenu__item--has-dropdown.is-open .tvzp-megamenu__caret {
  transform: rotate(180deg);
}

/* Megamenu panel – desktop floating overlay */
.tvzp-menu__desktop .tvzp-megamenu__item--mega {
  position: relative;
}

/*.tvzp-menu__desktop .tvzp-megamenu__item--mega > .tvzp-menu--submenu-slide-panel {*/
/*  position: absolute;*/
/*  top: 100%;*/
/*  left: 0;*/
/*  background: #fff;*/
/*  border: 1px solid rgba(0,0,0,.1);*/
/*  border-radius: 6px;*/
/*  box-shadow: 0 10px 30px rgba(0,0,0,.12);*/
/*  opacity: 0;*/
/*  visibility: hidden;*/
/*  transform: translateY(6px);*/
/*  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;*/
/*  z-index: 9999;*/
/*  overflow: hidden;*/
/*}*/

/* Default width */
.tvzp-menu__desktop .tvzp-megamenu__item--mega.tvzp-megamenu__width--default_width > .tvzp-megamenu__panel {
  width: 750px;
}
/* Full width and custom width: JS alignPanel() sets left/width at runtime */
.tvzp-menu__desktop .tvzp-megamenu__item--mega.tvzp-megamenu__width--full_width > .tvzp-megamenu__panel {
  border-radius: 0;
}

/* Show panel on hover or JS .is-open */
.tvzp-menu__desktop .tvzp-megamenu__item--mega:hover > .tvzp-megamenu__panel,
.tvzp-menu__desktop .tvzp-megamenu__item--mega.is-open > .tvzp-megamenu__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ── 3. MOBILE ONLY ─────────────────────────────────────────────────── */

/* Hide the inline caret – toggle button handles the arrow */
.tvzp-menu__mobile-nav .tvzp-megamenu__caret {
  display: none !important;
}

/* Megamenu panel in mobile drawer = plain accordion block, not an overlay */
/*.tvzp-menu__mobile-nav .tvzp-megamenu__panel {*/
/*  position: static !important;*/
/*  width: auto !important;*/
/*  left: auto !important;*/
/*  top: auto !important;*/
/*  opacity: 1 !important;*/
/*  visibility: visible !important;*/
/*  transform: none !important;*/
/*  box-shadow: none !important;*/
/*  border: none !important;*/
/*  border-radius: 0 !important;*/
/*  transition: none !important;*/
/*  overflow: visible !important;*/
/*  padding: 0px;*/
/*}*/

/* [hidden] set by PHP / JS before slideDown starts */
.tvzp-menu__mobile-nav .tvzp-megamenu__panel[hidden] {
  display: none !important;
}

/* Flip toggle arrow when a mega item accordion is open */
.tvzp-menu__mobile-nav .tvzp-megamenu__item--mega.is-submenu-open > .tvzp-menu__mobile-item-row .tvzp-menu__submenu-toggle-icon {
  transform: rotate(-135deg) translateY(1px);
}

/* ── 4. RESPONSIVE OVERRIDES ────────────────────────────────────────── */

/*
 * Tablet (≤ 1024 px)
 * The Elementor breakpoint for tablets is typically 1024 px.
 * Ensure desktop megamenu panels are hidden and mobile layout takes over.
 */
@media (max-width: 1024px) {

  /* Force desktop panel off – mobile drawer handles display */
  .tvzp-menu__desktop .tvzp-megamenu__item--mega > .tvzp-megamenu__panel {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* Undo the [hidden] override that was only meant for desktop hover */
  .tvzp-menu__desktop .tvzp-megamenu__item--mega > .tvzp-megamenu__panel[hidden] {
    display: none !important;
  }

  /* Mobile row – full width, flex row */
  .tvzp-menu__mobile-nav .tvzp-menu__mobile-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  /* Mobile panel accordion: full-width, not absolute */



  /* Elementor inner sections should stack full-width on mobile */
  .tvzp-menu__mobile-nav .tvzp-megamenu__panel .elementor-section,
  .tvzp-menu__mobile-nav .tvzp-megamenu__panel .e-con,
  .tvzp-menu__mobile-nav .tvzp-megamenu__panel .elementor-container {
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: column !important;
  }

  .tvzp-menu__mobile-nav .tvzp-megamenu__panel .elementor-column,
  .tvzp-menu__mobile-nav .tvzp-megamenu__panel .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/*
 * Mobile (≤ 767 px)
 * Elementor's default mobile breakpoint.
 */
@media (max-width: 767px) {

  /* Badge/icon sit nicely on small screens */
  .tvzp-megamenu__badge {
    font-size: 9px;
    padding: 1px 4px;
  }

  .tvzp-megamenu__icon {
    font-size: 0.9em;
  }

  /* Tighter panel padding */
  .tvzp-menu--submenu-slide-panel .sub-menu{
    padding: 0px 20px !important;
   }

  /* Ajax placeholder smaller on mobile */
  .tvzp-megamenu__ajax-placeholder {
    min-height: 120px;
    padding: 20px;
  }
}