/* ==========================================================================
   modern.css — nowoczesna warstwa wyglądu dla motywu urzad_miasta
   Nakładka na istniejący układ: karty, cienie, zaokrąglenia, płynne
   przejścia oraz wyraźne stany :focus-visible (dostępność / WCAG).
   ========================================================================== */

:root {
    --um-primary: #142864;
    --um-radius: 10px;
    --um-shadow: 0 2px 10px rgba(20, 40, 100, 0.08);
    --um-shadow-hover: 0 10px 28px rgba(20, 40, 100, 0.18);
    --um-transition: 0.25s cubic-bezier(0.2, 0.6, 0.3, 1);
}

/* --- Wygładzanie i typografia --- */
body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* --- Karty aktualności (strona główna) --- */
section#main-content .news .news-content .item,
.category-item {
    background: #fff;
    border-radius: var(--um-radius);
    box-shadow: var(--um-shadow);
    transition: box-shadow var(--um-transition), transform var(--um-transition);
    overflow: hidden;
}

section#main-content .news .news-content .item:hover,
.category-item:hover {
    box-shadow: var(--um-shadow-hover);
    transform: translateY(-3px);
}

/* --- Miniatury-linki: efekt przybliżenia i wskaźnik klikalności --- */
.thumb-link {
    display: block;
    overflow: hidden;
    border-radius: var(--um-radius) 0 0 var(--um-radius);
    cursor: pointer;
}

.thumb-link img,
.category-item .image a img {
    transition: transform var(--um-transition), filter var(--um-transition);
    display: block;
}

.thumb-link:hover img,
.thumb-link:focus-visible img,
.category-item .image a:hover img {
    transform: scale(1.05);
    filter: brightness(1.05);
}

/* --- Przycisk "Czytaj więcej" jako pigułka --- */
.read-more a {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid var(--um-primary);
    transition: background var(--um-transition), color var(--um-transition);
}

.read-more a:hover,
.read-more a:focus-visible {
    background: var(--um-primary);
    color: #fff !important;
    text-decoration: none;
}

.read-more a:hover i,
.read-more a:focus-visible i {
    color: #fff !important;
}

/* --- Kafle boczne (deklaracja, eBOI itp.) --- */
.deklaracja-box img {
    border-radius: var(--um-radius);
    box-shadow: var(--um-shadow);
    transition: box-shadow var(--um-transition), transform var(--um-transition);
}

.deklaracja-box a:hover img,
.deklaracja-box a:focus-visible img {
    box-shadow: var(--um-shadow-hover);
    transform: translateY(-2px);
}

/* --- Galeria --- */
section#gallery .box,
section#gallery-page .box {
    border-radius: var(--um-radius);
    overflow: hidden;
    box-shadow: var(--um-shadow);
    transition: box-shadow var(--um-transition), transform var(--um-transition);
}

section#gallery .box:hover,
section#gallery-page .box:hover {
    box-shadow: var(--um-shadow-hover);
    transform: translateY(-3px);
}

/* --- Ikony druk / PDF / lektor --- */
.print-pdf-icons > a,
.print-pdf-icons > div {
    border-radius: 8px;
    transition: background var(--um-transition), color var(--um-transition);
    padding: 4px 10px;
}

.print-pdf-icons > a:hover,
.print-pdf-icons > div:hover {
    background: rgba(20, 40, 100, 0.08);
    text-decoration: none;
}

/* --- Pasek menu po przewinięciu: subtelny cień zamiast twardej krawędzi --- */
.menu-wrapper.fixed-menu {
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
}

/* --- Pole wyszukiwania --- */
.search-bar .search-input {
    border-radius: 999px;
    transition: box-shadow var(--um-transition);
}

.search-bar .search-input:focus {
    box-shadow: 0 0 0 3px rgba(20, 40, 100, 0.25);
    outline: none;
}

/* --- Dostępność: wyraźny, spójny wskaźnik fokusa (WCAG 2.4.7) --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.thumb-link:focus-visible {
    outline: 3px solid #ffb300;
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- Poszanowanie ustawień użytkownika: ograniczenie animacji --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation-duration: 0.01ms !important;
    }
}

/* --- Siatka bezpieczeństwa: slider przed inicjalizacją Owl Carousel ---
   menu-wrapper jest pozycjonowany absolutnie nad sliderem; gdyby JS nie
   zadziałał, slider miałby 0 wysokości i nagłówek by "znikał".
   Poniższe reguły nadają wysokość pierwszemu slajdowi do czasu
   załadowania karuzeli (Owl dodaje klasę .owl-loaded). --- */
.slider .owl-main:not(.owl-loaded) .item {
    height: 420px;
    background-size: cover;
    background-position: center;
}

.slider .owl-main:not(.owl-loaded) .item ~ .item {
    display: none;
}