/* ==========================================================================
   CONFIG & VARIABLES (Enterprise Standard)
   ========================================================================== */
:root {
    /* Colors */
    --uw-dark-blue: #052B48;

    --bs-primary: #054DA1;
    --bs-primary-rgb: 5, 77, 161;

    --primary-color: #054DA1;
    --primary-rgb: 5, 77, 161;

    --text-dark: #333333;
    --text-light: #FFFFFF;
    --gray-100: #F8F9FA;
    --gray-400: #BBBBBB;

    /* Spacing & Transitions */
    --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --container-max-width: 1320px;
}

/* ==========================================================================
   GLOBAL RESET & BASE
   ========================================================================== */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    margin: 0;
    overflow-x: hidden; /* Zapobiega przypadkowemu przewijaniu poziomemu */
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   TOP BAR (arow) - Flexbox optimization
   ========================================================================== */
.arow {
/* blue
    background: var(--primary-color);
    color: var(--text-light);
*/
    background: var(#FFFFFF);
    color: var(--text-primary-color);
    padding: 8px 15px;
    font-size: clamp(0.75rem, 2vw, 0.875rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.arow .uwlinks {
/*    color: var(--text-light);
    color: var(--primary-color); */
    color: var(--uw-dark-blue);
    text-decoration: none;
    margin-right: 10px;
    transition: var(--transition-base);
}

.arow .uwlinks:hover {
    color: var(--gray-400);
    text-decoration: underline;
}

@media (max-width: 768px) {
    .arow {
        justify-content: center;
        gap: 10px;
    }
}

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */
/*.header-logos {*/
/*    padding: 15px 0;*/
/*    row-gap: 0; !* lub np. 5px *!*/
/*}*/

/*.header-logos .col-sm {*/
/*    padding-top: 0;*/
/*    padding-bottom: 0;*/
/*}*/

/*.header-logos .main-content {*/
/*    margin-top: 0;*/
/*    margin-bottom: 0;*/
/*}*/

/* Zmniejsz padding górny listy aktualności */
/*.news-list {*/
/*    padding-top: 0.5rem;*/
/*}*/

/*!* Usuń domyślny margines Bootstrapowego row wewnątrz main-content *!*/
/*.main-content .row,*/
/*.header-logos {*/
/*    --bs-gutter-y: 0;*/
/*}*/

/*!* Usuń padding col-sm jeśli Bootstrap dodaje pionowy gap *!*/
/*.header-logos > .col-sm {*/
/*    padding-top: 0;*/
/*    padding-bottom: 0;*/
/*}*/






.header-center-logo {
    max-width: clamp(150px, 40%, 300px);
    margin: 0 auto;
}

/* Navbar Centering */
.navbar-nav {
    width: 100%;
    justify-content: center;
    gap: 1rem;
}

/* Desktop Hover Effects */
@media (min-width: 992px) {
    .navbar .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
        animation: fadeIn 0.3s ease;
    }

    .navbar .dropdown-menu {
        border: none;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}



/* tutaj był islider */


/* ==========================================================================
   WAGTAIL RICH TEXT CONTENT
   ========================================================================== */
.main-content {
    /*padding: clamp(20px, 5vw, 60px) 15px;*/
    /*padding: clamp(5px, 1vw, 15px) 15px clamp(20px, 5vw, 60px); !* top | sides | bottom *!*/
    /*padding: clamp(2px, 1vw, 8px) 10px clamp(2px, 1vw, 8px); * top | sides | bottom */
    padding: clamp(0px, 0vw, 0px) 10px clamp(2px, 1vw, 8px); /* top | sides | bottom */
    max-width: var(--container-max-width);
    margin: 0 auto;
    margin-top: 0; /* lub np. 10px zamiast aktualnej wartości */
    align-self: flex-start;
}

.col-lg-8 .col-md-8 {
    align-self: flex-start;
}


/* Stylizacja treści z edytora Wagtail */
.rich-text img {
    height: auto;
    margin: 1.5rem 0;
    border-radius: 4px;
}

.rich-text .align-left { float: left; margin-right: 2rem; max-width: 50%; }
.rich-text .align-right { float: right; margin-left: 2rem; max-width: 50%; }
.rich-text .align-full-width { width: 100%; clear: both; }

@media (max-width: 768px) {
    .rich-text .align-left,
    .rich-text .align-right {
        float: none;
        margin: 1rem 0;
        max-width: 100%;
    }
}

/* ==========================================================================
   LOADER & UI ELEMENTS
   ========================================================================== */
.uw-loader {
    position: fixed;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    width: 4px;
    height: 100px;
    background: rgba(0,0,0,0.1);
    z-index: 9999;
    display: none; /* Domyślnie ukryty, aktywuj JS-em w razie potrzeby */
}

@media (min-width: 1200px) {
    .uw-loader { display: block; }
}

.uw-bar {
    width: 100%;
    background-color: var(--primary-color);
    animation: uw-grow 2.5s ease-in-out infinite;
}

@keyframes uw-grow {
    0%, 100% { height: 20%; }
    50% { height: 100%; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
/*wagtail*/
.richtext-image.left {
    float: left;
    margin: 0 1rem 1rem 0;
}

.richtext-image.right {
    float: right;
    margin: 0 0 1rem 1rem;
}

.richtext-image.full-width {
    display: block;
    width: 100%;
}

.richtext::after {
    content: "";
    display: block;
    clear: both;
}

@media (max-width: 768px) {
    .richtext-image.left,
    .richtext-image.right {
        float: none;
        display: block;
        margin: 0 auto 1rem;
        max-width: 100%;
    }
}


/*-----------
footer {
    background: var(--gray-100);
    padding: 40px 20px;
    border-top: 1px solid #eee;
}

footer .logo {
    height: clamp(40px, 8vw, 60px);
    width: auto;
    margin-bottom: 20px;
    filter: grayscale(1);
    opacity: 0.7;
    transition: var(--transition-base);
}

footer .logo:hover {
    filter: grayscale(0);
    opacity: 1;
}
*/

/* old: */
footer {
    background: var(--gray-100);
    padding: 40px 20px;
    border-top: 1px solid #eee;
}

footer .logo {
    height: clamp(40px, 8vw, 60px);
    width: auto;
    margin-bottom: 20px;
    filter: grayscale(1);
    opacity: 0.7;
    transition: var(--transition-base);
}

footer .logo:hover {
    filter: grayscale(0);
    opacity: 1;
}

/* dodaję: */
.row.footer-partners {
    margin-top: 30px;
}

.row.footer-partners section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.row.footer-partners .footer-logo-link,
.row.footer-partners img {
    display: flex;
    align-items: center;
}

.row.footer-partners .logo {
    display: block;
    height: 60px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: opacity 0.2s ease;
}

.row.footer-partners a:hover .logo {
    opacity: 0.8;
}





.fa {
 margin-right: 2px;
}

/* 20260513 */
.col-sm {
    padding-bottom: 0; /* zmniejsz padding dolny col-sm */
}

.col-sm > .main-content {
    margin-top: 0px; /* dostosuj wartość */
}
/* ==========================================================================
   ACCESSIBILITY — WCAG 2.2
   ========================================================================== */

/* ── Skip-link (WCAG 2.4.1 Bypass Blocks) ──────────────────────── */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: #054DA1;
    color: #ffffff;
    padding: 12px 20px;
    font-weight: 600;
    text-decoration: none;
    z-index: 10000;
    border-radius: 0 0 6px 0;
    transition: top 0.2s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 0;
    outline: 3px solid #ffd700;
    outline-offset: -3px;
    color: #ffffff;
}

/* ── Screen-reader-only utility ───────────────────────────────── */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Globalne focus-visible (WCAG 2.4.7, 2.4.11) ─────────────── */
*:focus-visible {
    outline: 3px solid #ffd700;
    outline-offset: 2px;
}

/* Linki w treści — focus z większym akcentem */
.main-content a:focus-visible,
.np-breadcrumb a:focus-visible {
    outline: 3px solid #054DA1;
    outline-offset: 3px;
    background: #fff8d6;
    text-decoration: underline;
}

/* main musi mieć usuwany outline gdy fokus jest na nim po skoku z linka */
#main-content:focus {
    outline: none;
}

/* ── Pasek górny (.arow): kontrast linków WCAG 1.4.3 ────────── */
.arow .uwlinks {
    color: #054DA1;
    text-decoration: underline;
}
.arow .uwlinks:hover,
.arow .uwlinks:focus-visible {
    color: #052B48;
    background: #fff;
    text-decoration: underline;
}

/* ── Breadcrumb ─────────────────────────────────────────────── */
.np-breadcrumb {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: #5a5650;
}
.np-breadcrumb a {
    color: #054DA1;
    text-decoration: underline;
}
.np-breadcrumb a:hover {
    color: #052B48;
}
.np-breadcrumb__sep {
    margin: 0 0.4rem;
    color: #9a9590;
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}