/* ═══════════════════════════════════════════════════════════════════════════
   Main public-header navigation — Level 0 → Level 1 → Level 2

   Desktop  : cascading dropdown (click to open; CSS-hover keeps it open while
              the pointer is anywhere over the panel chain).
   Mobile   : drill-down stack inside the right-side drawer. Panes are
              hidden via the [hidden] attribute and toggled by JS.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Desktop ─────────────────────────────────────────────────────────────── */

.sknav-desktop {
    /* Flex container — Tailwind handles the actual flex via utility classes;
       this rule exists so descendants can rely on the cascade. */
    position: relative;
}

/* Top-bar button (L0 trigger) */
.sknav-l0 {
    position: relative;
}

.sknav-l0__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.8rem;
    border: 0;
    background: transparent;
    color: var(--foreground);
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.sknav-l0__trigger:hover,
.sknav-l0.is-active .sknav-l0__trigger,
.sknav-l0.is-open .sknav-l0__trigger {
    background: var(--muted);
    color: var(--primary);
}

.sknav-l0__chevron {
    font-size: 0.7rem;
    transition: transform 0.18s;
}
.sknav-l0:hover .sknav-l0__chevron,
.sknav-l0.is-open .sknav-l0__chevron {
    transform: rotate(180deg);
}

/* L1 panel (drops down from L0). Default hidden; opens on hover or .is-open. */
.sknav-l1-panel {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    min-width: 240px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    padding: 0.4rem;
    z-index: 60;
    /* Closed by default */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.sknav-l0:hover > .sknav-l1-panel,
.sknav-l0.is-open > .sknav-l1-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* L1 row — either a direct <a> or a "has L2" <button>. Both share the same
   row appearance so the menu doesn't visually jump when the user moves
   between them. */
.sknav-l1-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.4rem;
    color: var(--foreground);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
/* Inner click target for has-l2 rows. Padding / typography / hover bg live
   on the .sknav-l1-item wrapper so the row looks identical to a leaf <a>;
   the button only contributes the flex layout for icon + label + arrow. */
.sknav-l1__trigger {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.sknav-l1__trigger:hover,
.sknav-l1__link:hover,
.sknav-l1-item.is-open,
.sknav-l1-item.is-active,
.sknav-l1-item:hover {
    background: var(--muted);
    color: var(--primary);
}
.sknav-l1-item i:first-child {
    width: 1.1rem;
    font-size: 1rem;
    color: var(--muted-foreground);
    flex-shrink: 0;
}
.sknav-l1-item.is-active i:first-child,
.sknav-l1-item:hover i:first-child {
    color: var(--primary);
}
.sknav-l1__trigger > span,
.sknav-l1__link > span {
    flex: 1;
    min-width: 0;
}
.sknav-l1__arrow {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--muted-foreground);
}

/* L2 panel — flies out to the right of the L1 row */
.sknav-l2-panel {
    position: absolute;
    top: -0.4rem; /* align with L1 row inside its own panel padding */
    left: 100%;
    min-width: 260px;
    margin-left: 0.25rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    padding: 0.4rem;
    z-index: 70;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-4px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
    max-height: 70vh;
    overflow-y: auto;
}
.sknav-l1-item.has-l2:hover > .sknav-l2-panel,
.sknav-l1-item.is-open > .sknav-l2-panel {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Edge-aware flip: when an L0 sits near the right edge of the viewport its
   panels would overflow. The .sknav-l0--align-right modifier (applied by JS
   on first open if needed) flips child panels to the other side. We don't
   ship the JS measurement yet — for now, the last two L0 items get the
   right-align as a safe default. */
.sknav-desktop .sknav-l0:nth-last-child(-n+2) .sknav-l1-panel {
    left: auto;
    right: 0;
}
.sknav-desktop .sknav-l0:nth-last-child(-n+2) .sknav-l1-item.has-l2 .sknav-l2-panel {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 0.25rem;
    transform: translateX(4px);
}
.sknav-desktop .sknav-l0:nth-last-child(-n+2) .sknav-l1-item.has-l2:hover > .sknav-l2-panel,
.sknav-desktop .sknav-l0:nth-last-child(-n+2) .sknav-l1-item.is-open > .sknav-l2-panel {
    transform: translateX(0);
}

.sknav-l2__link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    border-radius: 0.4rem;
    color: var(--foreground);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.12s, color 0.12s;
}
.sknav-l2__link:hover,
.sknav-l2__link.is-active {
    background: var(--muted);
    color: var(--primary);
}
.sknav-l2__link i:first-child {
    width: 1.1rem;
    font-size: 1rem;
    color: var(--muted-foreground);
    flex-shrink: 0;
}
.sknav-l2__link.is-active i:first-child,
.sknav-l2__link:hover i:first-child {
    color: var(--primary);
}

/* ─── Mobile drill-down ───────────────────────────────────────────────────── */

.sknav-mobile {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.sknav-mobile__pane {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0.75rem 1rem;
}
.sknav-mobile__pane[hidden] {
    display: none;
}
.sknav-mobile__pane.is-active {
    /* Subtle slide-in so drill / back feels like a step, not a teleport. */
    animation: sknav-mobile-slide-in 0.18s ease both;
}
@keyframes sknav-mobile-slide-in {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}

.sknav-mobile__back {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.55rem 0.5rem;
    margin-bottom: 0.4rem;
    border: 0;
    background: transparent;
    color: var(--muted-foreground);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
}
.sknav-mobile__back:hover { color: var(--primary); }
.sknav-mobile__back i {
    font-size: 0.95rem;
}

.sknav-mobile__row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.75rem 0.6rem;
    border: 0;
    background: transparent;
    color: var(--foreground);
    font-size: 0.95rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: background 0.12s, color 0.12s;
}
.sknav-mobile__row:hover,
.sknav-mobile__row:active,
.sknav-mobile__row.is-active {
    background: var(--muted);
    color: var(--primary);
}
.sknav-mobile__icon {
    font-size: 1.1rem;
    color: var(--muted-foreground);
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}
.sknav-mobile__row:hover .sknav-mobile__icon,
.sknav-mobile__row.is-active .sknav-mobile__icon {
    color: var(--primary);
}
.sknav-mobile__label {
    flex: 1;
    min-width: 0;
}
.sknav-mobile__chevron {
    color: var(--muted-foreground);
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* Leaf rows (real links, not drill buttons) get a slightly lighter weight
   so the user can distinguish "drills deeper" from "lands on a page". */
.sknav-mobile__row--leaf {
    font-weight: 500;
}

/* ─── Reduced-motion fallback ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .sknav-l1-panel,
    .sknav-l2-panel,
    .sknav-mobile__pane.is-active {
        transition: none !important;
        animation: none !important;
    }
}