/* ==================================================================================================
   File: menus.css
   Description: Navigation stylesheet for the Monowlith Phantom CMS theme.
   Author: LoTeK (Stephan Kühn)
   Mail: info@lotek-zone.com
   Web: https://lotek-zone.com/
   GitHub: https://github.com/LoTeK-Zone
   Repository: https://github.com/LoTeK-Zone/phantom-cms
   Version: 0.1.1
   Last Updated: 2026-05-27
   License: MIT
   ================================================================================================== */
.mono-nav {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 30px;
}
.mono-nav-link {
   position: relative;
   display: inline-flex;
   align-items: center;
   min-height: 36px;
   padding: 0 0 0 15px;
   color: var(--mono-ink);
   border-left: 3px solid transparent;
   font-size: 0.95rem;
   letter-spacing: 0.035em;
}
.mono-nav-link:hover,
.mono-nav-link:focus,
.mono-nav-link.is-active,
.mono-nav-link[aria-current="page"] {
   color: var(--mono-blue-dark);
   border-left-color: var(--mono-blue-dark);
   text-decoration: none;
}
.mono-search {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 34px;
   height: 34px;
   color: var(--mono-ink);
   font-size: 1.45rem;
   line-height: 1;
}
.menu-main {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   flex-wrap: wrap;
   gap: 30px;
   margin: 0;
   padding: 0;
   list-style: none;
}
.menu-main .menu-item {
   position: relative;
   list-style: none;
}
.menu-main .menu-link,
.menu-main .menu-text {
   display: inline-flex;
   align-items: center;
   min-height: 36px;
   padding: 0 0 0 15px;
   color: var(--mono-ink);
   border-left: 3px solid transparent;
   font-size: 0.95rem;
   letter-spacing: 0.035em;
}
.menu-main .menu-link:hover,
.menu-main .menu-link:focus,
.menu-main .menu-link.is-active,
.menu-main .menu-link[aria-current="page"] {
   color: var(--mono-blue-dark);
   border-left-color: var(--mono-blue-dark);
   text-decoration: none;
}
.menu-main .submenu {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   z-index: 10;
   min-width: 220px;
   margin: 10px 0 0;
   padding: 10px;
   list-style: none;
   background: #fffefa;
   border: 1px solid var(--mono-line);
   box-shadow: 0 18px 40px rgba(20, 38, 70, 0.14);
}
.menu-main .menu-item:hover > .submenu,
.menu-main .menu-item:focus-within > .submenu {
   display: grid;
   gap: 6px;
}
.menu-main .submenu .menu-link,
.menu-main .submenu .menu-text {
   width: 100%;
   justify-content: flex-start;
}
@media (max-width: 980px) {
   .mono-nav,
   .menu-main {
      justify-content: flex-start;
      gap: 16px;
   }
}
@media (max-width: 700px) {
   .mono-nav,
   .menu-main {
      display: grid;
      grid-template-columns: 1fr;
      width: 100%;
      gap: 7px;
   }
   .mono-nav-link,
   .menu-main .menu-link,
   .menu-main .menu-text {
      justify-content: center;
      width: 100%;
      min-height: 38px;
      padding: 0 12px;
      border-left: 3px solid transparent;
      background: rgba(241, 247, 250, 0.76);
   }
   .mono-search {
      display: none;
   }
   .menu-main .submenu {
      position: static;
      display: grid;
      margin: 8px 0 0;
      box-shadow: none;
   }
}