/* ============================================
   NAV DROPDOWN - desktop + mobile drawer submenus
   Kept as its own file since xbrutal-header.css wasn't available to
   safely edit directly.
   ============================================ */

/* --- Desktop dropdown --- */
.xbrutal-nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}
/* .xbrutal-nav-dropdown-label needs no styling of its own - it's a
   real <a> inside .xbrutal-nav, so the existing ".xbrutal-nav a" rule
   in xbrutal-header.css already styles it identically to every other
   top-level link. */
.xbrutal-nav-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    margin-left: 0.1rem;
}
.xbrutal-nav-dropdown-trigger svg {
    transition: transform 0.15s ease;
}
.xbrutal-nav-dropdown.is-open .xbrutal-nav-dropdown-trigger svg {
    transform: rotate(180deg);
}

.xbrutal-nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 200px;
    background: #fff;
    border: 2px solid #111;
    box-shadow: 4px 4px 0 #111;
    border-radius: 4px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 60;
}
.xbrutal-nav-dropdown.is-open .xbrutal-nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.xbrutal-nav-dropdown-menu a {
    display: block;
    padding: 0.55rem 0.75rem;
    border-radius: 3px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #111;
    text-decoration: none;
    white-space: nowrap;
}
.xbrutal-nav-dropdown-menu a:hover {
    background: #F1F5F2;
    color: #00A878;
}

/* --- Mobile drawer submenu --- */
.xbrutal-drawer-group {
    display: flex;
    flex-direction: column;
}
.xbrutal-drawer-group-header {
    display: flex;
    align-items: stretch;
    border: 3px solid #333;
    background: #111;
    transition: all 0.1s ease;
}
.xbrutal-drawer-group-label {
    flex: 1;
    display: flex;
    align-items: center;
    color: #fff;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    padding: 0.85rem 1rem;
}
.xbrutal-drawer-group-label:hover {
    background: #FFD600;
    color: #111;
}
.xbrutal-drawer-group-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    flex-shrink: 0;
    background: none;
    border: none;
    border-left: 3px solid #333;
    color: #fff;
    cursor: pointer;
}
.xbrutal-drawer-group-toggle:hover {
    background: #FFD600;
    color: #111;
    border-left-color: #000;
}
.xbrutal-drawer-group-toggle svg {
    transition: transform 0.15s ease;
    flex-shrink: 0;
}
.xbrutal-drawer-group.is-open .xbrutal-drawer-group-toggle svg {
    transform: rotate(180deg);
}
.xbrutal-drawer-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
    display: flex;
    flex-direction: column;
    background: #0a0a0a;
}
.xbrutal-drawer-group.is-open .xbrutal-drawer-submenu {
    max-height: 400px;
}
.xbrutal-drawer-sublink {
    padding: 0.7rem 1rem 0.7rem 1.75rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    border: 3px solid #333;
    border-top: none;
    border-left: 6px solid #40D04E;
    background: #1a1a1a;
    display: block;
}
.xbrutal-drawer-sublink::before {
    content: '\2192  ';
    color: #40D04E;
}
.xbrutal-drawer-sublink:hover {
    background: #FFD600;
    color: #111;
    border-left-color: #111;
}
.xbrutal-drawer-sublink:hover::before {
    color: #111;
}

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

/* Only the drawer's middle nav section scrolls internally now - the
   header (title/close button) and footer (login/logout) stay fixed in
   place via the drawer's own existing flex layout (flex-shrink: 0 on
   both, already present in the real xbrutal-header.css). Previously
   the whole drawer scrolled as one block, which could push the footer
   buttons out of reach whenever a submenu was expanded. */
.xbrutal-drawer {
    overflow-y: hidden;
}
.xbrutal-drawer-nav {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}