/* ═══════════════════════════════════════════════════════════════════════
   FLOATING NAVBAR + HERO TEXT SLIDER
   Adaptat la #header.fixed-top existent (cu dropdown-uri, lang switcher,
   emergency CTA). NU înlocuieste structura HTML — doar adaugă efectul.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   FIX CRITIC: Când meniul mobile e deschis, navbar-ul revine la full-width
   normal — altfel `backdrop-filter` creează un containing-block care
   blochează `position: fixed; inset: 0` al meniului mobile, iar overlay-ul
   apare "prins" înăuntrul navbar-ului mic, gol.
   Această regulă MERGE PRIMA în fișier pentru a câștiga cascada.
   ═══════════════════════════════════════════════════════════════════════ */
body.mobile-nav-active #header.header.fixed-top,
body.mobile-nav-active #header.header.fixed-top.fixed-top {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    /* ELIMINĂM backdrop-filter — acesta era cauza bug-ului */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    will-change: auto !important;
    background: transparent !important;
    background-color: transparent !important;
    transition: none !important;
}
/* Logo poziționat lângă X-ul de închidere când meniul e deschis */
body.mobile-nav-active #header.header.fixed-top .logo img {
    max-height: 50px !important;
}

:root {
    --nav-transition-duration: 0.9s;
    --nav-easing: cubic-bezier(0.22, 1, 0.36, 1);
    --nav-floating-top: 10px;
    --nav-floating-margin: 12px;
    --nav-floating-radius: 16px;
    --nav-floating-bg-1: rgba(62, 43, 86, 0.92);   /* purple deep */
    --nav-floating-bg-2: rgba(62, 43, 86, 0.78);
    --nav-floating-border: rgba(167, 139, 213, 0.20);
    --nav-floating-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);

    --slide-anim: 0.8s ease-in-out;
}

/* ═══════════════════════════════════════════════════════════════════════
   1. NAVBAR — tranziție lentă pe 9 proprietăți
   ═══════════════════════════════════════════════════════════════════════ */
#header.header.fixed-top {
    transition:
        top                var(--nav-transition-duration) var(--nav-easing),
        left               var(--nav-transition-duration) var(--nav-easing),
        right              var(--nav-transition-duration) var(--nav-easing),
        width              var(--nav-transition-duration) var(--nav-easing),
        max-width          var(--nav-transition-duration) var(--nav-easing),
        padding            var(--nav-transition-duration) var(--nav-easing),
        border-radius      var(--nav-transition-duration) var(--nav-easing),
        background         0.8s ease,
        background-color   0.8s ease,
        box-shadow         0.8s ease,
        backdrop-filter    0.8s ease,
        -webkit-backdrop-filter 0.8s ease !important;
    will-change: top, left, right, width, padding, border-radius;
    overflow: visible; /* dropdown-uri să iasă din barul floating */
}

/* ═══════════════════════════════════════════════════════════════════════
   1.b. ANULĂM STAREA „ALBĂ" intermediară (100px < scroll < hero height)
   În main.css: body.index-page.scrolled .header → background alb.
   Suprascriem ca navbar-ul să rămână DARK TRANSPARENT (ca în starea inițială)
   până când scroll-ul depășește hero-ul (atunci kick-in floating mov).
   ═══════════════════════════════════════════════════════════════════════ */
body.index-page.scrolled:not(.scrolled-past-hero) #header.header.fixed-top {
    --background-color: transparent !important;
    --heading-color: #ffffff !important;
    --nav-color: #ffffff !important;
    --nav-hover-color: #a78bd5 !important;
    background-color: transparent !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.40), rgba(0, 0, 0, 0.20)) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: none !important;
}
/* Și logo-ul / link-urile rămân pe culorile inițiale (peste hero) */
body.index-page.scrolled:not(.scrolled-past-hero) .navmenu a,
body.index-page.scrolled:not(.scrolled-past-hero) .navmenu a:focus {
    color: #ffffff !important;
}

/* Logo rămâne ALB (logo2.png) — anulăm content-swap din main.css.
   Aplicăm pe intermediar + floating + inner-page (toate stările unde main.css ar fi pus titlu.png). */
body.scrolled #header.header.fixed-top .logo img,
body.scrolled-past-hero #header.header.fixed-top .logo img,
body.inner-page #header.header.fixed-top .logo img {
    content: url("/assets/img/logo2.png") !important;
}

#header.header.fixed-top .logo img {
    transition: max-height var(--nav-transition-duration) var(--nav-easing);
}

/* ═══════════════════════════════════════════════════════════════════════
   2. STAREA FLOATING — kick-in la:
   - body.scrolled-past-hero (homepage, după scroll past hero)
   - body.inner-page (pagini interne, no hero → mereu floating)
   ═══════════════════════════════════════════════════════════════════════ */
body.scrolled-past-hero #header.header.fixed-top,
body.inner-page #header.header.fixed-top {
    top: var(--nav-floating-top);
    left: var(--nav-floating-margin);
    right: var(--nav-floating-margin);
    width: calc(100% - calc(var(--nav-floating-margin) * 2));
    max-width: 1400px;
    margin: 0 auto;
    border-radius: var(--nav-floating-radius);

    /* Suprascriem variabilele din main.css ca să nu apară fundalul alb */
    --background-color: transparent !important;
    --heading-color: #ffffff !important;
    --nav-color: #ffffff !important;
    --nav-hover-color: #c8a8ff !important;
    background-color: transparent !important;
    background: linear-gradient(180deg, var(--nav-floating-bg-1), var(--nav-floating-bg-2)) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid var(--nav-floating-border);
    box-shadow: var(--nav-floating-shadow), 0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
}

/* Link-urile din navmenu — albe pe fundal mov în floating */
body.scrolled-past-hero #header .navmenu a,
body.scrolled-past-hero #header .navmenu a:focus,
body.inner-page #header .navmenu a,
body.inner-page #header .navmenu a:focus {
    color: #ffffff !important;
}
body.scrolled-past-hero #header .navmenu a:hover,
body.inner-page #header .navmenu a:hover {
    color: #c8a8ff !important;
}

/* Logo mai mic în starea floating */
body.scrolled-past-hero #header.header.fixed-top .logo img,
body.inner-page #header.header.fixed-top .logo img {
    max-height: 42px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. MOBILE — și mai compact când e floating
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    body.scrolled-past-hero #header.header.fixed-top,
    body.inner-page #header.header.fixed-top {
        top: 8px;
        left: 8px;
        right: 8px;
        width: calc(100% - 16px);
        border-radius: 14px;
    }
    body.scrolled-past-hero #header.header.fixed-top .logo img,
    body.inner-page #header.header.fixed-top .logo img {
        max-height: 36px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   4. HERO — 100svh + slider container
   ═══════════════════════════════════════════════════════════════════════ */
#hero.hero.section.dark-background {
    min-height: 100svh; /* svh evită bug-ul cu bara browser-ului pe iOS */
    display: flex;
    align-items: center;
}

/* Container slider — min-height ca să nu sară pagina */
.text-slider-container {
    position: relative;
    overflow: hidden;
    min-height: 120px;
}
.text-slider-container.slider-bottom { min-height: 90px; }

@media (max-width: 767.98px) {
    .text-slider-container { min-height: 100px; }
    .text-slider-container.slider-bottom { min-height: 70px; }
}

/* Slide-urile — animate doar la .active */
.hero-slide {
    display: none;
    animation: heroSlideIn 0.8s ease-in-out;
}
.hero-slide.active {
    display: block;
}

@keyframes heroSlideIn {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Stil slogan în slider — păstrăm aspectul existent */
.hero-title-slide {
    font-family: 'Merriweather', serif;
    font-weight: 900;
    color: #fff;
    font-size: clamp(1.6rem, 4vw, 3rem);
    line-height: 1.2;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    margin: 0 0 8px;
}

.hero-sub-slide {
    color: rgba(255, 255, 255, 0.94);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.55;
    max-width: 720px;
    margin: 0 auto;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}