/* ============================================================
   Fundacja WFS - warstwa projektowa na szablonie Bizly (Axispro)
   main.css i main.js zostaja NIETKNIETE. Wszystko tutaj.
   1. Rebrand tokenow
   2. Poprawki szablonu pod polski jezyk
   3. Komponenty, ktorych szablon nie ma
   ============================================================ */

/* ---------- 1. Rebrand -------------------------------------- */
:root {
    --theme: #D9A441;          /* zloto z logo */
    --header: #001948;         /* granat z logo */
    --header2: #00102E;        /* glebszy granat */
    --text: #4A5568;
    --border: #D8DEE8;
    --bg: #F4F1E9;             /* cieply piasek - odpowiednik #ECE8E0 z szablonu */
    --bg2: #F7F9FC;

    --wfs-gold: #D9A441;
    --wfs-gold-light: #FBCA68;
    --wfs-gold-dark: #A9761C;  /* zloto czytelne jako tekst na jasnym tle */
    --wfs-navy: #001948;
    --wfs-navy-soft: #0E2A5C;
}

.section-bg-2 { background: #F8FAFC; }

/* zloto jako tekst na jasnym tle ma za maly kontrast - przyciemniamy */
.section-title span,
.link-btn:hover,
.theme-btn-2:hover,
.business-wrapper .business-content .list-area .list-items li i {
    color: var(--wfs-gold-dark);
}
.header-bg .section-title span,
.project-section .section-title span,
.funfact-section .section-title span,
.cta-section .section-title span {
    color: var(--wfs-gold-light);
}

/* ---------- 2. Poprawki szablonu ---------------------------- */

/* capitalize psuje polskie napisy ("Życie Fundacji") */
.theme-btn,
.theme-btn-2,
.link-btn,
.header-main .main-menu ul li a,
.mean-container .mean-nav ul li a,
.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li,
.faq-wrapper .faq-content .accordion-item .accordion-header .accordion-button {
    text-transform: none;
}

/* szablon zeruje marginesy akapitow - przy dluzszych tekstach wszystko sie zlewa */
.about-content p + p,
.business-content p + p,
.contact-content p + p,
.wfs-modal .modal-body p + p,
.wfs-program p + p,
.footer-content p + p {
    margin-top: 16px;
}

/* skala naglowkow: 120/60px to za duzo dla polskich zdan */
h1 { font-size: 78px; }
.hero-2 .hero-content h1 { font-size: 74px; margin-bottom: 28px; }
h2 { font-size: 46px; }
h3 { font-size: 30px; }
.funfact-items .content h2 { font-size: 62px; margin-bottom: 18px; }
@media (max-width: 1399px) {
    h1 { font-size: 62px; }
    .hero-2 .hero-content h1 { font-size: 58px; }
    h2 { font-size: 40px; }
}
@media (max-width: 991px) {
    h1, .hero-2 .hero-content h1 { font-size: 44px; }
    h2 { font-size: 34px; }
    h3 { font-size: 26px; }
}
@media (max-width: 575px) {
    h1, .hero-2 .hero-content h1 { font-size: 34px; }
    h2 { font-size: 27px; }
    h3 { font-size: 22px; }
}

/* kotwice: sticky header zaslania poczatek sekcji */
html { scroll-behavior: smooth; }
section[id], div[id="darowizna"] { scroll-margin-top: 110px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* scrollspy */
.header-main .main-menu ul li a.wfs-active,
.mean-container .mean-nav ul li a.wfs-active {
    color: var(--wfs-gold) !important;
}
.sticky.header-2 .header-main .main-menu ul li a.wfs-active { color: var(--wfs-gold-dark) !important; }

/* ciemne naklady szablonu sa szare - u nas granatowe */
.hero-2::before {
    background: linear-gradient(90deg, rgba(0, 18, 51, .86) 0%, rgba(0, 25, 72, .62) 55%, rgba(0, 25, 72, .45) 100%);
}
.cta-section::before {
    background: linear-gradient(0deg, rgba(0, 18, 51, .82) 0%, rgba(0, 18, 51, .82) 100%);
}

/* kursor szablonu tylko na desktopie */
@media (max-width: 1199px) { .mouse-cursor { display: none !important; } }

/* ikona "+" w menu mobilnym: main.js wstrzykuje <i class="far fa-plus">,
   a w wariancie Free nie ma tego glifu w rodzinie regular */
.mean-container .mean-nav ul li a.mean-expand i { font-family: inherit; font-style: normal; }
.mean-container .mean-nav ul li a.mean-expand i::before { content: "+"; font-weight: 700; }

/* ---------- 3. Naglowek i menu ------------------------------ */
.header-top-wrapper .top-right .theme-btn {
    border-color: var(--wfs-gold);
    color: var(--wfs-gold);
}
.header-top-wrapper .top-right .theme-btn:hover { color: var(--wfs-navy); }
.header-top-wrapper .top-right .wfs-krs-top {
    color: rgba(255, 255, 255, .75);
    font-size: 14px;
    letter-spacing: 1.2px;
}
/* Logo ma 330x108 px (2x pod retine). Przy max-height + width:auto przegladarka
   rezerwuje najpierw pudelko w rozmiarze natywnym, a dopiero po zastosowaniu
   ograniczenia kurczy je do 141x46 - i cala strona podskakuje (CLS 0.33).
   Podajemy wiec oba wymiary na sztywno, w proporcji pliku. */
.header-top-wrapper .top-logo img,
.footer-section .widget-head img { width: 165px; height: 54px; max-height: none; }
.header-2 .logo img,
.offcanvas__logo img { width: 141px; height: 46px; max-height: none; }
.sidebar__toggle { cursor: pointer; }

/* ---------- 4. Hero ----------------------------------------- */
.wfs-eyebrow {
    display: inline-block;
    color: var(--wfs-gold-light);
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 22px;
}
.hero-2 .hero-content h1 .wfs-gold { color: var(--wfs-gold-light); }
.hero-2 .hero-content p { max-width: 640px; margin-top: 26px; }
.wfs-hero-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 38px;
}
.wfs-btn-ghost {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, .55);
}
.wfs-btn-ghost::before { background-color: var(--theme); }
.wfs-btn-ghost:hover { border-color: var(--theme); color: var(--wfs-navy); }
.hero-2 .hero-content .arrow-image { margin-top: 34px; }
.hero-2 .hero-content .arrow-image img { max-width: 84px; height: auto; opacity: .8; }

/* pasek 4 wartosci: szablon daje szare kolka, u nas zlote */
.feature-card-items .circle-border { width: 62px; height: 62px; border-color: rgba(217, 164, 65, .45); }
.feature-card-items .circle-border .icon {
    width: 54px;
    height: 54px;
    line-height: 54px;
    background: var(--wfs-gold);
    color: var(--wfs-navy);
    font-size: 20px;
}

/* ---------- 5. Marquee -------------------------------------- */
/* Szablonowy pas ma 200px wersaliki w konturze - nie da sie odczytac calego
   slowa w kadrze. Uklad przeniesiony z wersji 4: dwa rzedy, przeciwne kierunki,
   zloto i kontur na przemian. Odstepy siedza w .wfs-marquee__item (nie w gap
   rzedu), zeby 12 pozycji dzielilo sie rowno na 3 i przesuniecie o 33.333%
   wypadalo dokladnie na powtorzeniu zestawu. */
.wfs-marquee { padding: 46px 0; background: var(--wfs-navy); overflow: hidden; }
.wfs-marquee__track { display: grid; gap: 10px; }
.wfs-marquee__row {
    display: flex;
    align-items: center;
    width: max-content;
    animation: wfs-marquee-slide 42s linear infinite;
}
.wfs-marquee__row + .wfs-marquee__row {
    animation-direction: reverse;
    animation-duration: 52s;
}
.wfs-marquee:hover .wfs-marquee__row { animation-play-state: paused; }
.wfs-marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 40px;
    padding-right: 40px;
}
.wfs-marquee__text {
    font-family: "Cormorant", serif;
    font-style: italic;
    font-weight: 600;
    font-size: 62px;
    line-height: 1.25;
    white-space: nowrap;
    color: var(--wfs-gold);
}
.wfs-marquee__text--outline {
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .45);
}
.wfs-marquee__arrow { flex: none; width: 34px; height: 34px; opacity: .5; }
@keyframes wfs-marquee-slide {
    from { transform: translateX(0); }
    to   { transform: translateX(-33.3333%); }
}
@media (max-width: 991px) {
    .wfs-marquee { padding: 34px 0; }
    .wfs-marquee__text { font-size: 44px; }
    .wfs-marquee__item { gap: 26px; padding-right: 26px; }
    .wfs-marquee__arrow { width: 26px; height: 26px; }
}
@media (max-width: 575px) {
    .wfs-marquee { padding: 26px 0; }
    .wfs-marquee__text { font-size: 34px; }
    .wfs-marquee__item { gap: 20px; padding-right: 20px; }
    .wfs-marquee__arrow { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .wfs-marquee__row { animation: none; }
}

/* naglowek-znak wodny "POROZMAWIAJMY" wychodzil poza ekran */
.strock-text .text-items h2 { font-size: 120px; -webkit-text-stroke-color: rgba(0, 25, 72, .30); }
@media (max-width: 1199px) { .strock-text .text-items h2 { font-size: 84px; } }
@media (max-width: 767px) { .strock-text .text-items h2 { font-size: 52px; } }

/* ---------- 6. Sekcje tekstowe ------------------------------ */
.wfs-section-lead {
    max-width: 780px;
    margin: 18px auto 0;
    font-size: 17px;
    line-height: 30px;
}
.section-title:not(.text-center) .wfs-section-lead { margin-left: 0; }
.wfs-claim {
    margin-top: 26px;
    font-family: "Cormorant", serif;
    font-size: 26px;
    line-height: 36px;
    color: var(--wfs-gold-dark);
    font-weight: 600;
}
.wfs-quote {
    border-left: 3px solid var(--wfs-gold);
    padding-left: 20px;
    font-family: "Cormorant", serif;
    font-size: 24px;
    line-height: 34px;
    color: var(--wfs-navy);
    margin-bottom: 34px;
}

/* przycisk "Czytaj wiecej" / "Zwin" */
.wfs-more {
    background: none;
    border: none;
    padding: 0;
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    color: var(--wfs-gold-dark);
    font-weight: 600;
}
.wfs-more--block { display: flex; margin-top: 24px; }
.wfs-more i { transition: transform .3s ease; }
.wfs-more[aria-expanded="true"] i { transform: rotate(90deg); }
.wfs-more .wfs-more__off { display: none; }
.wfs-more[aria-expanded="true"] .wfs-more__on { display: none; }
.wfs-more[aria-expanded="true"] .wfs-more__off { display: inline; }
.wfs-more:hover { color: var(--wfs-navy); }

/* ---------- 7. Karty rozwijane (cele, sposoby pomocy) ------- */
.feature-step-items-2 { padding: 46px 40px; height: 100%; }
.feature-step-items-2 .feature-step-content h3 { font-size: 26px; }
/* szablon trzyma w .icon inline SVG na szarym kwadracie - u nas jest tam glif */
.feature-step-items-2 .icon,
.feature-step-items .icon {
    width: 74px;
    height: 74px;
    line-height: 74px;
    background: rgba(217, 164, 65, .16);
    color: var(--wfs-gold-dark);
    font-size: 28px;
}
.feature-step-items-2:hover .icon,
.feature-step-items:hover .icon { background: var(--wfs-gold); color: var(--wfs-navy); }
.feature-step-items-2 .feature-step-content h3,
.feature-step-items .feature-step-content h3 { margin-top: 26px; }
.feature-step-items-2 .feature-step-content .number,
.feature-step-items .feature-step-content .number { margin-top: 22px; }
.feature-step-items .feature-step-content h3 { font-size: 24px; }
.feature-step-items.style-2 { padding: 40px 30px; }
.wfs-expand .collapse p,
.wfs-expand .collapsing p { margin-top: 14px; }
.feature-step-items.style-2 { height: 100%; }
.wfs-cta-inline {
    display: block;
    margin-top: 14px;
    color: var(--wfs-navy);
    font-weight: 600;
}
.wfs-cta-inline:hover { color: var(--wfs-gold-dark); }

/* ---------- 8. Karty osob ----------------------------------- */
.wfs-person .team-image img { object-fit: cover; aspect-ratio: 450 / 560; }
.wfs-person .team-content { padding-top: 22px; }
.wfs-person .team-content h3 { font-size: 28px; }
.wfs-person .team-content h3 a:hover { color: var(--wfs-gold-dark); }
.wfs-person__lead { margin-top: 12px; margin-bottom: 16px; }

/* ---------- 9. Blok programu Mlodzi Liderzy ----------------- */
.wfs-program {
    border: 2px solid var(--wfs-gold);
    background: #fff;
    padding: 38px 34px;
    box-shadow: var(--box-shadow);
}
.wfs-program h3 { font-size: 28px; margin: 14px 0 16px; }
.wfs-program .theme-btn { margin-top: 24px; }
.wfs-badge {
    display: inline-block;
    background: var(--wfs-gold);
    color: var(--wfs-navy);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 40px;
}

/* ---------- 10. Formy wsparcia - akordeon pelnej szerokosci -- */
.wfs-faq-wide .faq-content .accordion-button { font-size: 22px; }
@media (max-width: 767px) { .wfs-faq-wide .faq-content .accordion-button { font-size: 18px; } }

/* ---------- 11. Zycie fundacji - karty kategorii ------------ */
/* Szablon trzyma karty na sztywnych 665px i odslania CALA tresc dopiero na
   hover. Dawalo to trzy problemy naraz: na dotyku opisu nie dalo sie odczytac,
   w jednym rzedzie kazdy kafel byl w innym stanie, a 6 kafli zajmowalo ponad
   1300px, z czego wiekszosc to samo tlo. Wszystkie karty maja teraz jeden stan
   spoczynkowy - tytul, kreska, opis i strzalka widoczne od razu - a hover
   tylko pogłębia nakladke. Wysokosc wynika z tresci. */
.project-wrapper .project-card-items {
    height: auto;
    min-height: 330px;
    display: flex;
    align-items: flex-end;
    background: rgba(0, 18, 51, .58);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
    transition: background .35s ease-in-out;
}
.project-wrapper .project-card-items:hover { background: rgba(0, 18, 51, .82); }
.project-wrapper .project-card-items .project-content {
    position: static;
    opacity: 1;
    visibility: visible;
    left: auto;
    right: auto;
    bottom: auto;
    padding: 32px 30px;
    width: 100%;
}
.project-wrapper .project-card-items .project-content span,
.project-wrapper .project-card-items .project-content p,
.project-wrapper .project-card-items .project-content .icon {
    opacity: 1;
    visibility: visible;
}
.project-wrapper .project-card-items .project-content h4 { font-size: 25px; margin-bottom: 14px; }
.project-wrapper .project-card-items .project-content span { margin-bottom: 14px; }
.project-wrapper .project-card-items .project-content p { margin-bottom: 0; }
.project-wrapper .project-card-items .project-content h4 a:hover { color: var(--wfs-gold-light); }
.project-wrapper .project-card-items .project-content .icon a { display: inline-flex; }
.project-wrapper .project-card-items .project-content .icon img { transition: transform .3s; }
.project-wrapper .project-card-items:hover .project-content .icon img { transform: translateX(6px); }
@media (max-width: 991px) {
    .project-wrapper .project-card-items { min-height: 0; }
    .project-wrapper .project-card-items .project-content { padding: 26px 24px; }
}
@media (max-width: 575px) {
    .project-wrapper .project-card-items { margin-top: 0; }
}

/* ---------- 12. Wydarzenia ---------------------------------- */
.wfs-event .news-image { position: relative; }
.wfs-event__date {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--wfs-gold);
    color: var(--wfs-navy);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: 8px 14px;
}
.wfs-event .news-content h4 { font-size: 24px; margin-bottom: 14px; }
.wfs-event .news-content h4 span { color: var(--header); }
.wfs-event__soon { color: var(--text); cursor: default; }
.wfs-empty {
    margin-top: 30px;
    border: 1px dashed var(--border);
    background: #fff;
    padding: 48px 34px;
    text-align: center;
    height: calc(100% - 30px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.wfs-empty__icon {
    width: 64px;
    height: 64px;
    line-height: 64px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--wfs-gold-dark);
    font-size: 24px;
    margin-bottom: 20px;
}
.wfs-empty h4 { margin-bottom: 12px; }
.wfs-empty p { margin-bottom: 26px; max-width: 380px; }

/* ---------- 13. Liczniki ------------------------------------ */
.funfact-items .icon { color: var(--wfs-gold); font-size: 34px; margin-bottom: 14px; }
.funfact-items .content h2 span.count { color: #fff; }
.funfact-items .content p { color: rgba(255, 255, 255, .78); }
.wfs-funfact-note {
    text-align: center;
    color: rgba(255, 255, 255, .6);
    margin-top: 46px;
    font-size: 15px;
}

/* ---------- 14. Modul darowizny ----------------------------- */
.pricing-card-items { padding: 44px 36px; height: 100%; }
.wfs-card-title { font-size: 26px; margin: 18px 0 12px; }
.wfs-toggle {
    display: flex;
    gap: 6px;
    background: rgba(255, 255, 255, .12);
    border-radius: 40px;
    padding: 5px;
    margin: 22px 0 20px;
}
.wfs-donate .wfs-toggle { background: rgba(0, 25, 72, .07); }
.wfs-toggle__btn {
    flex: 1;
    border: none;
    background: none;
    padding: 11px 12px;
    border-radius: 40px;
    font-weight: 600;
    font-size: 15px;
    color: var(--header);
    cursor: pointer;
    transition: all .3s ease;
}
.wfs-toggle__btn.active { background: var(--wfs-navy); color: #fff; }
/* karta darowizny stoi na granacie (active-color) - cala typografia na jasno */
.wfs-donate { background: var(--wfs-navy); border-color: rgba(255, 255, 255, .16); }
/* szablon wymusza tu #555058 z !important */
.wfs-donate .post-cart.bg-color {
    background: var(--wfs-gold) !important;
    color: var(--wfs-navy) !important;
    font-weight: 700;
}
.wfs-donate .wfs-toggle { background: rgba(255, 255, 255, .10); }
.wfs-donate .wfs-toggle__btn { color: rgba(255, 255, 255, .72); }
.wfs-donate .wfs-toggle__btn.active { background: var(--wfs-gold); color: var(--wfs-navy); }
.wfs-donate .pricing-date { border-bottom-color: rgba(255, 255, 255, .18); margin-top: 22px; padding-bottom: 18px; }
.wfs-donate .pricing-card-items .pricing-header .pricing-date h2,
.wfs-donate .pricing-date h2.wfs-amount-view {
    color: #fff;
    font-size: 30px;
    font-weight: 500;
}
.wfs-donate .pricing-date h2.wfs-amount-view em {
    font-style: normal;
    font-size: 62px;
    font-weight: 700;
    color: var(--wfs-gold-light);
    margin-right: 6px;
}
.wfs-donate .pricing-date > span#wfs-freq-view {
    display: block;
    font-size: 15px;
    color: rgba(255, 255, 255, .72);
    margin-top: 4px;
}
.wfs-donate .wfs-amount { background: transparent; border-color: rgba(255, 255, 255, .28); color: #fff; }
.wfs-donate .wfs-amount--custom input { color: #fff; }
.wfs-donate .wfs-amount--custom input::placeholder { color: rgba(255, 255, 255, .6); }
.wfs-donate .wfs-amount.active { background: var(--wfs-gold); border-color: var(--wfs-gold); color: var(--wfs-navy); }
.wfs-donate .wfs-micro { color: rgba(255, 255, 255, .7); }
.wfs-donate .wfs-more { color: var(--wfs-gold-light); }
.wfs-donate .wfs-more:hover { color: #fff; }
.wfs-donate .wfs-note { background: rgba(217, 164, 65, .18); color: #fff; }
.wfs-amounts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 26px 0 10px;
}
.wfs-amount {
    border: 1px solid var(--border);
    background: #fff;
    padding: 13px 10px;
    border-radius: 40px;
    font-weight: 600;
    color: var(--header);
    cursor: pointer;
    transition: all .3s ease;
    text-align: center;
}
.wfs-amount:hover { border-color: var(--wfs-gold); }
.wfs-amount.active { background: var(--wfs-gold); border-color: var(--wfs-gold); color: var(--wfs-navy); }
.wfs-amount--custom { grid-column: 1 / -1; padding: 0; overflow: hidden; }
.wfs-amount--custom input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    text-align: center;
    padding: 13px 10px;
    font-weight: 600;
    color: var(--header);
}
.wfs-donate .pricing-btn { margin-top: 22px; }
.wfs-donate .pricing-btn .theme-btn { width: 100%; }
.wfs-micro { font-size: 13px; line-height: 22px; color: var(--text); margin-top: 14px; }
.wfs-note {
    margin-top: 14px;
    padding: 14px 16px;
    background: rgba(217, 164, 65, .14);
    border-left: 3px solid var(--wfs-gold);
    font-size: 14px;
    line-height: 23px;
    color: var(--header);
}
.wfs-transfer { margin-top: 18px; background: var(--bg2); padding: 22px; }
.wfs-transfer dl { margin: 0 0 18px; }
.wfs-transfer dt {
    font-size: 12px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text);
    font-weight: 600;
}
.wfs-transfer dd { margin: 4px 0 14px; color: var(--header); font-weight: 600; }
.wfs-transfer #wfs-iban { letter-spacing: 1px; }
.wfs-transfer .theme-btn { width: 100%; font-size: 16px; padding: 16px 20px; }
/* Pierscien postepu: szablon stylizuje .circle-bar tylko wewnatrz
   .about-wrapper-4 i .team-details-wrapper, wiec u nas trzeba go opisac od zera. */
.wfs-collect .circle-progress-bar-wrapper { display: flex; justify-content: center; margin: 30px 0 24px; }
.wfs-collect .single-circle-bar .circle-bar { height: 180px; width: 180px; }
.wfs-collect .single-circle-bar .circle-bar div {
    position: absolute;
    height: 180px;
    width: 180px;
    border-radius: 50%;
}
.wfs-collect .single-circle-bar .circle-bar div span {
    position: absolute;
    font-size: 38px;
    line-height: 168px;
    height: 168px;
    width: 168px;
    left: 6px;
    top: 6px;
    font-weight: 700;
    text-align: center;
    border-radius: 50%;
    background-color: #fff;
    color: var(--wfs-navy);
    font-family: "Cormorant", serif;
}
.wfs-collect .single-circle-bar .circle-bar .background { background-color: #EDEFF3 !important; }
.wfs-collect .single-circle-bar .circle-bar .rotate { clip: rect(0 180px 90px 0); background-color: var(--wfs-gold) !important; }
.wfs-collect .single-circle-bar .circle-bar .left { clip: rect(0 180px 90px 0); opacity: 1; background-color: #EDEFF3 !important; }
.wfs-collect .single-circle-bar .circle-bar .right {
    clip: rect(0 183px 90px 0);
    transform: rotate(180deg);
    opacity: 0;
    background-color: var(--wfs-gold) !important;
}
.wfs-collect .single-circle-bar .content { margin-top: 20px; }
.wfs-collect .single-circle-bar .content h4 { font-size: 19px; line-height: 1.35; }
.wfs-collect .pricing-list { margin-top: 10px; }

/* ---------- 15. Partnerzy ----------------------------------- */
.brand-section .brand-image img { opacity: .9; transition: all .3s ease; }
.brand-section .brand-image:hover img { opacity: 1; }

/* ---------- 16. Historie ------------------------------------ */
.testimonial-active { padding-bottom: 10px; }
.testimonial-card-items-2 .info-item .image img { border-radius: 50%; }
.testimonial-card-items-2 .link-btn { margin-top: 16px; display: inline-block; }
.testimonial-section .array-button { display: flex; gap: 12px; margin-top: 26px; }
.testimonial-section .array-button button {
    width: 52px;
    height: 52px;
    border: 1px solid var(--border);
    background: transparent;
    border-radius: 50%;
    color: var(--header);
    transition: all .3s ease;
}
.testimonial-section .array-button button:hover {
    background: var(--wfs-gold);
    border-color: var(--wfs-gold);
    color: var(--wfs-navy);
}
.video-thumb.style-2 img { width: 100%; }

/* ---------- 17. Kontakt ------------------------------------- */
/* karta kontaktowa stoi na zlocie (--theme) - tekst musi byc granatowy */
.contact-wrapper-2 .contact-left-items .contact-info-area-2 .contact-info-items { border-bottom-color: rgba(0, 25, 72, .22); }
.contact-wrapper-2 .contact-left-items .contact-info-area-2 .contact-info-items .content p { color: rgba(0, 25, 72, .72); }
.contact-wrapper-2 .contact-left-items .contact-info-area-2 .contact-info-items .content h3,
.contact-wrapper-2 .contact-left-items .contact-info-area-2 .contact-info-items .content h3 a { color: var(--wfs-navy); }
.contact-wrapper-2 .contact-left-items .contact-info-area-2 .contact-info-items .content h3 a:hover { color: #fff; }
.contact-info-items .icon { color: var(--wfs-navy); font-size: 22px; }
.wfs-registry {
    margin-top: 26px;
    padding: 16px 18px;
    background: var(--bg);
    font-size: 14px;
    color: var(--header);
    letter-spacing: .4px;
}
.wfs-map { margin-top: 26px; }
.wfs-map iframe { width: 100%; height: 320px; border: 0; display: block; }
.contact-content h2 { margin-bottom: 16px; }
.contact-content .contact-form-items { margin-top: 30px; }
.form-clt select { width: 100%; }
.contact-wrapper-2 .contact-content .contact-form-items .form-clt input:focus,
.contact-wrapper-2 .contact-content .contact-form-items .form-clt textarea:focus { border-color: var(--wfs-gold); }
.contact-content .nice-select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 0;
    height: auto;
    line-height: normal;
    padding: 18px 30px 18px 20px;
    color: var(--text);
}
.contact-content .nice-select .list { width: 100%; }
.wfs-check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 23px; cursor: pointer; }
.wfs-check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--wfs-gold); flex: 0 0 18px; }
.wfs-check a { color: var(--wfs-gold-dark); text-decoration: underline; }
.wfs-form-msg {
    margin-top: 18px;
    padding: 14px 18px;
    font-size: 15px;
    border-left: 3px solid var(--wfs-gold);
    background: rgba(217, 164, 65, .12);
    color: var(--header);
}
.wfs-form-msg--ok { border-left-color: #2E7D32; background: rgba(46, 125, 50, .1); }
.wfs-form-msg--err { border-left-color: #C62828; background: rgba(198, 40, 40, .08); }
.wfs-invalid input,
.wfs-invalid textarea,
.wfs-invalid .nice-select { border-color: #C62828 !important; }
.wfs-check.wfs-invalid span { color: #C62828; }

/* ---------- 18. CTA i tagi ---------------------------------- */
.cta-section .cta-content h2 { color: #fff; }
.cta-section .cta-content p { color: rgba(255, 255, 255, .82); margin-top: 18px; max-width: 760px; }
.wfs-cta-dark, .wfs-cta-tags { padding: 110px 0; }
.wfs-cta-btns { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.wfs-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.wfs-tags span {
    border: 1px solid rgba(255, 255, 255, .4);
    color: #fff;
    padding: 9px 18px;
    border-radius: 40px;
    font-size: 14px;
}

/* ---------- 19. Stopka -------------------------------------- */
.footer-section .single-footer-widget .widget-head h4 { color: #fff; }
.footer-section .footer-content p { color: rgba(255, 255, 255, .78); }
.wfs-hashtag { color: var(--wfs-gold-light) !important; font-weight: 700; letter-spacing: 1.4px; margin-top: 14px; }
.footer-section .list-items li { margin-bottom: 12px; }
.footer-section .list-items li a { color: rgba(255, 255, 255, .78); }
.footer-section .list-items li a:hover { color: var(--wfs-gold); }
.footer-bottom { flex-wrap: wrap; gap: 14px; }
.footer-bottom .social-icon { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-bottom .social-icon li { color: rgba(255, 255, 255, .7); font-size: 14px; }
.footer-bottom p { color: rgba(255, 255, 255, .7); }
.footer-bottom p a { color: rgba(255, 255, 255, .7); }
@media (max-width: 991px) { .footer-bottom { padding-bottom: 96px; } }

/* ---------- 20. Modale (szablon nie ma zadnych stylow) ------ */
.wfs-modal .modal-content {
    border: none;
    border-radius: 0;
    border-top: 4px solid var(--wfs-gold);
}
.wfs-modal .modal-header {
    border-bottom: 1px solid var(--border);
    padding: 28px 32px;
    align-items: flex-start;
}
.wfs-modal .modal-title { font-size: 30px; line-height: 1.2; }
.wfs-modal__eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--wfs-gold-dark);
    margin-bottom: 8px;
}
.wfs-modal .modal-body { padding: 28px 32px 34px; }
.wfs-modal .modal-body p { line-height: 28px; }
.wfs-modal .modal-body h5 { font-size: 20px; margin: 22px 0 10px; }
.wfs-modal__img {
    float: right;
    width: 190px;
    margin: 0 0 20px 24px;
    border-top: 3px solid var(--wfs-gold);
}
.wfs-modal__quote {
    margin: 24px 0 0;
    padding: 22px 26px;
    background: var(--bg);
    border-left: 3px solid var(--wfs-gold);
    font-family: "Cormorant", serif;
    font-size: 23px;
    line-height: 33px;
    color: var(--wfs-navy);
}
.wfs-list { margin: 12px 0 0; padding-left: 0; list-style: none; }
.wfs-list li { position: relative; padding-left: 24px; margin-bottom: 8px; line-height: 27px; }
.wfs-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wfs-gold);
}
.wfs-tbd { margin-top: 18px; color: var(--text); font-style: italic; }
.wfs-doc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0; }
.wfs-doc-actions .theme-btn { font-size: 15px; padding: 15px 26px; min-width: 0; }
.wfs-pdf { width: 100%; height: 460px; border: 1px solid var(--border); }
@media (max-width: 767px) {
    .wfs-modal__img { float: none; width: 100%; max-width: 220px; margin: 0 0 18px; display: block; }
    .wfs-modal .modal-header, .wfs-modal .modal-body { padding-left: 20px; padding-right: 20px; }
    .wfs-modal .modal-title { font-size: 24px; }
    .wfs-pdf { height: 300px; }
}

/* ---------- 21. Cookies, toast, bottom bar ------------------ */
.wfs-cookies {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 1200;
    background: #fff;
    border-top: 3px solid var(--wfs-gold);
    box-shadow: 0 18px 50px rgba(0, 25, 72, .22);
    padding: 24px 28px;
}
.wfs-cookies__inner {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    flex-wrap: wrap;
}
.wfs-cookies p { font-size: 14px; line-height: 24px; max-width: 720px; }
.wfs-cookies p a { color: #8A5E12; text-decoration: underline; }  /* 4,5:1 na bieli */
.wfs-cookies__btns { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.wfs-cookies__btns .theme-btn { font-size: 15px; padding: 14px 24px; min-width: 0; }
@media (max-width: 991px) { .wfs-cookies { left: 10px; right: 10px; bottom: 76px; padding: 20px; } }

.wfs-toast {
    position: fixed;
    left: 50%;
    bottom: 40px;
    transform: translate(-50%, 20px);
    background: var(--wfs-navy);
    color: #fff;
    padding: 14px 26px;
    border-radius: 40px;
    font-size: 15px;
    z-index: 1300;
    opacity: 0;
    pointer-events: none;
    transition: all .3s ease;
}
.wfs-toast.is-open { opacity: 1; transform: translate(-50%, 0); }

.wfs-bottombar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    display: none;
    background: var(--wfs-navy);
    box-shadow: 0 -6px 24px rgba(0, 25, 72, .28);
}
.wfs-bottombar a {
    flex: 1;
    text-align: center;
    padding: 18px 10px;
    color: #fff;
    font-weight: 600;
}
.wfs-bottombar a:first-child { background: var(--wfs-gold); color: var(--wfs-navy); }
@media (max-width: 991px) {
    .wfs-bottombar.is-open { display: flex; }
    .back-to-top { bottom: 80px !important; }
}

/* ---------- 22. Drobne poprawki responsywne ----------------- */
/* Szablon gasi WSZYSTKIE <br> ponizej 767px (main.css:3390). Tam gdzie lamanie
   niesie tresc - adres, dane do przelewu, termin wydarzenia - musi zostac,
   inaczej wychodzi "Fundacja WFSul. Stanislawa Drabika 43 lok. 3452-131 Wroclaw". */
@media (max-width: 767px) {
    .contact-info-items .content h3 br,
    .company-info .content .wfs-h6 br,
    .wfs-event .news-content p br,
    .wfs-transfer dd br,
    .offcanvas__contact br { display: block; }
}

@media (max-width: 1199px) {
    .feature-step-items-2 { padding: 34px 26px; }
    .pricing-card-items { padding: 34px 26px; }
}
@media (max-width: 991px) {
    .wfs-hero-btns .theme-btn { flex: 1 1 100%; }
    .business-wrapper .business-content { border-right: none; }
    .wfs-amounts { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   23. Runda finalna - poprawki przed oddaniem na produkcje
   ============================================================ */

/* --- Siatka -------------------------------------------------
   Bootstrap w tym szablonie ma .container 1410px, wiec przy 1440px
   tresc konczyla sie 15px od krawedzi okna i strona czytala sie ciasno.
   Zwezamy kontener na duzych ekranach - nic poza szerokoscia sie nie zmienia. */
@media (min-width: 1400px) {
    .container { max-width: 1296px; }
}

/* --- Siatka bezpieczenstwa dla WOW.js -----------------------
   Element z klasa .wow startuje z visibility:hidden i odslania go dopiero
   reveal na scrollu. Jesli skrypt nie wystartuje (blad JS, wolne lacze,
   czytnik), tresc zostaje niewidoczna na stale. Trzy zabezpieczenia:
   1) uzytkownik z ograniczonymi animacjami widzi wszystko od razu,
   2) klasa awaryjna zdejmowana z <html> przez wfs-v3.js,
   3) druk zawsze pelny. */
@media (prefers-reduced-motion: reduce) {
    .wow, .animated {
        visibility: visible !important;
        animation-name: none !important;
        animation-duration: 0s !important;
    }
}
.wfs-wow-awaria .wow {
    visibility: visible !important;
    animation-name: none !important;
}
@media print {
    .wow { visibility: visible !important; }
}

/* --- Rozstrzelone wersaliki ---------------------------------
   letter-spacing bez korekty word-spacing sklejal wyrazy w kickerach
   ("DLAMLODZIEZY" zamiast "DLA MLODZIEZY"). */
.hero-2 .section-title span,
.section-title span,
.sub-title span,
.wfs-tags span,
.wfs-badge { word-spacing: .2em; }

/* Opis kafli Zycia fundacji jest widoczny w kazdym stanie - regula
   warunkowa pod dotyk nie jest juz potrzebna (patrz sekcja 11). */

/* --- Formularz kontaktowy -----------------------------------
   nice-select podmienia <select> na wlasnego diva, ktory mial inny stopien
   pisma i inna wysokosc niz sasiednie inputy, a strzalka wypadala poza pole. */
.contact-wrapper-2 .contact-content .nice-select,
.contact-content .nice-select {
    font-size: 16px;
    font-weight: 400;
    line-height: 29px;
    padding: 0 48px 0 20px;
    height: 67px;
    min-height: 0;
    display: flex;
    align-items: center;
}
.contact-wrapper-2 .contact-content .nice-select::after,
.contact-content .nice-select::after {
    top: 50%;
    right: 22px;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-bottom: 2px solid var(--text);
    border-right: 2px solid var(--text);
}
/* Dopoki nie wybrano tematu, pole ma wygladac jak pusty placeholder, a nie
   jak pole juz wypelnione. Etykiety pol to takze <span> w .form-clt, wiec
   szablonowa regula etykiety trafia rowniez w .current i wygrywa
   specyficznoscia - stad tak dlugi selektor. */
.contact-wrapper-2 .contact-content .contact-form-items .form-clt .nice-select .current {
    color: var(--text);
    font-weight: 400;
}
.contact-wrapper-2 .contact-content .contact-form-items .form-clt .nice-select.wfs-wybrano .current {
    color: var(--header);
    font-weight: 500;
}
/* rozwijana lista ma siadac pod polem, nie na nim */
.contact-content .nice-select .list { top: calc(100% + 4px); }
/* ramki pol byly na granicy widocznosci (#D8DEE8 na bieli) */
.contact-wrapper-2 .contact-content .contact-form-items .form-clt input,
.contact-wrapper-2 .contact-content .contact-form-items .form-clt textarea,
.contact-content .nice-select { border-color: #C2CAD8; }

/* --- Historie: interlinia cytatow ---------------------------
   17px przy interlinii 30px to 1.25 - za ciasno na kilkuwierszowy cytat. */
.testimonial-section .testimonial-items p,
.testimonial-items .testimonial-content p { line-height: 1.65; }

/* --- Slider obszarow ----------------------------------------
   Karuzela jest szersza niz okno, wiec ostatnia widoczna karta urywa sie na
   krawedzi ekranu. Maska gradientowa siedzi na sekcji (nie na sliderze, ktory
   sam wystaje poza kadr), zeby przyciecie czytalo sie jako zapowiedz
   kolejnej karty, a nie jak blad renderowania. */
.service-section { position: relative; }
@media (min-width: 992px) {
    .service-section::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 110px;
        height: 100%;
        pointer-events: none;
        background: linear-gradient(to right, rgba(244, 241, 233, 0), var(--bg) 78%);
        z-index: 2;
    }
}

/* --- Kafle partnerow ----------------------------------------
   Zaslepki sa eksportowane w 3x pod ekrany retina (489x159). Szablon nie
   ogranicza szerokosci obrazka w brand-slider, wiec renderowaly sie w pelnym
   rozmiarze i nachodzily na sasiednie slajdy. */
.brand-section .brand-image img,
.brand-slider .brand-image img {
    width: 163px;
    height: auto;
    max-width: 100%;
}
.brand-section .brand-image { display: flex; justify-content: center; }

/* --- Cele dotykowe na mobile --------------------------------
   Selektory sprawdzone pomiarem na 390/768/820px: te odnosniki mialy
   21-37px wysokosci, a minimum dla palca to 44px. Powiekszamy sam obszar
   dotyku, nie stopien pisma - uklad zostaje bez zmian. */
@media (max-width: 991px) {
    .service-image-items .service-content h3 a,
    .project-card-items .project-content h4 a,
    .project-card-items .project-content .icon a,
    .contact-info-items .content h3 a,
    .brand-image a,
    .offcanvas__logo a,
    .logo a.header-logo,
    .footer-widgets .footer-list li a,
    .footer-widgets .contact-info li a,
    .offcanvas__contact ul li a,
    .mean-container .mean-nav ul li a,
    .link-btn,
    .wfs-more {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    .brand-image a { justify-content: center; }
    .offcanvas__close button { min-width: 44px; min-height: 44px; }
    .wfs-check input { width: 24px; height: 24px; flex: 0 0 24px; margin-top: 1px; }
}

/* --- Historie: interlinia cytatu ----------------------------
   main.css:5841 daje 125% przy 30px, wiec dwuwierszowy cytat sie sklejal. */
.testimonial-wrapper .testimonial-card-items-2 p { line-height: 1.45; }

/* --- Marginesy boczne na mobile -----------------------------
   Kontener zostawial 12-13px, przez co naglowki dotykaly krawedzi ekranu. */
@media (max-width: 767px) {
    .container, .container-fluid { padding-left: 20px; padding-right: 20px; }
}

/* --- Rytm sekcji --------------------------------------------
   Szablon daje 140px gory i dolu (main.css:5131), wiec na styku dwoch
   jasnych sekcji powstawalo 280px jednolitej pustki - sekcja czytala sie
   jako wyzsza niz jej tresc. Skala zejscia: 118 / 96 / 76 / 64. */
@media (min-width: 1200px) {
    .section-padding { padding: 118px 0; }
    /* dwie sasiadujace sekcje bez wlasnego tla nie potrzebuja pelnego
       odstepu po obu stronach - zmiana tla usprawiedliwia go, brak zmiany nie */
    section.section-padding + section.section-padding:not([class*="bg-"]):not(.header-bg):not(.service-section):not(.pricing-section):not(.feature-step-section) { padding-top: 92px; }
}
@media (max-width: 1199px) and (min-width: 992px) {
    .section-padding { padding: 96px 0; }
}
@media (max-width: 991px) and (min-width: 768px) {
    .section-padding { padding: 80px 0; }
}
@media (max-width: 767px) {
    .section-padding { padding: 64px 0; }
    .wfs-cta-dark, .wfs-cta-tags { padding: 60px 0; }
    .section-title h2 { margin-bottom: 22px; }
}

/* --- Historie: zdjecie nie moze byc powiekszane ponad zrodlo -----
   testi.jpg ma 705x585, a szablon rozciagal je do 942px, czyli 1.34x.
   Na ekranie retina wyglada to miekko. Do czasu, az klient dosle wlasne
   zdjecie w wiekszej rozdzielczosci, ograniczamy kadr do natywnej szerokosci. */
.testimonial-section .video-thumb.style-2 { max-width: 705px; margin-left: auto; }
.testimonial-section .video-thumb.style-2 img { width: 100%; height: auto; }
@media (max-width: 991px) {
    .testimonial-section .video-thumb.style-2 { margin: 34px auto 0; }
}

/* --- Przycisk menu mobilnego --------------------------------
   Ikona hamburgera miala 18x29px obszaru dotyku. Powiekszamy sam obszar,
   sama ikona zostaje w tym samym rozmiarze i miejscu. */
.sidebar__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin-right: -11px;
}

/* --- Kropki slidera na dotyku -------------------------------
   Kropka ma zostac 10px, ale obszar dotyku musi urosnac do 44px. Robimy to
   paddingiem na content-box (tlo rysuje sie tylko w polu tresci), a ujemny
   margines odtwarza pierwotny odstep miedzy kropkami. Pseudoelementu ::before
   nie ruszamy - szablon rysuje nim pierscien aktywnej kropki (main.css:5207). */
@media (max-width: 991px) {
    .swiper-dot .swiper-pagination-bullet {
        box-sizing: content-box;
        padding: 17px;
        background-clip: content-box;
        margin-left: -13px;
        margin-right: -13px;
    }
    .service-section .swiper-dot .swiper-pagination-bullet:not(:last-child) { margin-right: -13px; }
    .swiper-dot { line-height: 0; }
}

/* --- Hero na mobile -----------------------------------------
   Szablon trzyma 100/150px, przez co pod strzalka scrolla zostawal pas
   pustego granatu wiekszy niz zapas u gory. */
@media (max-width: 767px) {
    .hero-2 { padding: 92px 0 72px; }
    .hero-2 .hero-content .arrow-image { margin-top: 26px; }
    .hero-2 .hero-content .arrow-image img { max-width: 62px; }
}

/* ============================================================
   24. Runda 2 - poprawki po audycie sekcji
   ============================================================ */

/* --- Przerywnik "Porozmawiajmy" -----------------------------
   Szablon stawia kolo z ikona na absolucie (left:44%), wiec zaslanialo
   srodek slowa, a napis 120px nie miescil sie na telefonie. Robimy z tego
   jeden rzad: kolo obok napisu, stopien pisma skalowany do szerokosci okna. */
.strock-text .text-items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
}
.strock-text .text-items .icon {
    position: static;
    left: auto;
    flex: none;
    width: 96px;
    height: 96px;
    line-height: 96px;
    border-radius: 50%;
}
.strock-text .text-items h2 {
    font-size: clamp(26px, 7vw, 104px);
    line-height: 1.1;
    margin: 0;
    -webkit-text-stroke-color: rgba(0, 25, 72, .30);
}
@media (max-width: 767px) {
    .strock-text .text-items { gap: 16px; }
    .strock-text .text-items .icon { width: 56px; height: 56px; line-height: 56px; }
    .strock-text .text-items .icon i { font-size: 18px; }
}

/* --- Tekst na zlocie zawsze granatowy -----------------------
   Biel na #D9A441 daje kontrast 2,25:1. Granat daje 8,5:1 i jest zgodny
   z reszta przyciskow na stronie. */
.theme-btn.theme-bg-2,
.theme-btn.theme-bg-2 span,
.wfs-gold-btn,
.wfs-gold-btn span { color: var(--wfs-navy); }

/* --- Historie -----------------------------------------------
   Kolumna ze zdjeciem byla waska, a miedzy nia a tekstem zostawala
   szeroka rynna. Strzalki karuzeli byly golymi glifami bez pola klikalnego. */
.testimonial-section .video-thumb.style-2 { max-width: 100%; }
.testimonial-section .video-thumb.style-2 img {
    width: 100%;
    height: auto;
    max-height: 620px;
    object-fit: cover;
    object-position: 50% 40%;
}
.testimonial-section .array-button {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    margin-top: 26px;
}
.testimonial-section .array-button button,
.testimonial-section .array-button .array-prev,
.testimonial-section .array-button .array-next {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 25, 72, .28);
    border-radius: 50%;
    background: transparent;
    color: var(--wfs-navy);
    transition: background .25s, color .25s, border-color .25s;
}
.testimonial-section .array-button button:hover {
    background: var(--wfs-navy);
    border-color: var(--wfs-navy);
    color: #fff;
}

/* --- Kontakt ------------------------------------------------ */
/* lewa kolumna konczyla sie ~250px wyzej niz formularz */
@media (min-width: 992px) {
    .contact-wrapper-2 .contact-info-area-2 { height: 100%; display: flex; flex-direction: column; }
    .contact-wrapper-2 .wfs-map-note { margin-top: auto; }
}
/* na mobile pierwszy wiersz danych ustawial sie inaczej niz pozostale trzy */
@media (max-width: 575px) {
    .contact-info-items { display: flex; align-items: flex-start; gap: 16px; flex-wrap: nowrap; }
    .contact-info-items .icon { flex: none; }
    .contact-info-items .content { min-width: 0; }
    .contact-info-items .content h3 { overflow-wrap: anywhere; }
    /* naglowek formularza przyklejal sie do bloku danych kontaktowych */
    .contact-wrapper-2 .contact-content { margin-top: 72px; }
}
/* ramki pol byly ledwo widoczne (1,65:1) - podnosimy i ocieplamy */
.contact-wrapper-2 .contact-content .contact-form-items .form-clt input,
.contact-wrapper-2 .contact-content .contact-form-items .form-clt textarea,
.contact-wrapper-2 .contact-content .contact-form-items .form-clt .nice-select {
    border-color: #C6BFAE;
    background-color: #FCFBF8;
}

/* --- Stopka: etykieta adresu w osi pierwszego wiersza -------- */
.footer-widgets-wrapper .contact-info li,
.footer-section .contact-info li { align-items: flex-start; }

/* --- Pasy CTA -----------------------------------------------
   Sekcja byla ponad trzy razy wyzsza niz jej tresc. */
.wfs-cta-dark, .wfs-cta-tags { padding: 96px 0; }
@media (max-width: 991px) { .wfs-cta-dark, .wfs-cta-tags { padding: 72px 0; } }

/* --- Partnerzy: akapit dotykal pasa logotypow ---------------- */
.brand-section .brand-wrapper,
.brand-section .brand-slider { margin-top: 44px; }

/* --- Wdowy na koncu akapitu --------------------------------- */
p, .section-title h2, .hero-2 .hero-content h1 { text-wrap: pretty; }

/* --- Mobilny pasek dolny nie moze stykac sie z trescia ------- */
@media (max-width: 991px) {
    body:has(.wfs-bottombar.is-open) .footer-section { padding-bottom: 86px; }
    .wfs-bottombar { box-shadow: 0 -8px 24px rgba(0, 25, 72, .18); }
}

/* --- Kropki slidera: korekta -------------------------------- */
/* Poprzednia proba (padding na content-box) przegrala z tlem szablonu i
   kropki zamienily sie w granatowe placki 44x44. Tlo malujemy pseudoelementem,
   a sam element zostaje przezroczystym polem dotyku. */
@media (max-width: 991px) {
    .swiper-dot .swiper-pagination-bullet {
        background-color: transparent !important;
        background-clip: border-box;
        position: relative;
    }
    .swiper-dot .swiper-pagination-bullet::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 10px;
        height: 10px;
        margin: -5px 0 0 -5px;
        border-radius: 50%;
        background: var(--wfs-navy);
        opacity: .35;
    }
    .swiper-dot .swiper-pagination-bullet.swiper-pagination-bullet-active::after { opacity: 1; }
}



/* --- Akordeony ----------------------------------------------
   Zamknieta pozycja pokazywala minus (czyli "kliknij, aby zwinac"), ikona
   wypadala pod osia tekstu i wystawala poza linie separatora, a tresc byla
   czarna zamiast granatowa. */
.faq-wrapper .faq-content .accordion-item .accordion-header .accordion-button {
    display: flex;
    align-items: center;
    gap: 20px;
    color: var(--wfs-navy);
}
.faq-wrapper .faq-content .accordion-item .accordion-body,
.faq-wrapper .faq-content .accordion-item .accordion-body p { color: var(--text); }
.faq-wrapper .faq-content .accordion-item .accordion-header .accordion-button::after {
    position: static;
    flex: none;
    margin-left: auto;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none;
    top: auto;
    right: auto;
}

/* --- Wydarzenia: pasek meta --------------------------------- */
/* szary tekst na granacie mial kontrast 2,26:1 */
.wfs-event .post-list li,
.news-box-items .post-list li { color: var(--wfs-gold-light); white-space: nowrap; }
.wfs-event .post-list,
.news-box-items .post-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }

/* --- Liczniki: jednostka przy liczbie ----------------------- */
.funfact-items .content h2 {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
}
.funfact-items .content h2 .count { line-height: 1; }
.funfact-items .content h2 > *:not(.count),
.wfs-unit { font-size: .42em; font-weight: 500; opacity: .8; }

/* --- Pierscien zbiorki: start na godzinie 12 ---------------- */
.single-circle-bar .circle-bar svg,
.circle-progress-bar-wrapper svg { transform: rotate(-90deg); }

/* --- Lista "Na co przeznaczamy": wciecie wiszace ------------- */
.wfs-purpose li,
.pricing-card-items .list-items li,
.wfs-donate-purpose li {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    align-items: start;
}
.wfs-purpose li i,
.pricing-card-items .list-items li i { margin-top: 5px; }

/* --- Jak pomoc: karty ---------------------------------------
   Dwuwierszowy tytul karty rozjezdzal wiersz numeru i CTA w calym rzedzie,
   a laczaca kreska wychodzila poza karte. */
.feature-step-items.style-2 {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
.feature-step-items.style-2 h3 { min-height: 2.4em; }
.feature-step-items.style-2 .wfs-card-foot,
.feature-step-items.style-2 .feature-step-content { margin-top: auto; }
@media (max-width: 767px) {
    .feature-step-items.style-2 .link-btn + .link-btn { margin-top: 14px; }
    .feature-step-items.style-2 .wfs-more { display: flex; }
}

/* --- Miara wiersza w blokach tekstowych --------------------- */
.cta-section .cta-content p,
.business-wrapper .business-content p,
.wfs-section-lead { max-width: 62ch; }
.cta-section .cta-content p { margin-left: 0; }

/* --- Dla mlodziezy: tekst nie moze dotykac linii podzialu ---- */
@media (min-width: 992px) {
    .business-wrapper .business-content { padding-right: 48px; }
}

/* --- Ciepla neutralna zamiast zimnej szarosci --------------- */
.section-bg-2 { background: #F7F5EF; }
.team-section .team-image,
.about-image .wfs-avatar,
.team-box-items { background-color: #F4F1E9; }

/* --- Ozdobniki nie moga wchodzic na litery ------------------- */
@media (max-width: 991px) {
    .business-wrapper .shape-image,
    .service-section .shape-image,
    .about-section-2 .shape,
    .feature-business-section .shape-image { display: none; }
}

/* --- Hero: podwojna kreska ozdobna --------------------------
   main.css:3575 celuje w `.hero-2 .hero-content span`, a ten selektor lapie
   takze <span class="wfs-gold"> w srodku H1. Pseudoelementy nie maja top/left,
   wiec siadaly na pozycji statycznej tego spanu - czyli w polowie nagłówka,
   przecinajac zejscia liter w "rozwijamy". Kreska ma byc jedna, pod H1. */
.hero-2 .hero-content h1 span::before,
.hero-2 .hero-content h1 span::after { content: none; }
.hero-2 .hero-content > span {
    position: relative;
    display: block;
    height: 2px;
    margin: 4px 0 30px;
}
.hero-2 .hero-content > span::before {
    left: 0;
    top: 0;
    width: 240px;
    background: rgba(255, 255, 255, .3);
}
.hero-2 .hero-content > span::after {
    left: 0;
    top: 0;
    width: 96px;
    background: var(--wfs-gold);
}

/* --- Zycie fundacji: tytuly na wspolnej linii ---------------- */
.project-wrapper .project-card-items { align-items: flex-start; }

/* --- Liczniki: jednostka mniejsza od liczby ----------------- */
.funfact-items .content h2 { font-size: 62px; }

/* ============================================================
   25. Runda 3 - domkniecie audytu
   ============================================================ */

/* --- Historie: kolumna ze zdjeciem --------------------------
   Po zdjeciu limitu szerokosci obrazek wyjechal na krawedz okna, a miedzy
   kolumnami zostawalo 540px bieli. Zdjecie wraca do swojej kolumny. */
.testimonial-section .video-thumb.style-2 {
    max-width: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
}
.testimonial-section .video-thumb.style-2 img {
    width: 100%;
    height: 100%;
    min-height: 420px;
    max-height: 560px;
    object-fit: cover;
    object-position: 50% 38%;
}
@media (max-width: 991px) {
    .testimonial-section .video-thumb.style-2 { margin-top: 40px; }
    .testimonial-section .video-thumb.style-2 img { min-height: 280px; max-height: 380px; }
}

/* --- Wydarzenia: pasek meta --------------------------------
   Szary #4A5568 na granacie to 2,26:1. Zloto jasne daje ponad 8:1. */
.news-box-items .news-content .post-list li,
.wfs-event .news-content .post-list li {
    color: var(--wfs-gold-light);
    white-space: nowrap;
}
.news-box-items .news-content .post-list,
.wfs-event .news-content .post-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
}
/* stan pusty ma byc zaprojektowany, a nie kreskowany jak pole do przeciagania */
.news-box-items.wfs-event-empty,
.post-cart.wfs-event-empty { border-style: solid; background: rgba(244, 241, 233, .6); }

/* --- Czego uczymy: hover nie moze wygaszac tytulu ------------
   Zloto #D9A441 na piasku to 1,99:1. Zostaje granat, rusza sie strzalka. */
.service-image-items .service-content h3 a:hover { color: var(--wfs-gold-dark); }
.service-image-items .service-content h3 a i { transition: transform .3s; }
.service-image-items .service-content h3 a:hover i { transform: translateX(6px); }

/* --- Kropki slidera: pierscien aktywnej ----------------------
   Szablon rysuje pierscien pseudoelementem ::before liczonym od kropki
   o innym rozmiarze niz nasz powiekszony obszar dotyku - stad odklejenie. */
@media (max-width: 991px) {
    .service-section .swiper-dot .swiper-pagination-bullet::before,
    .swiper-dot .swiper-pagination-bullet::before {
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        width: 22px;
        height: 22px;
        margin: 0;
        transform: translate(-50%, -50%);
    }
}

/* --- Jak pomoc: odstep od naglowka na mobile ----------------- */
@media (max-width: 991px) {
    .feature-step-section .section-title { margin-bottom: 40px; }
    /* oba odnosniki w karcie na jednej osi */
    .feature-step-items.style-2 .link-btn,
    .feature-step-items.style-2 .wfs-cta-inline { justify-content: flex-start; text-align: left; }
}

/* --- Zycie fundacji: strzalka zawsze na dnie karty ----------- */
.project-wrapper .project-card-items .project-content {
    display: flex;
    flex-direction: column;
    min-height: 260px;
}
.project-wrapper .project-card-items .project-content .icon { margin-top: auto; padding-top: 18px; }
@media (max-width: 991px) {
    .project-wrapper .project-card-items .project-content { min-height: 0; }
    .project-wrapper .project-card-items .project-content .icon { padding-top: 14px; }
}

/* --- Liczniki: jednostka nie moze podbijac wiersza ----------- */
.funfact-items .content h2 .wfs-unit {
    font-size: .4em;
    font-weight: 500;
    line-height: 1;
    opacity: .85;
    align-self: baseline;
}

/* --- Kontakt: hero drugiej kolumny na mobile ----------------- */
@media (min-width: 992px) {
    .contact-wrapper-2 > .row { align-items: stretch; }
}

/* --- Kontrasty ponizej progu AA -----------------------------
   nadtytuly sekcji, link do polityki i obrys przerywnika. */
.section-title span,
.sub-title span { color: #8C6015; font-size: 14px; font-weight: 600; }
.header-bg .section-title span,
.project-section .section-title span,
.funfact-section .section-title span,
.cta-section .section-title span { color: var(--wfs-gold-light); }
.wfs-check a { color: #8A5E12; }
.strock-text .text-items h2 { -webkit-text-stroke: 2px rgba(0, 25, 72, .38); }

/* --- Akordeon: lista domknieta od gory ---------------------- */
.faq-wrapper .faq-content .accordion-item:first-child { border-top: 1px solid var(--border); }

/* --- Hero: drugi przycisk zostaje wariantem outline ---------- */
@media (max-width: 991px) {
    .wfs-hero-btns .wfs-btn-ghost {
        background-color: transparent;
        border: 1px solid rgba(255, 255, 255, .55);
        color: #fff;
    }
}

/* --- Menu desktopowe znika od razu, nie po starcie JS ---------
   Ponizej 1200px nawigacje przejmuje offcanvas spod hamburgera, ale liste
   menu desktopowego chowal dopiero meanmenu po inicjalizacji jQuery. Do tego
   czasu naglowek mial 365px zamiast 74px, a po podmianie cala strona
   podskakiwala o 291px (CLS 0.33). Chowamy ja arkuszem, czyli od pierwszej
   klatki - meanmenu i tak klonuje markup, nie jego stan wyswietlania. */
@media (max-width: 1199px) {
    .header-2 .header-main .main-menu > ul,
    .header-main .main-menu > nav > ul { display: none; }
}


/* --- WebP z zapasem ------------------------------------------
   Kazdy <img> jest zawiniety w <picture> z wariantem WebP. Element picture
   ma byc przezroczysty dla ukladu, zeby <img> pozostal bezposrednim dzieckiem
   swojego kontenera i zadna regula szablonu sie nie rozjechala. */
picture { display: contents; }

/* --- Ostatnie kontrasty ponizej AA --------------------------
   #A9761C na bieli to 3,96:1 przy 14-16px - prog to 4,5:1. */
.wfs-more,
.wfs-more__on,
.wfs-more__off,
.link-btn,
.wfs-cookies a,
.wfs-event__soon { color: #8A5E12; }
.link-btn:hover, .wfs-more:hover { color: #6E4A0E; }

/* --- Kolejnosc naglowkow ------------------------------------
   Szablon uzywal <h5> na naglowki akordeonu i <h6> na nazwiska w cytatach
   oraz wartosci kontaktowe. To nie sa naglowki struktury dokumentu, a po <h2>
   sekcji dawaly przeskok poziomu. Elementy sa teraz neutralne, typografia
   zostaje ta sama co w h6 szablonu (main.css:160 i :260). */
.wfs-h6 {
    font-family: "Cormorant", sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    padding: 0;
    color: var(--header);
    transition: all .4s ease-in-out;
}
.footer-section .wfs-h6,
.footer-section .wfs-h6 a { color: inherit; }
/* odpowiedniki regul szablonu, ktore celowaly w h6 w tych dwoch miejscach */
.footer-widget-wrapper .single-footer-widget .company-info .content .wfs-h6,
.footer-widget-wrapper .single-footer-widget .company-info .content .wfs-h6 a {
    font-family: "Plus Jakarta Sans", sans-serif;
    color: var(--white);
}
.testimonial-wrapper .testimonial-card-items-2 .info-item .info-content .content .wfs-h6 {
    font-weight: 700;
    color: var(--header);
    font-size: 18px;
}

/* ==========================================================================
   26. TLA STEROWANE Z CMS
   ==========================================================================
   Statyk podaje tlo sekcji dwoma deklaracjami tej samej wlasciwosci wprost
   w atrybucie style: najpierw url() jako zapas, zaraz potem image-set()
   z wariantem webp. W CSS to legalne i wlasnie na tym polega rozpoznawanie
   obslugi - przegladarka bez image-set() zatrzymuje sie na pierwszej.
   Obiekt style w Reakcie nie utrzyma dwoch takich samych kluczy, wiec
   komponent podaje obie wartosci jako zmienne, a rozwija je ta regula.
   Efekt dla przegladarki jest identyczny.
   Uzywane w: hero, dwa pasy CTA, tlo siatki "Zycie fundacji". */
.wfs-bg {
    background-image: var(--wfs-bg-zapas);
    background-image: var(--wfs-bg);
}

/* ===========================================================================
   27. CMS - nowe fotografie i korekty ukladu
   ========================================================================== */

/* Szare kola z szablonu ginely na granatowym naglowku. Ikony kontaktowe
   dostaja ten sam zloty jezyk co CTA i pozostale akcenty Fundacji WFS. */
.header-top-wrapper .top-left ul li .icon,
.header-2 .header-right .icon-items .icon {
    border: 1px solid rgba(217, 164, 65, .58);
    background: rgba(217, 164, 65, .16);
    color: var(--wfs-gold-light);
    box-shadow: 0 0 0 4px rgba(217, 164, 65, .06);
}

/* Font szablonu wskazywal rodzine Font Awesome Pro, ktorej strona nie laduje.
   Zamiast brakujacego glifu pojawial sie pusty kwadrat. Zwykle znaki + i -
   sa niezalezne od fontu ikon i pozostaja czytelne na kazdym urzadzeniu. */
.faq-wrapper .faq-content .accordion-item .accordion-header .accordion-button::after {
    content: "-";
    width: 38px;
    height: 38px;
    border: 1px solid rgba(217, 164, 65, .58);
    border-radius: 50%;
    background: rgba(217, 164, 65, .14) !important;
    background-image: none !important;
    color: #8A5E12;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
}
.faq-wrapper .faq-content .accordion-item .accordion-header .accordion-button.collapsed::after {
    content: "+";
}

/* O fundacji: pionowy kadr ma wysokosc zblizona do calej kolumny tresci.
   Usuwamy tez szablonowe 160 px przesuniecia, przez ktore obie kolumny
   zaczynaly sie na innych poziomach. */
.about-wrapper-2 > .row { align-items: center; }
.about-wrapper-2 .about-content { margin-top: 0; }
.about-wrapper-2 .about-thumb {
    aspect-ratio: 4 / 5;
    overflow: hidden;
}
.about-wrapper-2 .about-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

/* Pasy CTA mialy jednoczesnie padding sekcji i 320 px paddingu odziedziczonego
   po .cta-content. Zostaje jeden kontrolowany odstep, a gradient pokazuje
   fotografie po prawej bez utraty kontrastu tekstu po lewej. */
.wfs-cta-dark,
.wfs-cta-tags {
    padding: 0;
    background-position: center center;
}
.wfs-cta-dark .cta-content,
.wfs-cta-tags .cta-content { padding: 96px 0; }
.wfs-cta-dark::before,
.wfs-cta-tags::before {
    background: linear-gradient(90deg, rgba(0, 18, 51, .94) 0%, rgba(0, 18, 51, .82) 48%, rgba(0, 18, 51, .48) 100%);
}
@media (max-width: 991px) {
    .wfs-cta-dark .cta-content,
    .wfs-cta-tags .cta-content { padding: 72px 0; }
}

/* Historie: szablon wypychal prawa kolumne poza kontener przez margin-right:
   -100%. Kadr wraca do siatki i dostaje stabilne proporcje nowego portretu. */
.testimonial-section .video-thumb.style-2 {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    aspect-ratio: 4 / 5;
}
.testimonial-section .video-thumb.style-2 img {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    object-fit: cover;
    object-position: 50% 45%;
}
@media (max-width: 991px) {
    .testimonial-section .video-thumb.style-2 {
        max-width: 560px;
        margin: 40px auto 0;
    }
}