/* ==================================================================================================
   File: menus.css
   Description: Autonomous menu styling for the generated I AM SOL.AI Phantom CMS menu.
   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.5.7
   Last Updated: 2026-05-23
   License: MIT
   ================================================================================================== */

.iamsol-menu__list {
   --iamsol-menu-font-main: "Geist", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
   --iamsol-menu-font-mono: "Geist Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
   --iamsol-menu-radius-pill: 999px;
   --iamsol-menu-text-soft: #b9d6e6;
   --iamsol-menu-text-dim: #526a7c;
   --iamsol-menu-text-cyan-hover: #9af7ff;
   --iamsol-menu-cyan: #5eeeff;
   --iamsol-menu-cyan-glow: #5eeeff88;
   --iamsol-menu-link-fill: #dff7ff0d;
   --iamsol-menu-link-fill-hover: #dff7ff20;
   --iamsol-menu-link-border: #b8f3ff22;
   --iamsol-menu-link-border-hover: #7df3ff78;
   --iamsol-menu-underline: linear-gradient(90deg, transparent, var(--iamsol-menu-cyan), transparent);
   --iamsol-menu-dropdown-fill-top: rgb(8 20 32 / 50%);
   --iamsol-menu-dropdown-fill-bottom: rgb(3 9 18 / 50%);
   --iamsol-menu-dropdown-shadow-fill: rgb(0 0 0 / 55%);
   --iamsol-menu-dropdown-card-fill: #dff7ff0d;
   --iamsol-menu-dropdown-card-fill-hover: #dff7ff20;
   --iamsol-menu-glass-border: #b8f3ff38;
   --iamsol-menu-blur-link: 6px;
   --iamsol-menu-blur-dropdown: 4px;
   grid-column: 2;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 6px;
   padding: 0;
   margin: 0;
   list-style: none;
}

.iamsol-menu__submenu-state {
   position: absolute;
   width: 1px;
   height: 1px;
   opacity: 0;
   pointer-events: none;
}

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

.iamsol-menu__link {
   appearance: none;
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 34px;
   padding: 0 13px;
   border-radius: var(--iamsol-menu-radius-pill);
   color: var(--iamsol-menu-text-soft);
   text-decoration: none;
   font-family: var(--iamsol-menu-font-main);
   font-weight: 500;
   font-size: 0.82rem;
   letter-spacing: 0.015em;
   background: var(--iamsol-menu-link-fill);
   border: 1px solid var(--iamsol-menu-link-border);
   cursor: pointer;
   backdrop-filter: blur(var(--iamsol-menu-blur-link)) saturate(118%);
   -webkit-backdrop-filter: blur(var(--iamsol-menu-blur-link)) saturate(118%);
   transition:
      color 240ms ease,
      background 260ms ease,
      border-color 260ms ease,
      box-shadow 340ms ease,
      text-shadow 340ms ease;
}

.iamsol-menu__link::after {
   content: "";
   position: absolute;
   left: 50%;
   bottom: 4px;
   width: 0;
   height: 1px;
   transform: translateX(-50%);
   background: var(--iamsol-menu-underline);
   box-shadow:
      0 0 10px rgb(110 230 255 / 54%),
      0 0 24px rgb(90 220 255 / 24%);
   transition: width 320ms ease 70ms;
}

.iamsol-menu__submenu-button {
   gap: 6px;
}

.iamsol-menu__submenu-title {
   display: inline-flex;
   align-items: center;
}

.iamsol-menu__submenu-indicator {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: auto;
   color: currentColor;
   font-size: 1em;
   line-height: 1;
}

.iamsol-menu__submenu-indicator::before {
   content: "▾";
}

.iamsol-menu__item:hover > .iamsol-menu__submenu-button .iamsol-menu__submenu-indicator::before {
   content: "▴";
}

.iamsol-menu__link:hover,
.iamsol-menu__link:focus-visible,
.iamsol-menu__item:hover > .iamsol-menu__link {
   color: var(--iamsol-menu-text-cyan-hover);
   background: var(--iamsol-menu-link-fill-hover);
   border-color: var(--iamsol-menu-link-border-hover);
   box-shadow:
      0 0 26px rgb(90 220 255 / 14%),
      inset 0 0 18px rgb(255 255 255 / 4.2%);
   text-shadow:
      0 0 8px var(--iamsol-menu-cyan-glow),
      0 0 18px #5eeeff44;
   outline: none;
}

.iamsol-menu__link:hover::after,
.iamsol-menu__link:focus-visible::after,
.iamsol-menu__item:hover > .iamsol-menu__link::after {
   width: calc(100% - 24px);
}

.iamsol-menu__dropdown {
   position: absolute;
   top: calc(100% + 18px);
   left: 50%;
   z-index: 50;
   width: min(650px, 88vw);
   padding: 14px;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 8px;
   transform: translateX(-50%) translateY(4px) scale(0.985);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   margin: 0;
   list-style: none;
   border: 1px solid var(--iamsol-menu-glass-border);
   border-radius: 24px;
   background:
      linear-gradient(180deg, var(--iamsol-menu-dropdown-fill-top), var(--iamsol-menu-dropdown-fill-bottom)),
      var(--iamsol-menu-dropdown-shadow-fill);
   box-shadow:
      0 26px 76px rgb(0 0 0 / 50%),
      inset 0 1px 0 rgb(255 255 255 / 11.5%);
   backdrop-filter: blur(var(--iamsol-menu-blur-dropdown)) saturate(155%);
   -webkit-backdrop-filter: blur(var(--iamsol-menu-blur-dropdown)) saturate(155%);
   transition:
      opacity 220ms ease,
      transform 240ms ease,
      visibility 0ms linear 240ms;
}

.iamsol-menu__dropdown::before {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: -22px;
   height: 24px;
   display: block;
}

.iamsol-menu__item:hover > .iamsol-menu__dropdown {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
   transform: translateX(-50%) translateY(0) scale(1);
   transition:
      opacity 170ms ease,
      transform 210ms ease,
      visibility 0ms linear 0ms;
}

.iamsol-menu__dropdown-link {
   position: relative;
   min-height: 62px;
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   gap: 4px;
   padding: 10px 12px;
   border-radius: 18px;
   color: rgb(234 250 255 / 78%);
   text-decoration: none;
   background: var(--iamsol-menu-dropdown-card-fill);
   border: 1px solid rgb(255 255 255 / 5.5%);
   overflow: hidden;
   backdrop-filter: blur(var(--iamsol-menu-blur-link)) saturate(116%);
   -webkit-backdrop-filter: blur(var(--iamsol-menu-blur-link)) saturate(116%);
   box-shadow: none;
}

.iamsol-menu__dropdown-link:hover,
.iamsol-menu__dropdown-link:focus-visible {
   color: var(--iamsol-menu-text-cyan-hover);
   background: var(--iamsol-menu-dropdown-card-fill-hover);
   border-color: rgb(130 235 255 / 18%);
/*   text-shadow:
      0 0 2px var(--iamsol-menu-cyan-glow),
      0 0 2px #5eeeff33; */
   outline: none;
}

.iamsol-menu__dropdown-link::after {
   content: "";
   position: absolute;
   left: 12px;
   right: 12px;
   bottom: 7px;
   width: auto;
   height: 1px;
   transform: scaleX(0);
   transform-origin: center;
   background: linear-gradient(90deg, transparent, var(--iamsol-menu-cyan), transparent);
   box-shadow: 0 0 12px var(--iamsol-menu-cyan-glow);
   transition: transform 280ms ease 40ms;
}

.iamsol-menu__dropdown-link:hover::after,
.iamsol-menu__dropdown-link:focus-visible::after {
   transform: scaleX(1);
}

.iamsol-menu__label {
   font-family: var(--iamsol-menu-font-mono);
   color: var(--iamsol-menu-text-dim);
   letter-spacing: 0.030em;
   line-height: 1.35;
}

@media (max-width: 760px) {
   .iamsol-menu__list {
      grid-row: 2;
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 1fr;
      align-items: stretch;
      justify-items: stretch;
      gap: 7px;
      width: 100%;
      min-width: 0;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
      margin-top: 0;
      box-sizing: border-box;
      transition:
         max-height 280ms ease,
         opacity 220ms ease,
         margin-top 220ms ease;
   }

   .mobile-menu-state:checked ~ .iamsol-menu__list {
      max-height: 1500px;
      opacity: 1;
      overflow: visible;
      pointer-events: auto;
      margin-top: 10px;
   }

   .iamsol-menu__item {
      width: 100%;
      min-width: 0;
      display: block;
      box-sizing: border-box;
   }

   .iamsol-menu__item--has-dropdown {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      justify-items: stretch;
      width: 100%;
   }

   .iamsol-menu__link {
      display: flex;
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
      justify-content: center;
      min-height: 34px;
      padding: 0 14px;
      border-radius: 18px;
      text-align: center;
      font-size: 0.86rem;
   }

   .iamsol-menu__submenu-button {
      gap: 6px;
   }

   .iamsol-menu__submenu-indicator {
      position: static;
      transform: none;
      font-size: 1em;
   }

   .iamsol-menu__submenu-state:checked + .iamsol-menu__submenu-button .iamsol-menu__submenu-indicator::before {
      content: "▴";
   }

   .iamsol-menu__submenu-state:checked + .iamsol-menu__submenu-button {
      color: var(--iamsol-menu-text-cyan-hover);
      background: var(--iamsol-menu-link-fill-hover);
      border-color: var(--iamsol-menu-link-border-hover);
      box-shadow:
         0 0 26px rgb(90 220 255 / 14%),
         inset 0 0 18px rgb(255 255 255 / 4.2%);
      text-shadow:
         0 0 8px var(--iamsol-menu-cyan-glow),
         0 0 18px #5eeeff44;
   }

   .iamsol-menu__submenu-state:checked + .iamsol-menu__submenu-button::after {
      width: calc(100% - 24px);
   }

   .iamsol-menu__dropdown {
      position: static;
      display: grid;
      width: 100%;
      max-width: none;
      min-width: 0;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0;
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      visibility: visible;
      pointer-events: none;
      transform: none;
      transform-origin: top center;
      margin-top: 0;
      padding: 0;
      border-width: 0;
      border-color: rgb(220 250 255 / 0%);
      box-sizing: border-box;
      box-shadow: none;
      transition:
         max-height 300ms ease,
         opacity 260ms ease,
         margin-top 260ms ease,
         padding 260ms ease,
         gap 260ms ease,
         border-color 260ms ease,
         box-shadow 260ms ease;
   }

   .iamsol-menu__dropdown::before {
      display: none;
   }

   .iamsol-menu__item:hover > .iamsol-menu__dropdown {
      max-height: 0;
      opacity: 0;
      visibility: visible;
      pointer-events: none;
      transform: none;
      margin-top: 0;
      padding: 0;
      gap: 0;
      border-width: 0;
      border-color: rgb(220 250 255 / 0%);
      box-shadow: none;
   }

   .iamsol-menu__submenu-state:checked + .iamsol-menu__submenu-button ~ .iamsol-menu__dropdown {
      max-height: 900px;
      opacity: 1;
      pointer-events: auto;
      transform: none;
      margin-top: 7px;
      padding: 14px;
      gap: 8px;
      border-width: 1px;
      border-color: var(--iamsol-menu-glass-border);
      box-shadow:
         0 26px 76px rgb(0 0 0 / 50%),
         inset 0 1px 0 rgb(255 255 255 / 11.5%);
   }

   .iamsol-menu__dropdown-link {
      align-items: center;
      min-height: 58px;
      width: 100%;
      box-sizing: border-box;
      text-align: center;
   }
}

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