/* ==================================================================================================
   File: menus.css
   Description: Responsive menu styling for the Sense Thesis 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.0
   Last Updated: 2026-05-24
   License: MIT
   ================================================================================================== */

.sensethesis-menu__list {
   grid-column: 2;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   margin: 0;
   padding: 0;
   list-style: none;
}

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

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

.sensethesis-menu__link {
   appearance: none;
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 34px;
   padding: 0 13px;
   border: 1px solid transparent;
   border-radius: 999px;
   background: transparent;
   color: var(--st-text-soft);
   font-family: var(--st-font-main);
   font-size: 0.82rem;
   font-weight: 500;
   letter-spacing: 0.015em;
   text-decoration: none;
   cursor: pointer;
   transition: color 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 260ms ease;
}

.sensethesis-menu__link::after {
   content: "";
   position: absolute;
   left: 50%;
   bottom: 2px;
   width: 0;
   height: 1px;
   transform: translateX(-50%);
   background: linear-gradient(90deg, transparent, var(--st-cyan), transparent);
   box-shadow: 0 0 12px rgb(145 232 255 / 70%);
   transition: width 260ms ease;
}

.sensethesis-menu__link:hover,
.sensethesis-menu__link:focus-visible {
   color: var(--st-text-main);
   border-color: rgb(180 220 255 / 18%);
   background: rgb(220 245 255 / 5%);
   outline: none;
}

.sensethesis-menu__link:hover::after,
.sensethesis-menu__link:focus-visible::after {
   width: 28px;
}

.sensethesis-menu__submenu-button {
   gap: 5px;
}

.sensethesis-menu__submenu-indicator {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-left: 0.25em;
   font-size: 0.9em;
   line-height: 1;
}

.sensethesis-menu__item--library .sensethesis-menu__link {
   min-width: 128px;
   border-color: rgb(226 196 127 / 52%);
   color: var(--st-gold-soft);
   background: rgb(226 196 127 / 5%);
}

.sensethesis-menu__item--library .sensethesis-menu__link::before {
   content: "▥";
   margin-right: 7px;
   font-size: 0.95em;
}

.sensethesis-menu__dropdown {
   position: absolute;
   top: 100%;
   left: 50%;
   z-index: 50;
   display: grid;
   grid-template-columns: repeat(2, minmax(180px, 1fr));
   gap: 8px;
   width: min(540px, calc(100vw - 40px));
   padding: 12px;
   border: 1px solid rgb(170 220 255 / 20%);
   border-radius: 18px;
   background: linear-gradient(180deg, rgb(8 19 28 / 88%), rgb(3 8 13 / 92%));
   box-shadow: 0 18px 42px rgb(0 0 0 / 45%), inset 0 1px 0 rgb(255 255 255 / 5%);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transform: translateX(-50%);
   backdrop-filter: blur(12px) saturate(120%);
   -webkit-backdrop-filter: blur(12px) saturate(120%);
   transition: opacity 180ms ease, visibility 0ms linear 180ms;
}

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

.sensethesis-menu__dropdown-link {
   display: flex;
   flex-direction: column;
   gap: 4px;
   min-height: 58px;
   padding: 12px 13px;
   border: 1px solid rgb(180 220 255 / 13%);
   border-radius: 14px;
   background: rgb(220 245 255 / 5%);
   color: var(--st-text-main);
   text-decoration: none;
   transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.sensethesis-menu__dropdown-link:hover,
.sensethesis-menu__dropdown-link:focus-visible {
   border-color: rgb(135 225 255 / 42%);
   background: rgb(220 245 255 / 10%);
   outline: none;
   transform: translateY(-1px);
}

.sensethesis-menu__label {
   color: var(--st-text-muted);
   font-size: 0.76rem;
   line-height: 1.45;
}

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

   .sensethesis-menu__item--has-dropdown:hover > .sensethesis-menu__dropdown,
   .sensethesis-menu__item--has-dropdown:focus-within > .sensethesis-menu__dropdown {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
   }
}

@media (max-width: 760px) {
   .sensethesis-menu__list {
      grid-column: 1 / -1;
      width: 100%;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      visibility: hidden;
      pointer-events: none;
      display: flex;
      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 ~ .sensethesis-menu__list {
      max-height: 760px;
      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;
   }

   .sensethesis-menu__item,
   .sensethesis-menu__link,
   .sensethesis-menu__submenu-button {
      margin: 0;
   }

   .sensethesis-menu__link {
      width: 100%;
      min-height: 42px;
      justify-content: center;
      text-align: center;
      border-color: rgb(180 220 255 / 16%);
      background: rgb(220 245 255 / 6%);
   }

   .sensethesis-menu__link::before,
   .sensethesis-menu__link::after {
      display: none;
      content: none;
   }

   .sensethesis-menu__item--library .sensethesis-menu__link::before {
      display: inline-flex;
      content: "▥";
   }

   .sensethesis-menu__item--has-dropdown:hover > .sensethesis-menu__dropdown,
   .sensethesis-menu__item--has-dropdown:focus-within > .sensethesis-menu__dropdown {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
   }

   .sensethesis-menu__dropdown {
      position: static;
      left: auto;
      top: auto;
      width: 100%;
      max-height: 0;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin: 0;
      padding: 0 8px;
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: none;
      transition: max-height 260ms ease, opacity 220ms ease, visibility 0ms linear 260ms, padding 260ms ease;
   }

   .sensethesis-menu__submenu-state:checked ~ .sensethesis-menu__dropdown {
      max-height: 520px;
      margin-top: 8px;
      padding: 8px;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: max-height 320ms ease, opacity 260ms ease, visibility 0ms linear 0ms, padding 260ms ease;
   }

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

   .sensethesis-menu__dropdown-link {
      justify-content: center;
      min-height: 46px;
      text-align: center;
   }
}

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