/* d:\Zasoby\xampp\htdocs\prntd.pl\prntd.pl\assets\components\LinkBlock\link_block.css */
/* Styles specific to the link block section */

.link-block-wrapper,
.footer-links-container,
.link-block-mobile-toggle-area,
.link-block-toggler,
.footer-links-container a {
    box-sizing: border-box; /* Ustawienie modelu pudełkowego na border-box */
}

.link-block-wrapper {
    /* Domyślnie zajmie 100% szerokości rodzica */
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    padding-left: 0;
    margin-top: 5px;
    border-top: 2px solid #666666; /* Ciemnoszary border, jak nad stopką */
}

.footer-links-container {
    background-color: var(--LnkBlkBackground); /* Tło dla kontenera linków */
    display: flex; /* Umożliwia ułożenie linków obok siebie */
    justify-content: center; /* Wyśrodkowanie grupy linków */
    gap: 15px; /* Odstęp między poszczególnymi linkami */
    max-width: 800px; /* Maksymalna szerokość kontenera linków */
    padding-top: 5px;    /* Zwiększony padding górny */
    padding-bottom: 5px; /* Zwiększony padding dolny */
    margin-left: auto; /* Wyśrodkowanie kontenera w poziomie */
    margin-right: auto; /* Wyśrodkowanie kontenera w poziomie */
    flex-wrap: nowrap; /* Linki nie powinny się zawijać w wersji desktop */
}

/* Style dla linków bezpośrednio w kontenerze */
.footer-links-container a {
    color: var(--LnkBlkLinkText);
    text-decoration: none;
    font-family: 'Antonio', sans-serif;
    font-size: 15px;
    font-weight: bold; /* Ustawienie pogrubienia domyślnie, aby uniknąć zmiany szerokości przy hover */
    padding: 2px 8px; /* Padding góra/dół i boki dla każdego linku */
    text-align: center; /* Wyśrodkowanie tekstu w linku */
}

.footer-links-container a:hover {
    color: var(--LnkBlkLinkTextHover);
    text-decoration: underline;
}

/* --- Style dla mobilnego przełącznika i menu --- */
.link-block-mobile-toggle-area {
    display: none; /* Ukryte domyślnie, pokażemy na mobilnych */
    align-items: center;
    justify-content: center; /* Wyśrodkowanie zawartości (tekst + przycisk) */
    padding: 8px 15px; 
    background-color: var(--LnkBlkBackground); /* Tło dla obszaru przełącznika */
}

.link-block-mobile-info-text {
    margin-right: 10px;
    font-size: 0.9em;
    color: var(--LnkBlkTitleText); /* Używamy koloru tytułów dla spójności */
}

.link-block-toggler {
    background-color: var(--LnkBlkMobileBackgnd); /* Użycie nowej zmiennej */
    color: var(--LnkBlkMobileTxt);                /* Użycie nowej zmiennej */
    border: 1px solid var(--LnkBlkMobileBackgndHov); /* Dopasowanie koloru ramki do hover tła dla spójności */
    padding: 6px 10px; 
    font-size: 1.1rem; 
    line-height: 1; /* Dla spójnej wysokości przycisku */
    border-radius: .25rem;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.link-block-toggler:hover {
    background-color: var(--LnkBlkMobileBackgndHov); /* Użycie nowej zmiennej */
}

/* Style dla wersji mobilnej */
@media (max-width: 768px) {
    .link-block-wrapper {
        position: relative; /* Ustawienie kontekstu pozycjonowania dla modala */
    }

    .link-block-mobile-toggle-area {
        display: flex; /* Pokaż obszar przełącznika na mobilnych */
        align-items: center; /* Dla pionowego wyśrodkowania, jeśli elementy nie są absolutne */
        height: 48px; /* STAŁA WYSOKOŚĆ dla samego paska przełącznika */
        position: relative; /* Konieczne dla absolutnego pozycjonowania dzieci */
        /* Usunięto justify-content: center; aby umożliwić precyzyjne pozycjonowanie dzieci */
    }

    .footer-links-container { /* Modal pozycjonowany absolutnie */
        position: absolute; 
        bottom: 100%; /* Dolna krawędź modala przy górnej krawędzi .link-block-wrapper */
        left: 50%; 
        transform: translateX(-50%); 
        width: auto; 
        margin-bottom: 2px; /* Dodatkowy odstęp 2px od paska z hamburgerem */
        
        background-color: rgba(255, 255, 255, 0.75); 
        z-index: 1000; 
        /* box-shadow: 0 -2px 8px rgba(0,0,0,0.1); */ /* Usunięto cień */
        
        display: flex; 
        flex-direction: column;
        align-items: center;
        padding: 10px; 
        gap: 10px; 
        
        max-height: 70vh; /* Ograniczenie wysokości, aby nie zakrywało całej strony */
        overflow-y: auto; /* Scroll, jeśli zawartość jest za długa */

        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s; 
        pointer-events: none; 
    }

    .footer-links-container.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto; 
        transition: opacity 0.3s ease-in-out, visibility 0s linear 0s; 
    }

    /* Precyzyjne pozycjonowanie tekstu i hamburgera w mobilnym pasku */
    .link-block-mobile-toggle-area .link-block-mobile-info-text {
        position: absolute;
        top: 50%;
        /* Obliczenie dla 'right': 50% (środek rodzica) + połowa szerokości hamburgera + 10px odstępu */
        /* Szerokość hamburgera: padding (2*10px) + border (2*1px) + font-size (1.1rem ~ 17.6px) = ~39.6px. Połowa ~19.8px */
        right: calc(50% + 19.8px + 10px); 
        transform: translateY(-50%);
    }

    .link-block-mobile-toggle-area .link-block-toggler {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%); /* Idealne wyśrodkowanie hamburgera */
    }


    /* Style dla linków w rozwiniętym menu mobilnym */
    .footer-links-container.is-active a {
        width: 110px; 
        padding: 6px 8px;  
        font-family: 'Antonio', sans-serif; 
        font-size: 15px; /* Zwiększono rozmiar czcionki do 15px */
        font-weight: bold;
        text-align: center; 
        
        background-color: var(--LnkBlkMobileBackgnd); /* Użycie nowej zmiennej */
        color: var(--LnkBlkMobileTxt);                /* Użycie nowej zmiennej */
        border: 1px solid var(--LnkBlkMobileBackgnd); /* Dopasowanie koloru ramki do tła */
        text-decoration: none; 
        display: block; 
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; 
    }
    .footer-links-container.is-active a:hover {
        background-color: var(--LnkBlkMobileBackgndHov); /* Użycie nowej zmiennej */
        /* color: var(--LnkBlkMobileTxt); - tekst pozostaje biały, chyba że zdefiniujemy --LnkBlkMobileTxtHov */
        text-decoration: none; 
    }
    /* Usunięto .footer-links-container.is-active a:last-child { margin-bottom: 0; } ponieważ 'gap' zarządza odstępami */
}