/*
 * styles.css - Оформление в стиле "Ковер" (Covet Style) для DREAM FINANCE
 * Цвета:
 * - Główny Tło (Основной фон): #F5F5DC (Beż/Krem)
 * - Tło Akcentowe (Акцентный фон - "Ковер"): #2F4F4F (Ciemny Las/Dark Slate Gray)
 * - Tło Drugorzędne (Вторичный фон): #6B8E23 (Oliwkowy)
 * - Tło Nagłówka/Footer: #1E3030 (Bardzo Ciemna Zieleń)
 * - Akcent (Złoto/Miedź): #B8860B (Złoty/Goldenrod)
 * - Tekst: #1E3030 / #FFFFFF (kontrast)
 */

/* 1. Reset i Główne Style Body/Strony */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Użycie web-safe fontów (bez Google Fonts) */
body {
    background-color: #F5F5DC; /* Beż/Krem dla tła całej strony */
    color: #1E3030; /* Bardzo ciemna zieleń dla głównego tekstu */
    /* Georgia, Times New Roman, Palatino - bardziej formalne/eleganckie z "zaseczkami" (serif) */
    font-family: Georgia, 'Times New Roman', Times, serif;
    line-height: 1.6;
    text-align: center; /* Wyśrodkowanie głównego kontenera */
}

main {
    max-width: 1090px; /* Maksymalna szerokość body */
    margin: 0 auto; /* Pozycjonowanie pośrodku */
    padding: 0 15px; /* Dodatkowy padding na bokach dla mobilności */
    background-color: #FFFFFF; /* Białe tło wewnątrz kontenera */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* Delikatny cień */
}

h1, h2, h3, h4 {
    /* Verdana, Tahoma - bez zaseczek (sans-serif) dla lepszej czytelności na ekranie */
    font-family: 'Verdana', Tahoma, sans-serif;
    color: #1E3030;
    margin-bottom: 0.5em;
    padding-top: 0.5em;
}

h1 {
    font-size: 2.5em;
    color: #B8860B; /* Złoty akcent na najważniejszym nagłówku */
}

/* Globalne style dla sekcji */
section {
    padding: 40px 25px;
    margin-bottom: 10px;
}

/* Styl dla kontenera z przemieszanymi blokami */
#przemieszane-bloki {
    border-top: 4px solid #B8860B;
}

/* 2. Oформление ссылок-кнопок и кнопок */
.button, a.button {
    display: inline-block;
    padding: 12px 25px;
    margin-top: 20px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.1s ease;
    text-transform: uppercase;
}

/* Link-button w Bloku 1: контрастное цветовое разделение */
header a.button {
    background-color: #B8860B; /* Złoto/Miedź */
    color: #1E3030;
    border: 2px solid #1E3030;
    letter-spacing: 0.5px;
    box-shadow: 4px 4px 0 #1E3030; /* Efekt "podniesienia" */
}

header a.button:hover {
    background-color: #d4a737;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #1E3030;
}

/* Przycisk Subskrypcji (Blok 2) i Wyślij Opinie (Blok 5.2) */
form button.button {
    background-color: #2F4F4F; /* Ciemny Las */
    color: #FFFFFF;
    border: 2px solid #B8860B;
}

form button.button:hover {
    background-color: #467070;
    transform: translateY(-2px);
}

/* 3. Blok 1: Offer */
header#oferta {
    background-color: #1E3030; /* Bardzo Ciemna Zieleń */
    color: #F5F5DC;
    min-height: 470px; /* Minimalna wysokość bloku */
    padding: 80px 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: 8px solid #B8860B;
}

header#oferta h1, header#oferta p {
    color: #F5F5DC;
    max-width: 800px;
    text-align: center;
}

header#oferta h1 {
    font-size: 3.5em;
    line-height: 1.1;
    text-shadow: 2px 2px #00000050;
}

/* 4. Kontrastowe Kolory Tła dla Sekcji */

/* Blok 2: Formularz Zapisu (Zapisz się) */
#zapisz-sie {
    background-color: #6B8E23; /* Oliwkowy - Wyróżniony */
    color: #1E3030;
    padding: 60px 25px;
    border-bottom: 2px solid #2F4F4F;
}
#zapisz-sie h2 {
    color: #1E3030;
}

/* Blok 3: Produkty i Artykuł */
#produkty-i-artykul {
    background-color: #F5F5DC; /* Beż/Krem */
    color: #1E3030;
}

/* Blok 4: Specjaliści */
#specjalisci {
    background-color: #2F4F4F; /* Ciemny Las - Silny kontrast */
    color: #FFFFFF;
}
#specjalisci h2 {
    color: #B8860B;
}
#specjalisci h3, #specjalisci p {
    color: #FFFFFF;
}

/* Blok 4.1: Działalność i Media */
#dzialalnosc-i-media {
    background-color: #E6E6FA; /* Lawenda/Jasny Fiolet (akcent luksusu/tkaniny) */
    color: #1E3030;
    border-bottom: 2px solid #2F4F4F;
}

/* Blok 5: Opinie */
#opinie {
    background-color: #F0F8FF; /* Alicja Niebieski (lekko inny beż/krem) */
    color: #1E3030;
}

/* Blok 5.2: Dodaj Opinie */
#dodaj-opinie {
    background-color: #6B8E23; /* Oliwkowy - powtórzenie akcentu dla wezwania do działania */
    color: #1E3030;
}

/* Blok 6: Kontakt */
#kontakt-adres {
    background-color: #1E3030;
    color: #F5F5DC;
    padding: 60px 25px;
}
#kontakt-adres h2, #kontakt-adres address {
    color: #F5F5DC;
}

/* 5. Oформление статьи */
.artykul-promocyjny {
    background-color: #FFFFFF; /* Biel dla lepszej czytelności długiego tekstu */
    padding: 25px;
    margin: 30px 0;
    border: 1px solid #B8860B; /* Złota ramka */
    border-left: 8px solid #B8860B; /* Silne wyróżnienie lewej strony */
    text-align: left;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.artykul-promocyjny h3 {
    color: #2F4F4F;
    margin-top: 0;
    text-align: center;
}
.artykul-promocyjny p {
    text-align: justify;
    font-size: 0.95em;
}

/* 6. Oформление списков (Produkty, Specjaliści, Opinie) */
.produkty-lista, .lista-specjalistow, .lista-opinii {
    display: grid;
    gap: 25px;
    margin-top: 25px;
    text-align: left;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Siatka dla Produktów (3 kolumny na dużym ekranie) */
.produkty-lista {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.produkt {
    background-color: #FFFFFF;
    padding: 20px;
    border-left: 4px solid #6B8E23;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.produkt h4 {
    color: #6B8E23;
    padding-top: 0;
}

/* Siatka dla Specjalistów (4 kolumny na dużym ekranie) */
.lista-specjalistow {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    text-align: center;
}

.specjalista {
    padding: 15px;
    border: 1px dashed #B8860B;
}

.specjalista h3 {
    color: #B8860B;
}
.specjalista .rola {
    font-style: italic;
    font-size: 0.9em;
    color: #F5F5DC;
}

/* Siatka dla Opinii (1 kolumna, używamy blockquote) */
.lista-opinii {
    display: block; /* Powrót do standardowego przepływu dla lepszego blockquote */
    max-width: 750px;
}
.opinia {
    margin: 15px 0;
    padding: 20px 20px 10px 40px;
    border-left: 5px solid #6B8E23; /* Oliwkowa linia cytatu */
    background-color: #FFFFFF;
    font-style: italic;
    text-align: left;
    position: relative;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05);
}
.opinia::before {
    content: '“';
    font-size: 4em;
    color: #B8860B;
    position: absolute;
    left: 10px;
    top: 0;
    line-height: 1;
}
.opinia footer {
    display: block;
    margin-top: 10px;
    font-style: normal;
    font-weight: bold;
    color: #2F4F4F;
    text-align: right;
    font-size: 0.9em;
}

/* 7. Oформление формы */
.newsletter-form, .formularz-opinii {
    max-width: 500px;
    margin: 30px auto 0 auto;
    background-color: #F5F5DC; /* Wewnętrzne tło formularza */
    padding: 25px;
    border-radius: 8px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); /* Efekt "wklęsłości" */
}

.newsletter-form label, .formularz-opinii label {
    display: block;
    text-align: left;
    margin-bottom: 5px;
    font-weight: bold;
    color: #1E3030;
}

.newsletter-form input[type="email"],
.formularz-opinii input[type="text"],
.formularz-opinii textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    font-family: 'Verdana', Tahoma, sans-serif;
    background-color: #FFFFFF;
    transition: border-color 0.3s;
}

.newsletter-form input[type="email"]:focus,
.formularz-opinii input[type="text"]:focus,
.formularz-opinii textarea:focus {
    border-color: #B8860B;
    outline: none;
}

.privacy-note {
    font-size: 0.8em;
    color: #2F4F4F;
    margin-top: 10px;
}

/* 8. Mapa Google i Adres */
.google-map {
    margin-top: 30px;
    overflow: hidden;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    position: relative;
    height: 0;
    max-height: 450px;
    border: 4px solid #B8860B;
}

.google-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

address {
    font-style: normal;
    font-size: 1.1em;
    margin-top: 20px;
    line-height: 1.8;
}

/* 9. Footer (Copyright) */
footer {
    background-color: #1E3030;
    color: #8B8B8B;
    padding: 20px 0;
    font-size: 0.85em;
    border-top: 4px solid #B8860B;
}

.domainName {
    /* Styl dla elementu span.domainName (jeśli ma być widoczny) */
    color: #B8860B;
    font-weight: bold;
    display: block; /* Dla lepszej czytelności na osobnej linii */
    margin-top: 5px;
}

/* 10. Responsywność / Mobile Version */
@media (max-width: 768px) {

    /* Główne zmiany dla mniejszych ekranów */
    h1 {
        font-size: 2em;
    }
    h2 {
        font-size: 1.5em;
    }

    header#oferta {
        min-height: 350px; /* Zmniejszona wysokość na mobile */
        padding: 50px 15px;
    }

    section {
        padding: 30px 15px;
    }

    /* Zmiany w układzie list/siatek */
    .produkty-lista, .lista-specjalistow {
        grid-template-columns: 1fr; /* Wszystkie elementy w jednej kolumnie */
    }

    /* Wyróżnienie artykułu */
    .artykul-promocyjny {
        margin: 20px 0;
        padding: 15px;
        border-left: 5px solid #B8860B;
    }

    /* Przyciski i formularze */
    .button, a.button {
        padding: 10px 20px;
        font-size: 0.9em;
    }

    header a.button {
        box-shadow: 3px 3px 0 #1E3030;
    }

    header a.button:hover {
        transform: translate(-1px, -1px);
        box-shadow: 4px 4px 0 #1E3030;
    }
}