/**
 * @package menu.css
 * @author Simply Wired <info@simplywired.ca>
 * @copyright (c) 2026, Simply Wired
 * @version 0.0.1
 */

:root {
  --menu-bg:rgb(36, 39, 45);
  --menu-text:rgb(255, 255, 255);
  --menu-hover: #eef4f7;
  --menu-accent:rgb(255, 255, 255);
  --menu-border:rgb(41, 45, 51);
  --menu-shadow: 0 10px 30px rgb(0 0 0 / 15%);
  --menu-width: 290px;
}

/* Reset */
.site-nav,
.site-nav ul {
  margin: 0;
  padding: 0;
}

.site-nav ul {
  list-style: none;
}

.site-nav a,
.site-nav button {
  font: inherit;
}

/* Navigation wrapper */
.site-nav {
  display: flex;
  position: relative;
  justify-content: center;
  z-index: 1000;
  width: 100%;
  background: var(--menu-bg);
}

/* Top-level menu */
.menu {
  font-family:Montserrat, Arial, Helvetica, sans-serif;
  font-size:14px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  /*max-width: 1500px;*/
  margin: 0 auto;
}

.menu > li {
  position: relative;
}

.menu a,
.submenu-toggle {
  display: flex;
  align-items: center;
  min-height: 40px;
  color: var(--menu-text);
  background: transparent;
  border: 0;
  text-decoration: none;
  cursor: pointer;
}

.menu > li > a {
  padding:0 0.9rem;
  font-size:14px;
  font-weight:400;
  height:40px;
  justify-content:center;
  white-space: nowrap;
}


/*
  The arrow button is separate from the parent link.
  This allows "Dental Procedures" to remain clickable.
*/
.menu > li.has-submenu {
  display: flex;
  align-items: stretch;
}

.menu > li.has-submenu > a {
  padding-right:0.25rem;
}

.submenu-toggle {
  justify-content: center;
  /*width: 36px;*/
  padding:0 .625rem;
}

.submenu-toggle:hover,
.submenu-toggle:focus-visible {
  /*color: var(--menu-accent);*/
  background:rgb(41, 45, 51);
  outline: none;
}

/* Arrow icon */
.arrow {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease;
}

/* Top-level arrows point down */
.menu > li > .submenu-toggle .arrow {
  transform: rotate(45deg) translateY(-2px);
}

/* Nested arrows point right */
.submenu .submenu-toggle .arrow {
  transform: rotate(-45deg);
}

/* Rotate arrows for open menus */
.has-submenu:hover > .submenu-toggle .arrow,
.has-submenu:focus-within > .submenu-toggle .arrow,
.has-submenu.is-open > .submenu-toggle .arrow {
  transform: rotate(225deg) translate(-2px, -2px);
}

#main-menu  > li.has-submenu:hover > a,
#main-menu  > li.has-submenu:focus-visible > a,
#main-menu  > li.has-submenu.is-open > a {
  border-top:1px solid rgb(255, 255, 255);
}
#main-menu > li.has-submenu:hover > button,
#main-menu > li.has-submenu:focus-within > button,
#main-menu > li.has-submenu.is-open > button {
  border-top:1px solid rgb(255, 255, 255);
}

/* Submenus */
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: var(--menu-width);
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  box-shadow: var(--menu-shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition:
      opacity 160ms ease,
      transform 160ms ease,
      visibility 160ms ease;
}

/* Submenu items */
.submenu li {
  position: relative;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--menu-border);
}

.submenu li:last-child {
  border-bottom: 0;
}

.submenu a {
  font-size:13px;
  flex: 1;
  min-width: 0;
  min-height:30px;
  padding: 0.25rem 0.85rem;
  color: var(--menu-text);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/*.submenu:hover .arrow {*/
/*  background-color:rgb(41, 45, 51);*/
/*}*/
/*.submenu:hover button {*/
/*  background-color:rgb(41, 45, 51);*/
/*}*/
.submenu a:hover ~ button {
  background:rgb(41, 45, 51);
}
.submenu a:hover,
.submenu a:focus-visible {
  /*color: var(--menu-accent);*/
  background:rgb(41, 45, 51);
  outline: none;
}

.submenu .submenu-toggle {
  flex: 0 0 38px;
}

/* Open menus on hover, focus, or JS-controlled click */
.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu,
.has-submenu.is-open > .submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Second level and deeper open horizontally */
.submenu .submenu {
  top: -1px;
  left: 100%;
  transform: translateX(8px);
}

.submenu .has-submenu:hover > .submenu,
.submenu .has-submenu:focus-within > .submenu,
.submenu .has-submenu.is-open > .submenu {
  transform: translateX(0);
}

/* Applied by JavaScript when a submenu would overflow right */
.opens-left > .submenu {
  right: 100%;
  left: auto;
  transform: translateX(-8px);
}

.opens-left:hover > .submenu,
.opens-left:focus-within > .submenu,
.opens-left.is-open > .submenu {
  transform: translateX(0);
}

/* Mobile menu button */
.menu-toggle {
  display: none;
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 1rem;
  color: var(--menu-text);
  background: var(--menu-bg);
  border: 0;
  border-bottom: 1px solid var(--menu-border);
  text-align: left;
  cursor: pointer;
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
  color: var(--menu-accent);
  /*background:rgb(41, 45, 51);*/
  outline: none;
}

.menu-toggle-icon {
  margin-right: 0.5rem;
}

/* Mobile layout */
@media (max-width: 900px) {
  .menu-toggle {
    display: block;
  }

  .menu {
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  .menu.is-open {
    display: flex;
  }

  .menu > li {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--menu-border);
  }

  .menu > li > a {
    flex: 1;
    min-height: 50px;
    white-space: normal;
  }

  .menu > li > .submenu-toggle {
    flex: 0 0 50px;
    width: 50px;
  }

  /*
    On mobile, submenus are no longer absolutely positioned.
    They expand vertically.
  */
  .submenu,
  .submenu .submenu {
    position: static;
    display: none;
    flex: 0 0 100%;
    width: 100%;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    border: 0;
    box-shadow: none;
    background: #f6f8f9;
  }

  .has-submenu.is-open > .submenu {
    display: block;
  }

  .submenu li {
    flex-wrap: wrap;
  }

  .submenu a {
    min-height: 46px;
    padding-left: 1.5rem;
  }

  .submenu .submenu-toggle {
    flex: 0 0 46px;
    width: 46px;
  }

  .submenu .submenu a {
    padding-left: 2.5rem;
    background: #edf1f3;
  }

  .submenu .submenu .submenu a {
    padding-left: 3.5rem;
  }

  .submenu .submenu .submenu .submenu a {
    padding-left: 4.5rem;
  }

  .submenu .submenu .arrow {
    transform: rotate(45deg);
  }

  .submenu .has-submenu.is-open > .submenu-toggle .arrow {
    transform: rotate(225deg);
  }

  .opens-left > .submenu {
    transform: none;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .arrow,
  .submenu {
    transition: none;
  }
}