/* ==========================================================================
   sbib.pl — dodatki do przeszczepu
   Wszystko, czego nie ma na stronie wzorcowej: pasek „100% zysku", sekcja
   fundacyjna oraz łatki na elementy, które we wzorcu obsługiwał JavaScript.
   Kolory i kroje: te same tokeny co reszta strony.
   ========================================================================== */

:root {
  --sbib-granat: #1C0054;
  --sbib-cyan: #009EE2;
  --sbib-zolty: #FFE500;
  --sbib-display: 'Sensei', 'Baloo 2', Helvetica, Arial, sans-serif;
  --sbib-text: 'Baloo 2', Helvetica, Arial, sans-serif;
}

/* ta sama szerokosc tresci co sekcje przeszczepione ze wzorca (1200 px) */
.sbib-wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }

/* --- pasek „100% zysku" --------------------------------------------------- */
.sbib-pasek {
  background: var(--sbib-zolty);
  color: var(--sbib-granat);
  text-align: center;
  padding-block: clamp(20px, 3vw, 28px);
}
.sbib-pasek p {
  margin: 0;
  font-family: var(--sbib-display);
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  line-height: 1.3;
}

/* --- sekcja fundacyjna ---------------------------------------------------- */
.sbib-fundacja {
  background: var(--sbib-granat);
  color: #fff;
  padding-block: clamp(48px, 8vw, 96px);
  font-family: var(--sbib-text);
}
.sbib-fundacja h2 {
  font-family: var(--sbib-display);
  font-weight: 400;
  line-height: 1.2;
  color: var(--sbib-zolty);
  font-size: clamp(2rem, 5vw, 2.6rem);
  text-align: center;
  margin: 0 0 .5em;
}
.sbib-lead {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.15rem;
  line-height: 1.6;
}
.sbib-filary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(20px, 3vw, 32px);
  margin: clamp(28px, 4vw, 48px) 0 0;
  padding: 0;
  list-style: none;
}
.sbib-filary li { border-left: 4px solid var(--sbib-zolty); padding-left: 18px; }
.sbib-filary h3 {
  font-family: var(--sbib-display);
  font-weight: 400;
  line-height: 1.2;
  color: var(--sbib-zolty);
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  margin: 0 0 .3em;
}
.sbib-filary p { margin: 0; line-height: 1.6; }

/* --- łatki po JavaScripcie ------------------------------------------------ */
/* karuzele cytatów mają po jednym slajdzie — pokazujemy go statycznie */
.elementor-testimonial-carousel .swiper-wrapper,
.elementor-main-swiper .swiper-wrapper {
  transform: none !important;
  display: block;
}
.elementor-testimonial-carousel .swiper-slide { width: 100% !important; }

/* menu mobilne wzorca otwierał skrypt Elementora; tu jest zwykłe, zawijane */
@media (max-width: 1024px) {
  .elementor-widget-nav-menu .elementor-menu-toggle { display: none !important; }
  .elementor-widget-nav-menu .elementor-nav-menu--dropdown { display: none !important; }
  .elementor-widget-nav-menu .elementor-nav-menu--main {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
  }
  .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item {
    padding-inline: 12px;
  }
}

/* widoczny focus — wzorzec go gubi, a to strona z formularzem */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #FF7171;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- tymczasowy znak Fundacji (do czasu dostarczenia logo) ---------------- */
.elementor-widget-image a.sbib-logo,
.sbib-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #fff;
  font-family: var(--sbib-display);
  font-size: 1.35rem;
  line-height: 1.1;
}
.sbib-logo:hover { color: var(--sbib-zolty); }
.sbib-logo__znak {
  width: 46px; height: 46px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--sbib-zolty);
  color: var(--sbib-granat);
  display: grid; place-items: center;
  font-size: 1rem;
}

/* --- social w stopce ------------------------------------------------------ */
.sbib-social { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.sbib-social img { width: 40px; height: 40px; display: block; }

/* --- wzorzec rozjeżdża się w poziomie przy 1440 px; u nas nie -------------
   Winowajcą jest dekoracyjne konfetti (element 738fd7db) z efektem parallax,
   które we wzorcu ustawiał JavaScript. Przycinamy je do szerokości okna.     */
html, body { overflow-x: clip; }
.elementor-element-738fd7db { max-width: 100%; }

/* karuzela w hero ma wysokosc liczona przez JS — bez niego dymek byl przycinany */
.elementor-main-swiper.swiper,
.elementor-testimonial-carousel .swiper {
  height: auto !important;
  overflow: visible !important;
}
.elementor-testimonial-carousel .swiper-slide { overflow: visible !important; }



/* --- kolumna „Kontakt" w stopce (skladana od nowa) ------------------------ */
.sbib-kontakt { color: #fff; }
.sbib-kontakt h6 {
  font-family: var(--sbib-display);
  font-weight: 400;
  font-size: 1.4rem;
  color: #fff;
  margin: 0 0 .6em;
}
.sbib-kontakt p { margin: 0 0 1em; line-height: 1.7; }
.elementor-kit-4 .sbib-kontakt a { color: #fff; }
.elementor-kit-4 .sbib-kontakt a:hover { color: var(--sbib-zolty); }

/* --- naglowek w jednym rzedzie -------------------------------------------
   Wzorzec ma pasek z logo i osobny pasek menu pod nim. Nasze menu ma pieć
   pozycji, wiec obie linie mieszcza sie w jednym rzedzie: logo | menu.       */
.elementor-element-e5bd509 > .e-con-inner {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 32px;
}
.elementor-element-e5bd509 { padding-block: 14px !important; }
/* oba widgety maja byc szerokosci swojej tresci — inaczej space-between nie dziala
   i logo (szersze niz pole obrazka we wzorcu) wchodzi na menu */
.elementor-element-e5bd509 > .e-con-inner > .elementor-element {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}
.elementor-element-8baf83e .elementor-widget-container { min-width: max-content; }
.elementor-element-48ec24e ul.elementor-nav-menu { justify-content: flex-end; }

@media (max-width: 1024px) {
  .elementor-element-e5bd509 > .e-con-inner { justify-content: center; }
  /* na waskim ekranie logo i menu ida jedno pod drugim, menu zawija sie w wiersze */
  .elementor-element-e5bd509 > .e-con-inner > .elementor-element {
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  .elementor-element-8baf83e .elementor-widget-container { min-width: 0; }
  /* zwarte menu: wzorzec ma na mobile hamburgera (JS), my pasek — niech bedzie niski.
     Uwaga: widget ma DWA <ul> (glowny + klon dropdownu) — pokazujemy tylko glowny. */
  .elementor-element-e5bd509 { padding-block: 10px !important; }
  .elementor-element-e5bd509 > .e-con-inner { gap: 6px; }
  .elementor-element-48ec24e .elementor-nav-menu--dropdown { display: none !important; }
  .elementor-element-48ec24e .elementor-nav-menu--main ul.elementor-nav-menu {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 6px;
  }
  .elementor-element-48ec24e .elementor-nav-menu--main li { display: contents !important; }
  .elementor-element-48ec24e .elementor-nav-menu--main a.elementor-item {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    font-size: 15px !important;
    padding: 6px 10px !important;
  }
  .sbib-logo { justify-content: center; width: 100%; }
  .sbib-logo img { height: 34px; max-width: 92vw; }
  .elementor-element-48ec24e ul.elementor-nav-menu {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
  }
  .elementor-element-48ec24e .elementor-menu-toggle,
  .elementor-element-48ec24e .elementor-nav-menu--dropdown { display: none !important; }
}

/* --- „darte" krawedzie w naszych sekcjach --------------------------------
   Ten sam ksztalt SVG, ktorego wzorzec uzywa miedzy sekcjami kolorowymi.    */
.sbib-pasek, .sbib-fundacja { position: relative; }
.sbib-ksztalt {
  position: absolute;
  left: 0;
  width: 100%;
  line-height: 0;
  overflow: hidden;
  pointer-events: none;
}
.sbib-ksztalt svg { width: calc(100% + 1.3px); height: 70px; display: block; }
.sbib-ksztalt--gora { top: 0; }
.sbib-ksztalt--dol { bottom: 0; transform: rotate(180deg); }
.sbib-pasek .sbib-ksztalt svg { height: 24px; }
.sbib-pasek { padding-block: clamp(42px, 5vw, 54px); }
.sbib-fundacja { padding-block: clamp(84px, 10vw, 130px); }
@media (max-width: 781px) {
  .sbib-ksztalt svg { height: 31px; }
  .sbib-pasek .sbib-ksztalt svg { height: 14px; }
}

/* logo w dolnym pasku stopki: na mobile bylo przyciete na lewej krawedzi */
@media (max-width: 1024px) {
  .elementor-element-dffe614 .elementor-widget-container { padding-inline: 20px; }
  .elementor-element-dffe614 .sbib-logo { justify-content: center; width: 100%; }
  .elementor-element-dffe614 .sbib-logo img { height: 28px; }
}

/* kotwica menu dla sekcji, ktore maja juz wlasne id */
.sbib-kotwica { display: block; height: 0; scroll-margin-top: 0; }