/*
Theme Name: polsteam
Theme URI: https://example.com/
Author: Adam
Author URI: https://example.com/
Description: Lightweight starter theme for Polsteam / PZM, Bootstrap 5, WCAG 2.2
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: polsteam
*/

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&family=Teko:wght@400;600;700&display=swap");

/* GLOBAL */

:root{
  --polsteam-primary:#00357d;
  --polsteam-accent:#dd291b;
  --polsteam-text:#000;
  --polsteam-bg:#fff;
  --polsteam-deep:#001220;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: "Poppins", sans-serif;
  font-weight:400;
  background:var(--polsteam-bg);
  color:var(--polsteam-text);
  font-size: 14px;
  line-height:1.6;
}

p{
  margin:0 0 14px;
  font-size:14px;
  font-weight:300;
  line-height:1.75;
}

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

/* ==================================
   POLSTEAM  HEADINGS (like Services)
   Globalny styl naglwkw w klimacie ps-services
================================== */

h1,h2,h3,h4,h5,h6{
  font-family: "Teko", sans-serif;
  line-height:0.95;
  letter-spacing:.5px;
  text-transform:none;         /* jak w Services (bez forced uppercase) */
  margin:0 0 16px;
  color:inherit;
  font-weight:600;
}

/* Skale fontw (clamp)  spjne z Services */
h1{ font-size:clamp(38px, 4.2vw, 64px); }
h2{ font-size:clamp(30px, 3.4vw, 52px); }
h3{ font-size:clamp(22px, 2.4vw, 36px); }
h4{ font-size:clamp(18px, 2.0vw, 28px); }
h5{ font-size:clamp(16px, 1.7vw, 22px); }
h6{ font-size:clamp(15px, 1.5vw, 20px); }

/* Mocniejsze strong w naglwkach, jak w Services */
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong{
  font-weight:500;
}

/* Lzejsze light (gdy uzyjesz klas z Services tez poza sekcja) */
.ps-services__title-light,
.ps-title-light{
  font-weight:400;
  opacity:.9;
}

/* Mobile: troche ciasniej */
@media (max-width:768px){
  h1,h2,h3,h4,h5,h6{ margin-bottom:14px; }
}

/* HOMEPAGE HERO */

body.page-template-page-homepage .site-main{ padding:0; }

body.page-template-page-homepage .ps-home__content{
  background:var(--polsteam-deep);
  margin-top:-1px;
}

/* ===============================
   HOMEPAGE HERO
================================ */

.ps-hero{
  position:relative;
  min-height:100vh;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  isolation:isolate;
  overflow:hidden;
  --ps-scroll:0;
}

/* ===== LAYERS ===== */

.ps-hero__tint,
.ps-hero__overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.ps-hero__tint{
  background:var(--polsteam-deep);
  opacity:var(--ps-scroll);
  z-index:0;
}

.ps-hero__overlay{
  z-index:1;
  opacity:calc(1 - var(--ps-scroll));
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.25) 0%,
    rgba(0,0,0,.12) 55%,
    rgba(0,0,0,0) 100%
  );
}

.ps-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:120px;
  background:linear-gradient(
    to bottom,
    rgba(0,18,32,0) 0%,
    rgba(0,18,32,.45) 35%,
    rgba(0,18,32,.85) 70%,
    rgba(0,18,32,1) 100%
  );
  z-index:2;
  pointer-events:none;
}

/* ===== CONTENT ===== */

.ps-hero__container{
  position:relative;
  z-index:3;
  min-height:100vh;
  max-width:1200px;
  margin:0 auto;
  padding:18vh 20px 0;
  display:flex;
  align-items:flex-start;
}

.ps-hero__content{
  max-width:640px;
  color:#fff;
  opacity:calc(1 - (var(--ps-scroll) * .9));
}

/* ===== SAFE SEQUENTIAL FADE-IN ===== */
/* Bez JS wszystko jest WIDOCZNE. Dopiero gdy JS doda .js-ready  zaczynamy fade-in. */

.ps-hero__anim{
  --ps-final-opacity:1;
  opacity:var(--ps-final-opacity);
  transition:opacity 900ms ease;
  will-change:opacity;
}

/* startowo ukryj tylko gdy JS dziala */
.ps-hero.js-ready .ps-hero__anim{
  opacity:0;
}

/* pokaz po dodaniu .is-visible (z delay z JS) */
.ps-hero.js-ready.is-visible .ps-hero__anim{
  opacity:var(--ps-final-opacity);
}

/* ===== TYPO ===== */

.ps-hero__title{
  font-size:clamp(56px,6vw,92px);
  line-height:.95;
  color:#fff;
  --ps-final-opacity:1;
}

.ps-hero__subtitle{
  font-family: "Poppins", sans-serif;
  font-size:clamp(16px,1.6vw,22px);
--ps-final-opacity:.95;
}

.ps-hero__text{
  font-family: "Poppins", sans-serif;
  font-size:14px;
  max-width:520px;
  --ps-final-opacity:.90;
}

/* ===== CTA BUTTON ===== */

.button-light{
  position:relative;              /* WAZNE: przed pseudo-elementami */
  z-index:10;

  display:inline-flex;
  align-items:center;
  gap:10px;

  font-family: "Poppins", sans-serif;
  font-size:14px;
  font-weight:500;

  color:#fff;
  text-decoration:none;

  min-height:44px;
  padding:10px 18px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.85);

  background-color:rgba(255,255,255,.10);
  backdrop-filter:blur(2px);

  transform:translateZ(0);
  will-change:transform;

  transition:
    transform 240ms ease,
    border-color 140ms ease-out,
    box-shadow 240ms ease;
}

.button-light::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background:var(--polsteam-accent);
  opacity:0;
  transition:opacity 140ms ease-out;
  z-index:-1;
}

.button-light::after{
  content:"\2192"; /* UTF-safe */
  transition:transform 240ms ease;
}

.button-light:hover{
  border-color:var(--polsteam-accent);
  transform:translateY(-1px) translateZ(0);
}

.button-light:hover::before{ opacity:1; }
.button-light:hover::after{ transform:translateX(6px); }

.button-light:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(221,41,27,.35);
}

.button-light:hover,
.button-light:focus-visible{
  animation:psPulse 1.2s ease-out infinite;
}

@keyframes psPulse{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,.22); }
  70%{ box-shadow:0 0 0 10px rgba(255,255,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
}

/* ===== RESPONSIVE ===== */

@media (max-width:768px){
  .ps-hero__container{ padding:12vh 16px 0; }
  .ps-hero__title{ font-size:clamp(44px,10vw,64px); }
}

/* ===== REDUCED MOTION ===== */

@media (prefers-reduced-motion:reduce){
  *{ transition:none!important; animation:none!important; }
}

/* ==================================
   POLSTEAM  HISTORIA
   FINAL / STABLE / CONTENT SAFE
================================== */

.ps-historia{
  --ps-hist-vis: 0;      /* 0..1  widocznosc panelu */
  --ps-hist-wash: 0;     /* 0..1  fade do bieli przy wyjezdzie */
  --ps-hist-par: 0px;    /* parallax offset */

  position:relative;
  overflow:hidden;

  padding:140px 40px;
  min-height:clamp(520px, 56vw, 760px);

  background:#fff;
}

/* ==================================================
   WARSTWA TLA  PRAWDZIWY PARALLAX
================================================== */
.ps-historia::before{
  content:"";
  position:absolute;
  inset:-10%;
  z-index:0;

  background-image:url("./img/soudek.jpg");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center calc(50% + var(--ps-hist-par));

  transform:translateZ(0);
  will-change:background-position;
}

/* ==================================================
   GRNY SOFT FADE (STATYCZNY)
================================================== */
.ps-historia::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:linear-gradient(
    to bottom,
    #ffffff 0%,
    rgba(255,255,255,.85) 22%,
    rgba(255,255,255,.40) 48%,
    rgba(255,255,255,0) 72%
  );
}

/* ==================================================
   DOLNY SOFT FADE (DYNAMICZNY)
================================================== */
.ps-historia__fade-bottom{
  position:absolute;
  left:0;
  right:0;
  bottom:0;

  height:240px;
  z-index:2;
  pointer-events:none;

  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.45) 55%,
    #ffffff 100%
  );

  opacity:var(--ps-hist-wash);
  transition:opacity .25s ease;
}

/* ==================================================
   HEADER  KONTENER SYSTEMOWY
================================================== */
.ps-historia__header{
  position:relative;
  z-index:3;             /* TRESC NAJWYZEJ */
  max-width:1400px;
  margin:0 auto;
}

/* ==================================================
   PANEL TRESCI  DELIKATNY KONTRAST
================================================== */
.ps-historia__panel{
  max-width:920px;
  width:100%;
  padding:36px 26px;
  border-radius:18px;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.90),
      rgba(255,255,255,.70)
    );

  backdrop-filter:blur(4px);

  /* ZAWSZE PELNA WIDOCZNOSC */
  opacity:1;

  /* tylko subtelny ruch */
  transform:translateY(calc((1 - var(--ps-hist-vis)) * 12px));
  transition:transform .45s ease;
}



/* ==================================================
   KICKER
================================================== */

.ps-historia__kicker {
    margin: 0 0 12px;
    font-family: "Teko", sans-serif;
    font-size: 27px;
    font-weight: 200;
    letter-spacing: .3px;
    line-height: 1.35;
    color: #00357d;
}


/* ==================================================
   TITLE
================================================== */
.ps-historia__title{
  margin:0 0 14px;

  font-family: "Teko", sans-serif;
  font-size:clamp(48px, 6vw, 92px);
  line-height:.95;
  letter-spacing:.5px;

  color:#0f141a;
}

/* ==================================================
   TEXT
================================================== */
.ps-historia__text{
  margin:0 0 26px;
  max-width:780px;

  font-family: "Poppins", sans-serif;
  font-size:16px;
  line-height:1.8;
  font-weight:300;

  color:rgba(31,42,51,.82);
}

/* ==================================================
   BUTTON  W PELNI DZIALAJACY
================================================== */
.ps-historia .button-dark{
  display:inline-flex;
  align-items:center;
  gap:10px;

  font-family: "Poppins", sans-serif;
  font-size:14px;
  font-weight:600;

  color:#00357d !important;
  text-decoration:none !important;

  min-height:44px;
  padding:10px 18px;
  border-radius:999px;

  border:2px solid #00357d !important;
  background:transparent !important;

  transition:
    transform 240ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease,
    box-shadow 240ms ease;
}

.ps-historia .button-dark::after{
  content:"\2192";
  transition:transform 240ms ease;
}

.ps-historia .button-dark:hover{
  background-color:#00357d !important;
  border-color:#00357d !important;
  color:#fff !important;
  transform:translateY(-1px);
}

.ps-historia .button-dark:hover::after{
  transform:translateX(6px);
}

.ps-historia .button-dark:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(0,53,125,.28);
}

/* ==================================================
   MOBILE
================================================== */
@media (max-width:768px){
  .ps-historia{
    padding:110px 18px;
  }

  .ps-historia__panel{
    padding:28px 18px;
  }
}

/* ==================================================
   WCAG  REDUCED MOTION
================================================== */
@media (prefers-reduced-motion: reduce){
  .ps-historia::before{
    background-position:center center !important;
  }

  .ps-historia__panel{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }

  .ps-historia__fade-bottom{
    opacity:0 !important;
    transition:none !important;
  }
}


/* BUTTON DARK  GLOBAL (do uzycia wszedzie) */
.button-dark{
  display:inline-flex;
  align-items:center;
  gap:10px;

  font-family: "Poppins", sans-serif;
  font-size:14px;
  font-weight:600;

  color:#00357d !important;
  text-decoration:none !important;

  min-height:44px;
  padding:10px 18px;
  border-radius:999px;

  border:2px solid #00357d !important;
  background:transparent !important;

  transition:
    transform 240ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease,
    box-shadow 240ms ease;
}

.button-dark::after{
  content:"\2192";
  transition:transform 240ms ease;
}

.button-dark:hover{
  background-color:#00357d !important;
  border-color:#00357d !important;
  color:#fff !important;
  transform:translateY(-1px);
}

.button-dark:hover::after{
  transform:translateX(6px);
}

.button-dark:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(0,53,125,.28);
}


/* =========================================================
   CLEAN FULL PAGE TEMPLATE
   - content starts at top (under fixed header)
   - header stays white even when sticky
========================================================= */

body.ps-clean-full .site-main{
  padding-top:0 !important;
  margin-top:0 !important;
}

/* header: zawsze biale elementy i brak bialego tla na sticky */
body.ps-clean-full .ps-header__bar{
  background:transparent !important;
  color:#fff !important;
  box-shadow:none !important;
}

body.ps-clean-full .ps-header.is-sticky .ps-header__bar{
  background:transparent !important;
  color:#fff !important;
  box-shadow:none !important;
}

/* jesli submenu z simple header ma swoje style gdzies indziej */
body.ps-clean-full .ps-simple-subnav__link{
  color:rgba(255,255,255,.92) !important;
}
body.ps-clean-full .ps-simple-subnav__link:hover,
body.ps-clean-full .ps-simple-subnav__link:focus-visible{
  color:#fff !important;
  text-decoration:underline;
}

/* hamburger zawsze bialy */
body.ps-clean-full .ps-burger{ color:#fff !important; }


/* ======================================
   FIX: MCH sticky subnav hover (tło białe, tekst ma zostać czarny + underline)
   Powód: globalny styl body.ps-clean-full wybiela linki subnav na hover.
   Scope: tylko MCH (body.ps-header-clean-mch)
   ====================================== */
body.ps-header-clean-mch .ps-header.is-sticky .ps-simple-subnav__link{
  color: rgba(17,17,17,.92) !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}
body.ps-header-clean-mch .ps-header.is-sticky .ps-simple-subnav__link:hover,
body.ps-header-clean-mch .ps-header.is-sticky .ps-simple-subnav__link:focus-visible{
  color: #111 !important;
  border-bottom-color: currentColor !important;
  text-decoration: none !important;
}


/* ======================================
   PS MCH – QUOTE
   ====================================== */

.ps-mch-quote {
  max-width: 980px;
  margin: 4rem auto;
  padding: 2.5rem 3rem;
  position: relative;

  font-family: 'Playfair Display', 'Cormorant Garamond', 'Georgia', serif;
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.5;
  color: #535353;
}

/* delikatny znak cytatu */
.ps-mch-quote::before {
  content: "“";
  position: absolute;
  top: -1.5rem;
  left: -1rem;

  font-size: 6rem;
  line-height: 1;
  font-family: inherit;
  color: rgba(0, 0, 0, 0.08);
  pointer-events: none;
}

/* lead – najmocniejsza część cytatu */
.ps-mch-quote__lead {
  display: block;
  margin-bottom: 1.2rem;

  font-size: clamp(1.9rem, 3.5vw, 2.1rem);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* mobile */
@media (max-width: 768px) {
  .ps-mch-quote {
    padding: 2rem 1.5rem;
  }

  .ps-mch-quote::before {
    font-size: 4.5rem;
    top: -1rem;
    left: -.5rem;
  }
}


/* ======================================
   POLSTEAM – LISTY (ładne punktatory)
   - małe strzałki w prawo (brand blue)
   - odstępy między punktami
   - font-weight 300
   - hover: delikatny ruch w prawo
====================================== */

/* bazowo tylko w treści (bez menu/nav) */
.site-main ul,
.site-main ol{
  margin: 0 0 14px;
  padding-left: 0;
}

/* UL ze strzałkami */
.site-main ul{
  list-style: none;
}

/* element listy */
.site-main ul li{
  position: relative;
  padding-left: 18px;
  margin: 0 0 10px;          /* przestrzeń między punktami */
  font-weight: 300;
  line-height: 1.75;
}

/* strzałka jako punktator */
.site-main ul li::before{
  content: "\2192";          /* → */
  position: absolute;
  left: 0;
  top: 0.3em;

  font-size: 12px;
  line-height: 1;

  color: var(--polsteam-primary);
  opacity: .95;
}

/* hover: delikatnie w prawo, ale płynnie */
.site-main ul li{
  transition: transform 180ms ease;
  will-change: transform;
}

.site-main ul li:hover{
  transform: translateX(4px);
}

/* OL zostawiamy numerowane, ale też „lżejsze” */
.site-main ol{
  padding-left: 18px;
}

.site-main ol li{
  margin: 0 0 10px;
  font-weight: 300;
  line-height: 1.75;
}

/* bezpieczeństwo: nie dotykaj list w nawigacji i stopce jeśli tam też są w .site-main */
.ps-header ul,
.ps-header ol,
.site-footer ul,
.site-footer ol,
nav ul,
nav ol{
  list-style: revert;
  padding-left: revert;
}

.ps-header ul li,
.ps-header ol li,
.site-footer ul li,
.site-footer ol li,
nav ul li,
nav ol li{
  padding-left: revert;
  margin: revert;
  font-weight: revert;
  transform: none !important;
  transition: none !important;
}

.ps-header ul li::before,
.ps-header ol li::before,
.site-footer ul li::before,
.site-footer ol li::before,
nav ul li::before,
nav ol li::before{
  content: none !important;
}


/* =========================================================
   WPBAKERY: mobile gutters (tło full-bleed, treść z zapasem)
   ========================================================= */
:root{ --ps-gutter: clamp(18px, 5vw, 30px); --ps-gutter-l: calc(var(--ps-gutter) * 1.2); --ps-gutter-r: calc(var(--ps-gutter) * 1.35); }

/* Padding dajemy na "inner" kolumn, a nie na cały row (żeby tło dochodziło do krawędzi) */
.entry-content .vc_column_container > .vc_column-inner,
.site-main .vc_column_container > .vc_column-inner{
  padding-left: var(--ps-gutter-l) !important;
  padding-right: var(--ps-gutter-r) !important;
}

/* full-width rows w WPBakery mają czasem dodatkowe wrappery */
[data-vc-full-width="true"] > .vc_column_container > .vc_column-inner{
  padding-left: var(--ps-gutter-l) !important;
  padding-right: var(--ps-gutter-r) !important;
}

@media (max-width: 991px){
  /* WPBakery potrafi wyjechać przez ujemne marginesy */
  .entry-content .vc_row,
  .entry-content .wpb_row,
  .entry-content .vc_row-fluid{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* Full-bleed sekcje w VC: tło do krawędzi na desktop (bez wpływu na inne treści) */
@media (min-width: 992px){
  .entry-content .vc_column_container > .vc_column-inner > .wpb_wrapper > .ps-mch-hero,
  .entry-content .vc_column_container > .vc_column-inner > .wpb_wrapper > .ps-career-split,
  .entry-content .vc_column_container > .vc_column-inner > .wpb_wrapper > .ps-sea-hero{
    margin-left: calc(var(--ps-gutter-l) * -1);
    margin-right: calc(var(--ps-gutter-r) * -1);
    width: calc(100% + var(--ps-gutter-l) + var(--ps-gutter-r));
  }
}

/* Ten sam cel, ale bez 100vw (to potrafi „dodać” drugi raz padding w VC)
   i wywołać przesunięcia/luźne marginesy na podstronach.
   Trzymamy się tych samych gutterów co w .vc_column-inner. */
.entry-content .ps-mch-hero,
.entry-content .ps-sea-hero,
.entry-content .ps-career-split{
  width: calc(100% + var(--ps-gutter-l) + var(--ps-gutter-r));
  max-width: none;
  margin-left: calc(var(--ps-gutter-l) * -1);
  margin-right: calc(var(--ps-gutter-r) * -1);
}

/* Nie pozwól, żeby VC dokładał boczny padding w samym tle sekcji */
.entry-content .ps-mch-hero,
.entry-content .ps-sea-hero{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* PS PARTNERS – mobile: jedna karta na wiersz */
.ps-partners__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 640px){
  .ps-partners__grid{
    grid-template-columns: 1fr;
  }
}


/* =========================
   PS 404
   ========================= */

.ps-404{
  min-height: 70vh;
  display: flex;
  align-items: center;
}

.ps-404__wrap{
  width: 100%;
  padding: clamp(60px, 8vw, 120px) 20px;
}

.ps-404__content{
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.ps-404__code{
  display: block;
  font-size: clamp(72px, 12vw, 140px);
  font-weight: 700;
  color: var(--polsteam-primary, #00357d);
  line-height: 1;
  margin-bottom: 12px;
}

.ps-404__title{
  font-size: clamp(26px, 4vw, 38px);
  margin-bottom: 16px;
}

.ps-404__text{
  font-size: 18px;
  color: rgba(0,0,0,.7);
  margin-bottom: 32px;
}

.ps-404__actions{
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}