@charset "UTF-8";

/* ========================================= */
/* 1. GLOBALNY STYL I TYPOGRAFIA (NOWOCZESNE) */
/* ========================================= */
body, html {
    height: 100%;
}

@font-face {
    font-display: swap; /* Użycie swap dla lepszego ładowania czcionek */
}

body {
    font-size: 18px;
    line-height: 1.6;
    /* Użycie Roboto (zadeklarowanej w HTML) lub czystych czcionek systemowych */
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #333333; /* Ciemniejszy tekst dla lepszej czytelności */
    background-color: #F9F9F9; /* Lekko szare tło */
    min-width: 320px; /* Bazowy min-width dla urządzeń mobilnych */
}

a {
    color: #0077CC; /* Czysty, profesjonalny niebieski dla linków */
    text-decoration: none;
    transition: color 0.3s ease; /* Płynne przejście przy najechaniu */
}
a:hover {
    color: #3688d5;
    text-decoration: underline;
}
a img { border: 0 }
article, aside, details, footer, header, menu, nav, section { display: block }
.cl { display: none; } 

/* ========================================= */
/* 2. LAYOUT I KONTENERY */
/* ========================================= */
.shell {
    width: 100%;
    max-width: 1100px; /* Szerszy max-width dla nowoczesnych monitorów */
    margin: 0 auto;
    padding: 0 20px; 
    box-sizing: border-box;
}

ul { 
    line-height: 1.8; 
    list-style-position: outside; 
    margin-left: 20px;
    padding: 0;
}
ul:not(.menu-list):not(.social-links) li {
    padding-bottom: 5px;
}

/* ========================================= */
/* 3. NAWIGACJA (CZYSTA I KONTRASTOWA) */
/* ========================================= */
/* --- Główna nawigacja i resetowanie dla responsywności --- */
.top-nav {
    background: #bbccd4;
    height: 59px; /* Wysokość dla desktop */
}
.top-nav ul {
    list-style: none;
    font-size: 21px;
    line-height: 58px; /* Wyrównanie w pionie dla desktop */
    font-weight: 700;
    margin: 0; /* Reset marginesów */
    padding: 0; /* Reset paddingów */
}
.top-nav li {
    float: left;
    padding: 0;
    border-right: 1px solid #dbeef3;
}
.top-nav li a {
    color: #0a3c4c;
    display: block; /* Upewnienie się, że link zajmuje cały obszar */
    padding: 0 20px;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}

/* --- Podświetlenie Aktywnego Elementu i Hover (wg kolorów watorski.pl) --- */

/* Aktywna zakładka */
.top-nav li.active {
    background-color: #305D73; 
    border-right: none; 
}
.top-nav li.active a {
    color: #FFFFFF;
}

/* Efekt po najechaniu (hover) na link */
.top-nav li:not(.active):hover {
    background-color: #5b8fe3; 
}
.top-nav li:not(.active):hover a {
    color: #FFFFFF; 
}

/* --- Dropdown (menu rozwijane) --- */
.dropdown {
    position: relative;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #bbccd4;
    min-width: 155px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 100;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown-content a {
    line-height: 1.5; /* Lepsze odstępy w rozwijanej liście */
    padding: 10px 20px;
    border-right: none; /* Usuń obramowanie dla linków wewnątrz dropdown */
}
.dropdown-content a:hover {
    background-color: #5b8fe3; 
    color: #FFFFFF;
}

/* --- Przycisk menu mobilnego --- */
.nav-btn {
    display: none; /* Ukryty na desktop */
    width: 50px;
    height: 59px;
    line-height: 59px;
    text-align: center;
    color: #0a3c4c;
    font-size: 1.2em;
    cursor: pointer;
}
.nav-btn span {
    display: none; /* Span użyty w starym kodzie do zmiany stanu - lepiej użyć CSS do ikony hamburgera */
}

/* ========================================= */
/* 4. GŁÓWNA TREŚĆ I SEKCJE (NOWOCZESNE BOKSY) */
/* ========================================= */
.main {
    padding: 20px 0;
    min-height: calc(100vh - 59px - 150px);
}
.container {
    padding: 0;
}

.main h1, .main h2, .main h3, .main h4 {
    font-family: 'Roboto', sans-serif;
    color: #003366; /* Nagłówki w kolorze głównym */
    font-weight: 700;
    margin-top: 25px;
    margin-bottom: 15px;
    line-height: 1.2;
}
.main h1 { font-size: 38px; }
.main h2 { font-size: 30px; border-bottom: 2px solid #DDDDDD; padding-bottom: 5px; }
.main h3 { font-size: 24px; }
.main h4 { font-size: 20px; }

.main section {
    background: none;
    padding: 20px 0;
    margin-bottom: 20px;
    background-color: #FFFFFF; /* Białe tło dla boksów z treścią */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Subtelny cień */
    padding: 30px;
}
.main section:last-of-type {
    margin-bottom: 0;
}
.main .testimonial {
    text-align: center;
    padding: 30px;
}

hr {
    border: 0;
    height: 1px;
    background: #DDDDDD;
    margin: 20px 0;
}

/* ========================================= */
/* 5. PRZYCISKI CTA (WEZWANIE DO DZIAŁANIA) */
/* ========================================= */

/* #rcorners3 -> cta-primary */
.cta-primary {
    display: inline-block;
    border-radius: 50px;
    background: #00A388; /* Fresh Teal/Cyan - akcent */
    border: 2px solid #00806D;
    padding: 15px 30px;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    text-align: center;
    color: #FFFFFF !important; 
    width: auto;
    margin: 10px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.cta-primary:hover {
    background: #00806D;
    text-decoration: none;
    transform: translateY(-2px); /* Delikatne podniesienie przy najechaniu */
}

/* #rcorners4 -> cta-secondary */
.cta-secondary {
    display: inline-block;
    border-radius: 50px;
    background: #FFFFFF;
    border: 2px solid #003366; /* Ramka w kolorze głównym */
    padding: 15px 30px;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    text-align: center;
    color: #003366 !important; /* Tekst w kolorze głównym */
    width: auto;
    margin: 10px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s;
}
.cta-secondary:hover {
    background: #EAEAEA;
    text-decoration: none;
}

/* ========================================= */
/* 6. STOPKA (FOOTER) */
/* ========================================= */
.site-footer {
    background-color: #333333; /* Ciemne, solidne tło */
    color: #FFFFFF;
    padding: 30px 20px;
    text-align: center;
    font-size: 15px;
}
.site-footer a {
    color: #88CCFF; /* Jasne linki w stopce */
}
.site-footer p {
    margin: 5px 0;
}
.site-footer img {
    border-radius: 50%; /* Zaokrąglenie zdjęcia profilowego */
    margin-bottom: 10px;
    border: 3px solid #00A388; /* Akcentująca ramka */
}
.site-footer .author-name {
    font-weight: 700;
    font-size: 20px;
    color: #FFFFFF;
    margin-bottom: 5px;
    /* Usunięte stare style #rcorners2 */
}
.site-footer .author-title {
    font-style: italic;
    color: #CCCCCC;
    margin-bottom: 15px;
}
.site-footer .social-links {
    list-style: none;
    padding: 0;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.site-footer .social-links li {
    margin: 0 10px;
}

/* ========================================= */
/* 7. MEDIA QUERIES (ULEPSZONA RESPONSYWNOŚĆ)*/
/* ========================================= */
/* --- Media Query dla urządzeń mobilnych/tabletów (max 890px) --- */
@media screen and (max-width: 890px) {

    body {
        min-width: 100%; /* Resetowanie minimalnej szerokości */
    }
    .shell {
        width: 96%; /* Kontener zajmuje całą szerokość */
    }
    .top-nav {
        height: auto; /* Zezwolenie na zmianę wysokości */
    }

    /* Ukrycie menu na start i wyświetlenie przycisku */
    .top-nav ul {
        display: none; /* Ukryj listę linków domyślnie */
        float: none;
        width: 100%;
        line-height: normal;
        text-align: left;
    }
    /* Pokazanie przycisku menu */
    .nav-btn {
        display: block;
        float: right;
    }
    /* Gdy menu jest rozwinięte przez JS, klasa 'active' lub style inline je pokażą */

    .top-nav li {
        float: none; /* Elementy li zajmują całą szerokość */
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #dbeef3; /* Dodaj separator na mobile */
        height: auto;
    }
    .top-nav li a {
        padding: 15px 20px;
        line-height: 1.2em;
    }

    /* Dropdown na Mobile */
    .dropdown .dropdown-content {
        position: static; /* Rozwijanie pod spodem, nie na absolutnej pozycji */
        width: 100%;
        box-shadow: none;
    }
    .dropdown-content a {
        padding-left: 40px; /* Wcięcie dla sub-linków */
    }
}

    /* Nagłówki */
    .main h1 { font-size: 28px; }
    .main h2 { font-size: 22px; }
    .main h3 { font-size: 20px; }

    /* Przyciski CTA stackują się na mobile */
    .cta-primary, .cta-secondary {
        display: block;
        width: calc(100% - 20px);
        margin: 10px auto;
    }
    .main section { padding: 20px; }
}

/* WAŻNE: USUNIĘCIE WSZYSTKICH STARYCH, ZBĘDNYCH I NIEPROFESJONALNYCH STYLÓW */
.dropbtn, .dropdown, .dropdown-content, #li1, #li2, #grad1, #rcorners1, #rcorners2, #rcorners3, #rcorners4, .ul.a, .ul.b, .ul.c, #wroc, #wroc1 {
    /* Te style zostały usunięte lub zastąpione nowymi, czystszymi klasami */
}