/* ==========================================================================
   1. USTAWIENIA GŁÓWNE (BODY #222)
   ========================================================================== */

:root {
    --body-bg: #222222;
    --content-bg: #000000;
    --text-color: #cccccc;
    --highlight-color: #ff0000;
    /* Zdefiniowanie wspólnej czcionki dla całej strony */
    --main-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    background-color: var(--body-bg) !important;
    color: var(--text-color) !important;
    font-family: var(--main-font);
}

/* Linki */
a {
    color: #4a9eff;
    text-decoration: none !important; /* Brak podkreśleń */
    transition: color 0.2s ease;
}

a:hover {
    color: var(--highlight-color);
}

/* ==========================================================================
   2. HEADER (LOGO)
   ========================================================================== */

.mod-custom img[src*="logo.svg"] {
    max-width: 500px !important;
    width: 100%;
    height: auto;
}

/* ==========================================================================
   3. SIDEBAR (LEWE MENU)
   ========================================================================== */

/* 1. RESET KARTY (Usuwanie białej ramki Bootstrapa) */
.container-sidebar-left .card {
    /* Wyzerowanie zmiennych Bootstrapa */
    --bs-card-border-width: 0 !important;
    --bs-card-border-color: transparent !important;
    --bs-card-box-shadow: none !important;
    --card-border-width: 0 !important;
    --card-border-color: transparent !important;

    /* Wyłączenie standardowych stylów */
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    
    margin-bottom: 20px;
}

/* 2. Nagłówek Menu (Gradient + Czerwony Napis) */
.container-sidebar-left .card-header {
    background: linear-gradient(to bottom, #dcdcdc 0%, #999999 100%);
    color: #ff0000; /* Czerwony */
    
    /* ZMIANA: Czcionka taka sama jak w pozycjach menu (bezszeryfowa) */
    font-family: var(--main-font); 
    
    font-weight: bold;
    font-size: 1.3rem;
    text-transform: uppercase;
    
    /* Ramka ręczna (Góra i Boki) */
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    border-right: 1px solid #666;
    border-bottom: 1px solid #000;
    
    border-radius: 8px 8px 0 0;
    padding: 12px 15px;
}

/* 3. Ciało Menu (Czarne tło) */
.container-sidebar-left .card-body {
    padding: 0;
    background-color: #000;
    
    /* Ramka ręczna (Dół i Boki) */
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    border-top: none;
    
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

/* 4. Elementy Listy Menu */
.container-sidebar-left .mod-menu li {
    padding: 0 !important;
    margin: 0 !important;
}

/* Zwykły stan linku */
.container-sidebar-left .mod-menu > .nav-item > a {
    color: #cccccc;
    padding: 10px 15px;
    display: block;
    border-bottom: 1px solid #222; /* Ciemna linia oddzielająca */
    border-left: 3px solid transparent; /* Rezerwacja miejsca na pasek */
    transition: all 0.2s ease;
}

/* Stan: HOVER (Najazd myszką) */
.container-sidebar-left .mod-menu > .nav-item > a:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
    padding-left: 20px;
}

/* Stan: CURRENT (Tylko aktualnie otwarta strona) - CZERWONA KRESKA */
.container-sidebar-left .mod-menu > .nav-item.current > a {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
    padding-left: 20px;
    border-left: 3px solid #ff0000; /* Czerwona kreska tylko tutaj */
    font-weight: bold;
}

/* 5. Podmenu */
.container-sidebar-left .mod-menu__sub {
    list-style: none;
    padding-left: 0;
    background-color: #0a0a0a;
}

.container-sidebar-left .mod-menu__sub .nav-item a {
    color: #999;
    padding: 8px 10px 8px 30px;
    display: block;
    position: relative;
    border-bottom: 1px solid #1a1a1a;
    border-left: none; /* Brak kreski w podmenu (chyba że chcesz) */
}

.container-sidebar-left .mod-menu__sub .nav-item a::before {
    content: "↳";
    position: absolute;
    left: 12px;
    top: 7px;
    font-size: 14px;
    color: #555;
}

/* 4. Elementy Listy Menu */
.container-sidebar-left .mod-menu li {
    padding: 0 !important;
    margin: 0 !important;
}

/* Zwykły stan linku */
.container-sidebar-left .mod-menu > .nav-item > a {
    color: #cccccc;
    padding: 10px 15px;
    
    /* ZMIANA: Powiększenie czcionki głównej w menu */
    font-size: 1.15rem !important; 
    
    display: block;
    border-bottom: 1px solid #222; /* Ciemna linia oddzielająca */
    border-left: 3px solid transparent; /* Rezerwacja miejsca na pasek */
    transition: all 0.2s ease;
}

/* Stan: HOVER (Najazd myszką) */
.container-sidebar-left .mod-menu > .nav-item > a:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
    padding-left: 20px;
}

/* Stan: CURRENT (Tylko aktualnie otwarta strona) - CZERWONA KRESKA */
.container-sidebar-left .mod-menu > .nav-item.current > a {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
    padding-left: 20px;
    border-left: 3px solid #ff0000; /* Czerwona kreska tylko tutaj */
    font-weight: bold;
}

/* 5. Podmenu */
.container-sidebar-left .mod-menu__sub {
    list-style: none;
    padding-left: 0;
    background-color: #0a0a0a;
}

.container-sidebar-left .mod-menu__sub .nav-item a {
    color: #999;
    padding: 8px 10px 8px 30px;
    
    /* ZMIANA: Lekkie powiększenie podmenu (żeby nie było za małe przy dużym menu) */
    font-size: 1.05rem !important;
    
    display: block;
    position: relative;
    border-bottom: 1px solid #1a1a1a;
    border-left: none; 
}

.container-sidebar-left .mod-menu__sub .nav-item a::before {
    content: "↳";
    position: absolute;
    left: 12px;
    top: 7px;
    font-size: 14px;
    color: #555;
}

/* ==========================================================================
   6. ELEMENTY (FORMULARZE, PRZYCISKI)
   ========================================================================== */

input.form-control, textarea.form-control {
    background-color: #fff !important;
    border: 1px solid #ccc;
    color: #000 !important;
}

label {
    color: #ffffff;
}

.com-content-article__body img {
    border: none !important;
    max-width: 100%;
    height: auto;
}

.btn-primary, .btn-secondary {
    background: linear-gradient(to bottom, #dcdcdc 0%, #999999 100%);
    border: 1px solid #666;
    color: #000 !important;
    font-weight: bold;
}

/* ==========================================================================
   7. UKŁAD STRONY (GRID I ODSTĘPY)
   ========================================================================== */

/* Mobilnie (domyślnie) */
.site-grid {
    padding-top: 10px;
    display: grid;
    gap: 30px;
}

/* Desktop (szerokie ekrany) */
@media (min-width: 992px) {
    .site-grid {
        /* ZMNIEJSZONY ODSTĘP OD LOGO (było 40px, jest 10px) */
        padding-top: 10px !important; 
        
        column-gap: 30px;
        align-items: start;
    }

    /* Zerowanie marginesów górnych elementów, by były równo */
    .container-sidebar-left > :first-child,
    .sidebar-left,
    .container-sidebar-left .card, /* Poprawiony selektor */
    .grid-child,
    .container-component {
        margin-top: 0 !important;
    }
}

/* ==========================================================================
   INTERAKTYWNE CERTYFIKATY (HOTSPOTS) - OVAL FIX
   ========================================================================== */

/* 1. Kontener */
.cert-wrapper {
    position: relative;
    display: block;
    width: 100%;
    max-width: 690px;
    margin: 0 auto;
}

/* 2. Zdjęcie tła */
.cert-base-img {
    width: 100%;
    height: auto;
    display: block;
}

/* 3. Hotspoty - Owalne (Jajowate) */
.cert-hotspot {
    position: absolute;
    
    /* SZEROKOŚĆ bez zmian */
    width: 22%; 
    
    /* WYSOKOŚĆ większa - tworzy owal */
    aspect-ratio: 1 / 1.10; /* Stosunek szerokości do wysokości (wyższy niż szerszy) */
    
    border-radius: 50%; /* Nadal zaokrąglone, ale przy aspect-ratio zrobi się jajo */
    
    /* Domyślnie przezroczyste */
    background-color: transparent;
    border: none;
    
    transition: all 0.3s ease;
    cursor: pointer;
    z-index: 10;
}

/* 4. Efekt po najechaniu - Czerwona poświata bez twardej ramki */
.cert-hotspot:hover {
    /* Delikatne wypełnienie */
    background-color: rgba(255, 0, 0, 0.05);
    
    transform: scale(1.05);
}

/* 5. Skorygowane pozycje (dla wyższych owali) */
.spot-1 { top: 9%; right: 0.5%; }
.spot-2 { top: 29.5%; right: 0.5%; }
.spot-3 { top: 50%; right: 0.5%; }
.spot-4 { top: 70.5%; right: 0.5%; }

/* Korekta dla telefonów */
@media (max-width: 500px) {
    .cert-hotspot { right: 0%; }
}

/* ==========================================================================
   SEKCJA O FIRMIE (Układ Zygzak)
   ========================================================================== */

/* Główny kontener */
.ofirmie-container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px; /* Odstęp między rzędami */
}

/* Pojedynczy rząd (trzyma zdjęcie i tekst) */
.ofirmie-row {
    display: flex;
    align-items: center; /* Wyśrodkowanie pionowe */
    justify-content: space-between; /* Rozrzucenie na boki */
    gap: 30px; /* Odstęp między zdjęciem a tekstem */
}

/* Stylizacja pudełka z tekstem */
.ofirmie-text {
    background-color: #8c8c8ccc; /* Szare tło (jak w oryginale) */
    border: 2px solid #ffffff; /* Biała ramka */
    color: #ffffff;
    padding: 20px;
    width: 55%; /* Tekst zajmuje trochę więcej miejsca */
    box-shadow: 0 5px 15px rgba(0,0,0,0.5); /* Cień */
    font-size: 0.95rem;
    line-height: 1.5;
    position: relative;
    border-radius: 5px;
}

/* Stylizacja kontenera na zdjęcie */
.ofirmie-img {
    width: 40%; /* Zdjęcie zajmuje mniej miejsca */
    display: flex;
    justify-content: center;
}

/* Same zdjęcia */
.ofirmie-img img {
    max-width: 100%;
    height: auto;
    border: none !important; /* Usunięcie ramek systemowych */
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.5)); /* Lekki cień pod PNG */
}

/* --- RESPONSYWNOŚĆ (TELEFONY) --- */
@media (max-width: 768px) {
    .ofirmie-row {
        flex-direction: column !important; /* Układamy jeden pod drugim */
        text-align: center;
        gap: 20px;
    }
    
    /* Na telefonie zawsze najpierw obrazek, potem tekst (dla czytelności) */
    /* Triki Flexboxa do zmiany kolejności */
    .ofirmie-row:nth-child(even) {
        flex-direction: column-reverse !important;
    }

    .ofirmie-text {
        width: 100%; /* Tekst na całą szerokość */
    }

    .ofirmie-img {
        width: 60%; /* Zdjęcie trochę mniejsze na środku */
    }
}

/* Poprawka dla formularza kontaktowego */
body > div.site-grid > div.grid-child.container-component > main > div > div.com-contact__form.contact-form {
    padding-bottom: 30px;
}

/* ==========================================================================
   STYLIZACJA NAGŁÓWKÓW (H1-H6)
   TERAZ: Taka sama czcionka jak w menu (bezszeryfowa)
   ALE: Z zachowaniem czerwonego koloru i cienia
   ========================================================================== */

h1, h2, h3, h4, h5, h6, .page-header h1 {
    /* 1. KROJ PISMA - ZMIANA na bezszeryfowy (taki jak w menu) */
    font-family: var(--main-font) !important;

    color: #ff0000 !important;

    /* 4. WIELKOŚĆ LITER - Tylko duże (BEZ ZMIAN) */
    text-transform: uppercase !important;

    /* 5. GRUBOŚĆ (BEZ ZMIAN) */
    font-weight: bold !important;

    /* 6. DODATKI */
    letter-spacing: 1px;
    margin-top: 0 !important;
    padding-bottom: 15px;
    border-bottom: 1px solid #444;
}

/* Dopasowanie wielkości */
h1, .page-header h1 { font-size: 1.8rem !important; }
h2 { font-size: 1.5rem !important; }
h3 { font-size: 1.3rem !important; }

.yellow_title .page-header h1,
.yellow_title h1 {
    color: #ffff00 !important; /* !important jest tu kluczowy! */
}

/* ==========================================================================
   ZWIĘKSZENIE CZCIONKI W TREŚCI ARTYKUŁÓW (OPISACH)
   ========================================================================== */

.com-content-article__body {
    /* 1rem to standard, 1.5rem to powiększenie o 50% */
    font-size: 1.2rem !important;
    
    /* Zwiększenie odstępu między wierszami dla czytelności */
    line-height: 1.5 !important;
}

/* Upewnienie się, że listy i paragrafy też to łapią */
.com-content-article__body p,
.com-content-article__body li,
.com-content-article__body div {
    font-size: inherit; /* Dziedzicz z rodzica wyżej */
}

body > footer {
    background-color: #000 !important;
    background-image: none !important;
}