/*
Theme Name:   KW Theme
Theme URI:    https://katarzynawalczewska.pl
Description:  Child theme for Katarzyna Walczewska — oparty o Hello Elementor
Author:       Sadurski.pl
Author URI:   https://sadurski.pl
Template:     hello-elementor
Version:      1.0.0
Text Domain:  kw-theme
*/

/* ========================================
   GLOBALNE ZMIENNE CSS
   ======================================== */

:root {
  /* --- Kolory --- */
  --kw-green-dark:    #1a3329;
  --kw-green-mid:     #264d3a;
  --kw-green-light:   #345c47;
  --kw-gold:          #c8a96e;
  --kw-gold-hover:    #b8944f;
  --kw-cream:         #f7f3ed;
  --kw-cream-dark:    #ede7dc;
  --kw-white:         #ffffff;
  --kw-text:          #1a1a1a;
  --kw-text-muted:    #6b6b6b;
  --kw-text-light:    #9a9a9a;

  /* --- Typografia --- */
  --kw-font-heading:  'Playfair Display', Georgia, serif;
  --kw-font-body:     'Inter', 'Helvetica Neue', sans-serif;

  /* --- Rozmiary fontów --- */
  --kw-fs-xs:    0.75rem;   /* 12px */
  --kw-fs-sm:    0.875rem;  /* 14px */
  --kw-fs-base:  1rem;      /* 16px */
  --kw-fs-md:    1.125rem;  /* 18px */
  --kw-fs-lg:    1.25rem;   /* 20px */
  --kw-fs-xl:    1.5rem;    /* 24px */
  --kw-fs-2xl:   2rem;      /* 32px */
  --kw-fs-3xl:   2.5rem;    /* 40px */
  --kw-fs-4xl:   3.5rem;    /* 56px */

  /* --- Spacing --- */
  --kw-space-xs:   8px;
  --kw-space-sm:   16px;
  --kw-space-md:   24px;
  --kw-space-lg:   40px;
  --kw-space-xl:   64px;
  --kw-space-2xl:  96px;
  --kw-space-3xl:  128px;

  /* --- Sekcje --- */
  --kw-section-pad-y:  80px;
  --kw-container-max:  1200px;

  /* --- Inne --- */
  --kw-radius-sm:  2px;
  --kw-radius:     4px;
  --kw-radius-lg:  8px;
  --kw-transition: 0.25s ease;
  --kw-shadow:     0 4px 24px rgba(26, 51, 41, 0.12);
  --kw-shadow-lg:  0 8px 48px rgba(26, 51, 41, 0.18);
}

/* ========================================
   RESET / BAZA
   ======================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--kw-font-body);
  font-size: var(--kw-fs-base);
  color: var(--kw-text);
  background-color: var(--kw-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--kw-font-heading);
  line-height: 1.2;
  font-weight: 700;
  color: var(--kw-text);
}

a {
  color: var(--kw-gold);
  text-decoration: none;
  transition: color var(--kw-transition);
}

a:hover {
  color: var(--kw-gold-hover);
}

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

/* ========================================
   ELEMENTY NAWIGACJI
   ======================================== */

.kw-header {
  background-color: var(--kw-green-dark);
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Elementor Header — nadpisanie kolorów */
.kw-header .elementor-nav-menu a,
.kw-header .elementor-nav-menu .elementor-item {
  color: var(--kw-white) !important;
  font-family: var(--kw-font-body);
  font-size: var(--kw-fs-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color var(--kw-transition);
}

.kw-header .elementor-nav-menu a:hover,
.kw-header .elementor-nav-menu .elementor-item:hover {
  color: var(--kw-gold) !important;
}

/* ========================================
   PRZYCISKI
   ======================================== */

/* Złoty przycisk główny */
.kw-btn,
.elementor-button.kw-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--kw-gold);
  color: var(--kw-green-dark) !important;
  font-family: var(--kw-font-body);
  font-size: var(--kw-fs-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: var(--kw-radius);
  border: 2px solid var(--kw-gold);
  cursor: pointer;
  transition: background-color var(--kw-transition), border-color var(--kw-transition);
}

.kw-btn:hover,
.elementor-button.kw-btn-primary:hover {
  background-color: var(--kw-gold-hover);
  border-color: var(--kw-gold-hover);
  color: var(--kw-green-dark) !important;
}

/* Przycisk outline (biały) — na ciemnym tle */
.kw-btn-outline,
.elementor-button.kw-btn-outline {
  background-color: transparent;
  color: var(--kw-white) !important;
  border: 2px solid var(--kw-white);
}

.kw-btn-outline:hover,
.elementor-button.kw-btn-outline:hover {
  background-color: var(--kw-white);
  color: var(--kw-green-dark) !important;
}

/* Przycisk outline złoty — na jasnym tle */
.kw-btn-outline-gold,
.elementor-button.kw-btn-outline-gold {
  background-color: transparent;
  color: var(--kw-green-dark) !important;
  border: 2px solid var(--kw-green-dark);
}

.kw-btn-outline-gold:hover,
.elementor-button.kw-btn-outline-gold:hover {
  background-color: var(--kw-green-dark);
  color: var(--kw-white) !important;
}

/* ========================================
   SEKCJE — TŁA
   ======================================== */

.kw-bg-dark    { background-color: var(--kw-green-dark); }
.kw-bg-mid     { background-color: var(--kw-green-mid); }
.kw-bg-cream   { background-color: var(--kw-cream); }
.kw-bg-white   { background-color: var(--kw-white); }

.kw-bg-dark *,
.kw-bg-mid * {
  color: var(--kw-white);
}

.kw-bg-dark h1,
.kw-bg-dark h2,
.kw-bg-dark h3,
.kw-bg-mid h1,
.kw-bg-mid h2,
.kw-bg-mid h3 {
  color: var(--kw-white);
}

/* ========================================
   SEKCJA HERO
   ======================================== */

.kw-hero {
  background-color: var(--kw-green-dark);
  min-height: 85vh;
  display: flex;
  align-items: center;
}

.kw-hero__eyebrow {
  font-family: var(--kw-font-body);
  font-size: var(--kw-fs-sm);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--kw-gold);
  margin-bottom: var(--kw-space-sm);
}

.kw-hero__title {
  font-family: var(--kw-font-heading);
  font-size: var(--kw-fs-4xl);
  font-weight: 700;
  color: var(--kw-white);
  line-height: 1.1;
  margin-bottom: var(--kw-space-md);
}

.kw-hero__subtitle {
  font-family: var(--kw-font-body);
  font-size: var(--kw-fs-md);
  color: var(--kw-cream);
  font-weight: 500;
  margin-bottom: var(--kw-space-sm);
  line-height: 1.4;
}

.kw-hero__lead {
  font-size: var(--kw-fs-base);
  color: rgba(247, 243, 237, 0.8);
  margin-bottom: var(--kw-space-lg);
  max-width: 520px;
}

@media (max-width: 768px) {
  .kw-hero__title {
    font-size: var(--kw-fs-3xl);
  }
}

/* ========================================
   SEKCJA STATYSTYKI
   ======================================== */

.kw-stat__number {
  font-family: var(--kw-font-heading);
  font-size: var(--kw-fs-3xl);
  font-weight: 700;
  color: var(--kw-gold);
  line-height: 1;
  display: block;
}

.kw-stat__label {
  font-family: var(--kw-font-body);
  font-size: var(--kw-fs-sm);
  color: var(--kw-text-muted);
  margin-top: 4px;
  line-height: 1.3;
}

/* ========================================
   KARTY USŁUG (Dla Biznesu)
   ======================================== */

.kw-service-card {
  background-color: var(--kw-green-dark);
  border: 1px solid rgba(200, 169, 110, 0.2);
  border-radius: var(--kw-radius);
  padding: var(--kw-space-lg) var(--kw-space-md);
  text-align: center;
  transition: border-color var(--kw-transition), transform var(--kw-transition), box-shadow var(--kw-transition);
  cursor: pointer;
}

.kw-service-card:hover {
  border-color: var(--kw-gold);
  transform: translateY(-4px);
  box-shadow: var(--kw-shadow-lg);
}

.kw-service-card__icon {
  width: 48px;
  height: 48px;
  color: var(--kw-gold);
  margin: 0 auto var(--kw-space-md);
  display: block;
}

.kw-service-card__title {
  font-family: var(--kw-font-body);
  font-size: var(--kw-fs-base);
  font-weight: 600;
  color: var(--kw-white);
  line-height: 1.3;
  margin-bottom: var(--kw-space-sm);
}

.kw-service-card__arrow {
  color: var(--kw-gold);
  font-size: var(--kw-fs-lg);
  display: block;
  margin-top: var(--kw-space-sm);
  transition: transform var(--kw-transition);
}

.kw-service-card:hover .kw-service-card__arrow {
  transform: translateX(4px);
}

/* ========================================
   SEKCJA NAGŁÓWKI (eyebrow labels)
   ======================================== */

.kw-section-eyebrow {
  font-family: var(--kw-font-body);
  font-size: var(--kw-fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kw-gold);
  margin-bottom: var(--kw-space-xs);
  display: block;
}

.kw-section-title {
  font-family: var(--kw-font-heading);
  font-size: var(--kw-fs-2xl);
  font-weight: 700;
  color: var(--kw-text);
  margin-bottom: var(--kw-space-sm);
  position: relative;
  padding-bottom: var(--kw-space-md);
}

/* Złota linia pod tytułem sekcji */
.kw-section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 48px;
  height: 2px;
  background-color: var(--kw-gold);
}

.kw-section-title--center::after {
  left: 50%;
  transform: translateX(-50%);
}

/* ========================================
   LISTA OFERTA (checkmarki)
   ======================================== */

.kw-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.kw-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  font-size: var(--kw-fs-base);
  color: var(--kw-white);
}

.kw-checklist li::before {
  content: '';
  width: 18px;
  height: 18px;
  min-width: 18px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='9' r='8.5' stroke='%23c8a96e'/%3E%3Cpath d='M5 9l3 3 5-5' stroke='%23c8a96e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  margin-top: 2px;
}

/* ========================================
   LOGA MEDIÓW
   ======================================== */

.kw-media-logo {
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter var(--kw-transition), opacity var(--kw-transition);
  max-height: 32px;
  width: auto;
}

.kw-media-logo:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* ========================================
   TESTIMONIALE / OPINIE
   ======================================== */

.kw-testimonial {
  background-color: var(--kw-white);
  border-left: 3px solid var(--kw-gold);
  padding: var(--kw-space-md) var(--kw-space-lg);
  border-radius: 0 var(--kw-radius) var(--kw-radius) 0;
}

.kw-testimonial__quote {
  font-family: var(--kw-font-heading);
  font-size: var(--kw-fs-lg);
  font-style: italic;
  color: var(--kw-text);
  line-height: 1.5;
  margin-bottom: var(--kw-space-sm);
}

.kw-testimonial__author {
  font-family: var(--kw-font-body);
  font-size: var(--kw-fs-sm);
  font-weight: 600;
  color: var(--kw-text-muted);
  letter-spacing: 0.05em;
}

/* ========================================
   FOOTER
   ======================================== */

.kw-footer {
  background-color: var(--kw-green-dark);
  color: var(--kw-white);
  padding: var(--kw-space-xl) 0 var(--kw-space-md);
}

.kw-footer__contact-item {
  display: flex;
  align-items: center;
  gap: var(--kw-space-sm);
  color: rgba(247, 243, 237, 0.85);
  font-size: var(--kw-fs-base);
  margin-bottom: var(--kw-space-sm);
  transition: color var(--kw-transition);
}

.kw-footer__contact-item:hover {
  color: var(--kw-gold);
}

.kw-footer__contact-icon {
  color: var(--kw-gold);
  width: 18px;
  flex-shrink: 0;
}

.kw-footer__copyright {
  border-top: 1px solid rgba(247, 243, 237, 0.15);
  padding-top: var(--kw-space-md);
  font-size: var(--kw-fs-xs);
  color: rgba(247, 243, 237, 0.5);
  text-align: center;
}

/* ========================================
   KLASY POMOCNICZE
   ======================================== */

.kw-text-gold   { color: var(--kw-gold) !important; }
.kw-text-white  { color: var(--kw-white) !important; }
.kw-text-muted  { color: var(--kw-text-muted) !important; }

.kw-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.kw-divider-gold {
  width: 48px;
  height: 2px;
  background-color: var(--kw-gold);
  margin: var(--kw-space-md) 0;
}

.kw-divider-gold--center {
  margin-left: auto;
  margin-right: auto;
}

/* Padding sekcji */
.kw-section {
  padding: var(--kw-section-pad-y) 0;
}

.kw-section--sm {
  padding: calc(var(--kw-section-pad-y) / 2) 0;
}

/* Animacja fade-in przy scrollu (klasa dodawana przez JS) */
.kw-fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.kw-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Opóźnienia dla cascade efektu */
.kw-fade-in:nth-child(2) { transition-delay: 0.1s; }
.kw-fade-in:nth-child(3) { transition-delay: 0.2s; }
.kw-fade-in:nth-child(4) { transition-delay: 0.3s; }
.kw-fade-in:nth-child(5) { transition-delay: 0.4s; }
.kw-fade-in:nth-child(6) { transition-delay: 0.5s; }

/* ========================================
   RESPONSYWNOŚĆ
   ======================================== */

@media (max-width: 1024px) {
  :root {
    --kw-section-pad-y: 60px;
  }
}

@media (max-width: 768px) {
  :root {
    --kw-section-pad-y: 48px;
    --kw-fs-4xl: 2.25rem;
    --kw-fs-3xl: 1.875rem;
    --kw-fs-2xl: 1.5rem;
  }

  .kw-section-title {
    font-size: var(--kw-fs-xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kw-fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}