/* =============================================
   ŻŁOBEK NIDZICA – custom.css
   Paleta z logo:
     --blue:      #4DAADC  (dominujący niebieski)
     --sky:       #5BC5EA  (jasnoniebieski – napisy)
     --yellow:    #F5C32C  (żółty akcent)
     --orange:    #E8503A  (czerwono-pomarańczowy akcent)
     --green:     #6BBF4E  (zielony akcent)
     --light:     #F4F9FD  (tło sekcji)
     --dark:      #1A3A50  (ciemny niebieski – teksty)
   ============================================= */


/* ── Czcionki ── */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Baloo+2:wght@600;800&display=swap');

/* ── Zmienne ── */

:root {
    --blue: #4DAADC;
    --blue-dark: #2d87b8;
    --sky: #5BC5EA;
    --yellow: #F5C32C;
    --orange: #E8503A;
    --green: #6BBF4E;
    --green-dark: #4e9a38;
    --light: #F4F9FD;
    --white: #ffffff;
    --dark: #1A3A50;
    --gray: #6a7f8e;
    --gray-light: #dce8ef;
    --radius: 14px;
    --radius-lg: 22px;
    --shadow: 0 4px 20px rgba(77, 170, 220, .18);
    --shadow-lg: 0 8px 40px rgba(77, 170, 220, .25);
    --transition: .25s cubic-bezier(.4, 0, .2, 1);
}


/* ── Reset / Base ── */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 100%;
}

body {
    font-family: 'Nunito', sans-serif;
    color: var(--dark);
    background: var(--white);
    line-height: 1.7;
    overflow-x: hidden;
}


/* ── Typografia ── */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.25;
}

h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--blue);
}

h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    color: var(--blue);
}

h3 {
    font-size: 1.35rem;
    color: var(--blue-dark);
}

p {
    margin-bottom: 1rem;
}

a {
    color: var(--blue);
    text-decoration: none;
    transition: color var(--transition);
}

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

strong {
    font-weight: 800;
}

.card-title .data {
    display: block;
    color: #1a1a1a;
}


/* ── Accessibility nav ── */

.accessibility-nav {
    background: var(--white);
    padding: .3rem 0;
    font-size: .8rem;
    border-bottom: 1px solid var(--gray-light);
}

.accessibility-nav .nav-link {
    color: var(--dark);
    padding: .2rem .6rem;
    border-radius: 6px;
    transition: background var(--transition), color var(--transition);
    font-weight: 600;
}

.accessibility-nav .nav-link:hover {
    color: var(--blue);
    background: var(--light);
}


/* ── Topbar contact links ── */

.topbar-links {
    font-size: .8rem;
    font-weight: 600;
}

.topbar-link {
    color: var(--dark) !important;
    padding: .2rem .6rem;
    border-radius: 6px;
    transition: color var(--transition), background var(--transition);
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.topbar-link:hover {
    color: var(--blue) !important;
    background: var(--light);
}

.topbar-bip {
    border: 1.5px solid var(--dark);
    padding: .1rem .5rem;
    font-weight: 700;
}

.topbar-bip:hover {
    border-color: var(--blue);
}


/* ── Navbar ── */

.menu-glowne {
    background: var(--white);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 3px solid var(--yellow);
}

.navbar-brand {
    gap: .75rem;
}

.navbar-brand img {
    height: 80px;
    width: auto;
}

.navbar-brand span {
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--blue);
    letter-spacing: -.5px;
    display: none;
    /* logo zawiera tekst */
}

.navbar-nav .nav-link {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: .95rem;
    color: var(--dark);
    padding: .5rem 1rem;
    border-radius: 8px;
    transition: background var(--transition), color var(--transition);
    position: relative;
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    right: 50%;
    height: 2px;
    background: var(--yellow);
    border-radius: 2px;
    transition: left var(--transition), right var(--transition);
}

.navbar-nav .nav-link:hover {
    color: var(--blue);
    background: var(--light);
}

.navbar-nav .nav-link.active {
    color: var(--blue);
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    left: 12px;
    right: 12px;
}


/* ── Dropdown ── */

.dropdown-menu {
    border: none;
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius);
    padding: .5rem;
    background: var(--white);
    border-top: 3px solid var(--green);
}

.dropdown-item {
    border-radius: 8px;
    transition: background var(--transition);
    padding: 0;
}

.dropdown-item .nav-link {
    padding: .45rem .9rem;
    font-size: .9rem;
    color: var(--dark);
    display: block;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--light);
}

.dropdown-item:hover .nav-link {
    color: var(--blue);
}


/* ── Telefonowy link w nav ── */

.tel-head {
    font-family: 'Baloo 2', cursive;
    font-weight: 700;
    font-size: 1rem;
    color: var(--orange);
    background: rgba(232, 80, 58, .08);
    border-radius: 8px;
    padding: .35rem .85rem;
    transition: background var(--transition), color var(--transition);
}

.tel-head:hover {
    background: var(--orange);
    color: var(--white);
}


/* BIP link */

.bip-head {
    font-weight: 700;
    font-size: .85rem;
    color: var(--blue);
    border: 2px solid var(--blue);
    border-radius: 8px;
    padding: .3rem .7rem;
    transition: background var(--transition), color var(--transition);
}

.bip-head:hover {
    background: var(--blue);
    color: var(--white) !important;
}


/* ── Toggler ── */

.navbar-toggler {
    border: 2px solid var(--blue);
    border-radius: 10px;
    padding: .35rem .6rem;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%234DAADC' stroke-width='2.5' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}


/* ── Breadcrumb ── */

.breadcrumb {
    font-size: .85rem;
    font-weight: 600;
    gap: .25rem;
}

.breadcrumb-item+.breadcrumb-item::before {
    content: '›';
    color: var(--sky);
    font-weight: 900;
}

.breadcrumb-item a {
    color: var(--blue);
}

.breadcrumb-item.active {
    color: var(--gray);
}

.home-icon {
    display: inline-flex;
    align-items: center;
}

.home-icon::before {
    content: '🏠';
    font-size: .9rem;
}


/* ── Hero / Title section ── */

section.title.sub {
    background: none;
    border-bottom: none;
    position: relative;
    overflow: hidden;
}

section.title.sub::before {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(91, 197, 234, .15), transparent 70%);
    top: -80px;
    right: -60px;
    pointer-events: none;
}

section.title.sub::after {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 195, 44, .15), transparent 70%);
    bottom: -50px;
    left: 5%;
    pointer-events: none;
}

section.title.sub h1 {
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--blue);
    position: relative;
}

section.title.sub h1::after {
    content: '';
    display: block;
    height: 5px;
    width: 70px;
    background: linear-gradient(90deg, var(--yellow), var(--orange));
    border-radius: 3px;
    margin-top: .3rem;
}


/* ── Treść / O nas sekcja ── */

section.onas {
    background: var(--white);
    padding: 2rem 0 4rem;
}


/* Karty sekcji kadrowej */

section.onas h2 {
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--dark);
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 3px solid var(--yellow);
}


/* Kolorowe akcenty dla kolejnych nagłówków h2 */

section.onas h2:nth-of-type(1) {
    border-color: var(--blue);
}

section.onas h2:nth-of-type(2) {
    border-color: var(--green);
}

section.onas h2:nth-of-type(3) {
    border-color: var(--orange);
}


/* ── Przyciski (generyczne) ── */

.btn-primary,
.btn-zlobek {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: linear-gradient(135deg, var(--blue), var(--sky));
    color: var(--white);
    font-family: 'Baloo 2', cursive;
    font-weight: 700;
    font-size: 1rem;
    padding: .7rem 1.8rem;
    border-radius: 50px;
    border: none;
    box-shadow: 0 4px 15px rgba(77, 170, 220, .35);
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition);
}

.btn-outline-primary.bg-white:hover,
.btn-primary:hover,
.btn-zlobek:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(77, 170, 220, .45);
    color: var(--white);
    background: linear-gradient(135deg, var(--blue-dark), var(--blue));
}

.btn-secondary {
    background: linear-gradient(135deg, var(--green), var(--green-dark));
    box-shadow: 0 4px 15px rgba(107, 191, 78, .35);
}

.btn-secondary:hover {
    box-shadow: 0 8px 25px rgba(107, 191, 78, .45);
}


/* ── Footer ── */

footer.blue-bg {
    background: var(--dark) !important;
    color: rgba(255, 255, 255, .85);
    font-size: .92rem;
    margin-top: 0 !important;
    position: relative;
    overflow: hidden;
}

footer.blue-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--blue) 0%, var(--sky) 25%, var(--yellow) 50%, var(--orange) 75%, var(--green) 100%);
}

footer.blue-bg p {
    margin-bottom: .5rem;
    color: rgba(255, 255, 255, .8);
}

footer.blue-bg p strong {
    color: var(--yellow);
    font-size: 1.05rem;
}

footer.blue-bg a {
    color: var(--sky);
    font-weight: 600;
    transition: color var(--transition);
}

footer.blue-bg a:hover {
    color: var(--yellow);
}

footer .flinks a {
    display: block;
    color: rgba(255, 255, 255, .75);
    font-weight: 600;
    padding: .25rem 0;
    border-left: 2px solid transparent;
    padding-left: .6rem;
    transition: color var(--transition), border-color var(--transition);
}

footer .flinks a:hover {
    color: var(--yellow);
    border-color: var(--yellow);
}

footer .flinks strong,
footer .flinks span.blue-c {
    color: var(--sky);
    font-family: 'Baloo 2', cursive;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .5px;
    text-transform: uppercase;
}


/* ── Dolny pasek footera ── */

#small-footer {
    padding: .5rem 0;
}

#small-footer p {
    font-size: .8rem;
    color: rgba(255, 255, 255, .5);
    margin: 0;
}


/* ── Skip to content (WCAG 2.4.1) ── */

.skip-to-content {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background: var(--blue);
    color: var(--white);
    padding: .75rem 1.5rem;
    border-radius: 0 0 var(--radius) var(--radius);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: var(--shadow-lg);
    transition: top .2s ease;
}

.skip-to-content:focus {
    top: 0;
    outline: 3px solid var(--yellow);
    outline-offset: 2px;
}


/* ── Focus visible (WCAG 2.4.7) ── */

*:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
}


/* ── WCAG Settings Panel ── */

.wai-wrapper {
    position: relative;
}


/* Toggle button */

.wcag-prefs-bt {
    background: none;
    border: 1px solid var(--gray-light);
    border-radius: 6px;
    padding: .25rem .7rem;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    color: var(--dark);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.wcag-prefs-bt:hover,
.wcag-prefs-bt.active {
    background: var(--light);
    color: var(--blue);
    border-color: var(--blue);
}


/* Dropdown panel */

.wai-preferences {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 2000;
    background: var(--white);
    border: 1px solid var(--gray-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 1.25rem 1.5rem;
    min-width: 480px;
    max-width: 90vw;
}

.wai-preferences.active {
    display: block;
}


/* Fieldsets */

.wai-preferences fieldset {
    border: none;
    padding: 0;
    margin: 0 0 1rem;
}

.wai-preferences legend {
    font-size: .85rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: .5rem;
    padding: 0;
    border: none;
    float: none;
    width: auto;
}


/* Font size buttons (A / A+ / A++) */

.wai-size-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 36px;
    border: 2px solid var(--gray-light);
    border-radius: 6px;
    background: var(--white);
    color: var(--dark);
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition);
    margin-right: .35rem;
}

.wai-size-btn:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.wai-size-btn.active {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);
}

#wai1 {
    font-size: .85rem;
}

#wai2 {
    font-size: 1rem;
}

#wai3 {
    font-size: 1.15rem;
}


/* Contrast button */

.wai-contrast button {
    display: inline-block;
    border: 2px solid var(--gray-light);
    border-radius: 6px;
    background: var(--white);
    color: var(--dark);
    font-weight: 700;
    font-family: inherit;
    font-size: .85rem;
    padding: .35rem .9rem;
    cursor: pointer;
    transition: all var(--transition);
}

.wai-contrast button:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.wai-contrast button.active {
    background: var(--dark);
    color: var(--yellow);
    border-color: var(--dark);
}


/* Toggle slider switches */

.wai-preferences .switch {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-right: .5rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--dark);
}

.slider {
    position: relative;
    width: 40px;
    height: 22px;
    background: var(--gray-light);
    border: none;
    border-radius: 11px;
    cursor: pointer;
    transition: background var(--transition);
    padding: 0;
}

.slider::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: var(--white);
    border-radius: 50%;
    transition: transform var(--transition);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.slider.active {
    background: var(--blue);
}

.slider.active::after {
    transform: translateX(18px);
}


/* Offscreen text for accessibility */

.offscreen {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* Shortcuts list */

.wai-shortcuts-title {
    font-size: .8rem;
    font-weight: 700;
    color: var(--dark);
    margin: .5rem 0 .25rem;
    border-top: 1px solid var(--gray-light);
    padding-top: .75rem;
}

.wai-shortcuts-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: .78rem;
    color: var(--gray);
    columns: 2;
}

.wai-shortcuts-list li {
    padding: .15rem 0;
}

.wai-shortcuts-list kbd {
    display: inline-block;
    background: var(--light);
    border: 1px solid var(--gray-light);
    border-radius: 3px;
    padding: 0 .35rem;
    font-size: .75rem;
    font-family: inherit;
    font-weight: 700;
    color: var(--dark);
    min-width: 1.4em;
    text-align: center;
}


/* Close button */

#wcag-prefs-bt-close {
    display: block;
    width: 100%;
    margin-top: .75rem;
    padding: .45rem;
    border: 1px solid var(--gray-light);
    border-radius: 6px;
    background: var(--light);
    color: var(--dark);
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}

#wcag-prefs-bt-close:hover {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);
}


/* Panel – mobile */

@media (max-width: 575.98px) {
    .wai-preferences {
        min-width: 0;
        width: calc(100vw - 2rem);
        left: -1rem;
        padding: 1rem;
    }
    .wai-shortcuts-list {
        columns: 1;
    }
}


/* ── High contrast overrides for WAI panel ── */

html.high-contrast .wcag-prefs-bt {
    color: var(--hc-text) !important;
    border-color: var(--hc-border) !important;
    background: transparent !important;
}

html.high-contrast .wcag-prefs-bt:hover,
html.high-contrast .wcag-prefs-bt.active {
    background: var(--hc-text) !important;
    color: #000 !important;
}

html.high-contrast .wcag-prefs-bt:hover *,
html.high-contrast .wcag-prefs-bt.active * {
    color: inherit !important;
}

html.high-contrast .wai-preferences {
    background: var(--hc-bg) !important;
    border-color: var(--hc-border) !important;
}

html.high-contrast .wai-preferences legend,
html.high-contrast .wai-preferences .switch span,
html.high-contrast .wai-shortcuts-title,
html.high-contrast .wai-shortcuts-list,
html.high-contrast .wai-shortcuts-list li {
    color: var(--hc-text) !important;
}

html.high-contrast .wai-size-btn {
    background: var(--hc-bg) !important;
    color: var(--hc-text) !important;
    border-color: var(--hc-border) !important;
}

html.high-contrast .wai-size-btn.active {
    background: var(--hc-text) !important;
    color: #000 !important;
}

html.high-contrast .wai-contrast button {
    background: var(--hc-bg) !important;
    color: var(--hc-text) !important;
    border-color: var(--hc-border) !important;
}

html.high-contrast .wai-contrast button.active {
    background: var(--hc-text) !important;
    color: #000 !important;
}

html.high-contrast .slider {
    background: #555 !important;
}

html.high-contrast .slider.active {
    background: var(--hc-text) !important;
}

html.high-contrast .wai-shortcuts-list kbd {
    background: var(--hc-bg-alt) !important;
    color: var(--hc-text) !important;
    border-color: var(--hc-border) !important;
}

html.high-contrast #wcag-prefs-bt-close {
    background: var(--hc-bg-alt) !important;
    color: var(--hc-text) !important;
    border-color: var(--hc-border) !important;
}

html.high-contrast #wcag-prefs-bt-close:hover {
    background: var(--hc-text) !important;
    color: #000 !important;
}


/* ── Wysoki kontrast (WCAG) – ciemne tło + żółte czcionki ── */

html.high-contrast {
    --hc-bg: #1a1a1a;
    --hc-bg-alt: #2a2a2a;
    --hc-text: #FFD700;
    --hc-link: #FFD700;
    --hc-border: #FFD700;
}

html.high-contrast body {
    background-color: var(--hc-bg) !important;
    color: var(--hc-text) !important;
}

html.high-contrast *:not(img):not(video):not(svg):not(canvas):not(iframe) {
    color: var(--hc-text) !important;
    border-color: var(--hc-border) !important;
}

html.high-contrast .blue-c,
html.high-contrast h1.blue-c,
html.high-contrast h2.blue-c,
html.high-contrast h3.blue-c,
html.high-contrast h4.blue-c,
html.high-contrast h5.blue-c,
html.high-contrast h6.blue-c,
html.high-contrast h2.blue-c.fw-bold {
    color: var(--hc-text) !important;
}

html.high-contrast a,
html.high-contrast a:visited {
    color: var(--hc-text) !important;
    text-decoration: underline !important;
}

html.high-contrast a:hover,
html.high-contrast a:focus {
    color: #fff !important;
}

html.high-contrast h1,
html.high-contrast h2,
html.high-contrast h3,
html.high-contrast h4,
html.high-contrast h5,
html.high-contrast h6 {
    color: var(--hc-text) !important;
}

html.high-contrast p,
html.high-contrast span,
html.high-contrast li,
html.high-contrast td,
html.high-contrast th,
html.high-contrast label,
html.high-contrast strong,
html.high-contrast em,
html.high-contrast small,
html.high-contrast blockquote,
html.high-contrast figcaption,
html.high-contrast dt,
html.high-contrast dd {
    color: var(--hc-text) !important;
}


/* Navbar */

html.high-contrast .menu-glowne,
html.high-contrast body:not(.subpage) .menu-glowne,
html.high-contrast body:not(.subpage) .menu-glowne.sticky {
    background: var(--hc-bg) !important;
    box-shadow: 0 2px 0 var(--hc-border) !important;
    border-bottom-color: var(--hc-border) !important;
}

html.high-contrast .navbar-nav .nav-link {
    color: var(--hc-text) !important;
}

html.high-contrast .navbar-nav .nav-link:hover,
html.high-contrast .navbar-nav .nav-link:focus {
    background: var(--hc-bg-alt) !important;
    color: #fff !important;
}

html.high-contrast .navbar-brand span {
    color: var(--hc-text) !important;
}

html.high-contrast .tel-head {
    color: var(--hc-text) !important;
    background: var(--hc-bg-alt) !important;
}

html.high-contrast .bip-head {
    color: var(--hc-text) !important;
    border-color: var(--hc-border) !important;
}


/* Accessibility nav */

html.high-contrast .accessibility-nav {
    background: #000 !important;
    border-bottom-color: var(--hc-border) !important;
}

html.high-contrast .accessibility-nav .nav-link,
html.high-contrast .accessibility-nav button.nav-link {
    color: var(--hc-text) !important;
}

html.high-contrast .topbar-link {
    color: var(--hc-text) !important;
    background: transparent !important;
}

html.high-contrast .topbar-bip {
    border-color: var(--hc-border) !important;
    background: transparent !important;
}


/* Accessibility topbar links & buttons hover/focus states */

html.high-contrast .topbar-link:hover,
html.high-contrast .topbar-link:focus,
html.high-contrast .wcag-prefs-bt:hover,
html.high-contrast .wcag-prefs-bt:focus,
html.high-contrast .wcag-prefs-bt.active,
html.high-contrast .accessibility-nav .nav-link:hover,
html.high-contrast .accessibility-nav .nav-link:focus {
    background: var(--hc-text) !important;
    color: #000 !important;
    border-color: var(--hc-border) !important;
}

html.high-contrast .topbar-link:hover *,
html.high-contrast .topbar-link:focus *,
html.high-contrast .wcag-prefs-bt:hover *,
html.high-contrast .wcag-prefs-bt:focus *,
html.high-contrast .wcag-prefs-bt.active *,
html.high-contrast .accessibility-nav .nav-link:hover *,
html.high-contrast .accessibility-nav .nav-link:focus * {
    color: inherit !important;
}


/* Dropdown */

html.high-contrast .dropdown-menu {
    background: var(--hc-bg) !important;
    border-top-color: var(--hc-border) !important;
}

html.high-contrast .dropdown-item:hover,
html.high-contrast .dropdown-item:focus {
    background: var(--hc-bg-alt) !important;
}


/* Footer */

html.high-contrast footer.blue-bg,
html.high-contrast footer .container-fluid {
    background: #000 !important;
}

html.high-contrast footer.blue-bg p,
html.high-contrast footer.blue-bg a,
html.high-contrast footer .flinks a,
html.high-contrast footer .flinks strong,
html.high-contrast footer .flinks span.blue-c,
html.high-contrast #small-footer p {
    color: var(--hc-text) !important;
}

html.high-contrast footer.blue-bg::before {
    background: var(--hc-border) !important;
}


/* Cards */

html.high-contrast .card {
    background: var(--hc-bg-alt) !important;
    border: 1px solid var(--hc-border) !important;
}


/* Buttons */

html.high-contrast .btn-primary,
html.high-contrast .btn-zlobek,
html.high-contrast .btn-secondary {
    background: var(--hc-bg-alt) !important;
    color: var(--hc-text) !important;
    border: 2px solid var(--hc-border) !important;
    box-shadow: none !important;
}

html.high-contrast .btn-primary:hover,
html.high-contrast .btn-zlobek:hover,
html.high-contrast .btn-secondary:hover {
    background: var(--hc-border) !important;
    color: #000 !important;
}

html.high-contrast .btn-outline-primary {
    color: var(--hc-text) !important;
    border-color: var(--hc-border) !important;
    background: transparent !important;
}

html.high-contrast .btn-outline-primary:hover {
    background: var(--hc-border) !important;
    color: #000 !important;
}


/* Sections */

#kalendarz-home {
    background: #fff url('../images/bg-wide-kolejka.webp') bottom center;
    background-repeat: no-repeat !important;
    background-size: 40% !important;
    padding-bottom: 5rem !important;
}

#aktualnosci-home {
    background: #fff url('../images/bg-wide-kolejka-2.png') bottom center !important;
    background-repeat: no-repeat !important;
    background-size: 40% !important;
    padding-bottom: 5rem !important;
}

html.high-contrast section,
html.high-contrast .bg-light,
html.high-contrast section.bg-light,
html.high-contrast #dlaczego-home,
html.high-contrast #faq-home,
html.high-contrast #kalendarz-home,
html.high-contrast #aktualnosci-home {
    background: var(--hc-bg) !important;
    background-image: none !important;
}


/* Accordion */

html.high-contrast .accordion-item {
    background: var(--hc-bg-alt) !important;
    border-color: var(--hc-border) !important;
}

html.high-contrast .accordion-button {
    background: var(--hc-bg-alt) !important;
    color: var(--hc-text) !important;
}

html.high-contrast .accordion-body {
    background: var(--hc-bg) !important;
    color: var(--hc-text) !important;
}

html.high-contrast .accordion-button::after {
    filter: invert(1) brightness(2) sepia(1) hue-rotate(10deg) saturate(5);
}


/* Form inputs */

html.high-contrast input,
html.high-contrast textarea,
html.high-contrast select {
    background: var(--hc-bg) !important;
    color: var(--hc-text) !important;
    border: 2px solid var(--hc-border) !important;
}


/* Swiper pagination */

html.high-contrast .swiper-pagination-bullet {
    background: var(--hc-text) !important;
}

html.high-contrast .swiper-pagination-bullet-active {
    background: #fff !important;
}

html.high-contrast .swiper-button-prev,
html.high-contrast .swiper-button-next {
    color: var(--hc-text) !important;
    background: rgba(0, 0, 0, .7) !important;
}


/* Calendar cards */

html.high-contrast .calendar-card {
    background: var(--hc-bg-alt) !important;
    border: 1px solid var(--hc-border) !important;
}

html.high-contrast .bg-primary {
    background: var(--hc-bg-alt) !important;
    border: 1px solid var(--hc-border) !important;
}


/* Breadcrumb */

html.high-contrast .breadcrumb-item a,
html.high-contrast .breadcrumb-item.active,
html.high-contrast .breadcrumb-item+.breadcrumb-item::before {
    color: var(--hc-text) !important;
}


/* text-muted override */

html.high-contrast .text-muted {
    color: var(--hc-text) !important;
}


/* Toggler */

html.high-contrast .navbar-toggler {
    border-color: var(--hc-border) !important;
}

html.high-contrast .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23FFD700' stroke-width='2.5' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}


/* Scrollbar in high contrast */

html.high-contrast ::-webkit-scrollbar-track {
    background: var(--hc-bg);
}

html.high-contrast ::-webkit-scrollbar-thumb {
    background: var(--hc-text);
    border-radius: 4px;
}


/* Focus visible in high contrast */

html.high-contrast *:focus-visible {
    outline-color: #fff !important;
}


/* Navbar mobile collapse */

html.high-contrast .navbar-collapse {
    background: var(--hc-bg) !important;
    border-top-color: var(--hc-border) !important;
}


/* Swiper slide overlays */

html.high-contrast .swiper-slide {
    background-color: var(--hc-bg) !important;
}


/* Hero slider – ciemne tło pod tekstem w trybie kontrastu */

html.high-contrast .home-header .swiper-slide .col-12.col-md-6:first-child {
    background: rgba(0, 0, 0, 0.85) !important;
    border-radius: 12px;
    padding: 1.5rem !important;
}


/* Skip to content in high contrast */

html.high-contrast .skip-to-content {
    background: var(--hc-text) !important;
    color: #000 !important;
}

html.high-contrast .skip-to-content:focus {
    outline-color: #fff !important;
}


/* ── Responsywność ── */

@media (max-width: 991.98px) {
    .navbar-collapse {
        background: var(--white);
        border-top: 2px solid var(--yellow);
        padding: .75rem 1rem;
        border-radius: 0 0 var(--radius) var(--radius);
        box-shadow: var(--shadow-lg);
    }
    .navbar-nav .nav-link {
        padding: .6rem .75rem;
    }
    .dropdown-menu {
        box-shadow: none;
        border: none;
        border-left: 3px solid var(--green);
        border-radius: 0 var(--radius) var(--radius) 0;
        margin-left: .75rem;
        padding: .25rem .5rem;
        background: var(--light);
    }
}

@media (max-width: 767.98px) {
    section.title.sub h1 {
        font-size: 1.6rem;
    }
    footer.blue-bg .container>.row>div {
        padding: 1.5rem 1rem !important;
    }
}


/* ── Animacje wejścia ── */

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

section.title.sub h1,
section.title.sub .breadcrumb {
    animation: fadeUp .55s ease both;
}

section.title.sub h1 {
    animation-delay: .1s;
}

section.onas h2 {
    animation: fadeUp .5s ease both;
    animation-delay: .15s;
}


/* ── Dekoracyjne kółka (tło contentu) ── */

.content-container {
    position: relative;
}


/* ── Hero Slider (Swiper) – pełna wysokość minus navbar ── */


/*
  Wysokość navbaru:
    - .accessibility-nav  (~34px)
    - .menu-glowne        (~83px)
  Razem ~117px. Zmień --navbar-h jeśli różni się u Ciebie.
*/

:root {
    --navbar-h: 117px;
}


/* Sekcja – pełna wysokość */

section.home-header {
    height: calc(50vh - var(--navbar-h));
    min-height: 420px;
    overflow: hidden;
}


/* Rozciągnij Bootstrap container/row/col na 100% */

section.home-header .container-fluid,
section.home-header .container-fluid>.row,
section.home-header .container-fluid>.row>.col-12 {
    height: 100%;
    padding: 0;
    margin: 0;
}


/* Swiper zajmuje całą wysokość */

section.home-header .swiper {
    width: 100%;
    height: 100%;
}


/* Każdy slajd – pełna wysokość, tło na cały obszar */

section.home-header .swiper-slide {
    height: 100%;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-image: var(--bg-image);
}


/* Treść slajdu – kontener na pełną wysokość */

section.home-header .swiper-slide .container {
    height: 100%;
}


/* Nawigacja (strzałki) */

section.home-header .swiper-button-prev,
section.home-header .swiper-button-next {
    color: var(--white);
    background: rgba(77, 170, 220, .55);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    backdrop-filter: blur(4px);
    transition: background var(--transition);
}

section.home-header .swiper-button-prev:hover,
section.home-header .swiper-button-next:hover {
    background: var(--blue);
}

section.home-header .swiper-button-prev::after,
section.home-header .swiper-button-next::after {
    font-size: 1.1rem;
    font-weight: 900;
}


/* Paginacja (kropki) */

section.home-header .swiper-pagination-bullet {
    background: var(--white);
    opacity: .6;
    width: 10px;
    height: 10px;
    transition: opacity var(--transition), transform var(--transition);
}

section.home-header .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--yellow);
    transform: scale(1.3);
}


/* Mobile */

@media (max-width: 767.98px) {
     :root {
        --navbar-h: 100px;
    }
    section.home-header,
    body:not(.subpage) section.home-header {
        height: 75vh !important;
        min-height: 320px;
    }
    section.home-header .swiper-slide {
        background-image: none !important;
        background-color: #fff !important;
        position: relative;
    }
    section.home-header .swiper-slide::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: var(--bg-image);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        opacity: 0.25;
        z-index: 1;
    }
    section.home-header .swiper-slide .container {
        position: relative;
        z-index: 2;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
    #kalendarz-home,
    #aktualnosci-home {
        background-size: 100% !important;
    }
}


/* ── Scrollbar ── */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--light);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--blue), var(--sky));
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--blue-dark);
}


/* ── Logo – powiększone, bez marginesów ── */

.navbar-brand {
    padding: 0 !important;
    margin: 0 !important;
}

.navbar-brand img {
    height: 80px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block;
}


/* ── Footer – dolny pasek (div.container-fluid.blue-bg.p-2) na całej szerokości ── */

footer .container-fluid.blue-bg.p-2 {
    background: rgba(0, 0, 0, .25) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ── Footer – pasek copyright: tło na całej szerokości ── */

footer.blue-bg>.container-fluid.blue-bg.p-2 {
    background: rgba(0, 0, 0, .25) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ── Nagłówki na stronie głównej – kolor jak section.title.sub h1 ── */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--blue);
}


/* ── .blue-c na nagłówkach – kolor marki ── */

h1.blue-c,
h2.blue-c,
h3.blue-c,
h4.blue-c,
h5.blue-c,
h6.blue-c {
    color: var(--blue) !important;
}


/* ── Nadpisanie ogólnego h2 color: var(--dark) dla .blue-c ── */

h2.blue-c,
h2.blue-c.fw-bold {
    color: var(--blue) !important;
}


/* ── .bg-light – wtapianie do białego na dole ── */

.bg-light {
    background: linear-gradient(to bottom, var(--light) 0%, var(--white) 100%) !important;
}


/* ── .bg-light – nadpisanie Bootstrap przez zmienną + background-image ── */

.bg-light {
    --bs-light-rgb: 244, 249, 253 !important;
    /* var(--light) jako RGB */
    background-image: linear-gradient(to bottom, rgb(244, 249, 253) 0%, #ffffff 100%) !important;
    background-color: transparent !important;
}


/* ── section.bg-light – gradient do białego na dole ── */

section.bg-light {
    background: linear-gradient(to bottom, #f4f9fd 0%, #ffffff 100%) !important;
}


/* ── #dlaczego-home – gradient do białego na dole ── */

#dlaczego-home {
    background: linear-gradient(to bottom, #f4f9fd 0%, #ffffff 100%) !important;
}


/* ── Navbar transparentny na stronie głównej, biały po scrollu ── */


/* Navbar transparentny tylko na home (brak .subpage) */

body:not(.subpage) .menu-glowne {
    background: transparent !important;
    box-shadow: none;
    border-bottom-color: transparent;
    transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}

body:not(.subpage) .menu-glowne.sticky {
    background: var(--white) !important;
    box-shadow: var(--shadow);
    border-bottom-color: var(--yellow);
}


/* Linki w navbarze – ciemny tekst WCAG AA na transparentnym tle */

body:not(.subpage) .menu-glowne:not(.sticky) .navbar-nav .nav-link,
body:not(.subpage) .menu-glowne:not(.sticky) .navbar-brand span {
    color: var(--dark);
    text-shadow: none;
}

body:not(.subpage) .menu-glowne:not(.sticky) .tel-head {
    color: var(--orange);
    background: rgba(255, 255, 255, .7);
}

body:not(.subpage) .menu-glowne:not(.sticky) .navbar-nav .nav-link:hover {
    color: var(--dark);
    /* #1A3A50 – kontrast ~10:1 na białym tle WCAG AAA */
    background: rgba(255, 255, 255, .75);
}

body:not(.subpage) .menu-glowne:not(.sticky) .bip-head {
    border-color: var(--blue);
    color: var(--blue);
}

body:not(.subpage) .menu-glowne:not(.sticky) .navbar-toggler {
    border-color: var(--dark);
}

body:not(.subpage) .menu-glowne:not(.sticky) .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%231A3A50' stroke-width='2.5' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}


/* Slider na pełną wysokość okna (bez odejmowania navbaru) */

body:not(.subpage) section.home-header {
    height: 50vh;
    margin-top: 0;
}

@media (max-width: 1439.98px) {
    section.home-header,
    body:not(.subpage) section.home-header {
        height: 75vh !important;
    }
}


/* Navbar nakłada się na slider */

body:not(.subpage) .menu-glowne {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}


/* Accessibility nav też fixed */

body:not(.subpage) .accessibility-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    background: rgba(255, 255, 255, .95);
}

body:not(.subpage) .menu-glowne {
    top: 34px;
    /* wysokość accessibility-nav */
}


/* JS – dodaje klasę .scrolled po przewinięciu */


/* Wymagany JS – wklej przed </body> na stronie głównej:
(function(){
  var nav = document.getElementById('menu-head');
  window.addEventListener('scroll', function(){
    nav.classList.toggle('scrolled', window.scrollY > 50);
  }, {passive: true});
})();
*/


/* ── Usuń żółtą linię ::after dla dropdown-toggle ── */

.navbar-nav .nav-link.dropdown-toggle::after,
.navbar-nav .nav-link.dropdown-toggle:hover::after,
.navbar-nav .nav-link.dropdown-toggle.active::after {
    display: none;
}


/* ── Logo title HC styles (SEO & Header topbar) ── */

.logo-title-hc {
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    color: var(--blue) !important;
    font-size: 1.1rem;
    margin: 0;
    line-height: 1.2;
}


/* ── Dynamic background images (Moving inline styles to CSS) ── */

.kursy-card {
    background-image: linear-gradient(rgba(25, 103, 179, 0.6) 0%, rgba(25, 103, 179, 0.3) 30%, rgba(215, 38, 32, 0) 100%), var(--bg-image);
    background-size: cover;
    background-position: center;
}

.prod-special-card {
    background-image: linear-gradient(rgba(25, 103, 179, 0.6) 0%, rgba(25, 103, 179, 0.3) 30%, rgba(215, 38, 32, 0) 100%), var(--bg-image);
    background-size: cover;
    background-position: center;
}

.prod-item-card {
    background-image: linear-gradient(rgba(25, 103, 179, 0.6) 0%, rgba(25, 103, 179, 0.3) 30%, rgba(215, 38, 32, 0) 100%), var(--bg-image);
    background-size: cover;
    background-position: center;
}


/* ── Homepage card rounded wrapper ── */

.home-card-rounded {
    border-radius: 16px;
    overflow: hidden;
}


/* ── Homepage card image ── */

.home-card-img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    min-height: 220px;
}


/* ── Homepage card placeholder for missing image ── */

.home-card-noimg {
    background: #f1f5f9;
    width: 100%;
    height: 100%;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-card-noimg-icon {
    font-size: 2rem;
    color: #cbd5e1;
}


/* ── Homepage card text details ── */

.home-card-title {
    font-size: 1.25rem;
}

.home-card-text {
    font-size: 0.95rem;
    color: #555;
}


/* ── Button more rounded style ── */

.btn-more-rounded {
    border-radius: 24px;
    padding: 10px 32px;
    font-weight: bold;
}


/* ── Homepage feature image wrapper and image ── */

.home-feature-img-wrapper {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.home-feature-img {
    width: 100%;
    object-fit: cover;
    min-height: 400px;
    aspect-ratio: 4/3;
}

.home-section-title-large {
    color: var(--dblue);
    font-size: 2.2rem;
}

.home-feature-content {
    font-size: 1.1rem;
    color: #4b5563;
    line-height: 1.7;
}


/* ── Homepage FAQ accordion elements ── */

.faq-accordion-item {
    border-radius: 12px;
    overflow: hidden;
}

.faq-accordion-button {
    background-color: #f8fafc !important;
    color: var(--dblue) !important;
    font-size: 1.1rem !important;
}

.faq-accordion-body {
    color: #4b5563;
    line-height: 1.6;
    padding: 1.25rem;
}


/* ── Homepage calendar elements ── */

.calendar-card {
    border-radius: 12px;
    background: #f8fafc;
}

.calendar-date-box {
    min-width: 70px;
    min-height: 70px;
}

.calendar-month {
    font-size: 0.75rem;
    letter-spacing: 1px;
    margin-top: 4px;
}

.calendar-title {
    font-size: 1.15rem;
}


/* ── Dlaczego list styles (moved from home.php) ── */

.dlaczego-content ul {
    list-style: none;
    padding-left: 0;
    margin-top: 1.5rem;
}

.dlaczego-content ul li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

.dlaczego-content ul li::before {
    content: '\eb7a';
    /* RemixIcon check-line */
    font-family: 'remixicon';
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 1.3rem;
    color: var(--dgreen);
    font-weight: bold;
}


/* ── Swiper slide background image elements (SEO) ── */

.swiper-slide {
    position: relative;
    overflow: hidden;
}

.swiper-slide .slide-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    pointer-events: none;
}