/* stm25 mega menu (2-level, up to 5 columns)
   - dropdown width follows .container
   - width factor depends on data-cols (JS)
   - arrow points to hovered top item (JS sets --stm-arrow-left)
*/

:root{
  --stm-menu-bg: #ffffff;
  --stm-menu-border: rgba(0,0,0,.10);
  --stm-menu-shadow: 0 14px 32px rgba(0,0,0,.18);
}

/* Make positioning relative to the navbar container */
.menu-section .navbar > .container,
.menu-section .navbar > .container-fluid{
  position: relative;
}

/* Section wrapper */
.menu-section{
  background: var(--stm-menu-bg);
  border-bottom: 1px solid var(--stm-menu-border);
}
.menu-section .navbar{
  padding-top: .5rem;
  padding-bottom: .5rem;
}

/* Mega dropdown item: let dropdown position within container */
.stm-mega{
  position: static;
}

/* Top level link active/hovered */
.stm-open,
.navbar-nav .nav-link.stm-open{
  color: #000;
  position: relative;
}

/* Dropdown panel */
.stm-mega > .dropdown-menu{
  /* Bootstrap already uses position:absolute; keep it explicit */
  position: absolute;
  top: 100%;
  left: 0;

  width: auto; /* JS sets width */
  margin-top: .25rem;

  background: var(--stm-menu-bg);
  border: 1px solid var(--stm-menu-border);
  border-radius: 0; /* sharper edges like krd_index.htm */
  box-shadow: var(--stm-menu-shadow);
  padding: 1rem 1.25rem;

  z-index: 1050;

  /* Arrow positioning from JS */
  --stm-arrow-left: 2rem;
}

/* Arrow (border + fill) */
.stm-mega > .dropdown-menu::before,
.stm-mega > .dropdown-menu::after{
  content: "";
  position: absolute;
  top: -10px;
  left: var(--stm-arrow-left);
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
.stm-mega > .dropdown-menu::before{
  /* border triangle */
  border-bottom: 10px solid var(--stm-menu-border);
}
.stm-mega > .dropdown-menu::after{
  top: -9px;
  border-bottom: 9px solid var(--stm-menu-bg);
}

/* Grid inside mega menu */
.stm-mega-grid{
  display: grid;
  gap: .75rem 1.5rem;
}

/* data-cols drives number of columns (1..5) */
.stm-mega-grid[data-cols="1"]{ grid-template-columns: 1fr; }
.stm-mega-grid[data-cols="2"]{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stm-mega-grid[data-cols="3"]{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stm-mega-grid[data-cols="4"]{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stm-mega-grid[data-cols="5"]{ grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Second-level links */
.stm-mega a.dropdown-item{
  white-space: normal;
  padding: .35rem .5rem;
  border-radius: .25rem;
}
.stm-mega a.dropdown-item:hover,
.stm-mega a.dropdown-item:focus{
  background: rgba(0,0,0,.04);
}


.stm-mega-link{
  display: block;
  color: inherit;
  text-decoration: none;
  padding: .35rem .5rem;
  border-radius: .25rem;
  white-space: normal;
}
.stm-mega-link:hover,
.stm-mega-link:focus{
  background: rgba(0,0,0,.04);
  text-decoration: none;
}

/* Column headings (optional) */
.stm-mega-col-title{
  font-weight: 600;
  font-size: .95rem;
  margin: 0 0 .25rem 0;
}

/* Responsive: on mobile let dropdown behave like Bootstrap (full width inside flow) */
@media (max-width: 991.98px){
  .stm-mega{
    position: relative;
  }
  .stm-mega > .dropdown-menu{
    position: static;
    width: 100% !important;
    margin-top: 0;
    box-shadow: none;
    border-radius: 0;
  }
  .stm-mega > .dropdown-menu::before,
  .stm-mega > .dropdown-menu::after{
    display: none;
  }
}

/* Sticky main menu on desktop */
@media (min-width: 992px){
  .menu-section#site-menu{
    position: sticky;
    top: 0;
    z-index: 1200; /* above content; dropdowns are 1050 */
    background: var(--stm-menu-bg);
  }

  /* subtle separation when stuck */
  .menu-section#site-menu.stm-is-stuck{
    box-shadow: 0 10px 22px rgba(0,0,0,.08);
    border-bottom-color: rgba(0,0,0,.12);
  }
}