/* ========================================
   MEGA MENU - Trelleborg style (3-level cascade, hover driven)
   Separate CSS file (enqueued after main style)
   Add CSS class "has-mega-menu" to the menu item in WP admin.
======================================== */

/* Trigger item */
#menu-primary-menu li.has-mega-menu {
  position: static; /* let mega span full header width */
}

#menu-primary-menu li.has-mega-menu > a {
  position: relative;
}

/* Hide native WP dropdown sub-menus on desktop (mega replaces them) */
@media screen and (min-width: 901px) {
  #menu-primary-menu .sub-menu {
    display: none !important;
  }
}

/* Keep the theme's native caret (❯) on the trigger — same as the live site.
   Our underline lives on ::before (not ::after), so the theme's hover-rotate
   only spins the caret and can no longer turn the underline into a vertical bar. */

/* Underline indicator on ::before */
#menu-primary-menu li.has-mega-menu > a::before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--blue);
  transition: width 0.2s ease;
}

#menu-primary-menu li.has-mega-menu.mega-open > a::before {
  width: 100%;
}

/* Anchor for the absolutely-positioned mega panel */
header .header-wrapper {
  position: relative;
}

/* ---- Mega dropdown panel ---- */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
  border-top: 1px solid #ececec;
  z-index: 10001;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  font-size: 0.9rem;
}

.mega-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}

.mega-inner {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 1140px;
  margin: 0 auto;
  padding: 1.5rem 0 2rem;
  min-height: 420px;
  overflow-x: auto; /* deep menus (e.g. Materials, 4 levels) scroll horizontally */
}

/* ---- Columns ---- */
.mega-col {
  width: 300px;
  flex: 0 0 300px;
  padding: 0 0.75rem;
  border-right: 1px solid #f0f0f0;
}

.mega-col:last-child {
  border-right: none;
}

/* Column header (gray box: title on top, "View page" below) */
.mega-col-header {
  background: #ececec;
  padding: 0.85rem 0.9rem;
  margin-bottom: 0.4rem;
}

.mega-title {
  display: block;
  font-weight: 700;
  color: #222;
  font-size: 1rem;
  line-height: 1.2;
  text-transform: none;
}

.mega-title:hover {
  color: var(--blue);
}

.mega-view-page {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: #555;
  font-weight: 400;
}

.mega-view-page:hover {
  color: var(--blue);
}

/* ---- Lists ---- */
.mega-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 60vh;
  overflow-y: auto;
}

/* Thin scrollbar (matches reference) */
.mega-list::-webkit-scrollbar {
  width: 6px;
}
.mega-list::-webkit-scrollbar-thumb {
  background: #bdbdbd;
  border-radius: 3px;
}
.mega-list::-webkit-scrollbar-track {
  background: transparent;
}

.mega-list li {
  margin: 0;
  border-bottom: 1px solid #efefef;
}

.mega-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0.7rem 0.9rem;
  color: #3a3a3a;
  line-height: 1.3;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}

.mega-title,
.mega-view-page {
  text-decoration: none;
}

.mega-list li a .arrow {
  font-size: 1.15em;
  color: #999;
  flex: 0 0 auto;
  transition: color 0.12s ease, transform 0.12s ease;
}

/* Hover + active state = gray highlight spanning full column width */
.mega-list li:hover > a,
.mega-list li.active > a {
  background: #f3f3f3;
  color: #111;
}

.mega-list li.active > a {
  font-weight: 600;
}

.mega-list li:hover > a .arrow,
.mega-list li.active > a .arrow {
  color: var(--blue);
}

/* ---- Tools column (ACF, pinned to the right) ---- */
.mega-tools-col {
  order: 100; /* always sits right of the cascade columns */
  margin-left: auto;
  width: 340px;
  flex: 0 0 340px;
  padding: 0 0.75rem 0 1.5rem;
}

.mega-tools-title {
  font-weight: 700;
  color: #222;
  font-size: 1rem;
  margin-bottom: 1.25rem;
}

.mega-tools-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-tools-list li {
  margin: 0 0 1.25rem;
}

.mega-tools-list li a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--blue);
  text-decoration: none;
  line-height: 1.3;
}

.mega-tools-list li a:hover {
  text-decoration: underline;
}

.mega-tool-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: 0 0 34px;
}

/* ---- Mobile: hide mega, fall back to default nav ---- */
@media screen and (max-width: 900px) {
  .mega-menu {
    display: none !important;
  }
}

/* Legacy top nav layout (moved out of style.css) */
header .header-wrapper nav ul {
  width: 650px;
  padding: 0;
  margin: 0;
  display: flex;
  column-gap: 2rem;
  list-style: none;
  justify-content: space-between;
}
header .header-wrapper nav ul a {
  color: var(--text-gray);
  text-transform: uppercase;
}
header .header-wrapper nav ul a:hover {
  color: var(--blue);
}