/* ══════════════════════════════════════════════
   SPACESHIELD AI v5.2 · dropdown-menu.css
   Tema: STAR WARS · CONSOLE HOLOGRÁFICO GALÁCTICO
   CSS exclusivo · Dropdown PENTEST (desktop)
   + Hamburger / painel de navegação mobile
══════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
   1) DROPDOWN DESKTOP · PENTEST
────────────────────────────────────────────── */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    display:     inline-flex;
    align-items: center;
    gap:         4px;
    background:  none;
    cursor:      pointer;
    font-family: var(--three-d-font);
}

.nav-dropdown-caret {
    font-size:  9px;
    transition: transform .1s steps(2,end);
    color:      var(--pink);
}

.nav-dropdown.open .nav-dropdown-caret {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position:       absolute;
    top:            calc(100% + 6px);
    left:           0;
    min-width:      200px;
    display:        flex;
    flex-direction: column;
    gap:            2px;
    padding:        6px;
    background:     linear-gradient(180deg, #0d0028 0%, #07001a 100%);
    border:         2px solid rgba(0,255,255,0.3);
    box-shadow:     var(--glow-cyan),
                    0 8px 30px rgba(0,0,0,.6);
    z-index:        60;

    visibility: hidden;
    opacity:    0;
    transform:  translateY(-4px);
    transition: opacity .1s, transform .1s, visibility .1s;
}

.nav-dropdown.open .nav-dropdown-menu {
    visibility: visible;
    opacity:    1;
    transform:  translateY(0);
}

.nav-dropdown-item {
    display:         block;
    width:           100%;
    text-align:      left;
    background:      none;
    border:          1px solid transparent;
    padding:         7px 9px;
    font-family:     var(--three-d-font);
    font-size:       7px;
    letter-spacing:  .5px;
    color:           var(--text3);
    cursor:          pointer;
    white-space:     nowrap;
    transition:      color .1s, background .1s, border-color .1s;
    clip-path:       polygon(3px 0%, 100% 0%, calc(100% - 3px) 100%, 0% 100%);
}

.nav-dropdown-item:hover {
    color:        var(--accent);
    border-color: rgba(0,255,255,0.3);
    background:   rgba(0,255,255,.08);
    text-shadow:  var(--glow-cyan);
}

@media (max-width: 680px) {
    .nav-dropdown-menu { display: none; }
}

/* ──────────────────────────────────────────────
   2) BOTÃO HAMBURGER · 3D STYLE
────────────────────────────────────────────── */
.hamburger-btn {
    display:         none;
    flex-direction:  column;
    justify-content: center;
    align-items:     center;
    gap:             4px;
    width:           30px;
    height:          30px;
    background:      rgba(255,0,170,0.06);
    border:          2px solid rgba(255,0,170,0.4);
    cursor:          pointer;
    flex-shrink:     0;
    margin-left:     auto;
    transition:      all .1s;
}
.hamburger-btn:hover {
    background:  rgba(255,0,170,0.15);
    box-shadow:  var(--glow-pink);
}

.hamburger-line {
    display:    block;
    width:      16px;
    height:     2px;
    background: var(--pink);
    box-shadow: 0 0 4px rgba(255,0,170,0.6);
    transition: transform .15s, opacity .15s;
}

.hamburger-btn[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.hamburger-btn[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0;
}
.hamburger-btn[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 680px) {
    .hamburger-btn { display: flex; }
}

/* ──────────────────────────────────────────────
   3) PAINEL DROPDOWN MOBILE · CYBERPUNK
────────────────────────────────────────────── */
.mobile-nav-dropdown {
    display:        none;
    flex-direction: column;
    gap:            2px;
    padding:        8px 12px;
    background:     linear-gradient(180deg, #0a001e 0%, #05000f 100%);
    border-bottom:  2px solid var(--pink);
    box-shadow:     0 4px 20px rgba(255,0,170,0.15);
}

.mobile-nav-dropdown.open {
    display: flex;
}

.mobile-nav-link {
    display:         block;
    width:           100%;
    text-align:      left;
    background:      none;
    border:          1px solid transparent;
    padding:         8px 10px;
    font-family:     var(--three-d-font);
    font-size:       7px;
    letter-spacing:  1px;
    color:           var(--text3);
    text-decoration: none;
    cursor:          pointer;
    transition:      color .1s, background .1s;
}

.mobile-nav-link:hover {
    color:        var(--accent);
    border-color: rgba(0,255,255,0.2);
    background:   rgba(0,255,255,.05);
    text-shadow:  var(--glow-cyan);
}

.mobile-nav-active {
    color:        var(--pink) !important;
    border-color: rgba(255,0,170,.3) !important;
    background:   rgba(255,0,170,.06) !important;
    text-shadow:  var(--glow-pink) !important;
}

.mobile-nav-group {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    margin:         4px 0;
    border-top:     1px solid rgba(255,0,170,0.2);
    border-bottom:  1px solid rgba(255,0,170,0.2);
    padding:        6px 0;
}

.mobile-nav-group-title {
    font-family:    var(--three-d-font);
    font-size:      7px;
    letter-spacing: 1px;
    color:          var(--pink);
    padding:        4px 10px;
    text-shadow:    var(--glow-pink);
}

.mobile-nav-sub {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    padding-left:   10px;
}

.mobile-nav-sub .mobile-nav-link {
    font-size: 6px;
}

@media (min-width: 681px) {
    .mobile-nav-dropdown { display: none !important; }
}