/* ==============================
   1. TOP-LEVEL MENU (HORIZONTAL)
============================== */
#block-nikola-newmainnavigation > ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

#block-nikola-newmainnavigation li {
  position: relative;
}

/* Links + spans */
#block-nikola-newmainnavigation a,
#block-nikola-newmainnavigation span {
  display: block;
  text-decoration: none;
  color: var(--gt-black);
  padding: 12px 16px;
}

/* ==============================
   2. TOP-LEVEL DIVIDERS
============================== */
#block-nikola-newmainnavigation > ul > li:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 22px;
  background-color: #b3a369;
}

/* ==============================
   3. SUBMENUS (HIDDEN)
============================== */
#block-nikola-newmainnavigation ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;

  background: #e6e6e6;
  min-width: 240px;
  padding: 0;
  margin: 0;
  list-style: none;

  border-bottom: 6px solid #b3a369;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 999;
}

/* Show when open */
#block-nikola-newmainnavigation li.open > ul {
  display: block;
}

/* ==============================
   4. SUBMENU ITEMS
============================== */
#block-nikola-newmainnavigation ul ul li {
  border-bottom: 1px solid #bfc5c9;
}

#block-nikola-newmainnavigation ul ul li:last-child {
  border-bottom: none;
}

#block-nikola-newmainnavigation ul ul a,
#block-nikola-newmainnavigation ul ul span {
  padding: 16px 20px;
  color: #7a6a2f;
  font-weight: 600;
  background: #fff;
}

#block-nikola-newmainnavigation ul ul a:hover {
  background: #dcdcdc;
}

/* ==============================
   5. CHEVRONS
============================== */
#block-nikola-newmainnavigation li.has-submenu > a,
#block-nikola-newmainnavigation li.has-submenu > span {
  position: relative;
  padding-right: 36px;
}

/* Default = DOWN */
#block-nikola-newmainnavigation li.has-submenu > a::after,
#block-nikola-newmainnavigation li.has-submenu > span::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  width: 14px;
  height: 14px;
  background: url('/themes/contrib/gt_theme/images/gt-gold-chevron.svg') no-repeat center/contain;
  transition: transform 0.2s ease;
}

/* Open = UP */
#block-nikola-newmainnavigation li.open > a::after,
#block-nikola-newmainnavigation li.open > span::after {
  transform: translateY(-50%) rotate(-90deg);
}

/* ==============================
   6. UX IMPROVEMENTS
============================== */
#block-nikola-newmainnavigation span {
  cursor: pointer;
}


/* ==============================
   MOBILE STYLES
============================== */
.menu-toggle {
  display: none;
  background: #b3a369;
  color: #000;
  padding: 10px 16px;
  border: none;
  cursor: pointer;
  font-weight: bold;
}

/* Breakpoint */
@media (max-width: 768px) {

  /* Show hamburger */
  .menu-toggle {
    display: block;
  }

  /* Collapse menu */
  #block-nikola-newmainnavigation > ul {
    display: none;
    flex-direction: column;
    width: 100%;
    background: #fff;
  }

  /* When active */
  #block-nikola-newmainnavigation.active > ul {
    display: flex;
  }

  /* Remove dividers */
  #block-nikola-newmainnavigation > ul > li::before {
    display: none;
  }

  /* Full-width items */
  #block-nikola-newmainnavigation li {
    width: 100%;
  }

  /* Submenus now flow inline */
  #block-nikola-newmainnavigation ul ul {
    position: static;
    box-shadow: none;
    border-bottom: none;
  }

  /* Indent submenu */
  #block-nikola-newmainnavigation ul ul a {
    padding-left: 32px;
  }
}