/* Generalne style i reset */
:root {
    --kolor-niebieski-ukraina: #005BBB; /* Głęboki niebieski, jak w fladze */
    --kolor-zolty-ukraina: #FFD500;   /* Ciepły żółty, jak w fladze */
    --kolor-neutralny-jasny: #F5F5DC; /* Beżowy, neutralny, symbol ziemi/domu */
    --kolor-neutralny-ciemny: #333333; /* Ciemny szary dla tekstów */
    --kolor-akcent-zielony: #4CAF50; /* Zieleń nadziei, rzadko używana */
    --kolor-akcent-czerwony: #FF6347; /* Rzadki akcent na błędy/ostrzeżenia */
    --czcionka-glowna: "Arial", sans-serif; /* Alternatywa dla Google Fonts */
    --czcionka-tytulowa: "Georgia", serif; /* Tradycyjna, czytelna czcionka */
    --max-szerokosc-tresci: 1090px;
}

body {
    font-family: var(--czcionka-glowna);
    line-height: 1.6;
    margin: 0 auto; /* Centrowanie body */
    max-width: var(--max-szerokosc-tresci); /* Maksymalna szerokość body */
    background-color: var(--kolor-neutralny-jasny);
    color: var(--kolor-neutralny-ciemny);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Delikatny cień dla wyróżnienia body */
}

/* Upewnienie się, że wszystkie elementy dziedziczą box-sizing */
*, *::before, *::after {
    box-sizing: border-box;
}

h1, h2, h3 {
    font-family: var(--czcionka-tytulowa);
    color: var(--kolor-niebieski-ukraina);
    margin-bottom: 0.8em;
}

h1 {
    font-size: 2.5em;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

h2 {
    font-size: 2em;
    text-align: center;
    color: var(--kolor-zolty-ukraina); /* H2 w kolorze żółtym */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

h3 {
    font-size: 1.5em;
    color: var(--kolor-niebieski-ukraina); /* H3 w kolorze niebieskim */
}

section {
    padding: 3em 1.5em; /* Wewnętrzne odstępy dla bloków */
    margin-bottom: 1.5em; /* Odstęp między blokami */
    border-radius: 8px; /* Zaokrąglone rogi dla sekcji */
}

/* Kontrastowe kolory dla sekcji (losowo przemieszane w HTML) */
#oferta {
    background-color: var(--kolor-niebieski-ukraina);
    color: white;
    min-height: 470px; /* Minimalna wysokość bloku offer */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 4em 2em;
    position: relative;
    overflow: hidden; /* Dla ewentualnych tleń */
}
#oferta h1 {
    color: var(--kolor-zolty-ukraina);
    font-size: 3em;
    margin-bottom: 0.5em;
}
#oferta p {
    font-size: 1.2em;
    max-width: 800px;
    margin-bottom: 2em;
}

/* Styl dla linku-przycisku w pierwszym bloku */
.button {
    display: inline-block;
    background-color: var(--kolor-zolty-ukraina);
    color: var(--kolor-niebieski-ukraina);
    padding: 1em 2.5em;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: 2px solid var(--kolor-zolty-ukraina);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.button:hover {
    background-color: #e0bb00; /* Ciemniejszy żółty */
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

/* Różne schematy kolorystyczne dla pozostałych bloków */
/* Stosowane na przemian, aby zapewnić kontrast */

/* Kolorystyka A (jasne tło, ciemny tekst) */
section:nth-of-type(odd):not(#oferta) {
    background-color: white;
    color: var(--kolor-neutralny-ciemny);
    border: 1px solid #eee;
}
section:nth-of-type(odd):not(#oferta) h2 {
    color: var(--kolor-niebieski-ukraina);
}

/* Kolorystyka B (niebieskie tło, żółty/biały tekst) */
section:nth-of-type(even):not(#oferta) {
    background-color: var(--kolor-niebieski-ukraina);
    color: white;
}
section:nth-of-type(even):not(#oferta) h2 {
    color: var(--kolor-zolty-ukraina);
}
section:nth-of-type(even):not(#oferta) h3 {
    color: var(--kolor-zolty-ukraina);
}
section:nth-of-type(even):not(#oferta) .button {
    background-color: var(--kolor-zolty-ukraina);
    color: var(--kolor-niebieski-ukraina);
    border-color: var(--kolor-zolty-ukraina);
}
section:nth-of-type(even):not(#oferta) .button:hover {
    background-color: #e0bb00;
}


/* Styl dla artykułu w bloku produktów */
.artykul {
    background-color: var(--kolor-zolty-ukraina); /* Tło żółte dla wyróżnienia */
    color: var(--kolor-niebieski-ukraina);
    padding: 2em;
    border-radius: 8px;
    margin-top: 3em;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border: 2px solid var(--kolor-niebieski-ukraina);
}
.artykul h3 {
    color: var(--kolor-niebieski-ukraina);
    margin-bottom: 1em;
}
.artykul p {
    font-size: 1.1em;
    line-height: 1.8;
}

/* Formularze i przyciski */
form {
    background-color: white;
    padding: 2.5em;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    max-width: 600px;
    margin: 2em auto;
    border: 1px solid #ddd;
}

form label {
    display: block;
    margin-bottom: 0.8em;
    font-weight: bold;
    color: var(--kolor-niebieski-ukraina);
}

form input[type="email"],
form textarea {
    width: 100%;
    padding: 1em;
    margin-bottom: 1.5em;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    font-family: var(--czcionka-glowna);
    transition: border-color 0.3s ease;
}

form input[type="email"]:focus,
form textarea:focus {
    border-color: var(--kolor-zolty-ukraina);
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 213, 0, 0.2);
}

form button[type="submit"] {
    display: block;
    width: 100%;
    padding: 1em;
    background-color: var(--kolor-niebieski-ukraina);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-transform: uppercase;
}

form button[type="submit"]:hover {
    background-color: #004a99; /* Ciemniejszy niebieski */
    transform: translateY(-2px);
}

/* Styl dla list produktów, specjalistów, opinii */
.produkty-lista, .specjalisci-lista, .opinie-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5em;
    margin-top: 2em;
}

.produkt, .specjalista, .opinia {
    background-color: white;
    padding: 1.5em;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 1px solid #eee;
}

/* Kontrast dla elementów w niebieskich sekcjach */
section:nth-of-type(even):not(#oferta) .produkt,
section:nth-of-type(even):not(#oferta) .specjalista,
section:nth-of-type(even):not(#oferta) .opinia {
    background-color: var(--kolor-neutralny-jasny);
    color: var(--kolor-neutralny-ciemny);
    border-color: var(--kolor-zolty-ukraina);
}
section:nth-of-type(even):not(#oferta) .produkt h3,
section:nth-of-type(even):not(#oferta) .specjalista h3,
section:nth-of-type(even):not(#oferta) .opinia h3 {
    color: var(--kolor-niebieski-ukraina);
}


.opinia {
    font-style: italic;
    border-left: 5px solid var(--kolor-zolty-ukraina);
    padding-left: 1em;
}
.opinia footer {
    margin-top: 0.8em;
    font-weight: bold;
    color: var(--kolor-niebieski-ukraina);
    font-style: normal;
}

/* Mapy Google */
.map-container {
    margin-top: 2em;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden; /* Upewnia się, że iframe ma zaokrąglone rogi */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

iframe {
    display: block; /* Usuwa zbędne marginesy pod iframe */
    width: 100%;
    height: 450px;
    border: none;
}

/* Stopka */
footer {
    background-color: var(--kolor-neutralny-ciemny);
    color: white;
    text-align: center;
    padding: 2em 1em;
    font-size: 0.9em;
    margin-top: 2em;
    border-top: 5px solid var(--kolor-zolty-ukraina); /* Akcent żółty */
    border-radius: 0 0 8px 8px; /* Zaokrąglone tylko na dole */
}

.domainName {
    color: var(--kolor-zolty-ukraina); /* Wyróżnienie nazwy domeny */
    font-weight: bold;
}

/* Stylizacja dla linii podziału */
hr {
    border: none;
    border-top: 2px dashed var(--kolor-zolty-ukraina);
    margin: 3em 0;
    width: 50%;
    opacity: 0.7;
}

/* ===========================
   Mobilna Wersja (Media Queries)
   =========================== */
@media (max-width: 768px) {
    body {
        margin: 0;
        max-width: 100%;
        box-shadow: none;
    }

    section {
        padding: 2em 1em;
        margin-bottom: 1em;
        border-radius: 0;
    }

    h1 {
        font-size: 2em;
    }

    h2 {
        font-size: 1.6em;
    }

    h3 {
        font-size: 1.3em;
    }

    #oferta {
        min-height: 400px;
        padding: 3em 1em;
    }
    #oferta h1 {
        font-size: 2.2em;
    }
    #oferta p {
        font-size: 1em;
    }

    .button {
        padding: 0.8em 1.5em;
        font-size: 0.9em;
    }

    .produkty-lista, .specjalisci-lista, .opinie-lista {
        grid-template-columns: 1fr; /* Jeden element w kolumnie */
        gap: 1em;
    }

    .produkt, .specjalista, .opinia {
        padding: 1em;
    }

    form {
        padding: 1.5em;
        margin: 1em auto;
        max-width: 95%;
    }

    form input[type="email"],
    form textarea,
    form button[type="submit"] {
        padding: 0.8em;
        font-size: 1em;
    }

    iframe {
        height: 300px; /* Mniejsza wysokość mapy na mobile */
    }

    footer {
        padding: 1.5em 1em;
        font-size: 0.8em;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.8em;
    }
    h2 {
        font-size: 1.4em;
    }
    #oferta h1 {
        font-size: 1.8em;
    }
    #oferta p {
        font-size: 0.9em;
    }
    .button {
        padding: 0.7em 1.2em;
        font-size: 0.85em;
    }
    .artykul {
        padding: 1.5em;
    }
    .artykul p {
        font-size: 0.9em;
    }
}