/* ==========================================================================
   1. IMPORT CZCIONKI I ZMIENNE KOLORÓW
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@500;700&display=swap');

:root {
    --color-primary-dark: #110B55;  /* Głęboki granat z "Edu" */
    --color-accent-orange: #FF5E24; /* Energetyczny pomarańcz z "F" */
    --color-accent-blue: #00A3D7;   /* Jasny błękit z "l" */
    --color-accent-green: #76BC43;  /* Zieleń z "w" */
    --color-accent-pink: #E61C5D;   /* Wyrazisty róż / magenta z pętli logo */
}

/* ==========================================================================
   2. STYLIZACJA PASKA NAWIGACJI (STANDARDOWY, PRZEWIJALNY PAS)
   ========================================================================== */
.navbar {
    background-color: #FFF0F3 !important; 
    border-bottom: 1px solid rgba(255, 94, 36, 0.1);
    
    /* Sztywna wysokość menu na start - teraz sekcja hero idealnie się od niej odliczy */
    height: 195px; 
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    position: relative; /* Normalne pozycjonowanie, menu przewija się z dokumentem */
}

/* Wyrównanie elementów (menu po prawej) do środka w pionie */
.navbar .container {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

/* Wygląd logo na komputerach */
@media (min-width: 992px) {
    .custom-logo {
        position: absolute;
        top: 50%;
        transform: translateY(-50%); /* Precyzyjne centrowanie w pionie */
        left: 0;
        z-index: 1030; 
        max-height: 180px !important; /* Potężne, czytelne logo */
    }
}

/* Responsywność dla urządzeń mobilnych */
@media (max-width: 991px) {
    .navbar {
        height: auto; 
        min-height: 100px;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    .custom-logo {
        max-height: 85px !important;
        position: relative;
        transform: none;
        top: 0;
    }
}

/* ==========================================================================
   3. STYLIZACJA LINKÓW W MENU
   ========================================================================== */
.navbar-nav .nav-link {
    font-family: 'Comfortaa', cursive;
    font-size: 1.25rem; 
    font-weight: 500;
    color: var(--color-primary-dark) !important; 
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    transition: all 0.25s ease;
}

/* Styl dla pojedynczych liter w linkach */
.rainbow-hover span {
    display: inline-block;
    transition: color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
}

/* Po najechaniu na LINK, zmieniamy kolory poszczególnych LITER */
.rainbow-hover:hover span:nth-child(4n+1) { color: var(--color-accent-pink) !important; }
.rainbow-hover:hover span:nth-child(4n+2) { color: var(--color-accent-orange) !important; }
.rainbow-hover:hover span:nth-child(4n+3) { color: var(--color-accent-blue) !important; }
.rainbow-hover:hover span:nth-child(4n+4) { color: var(--color-accent-green) !important; }

/* Efekt najechania: uniesienie liter oraz dodanie cienia */
.rainbow-hover:hover span {
    transform: translateY(-2px);
    text-shadow: 0px 2px 4px rgba(17, 11, 85, 0.25);
}

/* Aktywny link */
.navbar-nav .nav-link.active {
    font-weight: 700;
}

/* Hamburger menu na telefonach */
.navbar-toggler {
    border-color: rgba(17, 11, 85, 0.2) !important;
}

/* ==========================================================================
   4. TĘCZOWY SEPARATOR (PRZEWIJA SIĘ RAZEM Z MENU)
   ========================================================================== */
.nav-separator {
    height: 3px; 
    width: 100%;
    position: relative; /* Zmienione z fixed na relative, żeby linia przewijała się razem z menu */
    z-index: 10;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        var(--color-primary-dark) 15%, 
        var(--color-accent-orange) 40%, 
        var(--color-accent-blue) 65%, 
        var(--color-accent-green) 85%, 
        rgba(255, 255, 255, 0) 100%
    );
    opacity: 0.9;
}

/* ==========================================================================
   AKTYWNA ZAKŁADKA W NAV Z TĘCZOWYM PODKREŚLENIEM (EFEKT HR)
   ========================================================================== */
.navbar-nav .nav-link {
    position: relative;
}

.navbar-nav .nav-link.active {
    font-weight: 700;
    color: #110B55 !important;
}

/* Tęczowa kreska pod aktywnym linkiem z delikatnym zanikaniem po bokach */
.navbar-nav .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Dystans od tekstu */
    left: 5%;     /* Wydłużona linia - zaczyna się bliżej krawędzi */
    width: 90%;   /* Dłuższa niż wcześniej */
    height: 3px;  /* Grubość kreski */
    
    /* Gradient: przeźroczysty na brzegach (0% i 100%) -> pełny kolor w środku */
    background: linear-gradient(
        90deg, 
        rgba(255, 94, 36, 0) 0%, 
        #FF5E24 15%, 
        #FF8052 50%, 
        #FF5E24 85%, 
        rgba(255, 94, 36, 0) 100%
    );
    border-radius: 10px;
}