/* ==========================================================================
   GLOBAL & TOP LEVEL NAVIGATION
   ========================================================================== */
.dcu-mega-menu {
  width: 100%;
  font-family: var(--global-body-font-family, sans-serif);
  position: relative;
  z-index: 999;
}

.dcu-mega-menu__top-list {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dcu-mega-menu__top-item {
  position: relative;
}

.dcu-mega-menu__top-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #17153e;
  text-decoration: none;
  padding: 24px 0;
  transition: color 0.2s ease;
}

.dcu-mega-menu__top-link:hover,
.dcu-mega-menu__top-item:hover .dcu-mega-menu__top-link {
  color: #FF631F;
}

.dcu-mega-menu__top-link .caret {
  transition: transform 0.3s ease;
}

.dcu-mega-menu__top-item:hover .caret {
  transform: rotate(180deg);
}

/* ==========================================================================
   DESKTOP MEGA DROPDOWN (1025px and up)
   ========================================================================== */
@media (min-width: 1025px) {
  .dcu-mega-menu__dropdown {
    position: absolute;
    top: 100%;
    left: -20px; /* Slight offset to align nicely */
    width: 900px; /* Forces a consistent, spacious dropdown */
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(23, 21, 62, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    padding: 32px;
    pointer-events: none;
  }

  /* Hover to open */
  .dcu-mega-menu__top-item:hover .dcu-mega-menu__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* The Grid Layout inside the Dropdown */
  .dcu-mega-menu__grid {
    display: grid;
    grid-template-columns: 300px 1fr 250px;
    gap: 40px;
  }

/* Adjust grid if there's no extra column */
  .layout-1 .dcu-mega-menu__dropdown { width: 300px; padding: 20px; }
  .layout-1 .dcu-mega-menu__grid { grid-template-columns: 1fr; gap: 0; }
  .layout-1 .dcu-mega-menu__tabs { border-right: none; padding-right: 0; } /* Removes the line & extra spacing */
  .layout-3:not(.has-extra-col) .dcu-mega-menu__grid { grid-template-columns: 300px 1fr; }

  /* --------------------------------------
     Tabs Column
     -------------------------------------- */
  .dcu-mega-menu__tabs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-right: 1px solid #f0f0f0;
    padding-right: 20px;
  }

  .dcu-mega-menu__tab-btn {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: transparent;
    border: none;
    text-align: left;
    padding: 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .dcu-mega-menu__tab-btn.active,
  .dcu-mega-menu__tab-btn:hover {
    background: #f8f9fa;
  }

  .dcu-mega-menu__tab-btn.active .tab-title {
    color: #FF631F;
  }

  .tab-icon { width: 24px; height: 24px; object-fit: contain; }
  .tab-title { display: block; font-weight: 700; color: #17153e; font-size: 16px; margin-bottom: 4px; }
  .tab-desc { display: block; font-size: 13px; color: #666; line-height: 1.4; }

  /* --------------------------------------
     Panels Column (Level 3 Links)
     -------------------------------------- */
  .dcu-mega-menu__panels {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .dcu-mega-menu__panel { display: none; }
  .dcu-mega-menu__panel.active { display: block; animation: fadeIn 0.3s ease; }

  @keyframes fadeIn { from { opacity: 0; transform: translateX(-5px); } to { opacity: 1; transform: translateX(0); } }

  .dcu-mega-menu__level-3-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  }

  .dcu-mega-menu__level-3-link {
    display: flex; align-items: center; gap: 12px;
    text-decoration: none; color: #17153e; font-weight: 500; font-size: 15px;
    transition: color 0.2s;
  }
  .dcu-mega-menu__level-3-link:hover { color: #FF631F; }
  .dcu-mega-menu__level-3-link img { width: 20px; height: 20px; }

  /* Bottom CTA */
  .dcu-mega-menu__bottom-cta {
    display: flex; align-items: center; justify-content: space-between;
    background: #17153e; border-radius: 12px; padding: 16px 24px; margin-top: 32px;
  }
  .cta-content { display: flex; align-items: center; gap: 16px; color: #fff; }
  .cta-content img { width: 32px; border-radius: 4px; }
  .cta-text p { margin: 0; font-size: 14px; font-weight: 600; }

  /* --------------------------------------
     Extra Column
     -------------------------------------- */
  .dcu-mega-menu__extra-col {
    background: #f8f9fa; border-radius: 12px; padding: 24px;
    display: flex; flex-direction: column; align-items: flex-start;
  }
  .extra-tag { background: #e5e7eb; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; margin-bottom: 16px; color: #17153e; }
  .extra-image { width: 100%; border-radius: 8px; margin-bottom: 16px; }
  .extra-content { font-size: 14px; color: #555; margin-bottom: 16px; line-height: 1.5; }
  .extra-link { font-weight: 700; color: #FF631F; text-decoration: none; }
}

/* ==========================================================================
   MOBILE STYLES (Simple Accordion)
   ========================================================================== */
@media (max-width: 1024px) {
  .dcu-mega-menu__top-list { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
  .dcu-mega-menu__top-item { width: 100%; border-bottom: 1px solid #f0f0f0; }
  .dcu-mega-menu__top-link { padding: 16px; width: 100%; justify-content: space-between; }
  
  .dcu-mega-menu__dropdown { display: none; padding: 0 16px 16px; background: #f8f9fa; }
  .dcu-mega-menu__dropdown.is-open { display: block; }
  
  .dcu-mega-menu__grid { display: flex; flex-direction: column; gap: 24px; }
  .dcu-mega-menu__tabs, .dcu-mega-menu__extra-col, .dcu-mega-menu__bottom-cta { display: none; } /* Simplified for mobile */
  
  .dcu-mega-menu__panel { display: block !important; margin-bottom: 24px; }
  .dcu-mega-menu__level-3-list { grid-template-columns: 1fr; }
  
  @media (min-width: 1025px) {
  /* 1. Prevent 0-height inactive panels from messing up flex spacing */
  .dcu-mega-menu__panels {
    justify-content: flex-start !important;
  }
  
  /* 2. Convert panels to a modern CSS Grid height-animator */
  .dcu-mega-menu__panel {
    display: grid !important;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    
    /* Smoothly scales the height (grid-template-rows) and opacity simultaneously */
    transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.25s ease, 
                visibility 0.35s;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* 3. Expand smoothly when hovered/active */
  .dcu-mega-menu__panel.active {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    animation: none !important; /* Disables the old instant-snap animation */
  }
  
  /* 4. Hide the overflowing content while the row is shrinking */
  .dcu-mega-menu__panel > * {
    min-height: 0;
    overflow: hidden;
  }
}