body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--spc-light-gray);
    color: #2c3e50;
    margin: 0;
    padding: 0;
}

/* Nowoczesne karty z efektem "pływania" */
.card-event {
    border: none;
    border-radius: 20px;
    background: #ffffff;
    transition: all var(--transition-speed) cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.card-event:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0,0,0,0.12);
}

/* Stylizacja przycisków - bardziej zaokrąglone i dynamiczne */
.btn-spc {
    border-radius: 50px;
    padding: 12px 30px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s ease;
}

.btn-spc-primary {
    background: linear-gradient(45deg, var(--spc-blue), #007bff);
    color: white;
    border: none;
}

.btn-spc-primary:hover {
    box-shadow: 0 5px 15px rgba(0, 86, 179, 0.4);
    filter: brightness(1.1);
}

/* Sekcja Newsów - efekt gradientu na dole zdjęcia */
.news-thumb {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
}

.news-thumb::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
}

/* Nagłówki sekcji z dekoracyjnym podkreśleniem */
.section-title {
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 30px;
    font-weight: 900;
}

.section-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 5px;
    background: var(--spc-red);
    border-radius: 5px;
}

/* Widget Dostępności - customizacja pod SPC */
#accToggle {
    background-color: var(--spc-red) !important;
    border: 3px solid white !important;
}
/* Główne Zmienne i Typografia */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Montserrat:wght@700;900&display=swap');

:root {
    --cz-blue: #11457E;
    --cz-red: #D7141A;
    --spc-blue: #0056b3;
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(255, 255, 255, 0.2);
}

body { font-family: 'Inter', sans-serif; transition: font-size 0.2s ease; }
h1, h2, .section-title { font-family: 'Montserrat', sans-serif; }

/* Glassmorphism Components */
.navbar {
    background: var(--bs-blue) #11457e !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--glass-border);
}

.card-30 {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 1.25rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-30:hover {
    transform: translateY(-8px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.1);
}

/* Accessibility: Focus & High Contrast */
.user-is-tabbing *:focus {
    outline: 4px solid #ffc107 !important;
    outline-offset: 2px;
}

body.high-contrast {
    background: #000 !important; color: #ff0 !important;
}
body.high-contrast .card, body.high-contrast .navbar {
    background: #000 !important; border: 1px solid #ff0 !important; color: #ff0 !important;
}
body.high-contrast a, body.high-contrast i { color: #ff0 !important; }

/* Dark Mode Overrides */
[data-bs-theme="dark"] {
    --glass-bg: rgba(33, 37, 41, 0.85);
}



/* Stylizacja Mega-Footera */
footer {
    background-color: var(--spc-gray-light);
    color: #333;
    font-size: 0.9rem;
}

footer h5 {
    color: var(--spc-red);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.1rem;
    border-bottom: 2px solid var(--spc-red);
    display: inline-block;
    padding-bottom: 5px;
}

/* Efekty najechania na linki w stopce */
footer .nav-link:hover {
    color: var(--spc-red) !important;
    padding-left: 5px;
    transition: all 0.3s ease;
}

/* Ikony społecznościowe - personalizacja */
footer .bi {
    transition: transform 0.2s ease-in-out;
    display: inline-block;
}

footer .bi:hover {
    color: var(--spc-red) !important;
    transform: translateY(-3px);
}

/* Stylizacja logotypów partnerów */
.partner-logo {
    max-height: 50px;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.4s ease;
}

.partner-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
}
/* Efekt uniesienia karty po najechaniu (Modern UX) */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.125) !important;
}

/* Stylizacja odznak (Badges) */
.badge {
    font-weight: 500;
    padding: 0.5em 1em;
    border-radius: 4px;
}

/* Spójna wysokość obrazków i responsywność */
.card-img-top {
    border-bottom: 3px solid var(--spc-red); /* Czerwony akcent nawiązujący do stopki */
}

/* Responsywne odstępy dla nagłówka sekcji */
@media (max-width: 576px) {
    .btn-sm {
        font-size: 0.75rem;
    }
}
/* Subtelna animacja linków */
.navbar-nav .nav-link {
    position: relative;
    padding: 0.5rem 1rem;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 5px;
    left: 50%;
    background-color: var(--spc-red);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    width: 70%;
}

/* Dostosowanie dropdowna */
.dropdown-menu {
    border-top: 3px solid var(--spc-blue) !important;
}

.dropdown-item:hover {
    background-color: var(--spc-gray-light);
    color: var(--spc-light-gra);
}

/* Sticky-top blur effect (dla nowoczesnych przeglądarek) */
@supports (backdrop-filter: blur(10px)) {
    .sticky-top {
        background-color: rgba(255, 255, 255, 0.85) !important;
        backdrop-filter: blur(10px);
    }
}
/* Stylizacja karty regionu */
.region-card {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

/* Przyciemnienie zdjęcia (Overlay Gradient) */
.region-card .card-img-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
    transition: background 0.4s ease;
}

/* Efekt powiększenia zdjęcia */
.region-card img {
    transition: transform 0.6s ease;
}

.region-card:hover img {
    transform: scale(1.1);
}

.region-card:hover {
    transform: translateY(-5px);
}

/* Animacja tekstu przy najechaniu */
.region-card p {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.4s ease;
}

.region-card:hover p {
    max-height: 50px;
    opacity: 1;
    margin-top: 5px;
}

/* Dostosowanie mobilne - wyrównanie wysokości */
@media (max-width: 991px) {
    .region-card img {
        height: 250px !important;
    }
}


/* Wyraźny wskaźnik fokusu dla nawigacji klawiaturą */
:focus-visible {
    outline: 3px solid var(--spc-red) !important;
    outline-offset: 2px;
}

/* Zwiększenie kontrastu dla linków w stopce */
footer .nav-link {
    color: #444 !important; /* Ciemniejszy odcień dla lepszego kontrastu */
    text-decoration: underline decoration-transparent;
    transition: text-decoration-color 0.3s;
}

footer .nav-link:hover {
    text-decoration-color: var(--spc-red);
}

/* Skip Link - pozwala przeskoczyć menu i przejść do treści (ukryty, pojawia się po Tab) */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--spc-red);
    color: white;
    padding: 8px;
    z-index: 2000;
    transition: top 0.3s;
}
.skip-link:focus {
    top: 0;
}


/* Tryb Wysokiego Kontrastu (WCAG) */
body.high-contrast {
    background-color: #000 !important;
    color: #fff !important;
}

body.high-contrast .navbar, 
body.high-contrast footer, 
body.high-contrast .card {
    background-color: #000 !important;
    border: 1px solid #fff !important;
    color: #fff !important;
}

body.high-contrast a, 
body.high-contrast .nav-link,
body.high-contrast .card-title {
    color: #ffff00 !important; /* Żółte linki na czarnym tle - najwyższy kontrast */
}

body.high-contrast .btn-primary {
    background-color: #ffff00 !important;
    color: #000 !important;
    border: none !important;
    font-weight: bold;
}
/* Główne ustawienia bazy */
html {
    /* To pozwala na skalowanie przez skrypt JS */
    font-size: 100%; 
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif; /* Rekomendowany dla czytelności */
    line-height: 1.6;
    font-size: 1rem; /* czyli 16px */
}

/* Nagłówki (Skalowalne) */
h1 { font-size: 2.5rem; }    /* ok. 40px */
h2 { font-size: 2rem; }      /* ok. 32px */
h3 { font-size: 1.75rem; }   /* ok. 28px */
h4 { font-size: 1.5rem; }    /* ok. 24px */
h5 { font-size: 1.25rem; }   /* ok. 20px */

/* Sekcje specyficzne dla SPC */
.card-title {
    font-size: 1.25rem;
    font-weight: 700;
}

.card-text {
    font-size: 0.9375rem; /* ok. 15px - optymalne dla bloków tekstu */
}

footer {
    font-size: 0.875rem; /* ok. 14px - stopka może być nieco mniejsza */
}
/* Używaj rem zamiast px w kontenerach i sekcjach */
.py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

/* Karta aktualności z elastycznym odstępem */
.card-body {
    padding: 1.25rem;
}
/* Ikony w pasku dostępności - zachowajmy je czytelne, ale stabilne */
.bg-dark .bi {
    font-size: 1.1rem;
    vertical-align: middle;
}

/* Logotypy partnerów w stopce */
.partner-logo {
    height: 2.5rem; /* Skaluje się razem z tekstem! */
    width: auto;
}


/* Efekt uniesienia karty po najechaniu (Modern UX) */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.125) !important;
}

/* Stylizacja odznak (Badges) */
.badge {
    font-weight: 500;
    padding: 0.5em 1em;
    border-radius: 4px;
}

/* Spójna wysokość obrazków i responsywność */
.card-img-top {
    border-bottom: 3px solid var(--spc-red); /* Czerwony akcent nawiązujący do stopki */
}

/* Responsywne odstępy dla nagłówka sekcji */
@media (max-width: 576px) {
    .btn-sm {
        font-size: 0.75rem;
    }
}

/* Wyraźny wskaźnik fokusu dla nawigacji klawiaturą */
:focus-visible {
    outline: 3px solid var(--spc-red) !important;
    outline-offset: 2px;
}

/* Zwiększenie kontrastu dla linków w stopce */
footer .nav-link {
    color: #444 !important; /* Ciemniejszy odcień dla lepszego kontrastu */
    text-decoration: underline decoration-transparent;
    transition: text-decoration-color 0.3s;
}

footer .nav-link:hover {
    text-decoration-color: var(--spc-red);
}

/* Skip Link - pozwala przeskoczyć menu i przejść do treści (ukryty, pojawia się po Tab) */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--spc-red);
    color: white;
    padding: 8px;
    z-index: 2000;
    transition: top 0.3s;
}
.skip-link:focus {
    top: 0;
}
/* Tryb Wysokiego Kontrastu (WCAG) */
body.high-contrast {
    background-color: #000 !important;
    color: #fff !important;
}

body.high-contrast .navbar, 
body.high-contrast footer, 
body.high-contrast .card {
    background-color: #000 !important;
    border: 1px solid #fff !important;
    color: #fff !important;
}

body.high-contrast a, 
body.high-contrast .nav-link,
body.high-contrast .card-title {
    color: #ffff00 !important; /* Żółte linki na czarnym tle - najwyższy kontrast */
}

body.high-contrast .btn-primary {
    background-color: #ffff00 !important;
    color: #000 !important;
    border: none !important;
    font-weight: bold;
}

[data-bs-theme="dark"] .fb-sidebar-wrapper iframe {
    filter: invert(0.9) hue-rotate(180deg) brightness(0.9);
    /* To jest "trik" na wymuszenie ciemnych kolorów na zewnętrznej ramce */
}
/* Główne Zmienne i Typografia */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Montserrat:wght@700;900&display=swap');

:root {
    --cz-blue: #11457E;
    --cz-red: #D7141A;
    --spc-blue: #0056b3;
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(255, 255, 255, 0.2);
}

body { font-family: 'Inter', sans-serif; transition: font-size 0.2s ease; }
h1, h2, .section-title { font-family: 'Montserrat', sans-serif; }

/* Glassmorphism Components */
.navbar {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--glass-border);
}

.card-30 {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 1.25rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-30:hover {
    transform: translateY(-8px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.1);
}

/* Accessibility: Focus & High Contrast */
.user-is-tabbing *:focus {
    outline: 4px solid #ffc107 !important;
    outline-offset: 2px;
}

body.high-contrast {
    background: #000 !important; color: #ff0 !important;
}
body.high-contrast .card, body.high-contrast .navbar {
    background: #000 !important; border: 1px solid #ff0 !important; color: #ff0 !important;
}
body.high-contrast a, body.high-contrast i { color: #ff0 !important; }

/* Dark Mode Overrides */
[data-bs-theme="dark"] {
    --glass-bg: rgba(33, 37, 41, 0.85);
}