@layer components {

/* =========================================
   MENU BASE
========================================= */
.menu,
.menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu {
  display: flex;
  gap: 24px;
}

.menu > li {
  position: relative;
}

.menu > li > a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* =========================================
   DROPDOWN BASE (ANIMATED)
========================================= */
.submenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;

  background: #fff;
  border: 1px solid #eee;
  min-width: 220px;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);

  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s;

  z-index: 1000;
}

/* =========================================
   SUB-SUB-MENU POSITION
========================================= */
.submenu .submenu {
  top: 0;
  left: 100%;
  margin-left: 10px;
}

/* =========================================
   SHOW DROPDOWN (DESKTOP)
========================================= */
@media (min-width: 769px) {

  /* LEVEL 1 */
  .menu > li.hovering > .submenu,
  .menu > li:focus-within > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* LEVEL 2+ */
  .submenu li:hover > .submenu,
  .submenu li:focus-within > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

}

/* =========================================
   SVG CHEVRON INDICATOR
========================================= */
.menu > li.menu-item-has-children > a::after {
  content: "";
  width: 6px;
  height: 6px;

  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;

  transform: rotate(45deg) translateY(-1px);
  margin-left: 6px;

  transition: transform 0.3s ease;
}

/* ROTATE ON HOVER */
.menu > li.hovering > a::after {
  transform: rotate(225deg) translateY(1px);
}

/* =========================================
   MOBILE ACCORDION
========================================= */
@media (max-width: 768px) {

  .submenu {
    position: static;
    border: none;
    transform: none;

    opacity: 1;
    visibility: visible;

    max-height: 0;
    overflow: hidden;

    transition: max-height 0.3s ease;
  }

  .submenu.open {
    max-height: 500px;
  }

  .menu-item-has-children > a::after {
    content: "+";
    border: none;
    margin-left: auto;
    transform: none;
  }

  .menu-item-has-children.active > a::after {
    content: "−";
  }

}

/* =========================================
   HOVER BUFFER (ANTI-FLICKER)
========================================= */
.submenu::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  right: 0;
  height: 6px;
}

/* =========================================
   MEGA MENU SUPPORT
========================================= */
.mega-menu {
  position: static;
}

.mega-menu > .submenu {
  left: 50%;
  transform: translateX(-50%) translateY(10px);

  width: 100%;
  max-width: 1200px;

  padding: 30px;
  border-radius: 0 0 var(--radius, 6px) var(--radius, 6px);
}

/* GRID LAYOUT */
.mega-menu .submenu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
}

/* COLUMN LINKS */
.mega-menu .submenu li {
  list-style: none;
}

.mega-menu .submenu a {
  display: block;
  padding: 6px 0;
  font-size: 14px;
  color: var(--color-dark);
}

.mega-menu .submenu a:hover {
  color: var(--color-primary);
}

}
/* fallback hover (IMPORTANT) */
.menu > li:hover > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (min-width: 769px) {

  /* JS-enhanced */
  .menu > li.hovering > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* fallback hover (CRITICAL) */
  .menu > li:hover > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

}
/* =========================================
   SUBMENU ITEM SPACING (FIX)
========================================= */
.submenu li {
  margin: 0;
}

.submenu a {
  display: block;

  padding: 10px 16px;   /* 🔥 main spacing fix */
  line-height: 1.4;     /* improves readability */

  font-size: 14px;
  color: var(--color-dark);

  white-space: nowrap;
}