* {
    font-family: "Mukta Malar", sans-serif;
    font-weight: 200;
    font-style: normal;
    font-size: 0.95rem;
    line-height: 1.45rem;
    font-optical-sizing: auto;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Alegreya Sans SC", sans-serif;
    font-weight: 450;
}
h1 {
    font-size: 1.45rem;
    line-height: 1.95rem;
}
h2 {
    font-size: 1.10rem;
    line-height: 1.20rem;
}
h3, h4, h5, h6 {
    font-size: 1.00rem;
    line-height: 1.20rem;
}
/* Styl dla body, aby usunąć domyślne marginesy i zapewnić pełną wysokość */
html, body {
    margin: 0;
    padding: 0;
    background-color: #f7efed; /* Opcjonalne tło dla lepszej widoczności */
    /* Usunięto flexbox z body, aby umożliwić normalny przepływ i stałe menu */
}

/* Główny kontener zawartości (dla centrowania logo) */
main {
    max-width: 1000px;
    padding: 4.50rem 1.00rem 0 1.00rem; /* Dodajemy padding, aby treść nie chowała się pod headerem */
    margin: 0 auto 0 auto; /* Centrowanie kontenera */
    text-align: justify;
}

/* Styl dla kontenera SVG */
.svg-container {
    /* Usunięto max-width/max-height oparte na vw/vh, bo są nieodpowiednie dla logo w headerze */
    display: flex; /* Użycie Flexbox w kontenerze, aby SVG się dopasowało */
    justify-content: center;
    align-items: center;
    height: 100%; /* Kontener SVG powinien wypełniać wysokość .logo-placeholder */
    width: auto; /* Szerokość dopasuje się do SVG */
}

/* Styl dla samego SVG */
#LOGO_STACJARELACJA {
    display: block; /* Upewnia się, że SVG jest traktowane jak blok */
    height: 100%;   /* SVG wypełni wysokość kontenera */
    width: auto;    /* Szerokość dostosuje się automatycznie, zachowując proporcje */
    max-width: 100%; /* Zapobiega wyjściu poza kontener, jeśli jest bardzo wąski */
    /* max-height: 100%; jest teraz zbędne przy height: 100% */
}

.logo-placeholder { /* Możesz tu wstawić mniejsze logo w przyszłości */
    font-weight: bold;
    color: #734D57;
    height: 100%; /* Placeholder powinien zajmować całą dostępną wysokość w headerze */
    display: flex; /* Aby .svg-container mógł użyć height: 100% */
    align-items: center; /* Wycentrowanie SVG w pionie */
}

/* Style dla ścieżek w SVG (przeniesione z SVG dla czystości) */
#LOGO_STACJARELACJA .cls-1 {
    fill: #1d1d1b;
}

#LOGO_STACJARELACJA .cls-2 {
    fill: #f4a8ae;
}

#LOGO_STACJARELACJA .cls-3 {
    fill: #A6858D;
}
#LOGO_STACJARELACJA .cls-4 {
    fill: #734D57;
}

/* --- Style Menu --- */
header {
    max-width: 1000px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Cień pod menu */
    z-index: 1000; /* Aby menu było na wierzchu */
    height: 4.25rem; /* Stała wysokość nagłówka */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Rozłożenie elementów */
    padding: 0.50rem 1.50rem 0.50rem 1.50rem;
    margin: 0 auto 0 auto;
    box-sizing: border-box; /* Padding wliczony w wysokość/szerokość */
}
.header-placeholder {
    position: fixed; /* Stała pozycja na górze */
    top: 0;
    left: 0;
    width: 100%; /* Szerokość placeholdera */
    background-color: #F2E1E6; /* Tło dla menu */
}

.logo-placeholder { /* Możesz tu wstawić mniejsze logo w przyszłości */
    font-weight: bold;
    color: #1d1d1b;
}
/* Menu Desktopowe */
.desktop-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Poziomy układ */
}

.desktop-menu li {
    margin-left: 15px; /* Odstęp między pozycjami */
}

.desktop-menu li:not(:last-child)::after {
    content: "|"; /* Separator */
    margin-left: 15px; /* Odstęp separatora */
    color: #ccc; /* Kolor separatora */
}

.desktop-menu a {
    text-decoration: none;
    color: #1d1d1b; /* Kolor linków */
}

/* Ikona Menu Mobilnego */
.mobile-menu-toggle {
    display: none; /* Domyślnie ukryta */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}
.mobile-menu-toggle .material-symbols-outlined {
    margin: 0.50rem 0 0 0;
    font-size: 3.25rem; /* Rozmiar ikony */
    color: #A6858D;
    font-weight: 100;
}

/* Menu Mobilne (Side Menu) */
.mobile-menu {
    position: fixed;
    top: 0;
    left: -100%; /* Schowane poza ekranem */
    width: 250px; /* Szerokość menu */
    height: 100%;
    background-color: #ffffff;
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    z-index: 1001; /* Wyżej niż header */
    transition: left 0.3s ease-in-out; /* Animacja wysuwania */
    padding-top: 60px; /* Odstęp od góry */
    box-sizing: border-box;
}

.mobile-menu.open {
    left: 0; /* Pokazane menu */
}

.mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu li a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: #1d1d1b;
    border-bottom: 1px solid #eee; /* Separator */
    font-family: sans-serif;
}

/* Media Query dla urządzeń mobilnych */
@media (max-width: 768px) {
    .desktop-menu {
        display: none; /* Ukryj menu desktopowe */
    }
    .mobile-menu-toggle {
        display: block; /* Pokaż ikonę menu mobilnego */
    }
}