/* ==================================================================================================
   File: menus.css
   Description: Responsive desktop and mobile menu stylesheet for the Deep Fiction Phantom CMS theme.
   Author: LoTeK (Stephan Kühn)
   Mail: info@deep-fiction.com
   Web: https://lotek-zone.com/
   GitHub: https://github.com/LoTeK-Zone
   Repository: https://github.com/LoTeK-Zone/phantom-cms
   Version: 0.1.11
   Last Updated: 2026-05-24
   License: MIT
   ================================================================================================== */

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

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

.deepfiction-menu__list {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 4px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.deepfiction-menu__item {
   position: relative;
   margin: 0;
   padding: 0;
   list-style: none;
}

.deepfiction-menu__link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   min-height: 38px;
   padding: 0 12px;
   color: #c8d1d6;
   border-radius: 9px;
   font-size: 0.91rem;
   font-weight: 600;
   line-height: 1;
   transition: color 160ms ease, background 160ms ease;
}

.deepfiction-menu__link:hover,
.deepfiction-menu__link:focus-visible,
.deepfiction-menu__item:focus-within > .deepfiction-menu__link,
.deepfiction-menu__item--has-dropdown:hover > .deepfiction-menu__link {
   color: #f4efe8;
   background: rgba(183, 130, 66, 0.1);
   outline: none;
}

.deepfiction-menu__submenu-indicator {
   color: #b78242;
   line-height: 1;
}

.deepfiction-menu__dropdown {
   position: absolute;
   left: 50%;
   top: 100%;
   z-index: 80;
   display: grid;
   grid-template-columns: minmax(220px, 1fr);
   min-width: 300px;
   margin: 0;
   padding: 12px;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transform: translateX(-50%);
   background: rgba(4, 12, 18, 0.96);
   border: 1px solid rgba(183, 130, 66, 0.35);
   border-radius: 16px;
   box-shadow: 0 22px 80px rgba(0, 0, 0, 0.42);
   backdrop-filter: blur(18px);
   transition: opacity 150ms ease, visibility 0ms linear 150ms;
}

.deepfiction-menu__item--has-dropdown:hover > .deepfiction-menu__dropdown,
.deepfiction-menu__item--has-dropdown:focus-within > .deepfiction-menu__dropdown {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
   transition: opacity 120ms ease, visibility 0ms linear 0ms;
}

.deepfiction-menu__dropdown-link {
   display: grid;
   gap: 4px;
   padding: 12px 14px;
   color: #e1e8ec;
   border-radius: 12px;
}

.deepfiction-menu__dropdown-link:hover,
.deepfiction-menu__dropdown-link:focus-visible {
   color: #f4efe8;
   background: rgba(105, 169, 214, 0.1);
   outline: none;
}

.deepfiction-menu__label {
   color: #8fa5b1;
   font-size: 0.78rem;
   line-height: 1.35;
}

@media (min-width: 761px) {
   .deepfiction-menu__submenu-state:checked ~ .deepfiction-menu__dropdown {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
   }
}

@media (max-width: 760px) {
   .mobile-menu-button {
      position: absolute;
      top: 12px;
      left: 50%;
      z-index: 3;
      transform: translateX(-50%);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 38px;
      padding: 0 14px;
      color: #f2eee7;
      border: 1px solid rgba(183, 130, 66, 0.42);
      border-radius: 10px;
      background: rgba(5, 13, 19, 0.75);
      cursor: pointer;
   }

   .mobile-menu-icon {
      display: inline-flex;
      flex-direction: column;
      gap: 3px;
   }

   .mobile-menu-icon span {
      display: block;
      width: 15px;
      height: 2px;
      background: #d3a968;
      border-radius: 99px;
   }

   .mobile-menu-text {
      font-size: 0.82rem;
      font-weight: 700;
   }

   .deepfiction-menu__list {
      grid-row: 2;
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: stretch;
      width: 100%;
      max-height: 0;
      gap: 8px;
      margin: 0;
      padding: 0 0 0;
      opacity: 0;
      overflow: hidden;
      visibility: hidden;
      pointer-events: none;
      transition: max-height 260ms ease, opacity 220ms ease, padding 220ms ease, visibility 0ms linear 260ms;
   }

   .mobile-menu-state:checked ~ .deepfiction-menu__list {
      max-height: 1200px;
      padding: 12px 0 12px;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: max-height 300ms ease, opacity 240ms ease, padding 220ms ease, visibility 0ms linear 0ms;
   }

   .deepfiction-menu__item,
   .deepfiction-menu__item--has-dropdown {
      display: block;
      width: 100%;
      min-width: 0;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
   }

   .deepfiction-menu__link {
      width: 100%;
      min-height: 38px;
      justify-content: center;
      text-align: center;
      color: #c8d1d6;
      background: rgba(8, 20, 28, 0.82);
      border: 1px solid rgba(133, 179, 210, 0.12);
      box-shadow: none;
      text-shadow: none;
   }

   .deepfiction-menu__link:hover,
   .deepfiction-menu__link:focus-visible,
   .deepfiction-menu__item:focus-within > .deepfiction-menu__link,
   .deepfiction-menu__item--has-dropdown:hover > .deepfiction-menu__link,
   .deepfiction-menu__submenu-state:checked + .deepfiction-menu__submenu-button {
      color: #f4efe8;
      background: rgba(183, 130, 66, 0.1);
      border-color: rgba(183, 130, 66, 0.28);
      outline: none;
   }

   .deepfiction-menu__submenu-state:checked + .deepfiction-menu__submenu-button .deepfiction-menu__submenu-indicator {
      transform: rotate(180deg);
   }

   .deepfiction-menu__dropdown,
   .deepfiction-menu__item--has-dropdown:hover > .deepfiction-menu__dropdown,
   .deepfiction-menu__item--has-dropdown:focus-within > .deepfiction-menu__dropdown {
      position: static;
      left: auto;
      top: auto;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      width: 100%;
      min-width: 0;
      max-height: 0;
      gap: 0;
      margin: 0;
      padding: 0;
      opacity: 0;
      overflow: hidden;
      visibility: visible;
      pointer-events: none;
      transform: none;
      background: rgba(2, 8, 12, 0.6);
      border: 0 solid rgba(183, 130, 66, 0);
      border-radius: 14px;
      box-shadow: none;
      transition: max-height 260ms ease, opacity 220ms ease, padding 220ms ease, gap 220ms ease, margin 220ms ease;
   }

   .deepfiction-menu__submenu-state:checked + .deepfiction-menu__submenu-button ~ .deepfiction-menu__dropdown {
      max-height: 620px;
      gap: 8px;
      margin: 8px 0 0;
      padding: 12px;
      opacity: 1;
      pointer-events: auto;
   }

   .deepfiction-menu__dropdown-link {
      display: grid;
      align-content: center;
      justify-items: center;
      min-height: 58px;
      width: 100%;
      padding: 10px 12px;
      color: #e1e8ec;
      text-align: center;
      background: rgba(8, 20, 28, 0.62);
      border: 1px solid rgba(133, 179, 210, 0.1);
      box-sizing: border-box;
   }

   .deepfiction-menu__dropdown-link:hover,
   .deepfiction-menu__dropdown-link:focus-visible {
      color: #f4efe8;
      background: rgba(105, 169, 214, 0.1);
      border-color: rgba(105, 169, 214, 0.22);
      outline: none;
   }
}

@media (max-width: 430px) {
   .deepfiction-menu__dropdown {
      grid-template-columns: 1fr;
   }
}