:root {
    --intro-duration: 1.3s;
}

nav {
    --navbar-padding: 12px;
    --navbar-height: 72px;
    --navbar-image-size: 72px;

    position: sticky;
    top: 0;
    min-height: var(--navbar-height);
    overflow: visible;
    /* isolation: isolate; */
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    background-color: var(--col-hero-bg);
    /* background-image: var(--dark-texture);
    background-size: var(--dark-texture-size);
    background-position: var(--dark-texture-pos); */

    padding: var(--navbar-padding);
    padding-left:  calc(var(--navbar-padding) * 2);
    padding-right: calc(var(--navbar-padding) * 2);
    z-index: 900;
}

#poza-logo-compus {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    height: calc(var(--navbar-image-size) - var(--navbar-padding));
}

 #poza-logo{
    height: 100%;
    aspect-ratio: 1;
    width: auto;

    position: relative;
    animation: logo-reveal var(--intro-duration) ease-out forwards;
    background-image: url("../assets/sigla_sageti.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transform-origin: center center;
    z-index: 10;
    opacity: 0;
    margin: 0;
 }

#poza-logo-litere {
    height: 100%;
    aspect-ratio: 1.3;
    width: auto;
    position: relative;
    animation: ascundere var(--intro-duration) ease-out;
    background-image: url("../assets/sigla_litere.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.meniu{
    margin-left: 120px;
}

.lista{
    list-style:none;
    display: flex;
    gap: 50px;
    color: var(--col-bg);
    font-weight: bold;
    font-size: calc(var(--font-md) * 1.2);
}

.lista li:hover{
    color: var(--col-primary-1);
    cursor: crosshair;
}

.lista a {
    color: inherit;
}

@keyframes ascundere{
    0%{
        opacity: 0;
    }
    95%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes rotare {
    0% {
        transform: translate(calc(50vw - 30px), calc(50vh - 36px)) rotate(0deg) scale(2);
        opacity: 0;
    }
    20%{
        opacity: 1;
    }
    70% {
        transform: translate(calc(50vw - 30px), calc(50vh - 36px)) rotate(720deg) scale(2);
        opacity: 1;
    }
    100% {
        transform: translate(0, 0) rotate(1080deg) scale(1);
        opacity: 1;
        background-image: url("../assets/sigla_sageti.svg");
    }
}

@keyframes logo-bg-intro {
    0% {
        opacity: 1;
        height: 100%;
    }
    60% {
        opacity: 1;
        height: 100%;
    }
    100% {
        opacity: 0;
        height: 0px;
    }
}

@keyframes logo-arrow-intro {
    0% {
        transform: translate(calc(50vw - 30px), calc(50vh - 30px)) rotate(0deg) scale(2);
        opacity: 0;
        animation-timing-function: ease-in;
    }
    12% {
        transform: translate(calc(50vw - 30px), calc(50vh - 30px)) rotate(0deg) scale(2);
        opacity: 1;
        animation-timing-function: linear;
    }
    72% {
        transform: translate(calc(50vw - 30px), calc(50vh - 30px)) rotate(360deg) scale(2);
        opacity: 1;
        animation-timing-function: ease-in-out;
    }
    100% {
        transform: translate(0px, 6px) rotate(480deg) scale(1);
        opacity: 0;
    }
}

@keyframes logo-reveal {
    0% {
        opacity: 0;
    }
    82% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


#logo-csie-sageti {
    animation: rotare linear 1s infinite;
    padding: 10%;
}
#logo-sageti{
    
}



a{
    text-decoration: none;
}

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

.lista > li {
    position: relative;
}

/* Sub-menu items need their own positioning context so nested submenus
   appear next to the triggering item, not the top of the whole dropdown */
.lista .sub-menu li {
    position: relative;
}

.lista .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    list-style: none;
    padding: 6px 0;
    margin: 0;
    background: var(--col-bg);
    border-top: 3px solid var(--col-primary-2);
    border: 1px solid var(--col-primary-2);
    border-top: 3px solid var(--col-primary-2);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    z-index: 1000;
    overflow: visible;
}

.lista > li:hover > .sub-menu {
    display: block;
}

.lista .sub-menu li a {
    display: block;
    padding: 10px 16px;
    color: var(--col-heading);
    font-size: calc(var(--font-md) * 0.9);
    font-weight: 500;
    white-space: nowrap;
}

.lista .sub-menu li a:hover {
    color: var(--col-primary-1);
    background: rgba(0, 0, 0, 0.04);
}

/* Inward arrow on top-level dropdowns */
.lista > li > .sub-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--col-primary-2);
}

.lista > li > .sub-menu {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Nested submenus: open to the right on desktop */
.lista .sub-menu .sub-menu {
    top: 0;
    left: calc(100% - 1px); /* 1 px overlap so cursor never falls in the gap */
    border-top: none;
    border: 1px solid var(--col-primary-2);
}

.lista .sub-menu .menu-item-has-children:hover > .sub-menu {
    display: block;
}

/* Invisible bridges left and right of items that have nested submenus.
   They extend the hover area so the cursor can travel to the submenu
   without the hover state dropping. */
.lista .sub-menu .menu-item-has-children::before,
.lista .sub-menu .menu-item-has-children::after {
    content: '';
    position: absolute;
    top: 0;
    width: 16px;
    height: 100%;
}
.lista .sub-menu .menu-item-has-children::before { right: 100%; }
.lista .sub-menu .menu-item-has-children::after  { left:  100%; }

/* ▾ indicator on top-level items with children */
.lista > li.menu-item-has-children > a::after {
    content: ' ▾';
    font-size: 0.75em;
    vertical-align: middle;
    opacity: 0.7;
}

/* › indicator on nested sub-menu items with children */
.lista .sub-menu .menu-item-has-children > a::after {
    content: ' ›';
    float: right;
    margin-left: 12px;
}

/* Flip classes applied by JS when submenu would overflow the right edge */
.lista > li > .sub-menu.flip-left {
    left: auto;
    right: 0;
}
.lista > li > .sub-menu.flip-left::before {
    left: auto;
    right: 16px;
}
.lista .sub-menu .sub-menu.flip-left {
    left: auto;
    right: calc(100% - 1px);
}

/* Toggle buttons injected by JS — only shown on mobile */
.submenu-toggle {
    display: none;
}

/* ── Hamburger button (hidden on desktop) ──────────────────────── */

#menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: background 0.2s;
    min-width: unset;
}

#menu-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
}

#menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--col-bg);
    border-radius: 1px;
    transition: transform 0.25s, opacity 0.25s;
}

#menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
#menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
#menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 768px) {
    nav {
        --navbar-height: 56px;
        --navbar-image-size: 56px;
        padding-left: var(--navbar-padding);
        padding-right: var(--navbar-padding);
    }

    #menu-toggle {
        display: flex;
    }

    /* Panel: JS sets top dynamically via nav.getBoundingClientRect().bottom */
    .meniu {
        display: none;
        position: fixed;
        top: 56px; /* fallback; JS overrides on open */
        left: 0;
        right: 0;
        background: var(--col-hero-bg);
        border-top: 3px solid var(--col-primary-2);
        z-index: 899;
        padding-bottom: 8px;
        margin-left: 0;
        max-height: calc(100vh - 56px);
        overflow-y: auto;
    }

    /* Downward-pointing arrow — intrudes INTO the menu panel from the top border */
    .meniu::before {
        content: '';
        position: absolute;
        top: 0;
        right: calc(var(--navbar-padding) + 7px);
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid var(--col-primary-2);
    }

    .meniu.open {
        display: block;
    }

    /* Vertical list */
    .lista {
        flex-direction: column;
        gap: 0;
        font-size: var(--font-md);
        padding: 4px 0;
    }

    /* Each top-level item: flex row so toggle button sits beside the link */
    .lista > li {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        position: static;
    }

    .lista > li > a {
        flex: 1;
        display: block;
        padding: 11px var(--navbar-padding);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .lista > li:last-child > a {
        border-bottom: none;
    }

    /* Submenus: hidden while panel is closed, all visible when open */
    .lista .sub-menu {
        position: static;
        flex: 0 0 100%;
        display: none;
        list-style: none;
        padding: 0;
        margin: 0;
        background: rgb(26, 26, 26);
        border: unset;
        color: var(--col-bg);
        border-top: none;
        border-left: none;
        box-shadow: none;
        border-radius: 0;
        min-width: 0;
        overflow: hidden;
    }

    .meniu.open .sub-menu {
        display: block;
    }

    /* Disable hover-based open on mobile */
    .lista > li:hover > .sub-menu,
    .lista .sub-menu .menu-item-has-children:hover > .sub-menu {
        display: none;
    }
    .meniu.open .lista > li:hover > .sub-menu,
    .meniu.open .lista .sub-menu .menu-item-has-children:hover > .sub-menu {
        display: block;
    }

    /* Nested submenus indented */
    .lista .sub-menu .sub-menu {
        background: rgba(0, 0, 0, 0.04);
        margin-left: 12px;
        margin-right: 12px;
        border: 0;
    }

    .lista .sub-menu .sub-menu li a {
        padding-left: calc(var(--navbar-padding) * 3);
    }

    /* ::before arrows and text indicators hidden on mobile */
    .lista .sub-menu::before,
    .lista > li.menu-item-has-children > a::after,
    .lista .sub-menu .menu-item-has-children > a::after {
        display: none;
    }

    .lista .sub-menu li a {
        display: block;
        padding: 10px var(--navbar-padding) 10px calc(var(--navbar-padding) * 2);
        font-size: calc(var(--font-md) * 0.875);
        font-weight: 500;
        color: var(--col-bg);
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .lista .sub-menu li:last-child a {
        border-bottom: none;
    }

    .lista .sub-menu li a:hover {
        color: var(--col-primary-1);
    }
}

#logo-intro-backdrop {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: #ffffff;
    opacity: 0;
    pointer-events: none;
    z-index: 1000;
    animation: logo-bg-intro var(--intro-duration) ease-out forwards;
}

#logo-intro-arrow {
    position: fixed;
    left: 0;
    top: 0;
    width: 60px;
    height: 60px;
    background-image: url("../assets/sigla_sageti.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transform-origin: center center;
    pointer-events: none;
    z-index: 1100;
    animation: logo-arrow-intro var(--intro-duration) ease-out forwards;
}