/*
  Hostiko Menu Patch v3 (Safe)
  - Mega menu: stable open/close (opacity/transform) without slideDown/Up
  - Dropdown menus: add padding/width/shadow to avoid "cheap" look

  Design goal:
  - Scope everything to the Hostiko header/navbar area to avoid touching page content.
*/

/* ------------------------------
   Mega Menu (AKD Mega Menu)
   ------------------------------ */
@media (min-width: 1025px) {
  /* Only affect mega menu inside the header/nav area */
  .navbar-area li.mega-menu-item .mega-menu-content {
    /* Allow animation (original uses display:none) */
    display: block !important;

    /* Make top adaptive. JS sets --hmp3-mega-top; fallback keeps original 75px. */
    top: var(--hmp3-mega-top, 75px) !important;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(10px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;

    /* Must be above hero sections */
    z-index: 999999;
  }

  /* Open state (JS toggles .hmp3-mega-open) */
  .navbar-area li.mega-menu-item.hmp3-mega-open .mega-menu-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }

  /* Safety fallback: if JS fails, still allow hover/focus */
  .navbar-area li.mega-menu-item:hover .mega-menu-content,
  .navbar-area li.mega-menu-item:focus-within .mega-menu-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }
}

@media (max-width: 1024px) {
  /* Mobile: do not force display:block globally */
  .navbar-area li.mega-menu-item .mega-menu-content {
    display: none;
  }
  .navbar-area li.mega-menu-item.hmp3-mega-open .mega-menu-content {
    display: block;
  }
}

/* ------------------------------
   Dropdown polish (header only)
   ------------------------------ */
@media (min-width: 1025px) {
  /* AKD Nav Menu dropdown (Hostiko Toolkit) */
  .navbar-area .akd-custom-nav-main .akd-nav-menu ul.akd-nav-menu--dropdown,
  .akd-custom-nav-main .navbar-area .akd-nav-menu ul.akd-nav-menu--dropdown {
    width: auto !important;
    min-width: 240px;
    padding: 8px 0;
    margin-top: 8px;

    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);

    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s !important;

    pointer-events: none;
    z-index: 1;

    overflow: hidden;
  }

  /* Visible state (hover + keyboard focus) — scoped to navbar area */
  .navbar-area li.menu-item-has-children:hover > ul.akd-nav-menu--dropdown,
  .navbar-area li.menu-item-has-children:focus-within > ul.akd-nav-menu--dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;

    /* Kill the AKD z-index delay */
    transition-delay: 0s, 0s, 0s !important;

    z-index: 99999 !important;
    pointer-events: auto;
  }

  /* Submenu links padding */
  .navbar-area .akd-custom-nav-main .akd-nav-menu ul.akd-nav-menu--dropdown a.elementor-sub-item,
  .navbar-area .akd-custom-nav-main .akd-nav-menu ul.akd-nav-menu--dropdown a {
    display: block;
    padding: 10px 16px;
    line-height: 1.35;
    text-decoration: none;
    white-space: nowrap;
  }

  .navbar-area .akd-custom-nav-main .akd-nav-menu ul.akd-nav-menu--dropdown a:hover,
  .navbar-area .akd-custom-nav-main .akd-nav-menu ul.akd-nav-menu--dropdown a:focus {
    background: rgba(0,0,0,0.05);
    outline: none;
  }

  .navbar-area .akd-custom-nav-main .akd-nav-menu ul.akd-nav-menu--dropdown > li > a {
    border-left: 0 !important;
  }

  /* Theme / WP default submenu in the navbar */
  .navbar-area ul.sub-menu {
    min-width: 240px;
    padding: 8px 0;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    overflow: hidden;
  }

  .navbar-area ul.sub-menu a {
    display: block;
    padding: 10px 16px;
    line-height: 1.35;
    text-decoration: none;
    white-space: nowrap;
  }

  .navbar-area ul.sub-menu a:hover,
  .navbar-area ul.sub-menu a:focus {
    background: rgba(0,0,0,0.05);
    outline: none;
  }

  /* Elementor Nav Menu dropdown (if used in header template) */
  .navbar-area .elementor-nav-menu--dropdown {
    min-width: 240px;
    padding: 8px 0;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    overflow: hidden;
  }

  .navbar-area .elementor-nav-menu--dropdown a {
    display: block;
    padding: 10px 16px;
    line-height: 1.35;
    text-decoration: none;
    white-space: nowrap;
  }

  .navbar-area .elementor-nav-menu--dropdown a:hover,
  .navbar-area .elementor-nav-menu--dropdown a:focus {
    background: rgba(0,0,0,0.05);
    outline: none;
  }
}

@media (max-width: 1024px) {
  /* Mobile: keep changes minimal */
  .navbar-area ul.sub-menu a,
  .navbar-area .elementor-nav-menu--dropdown a,
  .navbar-area .akd-custom-nav-main .akd-nav-menu ul.akd-nav-menu--dropdown a.elementor-sub-item {
    padding: 10px 14px;
  }
}