/* ==========================================================================
   SP Sticky Header + CTA — style bazowe
   Wartości zależne od ustawień (kolory, rozmiary, z-index) wchodzą przez
   zmienne CSS definiowane inline (wp_add_inline_style). Tam też siedzą
   media queries zależne od konfigurowalnego breakpointu mobile.
   ========================================================================== */

.sps-bar{position:fixed;top:0;left:0;right:0;width:100%;box-sizing:border-box;
  background:var(--sps-bg,rgba(35,41,54,.55));color:var(--sps-color,#cdbfa6);
  -webkit-backdrop-filter:blur(var(--sps-blur,14px)) saturate(140%);
  backdrop-filter:blur(var(--sps-blur,14px)) saturate(140%);
  z-index:var(--sps-z,999999) !important;font-size:var(--sps-fs,16px);
  transform:translate3d(0,-100%,0);
  /* visibility przełącza się skokowo, więc bez opóźnienia ucinała wyjazd paska
     w połowie animacji — stąd 0s Z OPÓŹNIENIEM równym czasowi transformacji */
  transition:transform .32s ease, visibility 0s linear .32s;
  visibility:hidden;pointer-events:none}
.sps-bar,.sps-bar *{box-sizing:border-box}
/* krój pisma ze strony — przyciski nie dziedziczą go same z siebie */
.sps-bar,.sps-bar a,.sps-bar button{font-family:inherit}

/* Bez backdrop-filter (starsze Firefoksy) półprzezroczyste tło robi się nieczytelne
   — wtedy pasek dostaje wersję o wyższym kryciu. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sps-bar{background:var(--sps-bg-solid,rgba(35,41,54,.9))}
}

/* Stan widoczny utrwalony !important — zewnętrzne wtyczki animacji scrollowych
   (opacity/visibility/transform toglowane na elementach body) nie mogą
   schować paska, gdy logika trzyma go włączonego. */
.sps-bar.is-on{transform:translate3d(0,0,0) !important;visibility:visible !important;
  opacity:1 !important;animation:none !important;pointer-events:auto;
  /* wjazd: widoczność od razu, żeby było co animować */
  transition:transform .32s ease, visibility 0s !important}

.sps-bar__inner{height:var(--sps-h,100px);max-width:var(--sps-maxw,1140px);
  margin:0 auto;display:flex;align-items:center;width:100%}
/* linki: jasny krem, hover/aktywny złoty (#cdbfa6) — !important, żeby style
   motywu (Astra/Elementor) nie nadpisywały kolorów w pasku */
.sps-bar a{color:var(--sps-link,#f8f3ec) !important;text-decoration:none;
  background:transparent;transition:color .2s ease}
.sps-bar a:hover:not(.sps-bar__btn),.sps-bar a:active:not(.sps-bar__btn),
.sps-bar a.is-active{color:var(--sps-color,#cdbfa6) !important}
.sps-bar__side{display:flex;align-items:center;gap:26px;flex:1 1 0;min-width:0}
.sps-bar__side--right{justify-content:flex-end}
.sps-bar__logo{flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:0 24px;min-width:0}
.sps-bar__logo img{height:var(--sps-logo-h,80px);width:auto;max-width:100%;display:block;
  filter:var(--sps-logo-filter,none)}
.sps-bar__logo-txt{font-size:calc(var(--sps-fs,16px) + 3px);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;white-space:nowrap}
.sps-bar__phone{display:flex;align-items:center;gap:9px;font-weight:700;white-space:nowrap}
.sps-bar__soc{display:flex;align-items:center;gap:16px;font-size:calc(var(--sps-fs,16px) + 3px)}
.sps-bar__soc a{display:inline-flex;align-items:center}
.sps-bar__soc-ico{width:19px;height:19px;display:block}
.sps-bar__panel-soc a{display:inline-flex;align-items:center}
.sps-bar__panel-soc .sps-bar__soc-ico{width:24px;height:24px}
.sps-bar__nav{display:flex;align-items:center;gap:24px;white-space:nowrap}
.sps-bar__nav a{font-size:var(--sps-fs,16px)}

/* --- układ "logo z lewej" (jak w makiecie) --------------------------------
   Logo i menu przy lewej krawędzi, prawa grupa dosunięta do prawej. */
.sps-bar--left .sps-bar__logo{padding:0;justify-content:flex-start;margin-right:38px}
.sps-bar--left .sps-bar__nav--main{gap:30px;flex:0 1 auto;min-width:0;overflow:hidden}
.sps-bar--left .sps-bar__side--right{flex:0 0 auto;margin-left:auto;gap:22px;padding-left:24px}

/* --- przycisk ------------------------------------------------------------- */
.sps-bar__btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;font-size:var(--sps-fs,15px);font-weight:600 !important;line-height:1.2;
  white-space:nowrap;text-decoration:none;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.sps-bar__btn-ico{width:17px;height:17px;flex:0 0 auto}

/* wypełniony (domyślny) — oliwkowe tło, ciemny tekst */
.sps-bar a.sps-bar__btn--fill{border:1px solid transparent !important;
  border-radius:var(--sps-btn-radius,6px) !important;
  background:var(--sps-btn-bg,#E8F0AE) !important;
  color:var(--sps-btn-color,#232936) !important}
/* wysoka specyficzność, żeby hover linków nie przebił koloru tekstu przycisku */
.sps-bar a.sps-bar__btn--fill:hover{background:var(--sps-btn-hover-bg,#D9E08F) !important;
  color:var(--sps-btn-color,#232936) !important}

/* obrys — układ historyczny (pigułka: obrys złoty, hover = złote tło) */
.sps-bar a.sps-bar__btn--outline{border:1.5px solid var(--sps-color,#cdbfa6) !important;
  border-radius:999px !important;padding:10px 20px;font-size:14px;font-weight:700 !important;
  background:transparent !important;color:var(--sps-link,#f8f3ec) !important}
.sps-bar a.sps-bar__btn--outline:hover{background:var(--sps-color,#cdbfa6) !important;
  border-color:var(--sps-color,#cdbfa6) !important;
  color:var(--sps-btn-color,#0d2145) !important}

/* Hamburger: 44 px pola dotyku, trzy kreski w kolorze akcentu. Motyw ma własne
   style dla <button> — stąd wymuszone tło i obramowanie. */
.sps-bar .sps-bar__burger{display:none;flex:0 0 auto;width:44px;height:44px;
  align-items:center;justify-content:center;flex-direction:column;
  background:none !important;border:0 !important;box-shadow:none !important;
  border-radius:0 !important;cursor:pointer;padding:0 !important;margin:0 !important;
  color:var(--sps-m-burger,#E0751E)}
.sps-bar .sps-bar__burger span{display:block;width:26px;height:2px;background:var(--sps-m-burger,#E0751E);
  margin:3px 0;transition:transform .25s ease,opacity .25s ease}
.sps-bar.is-open .sps-bar__burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.sps-bar.is-open .sps-bar__burger span:nth-child(2){opacity:0}
.sps-bar.is-open .sps-bar__burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* --- mobilny panel: pełnoekranowy overlay ----------------------------------
   Siedzi w .sps-bar (fixed, top:0), więc absolute top:0 + 100dvh kryje cały
   ekran. Nieprzezroczyste tło (--sps-bg-full), wszystko wycentrowane:
   logo, linki, telefon, sociale, przycisk. */
.sps-bar__panel{position:absolute;top:0;left:0;right:0;width:100%;
  height:100vh;height:100dvh;background:var(--sps-bg-full,#0d2145);z-index:2;
  display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s ease}
.sps-bar.is-open .sps-bar__panel{opacity:1;visibility:visible;pointer-events:auto}
.sps-bar .sps-bar__panel-close{position:absolute;top:12px;right:12px;z-index:3;
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  background:none !important;border:0 !important;box-shadow:none !important;
  border-radius:0 !important;padding:0 !important;margin:0 !important;cursor:pointer;
  color:var(--sps-m-burger,#E0751E)}
.sps-bar .sps-bar__panel-close svg{width:28px;height:28px;display:block}
.sps-bar .sps-bar__panel-close:hover{opacity:.75}
.sps-bar__panel-inner{margin:auto;width:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:30px;padding:72px 24px 40px}
.sps-bar__panel-logo{display:block}
.sps-bar__panel-logo img{height:var(--sps-logo-h,80px);width:auto;max-width:70vw;
  display:block;filter:var(--sps-logo-filter,none)}
/* linki: duże, zwykłą grubością, krój ze strony, kolor z ustawień (--sps-m-link) */
.sps-bar__panel-nav{display:flex;flex-direction:column;align-items:center;gap:18px}
.sps-bar .sps-bar__panel-nav a{font-size:calc(var(--sps-fs,16px) + 7px);font-weight:400;line-height:1.2;
  font-family:inherit;color:var(--sps-m-link,#C3C6CC) !important}
.sps-bar .sps-bar__panel-nav a:hover{color:var(--sps-color,#cdbfa6) !important}
/* telefon w panelu w kolorze hamburgera (--sps-m-burger, domyslnie #E0751E) */
.sps-bar .sps-bar__panel .sps-bar__panel-phone{font-size:calc(var(--sps-fs,16px) + 4px);font-weight:400;
  color:var(--sps-m-burger,#E0751E) !important}
.sps-bar .sps-bar__panel-soc a{color:var(--sps-m-link,#C3C6CC) !important}
.sps-bar__panel-soc{display:flex;align-items:center;justify-content:center;gap:30px}
.sps-bar__panel-soc a{display:inline-flex;padding:4px}
.sps-bar__panel-soc .sps-bar__soc-ico{width:26px;height:26px}
/* --- dół panelu: dwie kolumny jak w stopce (Inwestor / Do pobrania) ------
   Wyrównane do lewej, mniejsza czcionka, oddzielone linią od menu. */
/* Mniejsza czcionka i szersza pierwsza kolumna, żeby nazwa spółki i adres
   nie łamały się na dwie linie nawet na 360-390 px. */
.sps-bar__panel-stopka{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px 14px;width:100%;
  max-width:420px;margin-top:6px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
  text-align:left}
.sps-bar__panel-kol{min-width:0}
.sps-bar .sps-bar__panel-kol-tytul{margin:0 0 9px;font-family:inherit;font-size:15px;font-weight:400;
  line-height:1.2;color:var(--sps-link,#f8f3ec)}
.sps-bar__panel-linia{display:block;margin:0 0 5px;font-size:11px;line-height:1.4;font-weight:400;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--sps-m-link,#C3C6CC)}
.sps-bar a.sps-bar__panel-linia{color:var(--sps-m-link,#C3C6CC) !important}
.sps-bar a.sps-bar__panel-linia:hover{color:var(--sps-color,#cdbfa6) !important}
.sps-bar__panel-dl{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.sps-bar__panel-dl span{overflow:hidden;text-overflow:ellipsis}
.sps-bar__panel-dl svg{width:13px;height:13px;flex:0 0 auto;opacity:.75}
@media(max-width:340px){
  .sps-bar__panel-stopka{grid-template-columns:1fr}
}

/* przycisk na dole panelu, szeroki, łatwy do trafienia kciukiem */
.sps-bar .sps-bar__panel-btn{width:100%;max-width:320px;padding:15px 28px;
  font-size:calc(var(--sps-fs,16px) + 1px)}
.sps-bar__panel .sps-bar__btn--outline{color:var(--sps-color,#cdbfa6) !important}
body.sps-noscroll{overflow:hidden}

/* --- sticky CTA (klon widgetu) -------------------------------------------- */
.sps-cta{position:fixed;bottom:var(--sps-cta-y,24px);
  left:var(--sps-cta-left,auto);right:var(--sps-cta-right,auto);
  z-index:var(--sps-cta-z,999998) !important;
  max-width:calc(100vw - (var(--sps-cta-x,24px) * 2));
  transform:translateY(24px);opacity:0;transition:transform .3s ease,opacity .3s ease;pointer-events:none}
.sps-cta.is-on{transform:translateY(0);opacity:1;pointer-events:auto}
.sps-cta > *{position:static!important;width:auto!important;max-width:100%!important;
  margin:0!important;inset:auto!important}

/* --- przejęty przycisk "do góry" motywu (Astra) ---------------------------
   Klasę .sps-guard nadaje nasz JS i od tej pory wyłącznie on steruje
   widocznością (klasą .sps-on). !important neutralizuje inline display
   toglowany przez skrypt motywu oraz ewentualne animacje z zewnątrz. */
#ast-scroll-top.sps-guard{display:none !important;transform:none !important;
  animation:none !important;transition:none !important}
#ast-scroll-top.sps-guard.sps-on{display:block !important;opacity:1 !important;
  visibility:visible !important}

/* --- sekcja końcowa (np. #kontakt) w viewporcie ---------------------------
   Klasę .sps-near-section na body nadaje JS (IntersectionObserver).
   Chowamy tylko sticky CTA; przycisk "do góry" zostaje widoczny. */
body.sps-near-section .sps-cta{opacity:0 !important;transform:translateY(24px) !important;
  pointer-events:none !important}

/* niskie ekrany w poziomie: panel przewija się, treść nie jest już centrowana
   (margin:auto zostawiałby ucięty początek) */
@media(max-height:560px){
  .sps-bar__panel-inner{margin:0 auto;justify-content:flex-start;gap:20px;padding-top:64px}
}