/* TypeKit ładowany asynchronicznie w functions.php - nie blokuje renderowania */

/* ============================================
   GLOBAL TYPOGRAPHY STYLES
   ============================================ */

/* Set base font size: 1rem = 8px */
html {
  font-size: 8px;
  max-width: 100%;
  overflow-x: hidden;
}

.page-template-templatesteam-php .subpage-hero {
  background-position: top;
}

/* Laptops: 1rem = 7px */
@media (min-width: 1025px) and (max-width: 1380px) {
  html {
    font-size: 7px;
  }
}

/* Duże ekrany (1920px+): 1rem = 9px */
@media (min-width: 1920px) {
  html {
    font-size: 9px;
  }
}

:root {
  --font-family-gibson: "canada-type-gibson", sans-serif;

  /* ============================================
     COLOR PALETTE - MAIN (Primary Color)
     ============================================ */
  --main-100: #FAF5F7;
  --main-150: #EBDCE2;
  --main-200: #DDC2CE;
  --main-250: #CEA7B8;
  --main-300: #C596AA;
  --main-350: #B67C95;
  --main-400: #AC6A87;
  --main-450: #9D5071;
  --main-500: #85244E; /* Main color */
  --main-550: #752045;
  --main-600: #661C3C;
  --main-650: #561833;
  --main-700: #4C162E;
  --main-750: #3C1224;
  --main-800: #300F1D;
  --main-850: #230C16;
  --main-900: #0F070A;

  /* ============================================
     COLOR PALETTE - NEUTRAL (Grayscale)
     ============================================ */
  --neutral-100: #F9F9F9;
  --neutral-150: #F0F0F1;
  --neutral-200: #DEDDDF;
  --neutral-250: #CBCBCC;
  --neutral-300: #BFBFC1;
  --neutral-350: #ADACAF;
  --neutral-400: #98979B;
  --neutral-450: #858589;
  --neutral-500: #67666B; /* Main neutral color */
  --neutral-550: #5B5A5E;
  --neutral-600: #4E4E51;
  --neutral-650: #424144;
  --neutral-700: #3A393C;
  --neutral-750: #29292B;
  --neutral-800: #212122;
  --neutral-850: #101011;
  --neutral-900: #040404;

  /* ============================================
     COMMON COLORS
     ============================================ */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-background: #D5D5D5;
}

/* Base font family */
body {
  font-family: var(--font-family-gibson);
  font-weight: 400;
  font-style: normal;
  margin: 0;
  /* Spójne renderowanie z Figmą – font mniej „gruby” na Mac/Safari */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Zapobiega ostrzeżeniu View Transitions API – img/video/canvas z overflow:visible */
img, video, canvas {
  overflow: clip !important;
  overflow-clip-margin: content-box;
}

/* Text selection */
::selection {
  background-color: var(--main-500);
  color: var(--main-100);
}

::-moz-selection {
  background-color: var(--main-500);
  color: var(--main-100);
}

/* ============================================
   PC TYPOGRAPHY STYLES (Desktop)
   ============================================ */

/* Headline 1 */
.headline-1 {
  font-family: var(--font-family-gibson);
  font-weight: 400; /* Regular */
  font-size: 6.9rem;
  line-height: 105%;
  letter-spacing: -0.01em; /* -1.00% */
  text-transform: none;
}

/* Headline 1 Span */
.headline-1-span {
  font-family: var(--font-family-gibson);
  font-weight: 600; /* SemiBold */
  font-size: 6.9rem;
  line-height: 105%;
  letter-spacing: 0.185em; /* 18.50% */
  text-transform: none;
}

/* Headline 2 */
.headline-2 {
  font-family: var(--font-family-gibson);
  font-weight: 400; /* Regular */
  font-size: 4.4rem;
  line-height: 116%;
  letter-spacing: -0.015em; /* -1.50% */
  text-transform: none;
}

/* Headline 3 */
.headline-3 {
  font-family: var(--font-family-gibson);
  font-weight: 400; /* Regular */
  font-size: 4.4rem;
  line-height: 108%;
  letter-spacing: -0.01em; /* -1.00% */
  text-transform: none;
}

/* Headline 4 */
.headline-4 {
  font-family: var(--font-family-gibson);
  font-weight: 400; /* Regular */
  font-size: 3.5rem;
  line-height: 115%;
  letter-spacing: -0.005em; /* -0.50% */
  text-transform: none;
}

/* Headline 5 */
.headline-5 {
  font-family: var(--font-family-gibson);
  font-weight: 400; /* Regular */
  font-size: 2.8rem;
  line-height: 120%;
  letter-spacing: 0;
  text-transform: none;
}

/* Headline 2 Span */
.headline-2-span {
  font-family: var(--font-family-gibson);
  font-weight: 600; /* SemiBold */
  font-size: 2.3rem;
  line-height: 110%;
  letter-spacing: 0.185em; /* 18.50% */
  text-transform: uppercase;
}

/* Body Extra Large */
.body-extra-large {
  font-family: var(--font-family-gibson);
  font-weight: 400; /* Regular */
  font-size: 2.3rem;
  line-height: 140%;
  letter-spacing: 0;
  text-transform: none;
}

/* Body Extra Large Bold */
.body-extra-large-bold {
  font-family: var(--font-family-gibson);
  font-weight: 600; /* SemiBold */
  font-size: 2.3rem;
  line-height: 140%;
  letter-spacing: 0;
  text-transform: none;
}

/* Body Large */
.body-large {
  font-family: var(--font-family-gibson);
  font-weight: 400; /* Regular */
  font-size: 2rem;
  line-height: 160%;
  letter-spacing: 0;
  text-transform: none;
}

/* Body Large Bold */
.body-large-bold {
  font-family: var(--font-family-gibson);
  font-weight: 600; /* SemiBold */
  font-size: 2rem;
  line-height: 160%;
  letter-spacing: 0;
  text-transform: none;
}

/* Button */
.button-text {
  font-family: var(--font-family-gibson);
  font-weight: 400; /* Regular */
  font-size: 2rem;
  line-height: 100%;
  letter-spacing: 0.08em; /* 8.00% */
  text-transform: uppercase;
}

/* Body */
.body {
  font-family: var(--font-family-gibson);
  font-weight: 400; /* Regular */
  font-size: 1.8rem;
  line-height: 175%;
  letter-spacing: 0;
  text-transform: none;
}

/* ============================================
   EXTRA TYPOGRAPHY STYLES
   ============================================ */

/* Link Large */
.link-large {
  font-family: var(--font-family-gibson);
  font-weight: 400; /* Regular */
  font-size: 2.4rem;
  line-height: 150%;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: underline;
}

/* Menu link */
.menu-link {
  font-family: var(--font-family-gibson);
  font-weight: 400; /* Regular */
  font-size: 2rem;
  line-height: 100%;
  letter-spacing: 0.005em; /* 0.50% */
  text-transform: uppercase;
}

/* Link */
.link {
  font-family: var(--font-family-gibson);
  font-weight: 400; /* Regular */
  font-size: 1.8rem;
  line-height: 150%;
  letter-spacing: 0;
  text-transform: none;
}

/* Body Small */
.body-small {
  font-family: var(--font-family-gibson);
  font-weight: 400; /* Regular */
  font-size: 1.4rem;
  line-height: 140%;
  letter-spacing: 0;
  text-transform: none;
}

/* Body Tiny */
.body-tiny {
  font-family: var(--font-family-gibson);
  font-weight: 400; /* Regular */
  font-size: 1.2rem;
  line-height: 140%;
  letter-spacing: 0.005em; /* 0.50% */
  text-transform: none;
}




/* ============================================
   GLOBAL CONTAINER STYLES
   ============================================ */

.hero-container {
  width: 100%;
  max-width: 144rem;
  margin: 9.4rem auto 0;
  padding: 0 2%;
  display: flex;
  justify-content: center;
}

.header-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 2%;
  margin: 0 auto;
  width: 100%;
  max-width: 144rem;
  height: 6.2rem;
  flex: none;
  order: 0;
  flex-grow: 0;
}

@media (max-width: 1024px) {
  .hero-container {
    padding: 0 1.6rem;
  }

  .header-container {
    padding: 0 1.6rem;
  }
}

/* ============================================
   BUTTON STYLES
   ============================================ */

/* Base button styles */
.btn {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    border-radius: 0.4rem;
    font-family: var(--font-family-gibson);
    font-weight: 400;
    font-style: normal;
    line-height: 100%;
    text-transform: uppercase;
    font-feature-settings: 'kern' off;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: all 0.3s ease;
  }
  
  /* Button Type: Default (Primary) */
  .btn-default {
    background-color: var(--main-500);
    color: var(--main-100);
  }
  
  .btn-default:hover {
    background-color: var(--main-600);
    color: var(--main-100);
  }
  
  /* Button Type: Secondary Main */
  .btn-secondary {
    background-color: transparent;
    border: 1.5px solid var(--main-500);
    color: var(--main-500);
  }
  
  .btn-secondary:hover {
    background-color: var(--main-100);
    border-color: var(--main-600);
    color: var(--main-600);
  }
  
  /* Button Type: White (Secondary White) */
  .btn-white {
    background-color: var(--main-100);
    border: none;
    color: var(--main-500);
  }
  
  .btn-white:hover {
    background-color: var(--main-150);
    color: var(--main-600);
  }
  
  /* Button Type: Tertiary (Load More) */
  .btn-tertiary {
    background-color: transparent;
    color: var(--neutral-700);
    flex-direction: column;
    align-items: center;
    padding-top: 1.6rem;
  }
  
  .btn-tertiary:hover {
    color: var(--neutral-800);
  }
  
  /* Button Size: Small (S) - PC */
  .btn-s {
    padding: 1.6rem 2.4rem;
    font-size: 2rem;
    letter-spacing: 0.08em;
  }
  
  /* Button Size: Large (L) - PC */
  .btn-l {
    padding: 2.4rem 3.2rem;
    font-size: 2rem;
    letter-spacing: 0.08em;
  }
  
  /* Button icon styles */
  .btn-icon {
    width: 2rem;
    height: 2rem;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Tertiary button chevron icon */
  .btn-tertiary .btn-icon {
    width: 2.4rem;
    height: 2.4rem;
    border: 2px solid currentColor;
    border-radius: 50%;
    position: relative;
  }
  
  .btn-tertiary .btn-icon::after {
    content: '';
    position: absolute;
    width: 0.6rem;
    height: 0.6rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    top: 0.4rem;
  }

  .privacy-policy ol, .privacy-policy ul {
    list-style: auto;
}

/* ============================================
   MOBILE TYPOGRAPHY STYLES
   ============================================ */

@media (max-width: 1024px) {
  /* Headline 1 */
  .headline-1 {
    font-size: 3.6rem;
    line-height: 105%;
    letter-spacing: -0.023em; /* -2.30% */
  }

  /* Headline 1 Span */
  .headline-1-span {
    font-size: 3.6rem;
    line-height: 105%;
    letter-spacing: 0.185em; /* 18.50% */
  }

  /* Headline 2 */
  .headline-2 {
    font-size: 3.4rem;
    line-height: 115%;
    letter-spacing: -0.023em; /* -2.30% */
  }

  /* Headline 3 */
  .headline-3 {
    font-size: 2.8rem;
    line-height: 110%;
    letter-spacing: -0.0175em; /* -1.75% */
  }

  /* Headline 4 */
  .headline-4 {
    font-size: 2.4rem;
    line-height: 120%;
    letter-spacing: -0.0125em; /* -1.25% */
  }

  /* Headline 5 */
  .headline-5 {
    font-size: 2.2rem;
    line-height: 120%;
    letter-spacing: -0.005em; /* -0.50% */
  }

  /* Headline 2 Span */
  .headline-2-span {
    font-size: 2rem;
    line-height: 120%;
    letter-spacing: 0.185em; /* 18.50% */
  }

  /* Body Extra Large */
  .body-extra-large {
    font-size: 2rem;
    line-height: 135%;
    letter-spacing: 0;
  }

  /* Body Extra Large Bold */
  .body-extra-large-bold {
    font-size: 2rem;
    line-height: 135%;
    letter-spacing: 0;
  }

  /* Body Large */
  .body-large {
    font-size: 1.8rem;
    line-height: 140%;
    letter-spacing: 0;
  }

  /* Body Large Bold */
  .body-large-bold {
    font-size: 1.8rem;
    line-height: 140%;
    letter-spacing: 0;
  }

  /* Button */
  .button-text {
    font-size: 1.8rem;
    line-height: 100%;
    letter-spacing: 0.06em; /* 6.00% */
  }

  /* Body */
  .body {
    font-size: 1.6rem;
    line-height: 150%;
    letter-spacing: 0;
  }

  /* Link Large */
  .link-large {
    font-size: 2rem;
  }

  /* Menu link */
  .menu-link {
    font-size: 1.8rem;
  }

  /* Link */
  .link {
    font-size: 1.6rem;
  }

  /* Body Small */
  .body-small {
    font-size: 1.2rem;
  }

  /* Body Tiny */
  .body-tiny {
    font-size: 1rem;
  }

  /* Button Size: Large (L) - Mobile */
  .btn-l {
    padding: 2.4rem 3.2rem;
    font-size: 1.8rem;
    letter-spacing: 0.06em;
  }

  /* Button Size: Small (S) - Mobile */
  .btn-s {
    padding: 1.6rem 2.4rem;
    font-size: 1.8rem;
    letter-spacing: 0.06em;
  }
}

/* ============================================
   SCROLL REVEAL – fade-in sekcji przy scrollu
   ============================================ */
#content section.scroll-reveal {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#content section.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   HERO CLIP REVEAL – odsłanianie od góry do dołu
   hero-section, subpage-hero (zawsze na górze)
   ============================================ */
#content section.hero-clip-reveal {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

#content section.hero-clip-reveal.is-visible {
  clip-path: inset(0 0 0 0);
}

/* ============================================
   TYM CZASOWO WYŁĄCZONE – moduły „Zaufali nam” (logotypy)
   Aby włączyć: usuń poniższy blok.
   ============================================ */
.trusted-logos-wrapper,
.offer-how-logos-container {
  display: none !important;
}