/* Prototype-style dropdown chrome for Clean (#main-navbar).
   Calmer open motion: no blur, no per-link opacity cascade (those replayed on click/focus and felt glitchy).
   Projects featured cards stay in projects-megamenu.css. */

:root {
  --lw-laser: #e10600;
  --lw-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --lw-snap: cubic-bezier(0.22, 1, 0.36, 1);
  /* Fixed header height + air. Must live in this cache-busted file:
     ~/css/main.css is an in-memory bundle and stays stale after UI-deploy. */
  --lw-header-offset: 72px;
}

@media (max-width: 991.98px) {
  :root {
    --lw-header-offset: 56px;
  }
}

@media (min-width: 1200px) {
  :root {
    --lw-header-offset: 80px;
  }
}

/* White catalog/content pages (_Layout): header.header-light is position:fixed */
.page-white .body-content {
  padding-top: var(--lw-header-offset) !important;
}

@media (min-width: 992px) {
  /* Stretch items to full navbar height and center label text with the logo */
  #main-navbar.navbar {
    min-height: 56px;
    align-items: center;
  }

  #main-navbar .main-menu {
    align-self: stretch;
    align-items: center;
    min-height: 56px;
  }

  #main-navbar .main-menu > .nav-item {
    display: flex !important;
    align-items: center !important;
    align-self: stretch;
    position: relative;
  }

  /* Projects megamenu is position:absolute; left/right:0 — must size against the navbar, not this li */
  #main-navbar .main-menu > .nav-item.dropdown-projects {
    position: static !important;
  }

  #main-navbar .main-menu > .nav-item-icons {
    margin-left: 12px;
  }

  #main-navbar .main-menu > .nav-item-icons > ul {
    height: 100%;
    align-items: center;
  }

  #main-navbar .main-menu > .nav-item:not(.nav-item-icons) > a {
    /* flex (not inline-flex): inline-flex baseline-aligns and jumps up on .show/hover */
    display: flex !important;
    align-items: center;
    justify-content: center;
    align-self: center !important;
    box-sizing: border-box;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    line-height: 1.2 !important;
    text-transform: uppercase;
    padding: 8px 9px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 8px;
    position: relative;
    top: 0 !important;
    transform: none !important;
    vertical-align: middle;
    transition: background 0.18s ease, color 0.18s ease;
  }

  #main-navbar .main-menu > .nav-item:not(.nav-item-icons) > a:hover,
  #main-navbar .main-menu > .nav-item:not(.nav-item-icons).show > a,
  #main-navbar .main-menu > .nav-item:not(.nav-item-icons):focus-within > a {
    color: var(--lw-laser) !important;
    background: rgba(225, 6, 0, 0.12);
    top: 0 !important;
    margin: 0 !important;
    padding: 8px 9px !important;
    transform: none !important;
    height: 36px !important;
    max-height: 36px !important;
  }

  /* White bar: red label + underline only — no pink pill */
  .header-light #main-navbar .main-menu > .nav-item:not(.nav-item-icons) > a:hover,
  .header-light #main-navbar .main-menu > .nav-item:not(.nav-item-icons).show > a,
  .header-light #main-navbar .main-menu > .nav-item:not(.nav-item-icons):focus-within > a,
  .page-white #main-navbar .main-menu > .nav-item:not(.nav-item-icons) > a:hover,
  .page-white #main-navbar .main-menu > .nav-item:not(.nav-item-icons).show > a,
  .page-white #main-navbar .main-menu > .nav-item:not(.nav-item-icons):focus-within > a {
    background: transparent !important;
  }

  #main-navbar .main-menu > .nav-item:not(.nav-item-icons) > a::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 6px;
    height: 2px;
    background: var(--lw-laser);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.28s var(--lw-snap);
    /* Replace Bootstrap caret, keep our underline bar */
    border: 0 !important;
    margin: 0 !important;
    vertical-align: unset !important;
  }

  #main-navbar .main-menu > .nav-item:not(.nav-item-icons) > a:hover::after,
  #main-navbar .main-menu > .nav-item:not(.nav-item-icons).show > a::after,
  #main-navbar .main-menu > .nav-item:not(.nav-item-icons):focus-within > a::after {
    transform: scaleX(1);
  }

  /* Kill legacy 1px underline animation on top links */
  #main-navbar .main-menu > .nav-item:not(.nav-item-icons) > a:hover:before,
  #main-navbar .main-menu > .nav-item:not(.nav-item-icons) > a:hover::before {
    display: none !important;
  }

  /* First-level dropdown panel — open once, no filter blur (GPU jank on click) */
  #main-navbar .main-menu > .nav-item:not(.dropdown-projects) > .dropdown-menu {
    margin-top: 6px !important;
    padding: 10px !important;
    min-width: 280px;
    width: max-content;
    max-width: min(360px, 92vw);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    background: #16161c !important;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(225, 6, 0, 0.2) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition:
      opacity 0.22s var(--lw-ease),
      transform 0.28s var(--lw-snap),
      visibility 0.22s;
  }

  .header-light #main-navbar .main-menu > .nav-item:not(.dropdown-projects) > .dropdown-menu,
  .page-white #main-navbar .main-menu > .nav-item:not(.dropdown-projects) > .dropdown-menu {
    background: #fff !important;
    border-color: rgba(18, 18, 20, 0.1) !important;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.14), 0 2px 0 rgba(225, 6, 0, 0.12) !important;
  }

  #main-navbar .main-menu > .nav-item:not(.dropdown-projects):hover > .dropdown-menu,
  #main-navbar .main-menu > .nav-item:not(.dropdown-projects).show > .dropdown-menu,
  #main-navbar .main-menu > .nav-item:not(.dropdown-projects):focus-within > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* Links always readable — no opacity:0 cascade that restarts on click/focus */
  #main-navbar .main-menu > .nav-item:not(.dropdown-projects) > .dropdown-menu > li > a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 10px 12px !important;
    border-radius: 10px;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #f2f2f4 !important;
    opacity: 1 !important;
    transform: none !important;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .header-light #main-navbar .main-menu > .nav-item:not(.dropdown-projects) > .dropdown-menu > li > a,
  .page-white #main-navbar .main-menu > .nav-item:not(.dropdown-projects) > .dropdown-menu > li > a {
    color: #121214 !important;
  }

  #main-navbar .main-menu > .nav-item:not(.dropdown-projects) > .dropdown-menu > li:hover,
  #main-navbar .main-menu > .nav-item:not(.dropdown-projects) > .dropdown-menu > li.show,
  #main-navbar .main-menu > .nav-item:not(.dropdown-projects) > .dropdown-menu > li:focus-within {
    background: rgba(225, 6, 0, 0.14) !important;
    border-radius: 10px;
  }

  #main-navbar .main-menu > .nav-item:not(.dropdown-projects) > .dropdown-menu > li:hover > a,
  #main-navbar .main-menu > .nav-item:not(.dropdown-projects) > .dropdown-menu > li.show > a,
  #main-navbar .main-menu > .nav-item:not(.dropdown-projects) > .dropdown-menu > li:focus-within > a {
    color: #fff !important;
  }

  .header-light #main-navbar .main-menu > .nav-item:not(.dropdown-projects) > .dropdown-menu > li:hover,
  .header-light #main-navbar .main-menu > .nav-item:not(.dropdown-projects) > .dropdown-menu > li.show,
  .header-light #main-navbar .main-menu > .nav-item:not(.dropdown-projects) > .dropdown-menu > li:focus-within,
  .page-white #main-navbar .main-menu > .nav-item:not(.dropdown-projects) > .dropdown-menu > li:hover,
  .page-white #main-navbar .main-menu > .nav-item:not(.dropdown-projects) > .dropdown-menu > li.show,
  .page-white #main-navbar .main-menu > .nav-item:not(.dropdown-projects) > .dropdown-menu > li:focus-within {
    background: rgba(225, 6, 0, 0.08) !important;
  }

  .header-light #main-navbar .main-menu > .nav-item:not(.dropdown-projects) > .dropdown-menu > li:hover > a,
  .header-light #main-navbar .main-menu > .nav-item:not(.dropdown-projects) > .dropdown-menu > li.show > a,
  .header-light #main-navbar .main-menu > .nav-item:not(.dropdown-projects) > .dropdown-menu > li:focus-within > a,
  .header-light #main-navbar .main-menu > .nav-item:not(.dropdown-projects) > .dropdown-menu > li > a:focus,
  .page-white #main-navbar .main-menu > .nav-item:not(.dropdown-projects) > .dropdown-menu > li:hover > a,
  .page-white #main-navbar .main-menu > .nav-item:not(.dropdown-projects) > .dropdown-menu > li.show > a,
  .page-white #main-navbar .main-menu > .nav-item:not(.dropdown-projects) > .dropdown-menu > li:focus-within > a,
  .page-white #main-navbar .main-menu > .nav-item:not(.dropdown-projects) > .dropdown-menu > li > a:focus {
    color: var(--lw-laser) !important;
  }

  /* Nested flyouts — wide enough for long labels (e.g. One body – three devices) */
  #main-navbar .main-menu .dropdown-menu .dropdown > .dropdown-menu {
    margin: 0 0 0 8px !important;
    padding: 8px !important;
    min-width: 320px;
    width: max-content;
    max-width: min(380px, 92vw);
    max-height: min(70vh, 520px);
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    background: #1a1a22 !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(6px);
    transition:
      opacity 0.2s var(--lw-ease),
      transform 0.24s var(--lw-snap),
      visibility 0.2s;
  }

  .header-light #main-navbar .main-menu .dropdown-menu .dropdown > .dropdown-menu,
  .page-white #main-navbar .main-menu .dropdown-menu .dropdown > .dropdown-menu {
    background: #fff !important;
    border-color: rgba(18, 18, 20, 0.1) !important;
  }

  #main-navbar .main-menu .dropdown-menu .dropdown:hover > .dropdown-menu,
  #main-navbar .main-menu .dropdown-menu .dropdown.show > .dropdown-menu,
  #main-navbar .main-menu .dropdown-menu .dropdown > .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }

  #main-navbar .main-menu .dropdown-menu .dropdown > .dropdown-menu > li > a {
    padding: 9px 14px !important;
    border-radius: 10px;
    font-size: 13.5px !important;
    white-space: nowrap;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (min-width: 992px) {
  /* Clean navbar is .container — do not size the mega against it. */
  #main-navbar.navbar {
    position: static;
  }

  /* Clean (_Layout / _DarkLayoutClean): header is the containing block. */
  #main-navbar .dropdown-projects > .laserwar-projects.lw-projects-mega-wrap {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
    z-index: 30;
  }

  /* Classic DarkMenu: mega lives in .menu__cat-sub { top:0 } with no height,
     so top:100% becomes y=0 and covers the bar. Pin under the 50px bar. */
  .header-dark .menu__cat-projects .laserwar-projects.lw-projects-mega-wrap {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
    z-index: 40;
  }
}