/* ==================================================================================================
   File: menus.css
   Description: Responsive desktop and mobile menu stylesheet for the LoTeK Zone 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.4
   Last Updated: 2026-05-31
   License: MIT
   ================================================================================================== */

.site-header {
   position: sticky;
   top: 0;
   z-index: 50;
   background: rgba(3, 7, 12, 0.92);
   border-bottom: 1px solid var(--ltz-line);
   backdrop-filter: blur(18px);
}

.top-strip {
   border-bottom: 1px solid var(--ltz-line-soft);
   font-size: 0.82rem;
   color: var(--ltz-muted);
}

.top-strip__inner,
.brand-bar__inner,
.site-menu-row__inner {
   width: min(var(--ltz-width), calc(100% - 48px));
   margin: 0 auto;
}

.top-strip__inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   min-height: 34px;
}

.top-links {
   display: flex;
   gap: 22px;
}

.top-links a:hover {
   color: var(--ltz-blue-soft);
}

.brand-bar {
   border-bottom: 1px solid var(--ltz-line-soft);
}

.brand-bar__inner {
   position: relative;
   display: grid;
   grid-template-columns: auto 1fr auto;
   gap: 22px;
   align-items: center;
   min-height: 40px;
   padding: 5px 10px;
}

.brand-link {
   display: inline-flex;
   align-items: center;
   gap: 18px;
   min-width: 240px;
}

.brand-logo {
   width: 120px;
   height: auto;
}

.brand-text {
   display: grid;
   gap: 2px;
}

.brand-text strong {
   font-size: 1.35rem;
   letter-spacing: 0.04em;
}

.brand-text small {
   color: var(--ltz-muted);
}

.brand-actions {
   display: inline-flex;
   align-items: center;
   justify-self: end;
   gap: 14px;
}

.site-search-placeholder {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   min-width: 132px;
   min-height: 32px;
   padding: 0 12px;
   border: 1px solid var(--ltz-line-soft);
   border-radius: 6px;
   color: var(--ltz-muted);
   background: rgba(5, 13, 21, 0.7);
   font-size: 0.86rem;
}

.site-search-placeholder .ltz-symbol {
   width: 16px;
   height: 16px;
   color: var(--ltz-blue-soft);
}

.site-menu-row {
   background: rgba(4, 10, 16, 0.82);
   border-bottom: 1px solid rgba(80, 160, 220, 0.18);
}

.site-menu-row__inner {
   position: relative;
}

.mobile-menu-state {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
}

.mobile-menu-button {
   display: none;
}

.phantom-menu-root,
.phantom-submenu {
   margin: 0;
   padding: 0;
   list-style: none;
}

.phantom-menu-root {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 2px;
   padding: 8px 0;
}

.phantom-menu-item {
   position: relative;
}

.phantom-menu-link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   min-height: 42px;
   padding: 0 20px;
   color: #dce7ef;
   border: 1px solid transparent;
   border-radius: 6px;
   font-size: 0.93rem;
   cursor: pointer;
}

.phantom-menu-link:hover,
.phantom-menu-item:focus-within > .phantom-menu-link,
.phantom-menu-top.has-children:hover > .phantom-menu-link {
   color: var(--ltz-blue-soft);
   background: rgba(68, 168, 255, 0.1);
   border-color: var(--ltz-line);
   text-decoration: none;
}

.phantom-menu-top > .phantom-submenu {
   position: absolute;
   top: 100%;
   left: 0;
   display: grid;
   min-width: 240px;
   padding: 12px;
   background: rgba(5, 12, 19, 0.96);
   border: 1px solid var(--ltz-line);
   border-radius: 0 0 8px 8px;
   box-shadow: 0 28px 90px rgba(0, 0, 0, 0.52);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
}

.phantom-menu-top:hover > .phantom-submenu,
.phantom-menu-top:focus-within > .phantom-submenu {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
}

.mega-menu > .phantom-submenu {
   left: 50%;
   grid-template-columns: repeat(5, minmax(150px, 1fr));
   width: min(1120px, calc(100vw - 72px));
   padding: 24px;
   transform: translateX(-50%);
}

.mega-menu > .phantom-submenu > .phantom-submenu-item {
   padding: 0 22px;
   border-left: 1px solid var(--ltz-line-soft);
}

.mega-menu > .phantom-submenu > .phantom-submenu-item:first-child {
   border-left: 0;
}

.mega-menu > .phantom-submenu > .phantom-submenu-item > .phantom-submenu-link {
   display: flex;
   justify-content: flex-start;
   min-height: 0;
   margin: 0 0 14px;
   padding: 0;
   color: var(--ltz-blue-soft);
   border: 0;
   font-size: 0.95rem;
   font-weight: 700;
}

.mega-menu .phantom-submenu.level-4 {
   position: static;
   display: grid;
   gap: 0;
   padding: 0;
   border: 0;
   background: transparent;
   box-shadow: none;
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
}

.mega-menu .phantom-submenu.level-4 .phantom-submenu-link {
   display: block;
   min-height: 0;
   padding: 6px 0;
   color: var(--ltz-muted);
   border: 0;
   font-size: 0.88rem;
}

.mega-menu .phantom-submenu.level-4 .phantom-submenu-link:hover {
   color: #fff;
   background: transparent;
}

.menu-description {
   display: block;
   color: var(--ltz-muted);
   font-size: 0.82rem;
}

.language-switch {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding-left: 14px;
   border-left: 1px solid var(--ltz-line-soft);
}

.language-switch__item {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 34px;
   min-height: 32px;
   border-radius: 4px;
   color: var(--ltz-muted);
   font-size: 0.82rem;
}

.language-switch__item--active,
.language-switch__item:hover {
   color: var(--ltz-blue-soft);
   background: rgba(68, 168, 255, 0.1);
}

@media (max-width: 980px) {
   .top-strip {
      display: none;
   }

   .brand-bar__inner {
      grid-template-columns: 1fr auto 1fr;
      gap: 0 10px;
      min-height: 68px;
   }

   .brand-link {
      min-width: 0;
      grid-column: 1;
      align-self: center;
   }

   .brand-logo {
      width: 66px;
   }

   .brand-text strong {
      font-size: 1rem;
   }

   .brand-text small,
   .site-search-placeholder {
      display: none;
   }

   .mobile-menu-button {
      grid-column: 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 38px;
      padding: 0 14px;
      border: 1px solid var(--ltz-line);
      border-radius: 6px;
      color: var(--ltz-blue-soft);
      background: rgba(6, 15, 24, 0.88);
      cursor: pointer;
   }

   .mobile-menu-icon {
      display: grid;
      gap: 4px;
      width: 18px;
   }

   .mobile-menu-icon span {
      display: block;
      height: 2px;
      background: currentColor;
      border-radius: 2px;
   }

   .brand-actions {
      grid-column: 3;
      justify-self: end;
      align-self: center;
   }

   .language-switch {
      padding-left: 0;
      border-left: 0;
   }

   .phantom-menu-root {
      width: 100%;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      visibility: hidden;
      pointer-events: none;
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      padding: 0;
      transition: max-height 260ms ease, opacity 220ms ease, visibility 0ms linear 260ms;
   }

   .mobile-menu-state:checked ~ .site-menu-row .phantom-menu-root {
      max-height: 1400px;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      padding-top: 14px;
      padding-bottom: 14px;
      transition: max-height 320ms ease, opacity 260ms ease, visibility 0ms linear 0ms;
   }

   .phantom-menu-item,
   .phantom-menu-link {
      width: 100%;
      margin: 0;
   }

   .phantom-menu-link {
      min-height: 42px;
      background: rgba(8, 18, 28, 0.92);
      border-color: var(--ltz-line-soft);
   }

   .phantom-menu-top > .phantom-submenu,
   .mega-menu > .phantom-submenu {
      position: static;
      left: auto;
      top: auto;
      width: 100%;
      max-height: none;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 8px;
      padding: 8px;
      border-radius: 7px;
      box-shadow: none;
      transform: none;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
   }

   .mega-menu > .phantom-submenu > .phantom-submenu-item {
      padding: 14px;
      border: 1px solid var(--ltz-line-soft);
      border-radius: 6px;
   }

   .mega-menu > .phantom-submenu > .phantom-submenu-item:first-child {
      border-left: 1px solid var(--ltz-line-soft);
   }

   .mega-menu .phantom-submenu.level-4 .phantom-submenu-link {
      text-align: center;
   }
}

@media (max-width: 560px) {
   .brand-bar__inner,
   .site-menu-row__inner {
      width: min(100% - 28px, var(--ltz-width));
   }

   .brand-text {
      display: none;
   }

   .mega-menu > .phantom-submenu {
      grid-template-columns: 1fr;
   }
}