/* ==== Mega panel that lists ALL submenus inline (no flyouts) ==== */
/* Works with your existing Bootstrap markup & IDs */

:root{
  --mm-bg: #fff;
  --mm-border:#e5e7eb;
  --mm-shadow: 0 12px 40px rgba(2,8,23,.10);
  --mm-accent:#0ea5e9;
  --mm-heading:#0f172a;
  --mm-link:#334155;
}

/* Base navbar polish (optional) */
#navbar{ position:sticky; top:0; z-index:1030; background:rgba(255,255,255,.9); backdrop-filter:blur(8px); }

/* TOP-LEVEL: show dropdown as a wide panel */
@media (min-width: 992px){
  #navbar .nav-item.dropdown{ position: static; } /* so panel can stretch */
  #navbar .nav-item.dropdown > .dropdown-menu{
    display:block; /* we control visibility with opacity/transform */
    position: absolute;
    left: 0; right: 0; top: 100%;
    margin: 0 !important;
    background: var(--mm-bg);
    border: 1px solid var(--mm-border);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    box-shadow: var(--mm-shadow);
    padding: 18px 24px;
    min-height: 180px;
    transform: translateY(10px);
    opacity: 0; visibility: hidden;
    transition: transform .18s ease, opacity .18s ease, visibility .18s ease;
  }
  /* Open the panel on hover/focus-within */
  #navbar .nav-item.dropdown:hover > .dropdown-menu,
  #navbar .nav-item.dropdown:focus-within > .dropdown-menu{
    transform: translateY(0);
    opacity: 1; visibility: visible;
  }
}

/* INSIDE THE PANEL: turn every second-level parent into a column with a heading,
   and list ALL of its children inline (no flyouts) */
#navbar .dropdown-menu .menu-item-has-children > .dropdown-item{
  /* acts like a column heading */
  font-weight: 800;
  color: var(--mm-heading);
  pointer-events: none; /* it's just a heading now */
  background: transparent !important;
  padding: 8px 0 6px 0;
}

/* Remove all carets/flyout arrows */
#navbar .dropdown-menu .dropdown > .dropdown-item::after,
#navbar .dropdown-toggle::after{ content: none !important; }

/* Make ALL nested dropdown menus visible & inline inside the panel */
#navbar .dropdown-menu .menu-item-has-children > .dropdown-menu{
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 14px;
  padding: 0 0 12px 0;
  margin: 0 !important;
  border: 0; box-shadow: none; background: transparent;
  opacity: 1 !important; visibility: visible !important; transform: none !important;
}

/* If you have third level, render it inline too (as simple list) */
#navbar .dropdown-menu .menu-item-has-children .menu-item-has-children > .dropdown-menu{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-left: 0; /* keep tidy */
}

/* Leaf links styling */
#navbar .dropdown-menu .dropdown-item{
  color: var(--mm-link);
  font-weight: 500;
  background: transparent;
  border-radius: 8px;
  padding: 8px 10px;
  line-height: 1.25;
}
#navbar .dropdown-menu .dropdown-item:hover,
#navbar .dropdown-menu .dropdown-item:focus{
  color: var(--mm-accent);
  background: rgba(14,165,233,.10);
  transform: translateX(1px);
}

/* PANEL LAYOUT: grid columns for groups (Bachelor/Master/etc.) */
@media (min-width: 992px){
  /* the first level inside the panel becomes the groups grid */
  #navbar .nav-item.dropdown > .dropdown-menu > .nav-item,
  #navbar .nav-item.dropdown > .dropdown-menu > .menu-item{
    display: block;
  }
  #navbar .nav-item.dropdown > .dropdown-menu{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px 24px;
  }

  /* Make specific large menus wider if needed */
  #menu-item-37 > .dropdown-menu,      /* Programet */
  #menu-item-2552 > .dropdown-menu{    /* Për Riinvest */
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* MOBILE: keep stacked accordion-like (everything already inline) */
@media (max-width: 991.98px){
  #navbar .dropdown-menu{
    display:block; position: static;
    padding: 6px 0 6px 10px; margin:0 !important;
    border:0; box-shadow:none; background: transparent;
    opacity:1; visibility:visible; transform:none;
  }
  #navbar .dropdown-menu .menu-item-has-children > .dropdown-menu{
    grid-template-columns: 1fr;
  }
}