/* ── Theme: White Clean + Steel Cyan ─────────────────────────
   Białe tło + lodowy cyan ze Steel Modern (#0EA5E9). Hi-tech.
   Override aktywuje się przez body.theme-active-light.
*/

body.theme-active-light {
  /* ── Core palette ─────────────────────────────── */
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;

  --card: 210 40% 99%;
  --card-foreground: 222 47% 11%;

  --secondary: 214 32% 95%;
  --secondary-foreground: 222 47% 11%;

  --muted: 214 32% 93%;
  --muted-foreground: 215 16% 47%;

  --border: 214 32% 88%;
  --input: 214 32% 92%;

  --primary: 199 89% 48%;
  --primary-foreground: 0 0% 100%;
  --accent: 199 89% 48%;
  --accent-foreground: 0 0% 100%;
  --ring: 199 89% 48%;

  /* ── Surface ramp — od białego do jasnego błękitu ── */
  --surface-deep: 222 47% 11%;       /* footer = ciemny granat */
  --surface-deeper: 214 32% 88%;     /* gradient deep */
  --surface-base: 0 0% 100%;         /* body bg */
  --surface-1: 210 40% 98%;          /* sekcja jasna */
  --surface-2: 214 32% 96%;          /* gradient */
  --surface-3: 210 40% 99%;          /* card */
  --surface-4: 214 32% 94%;          /* gradient */
  --surface-5: 214 32% 92%;          /* gradient */
  --surface-6: 214 32% 88%;          /* border soft */
  --surface-7: 214 32% 85%;          /* muted */
  --surface-8: 214 32% 82%;          /* border mid */

  --gradient-gold: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 50%, #0369A1 100%);
  /* Hero overlay — CIEMNY w theme-light (biały tekst hero na ciemnej zasłonie zdjęcia) */
  --gradient-hero: linear-gradient(to right, rgba(8, 15, 30, 0.85) 0%, rgba(8, 15, 30, 0.55) 50%, rgba(8, 15, 30, 0.25) 100%);
  --shadow-card: 0 20px 40px -15px rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 0 40px -10px hsl(var(--primary) / 0.25);
}

/* Body baseline */
body.theme-active-light {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* ── Tailwind utility overrides ───────────────────────── */
/* text-white wszędzie → ciemny tekst */
.theme-active-light .text-white,
.theme-active-light .text-white\/30,
.theme-active-light .text-white\/40,
.theme-active-light .text-white\/50,
.theme-active-light .text-white\/60,
.theme-active-light .text-white\/70,
.theme-active-light .text-white\/80,
.theme-active-light .text-white\/90 {
  color: hsl(var(--foreground)) !important;
}
.theme-active-light .text-white\/30,
.theme-active-light .text-white\/40,
.theme-active-light .text-white\/50,
.theme-active-light .text-white\/60 {
  color: hsl(var(--muted-foreground)) !important;
}

/* border-white/X → border w jasnej palecie */
.theme-active-light .border-white\/5,
.theme-active-light .border-white\/10,
.theme-active-light .border-white\/15,
.theme-active-light .border-white\/20,
.theme-active-light .border-white\/30 {
  border-color: hsl(var(--border)) !important;
}

/* bg-white/X (półprzezroczyste białe) — w jasnym motywie chcemy delikatne tło */
.theme-active-light .bg-white\/5,
.theme-active-light .bg-white\/10 {
  background-color: hsl(var(--secondary)) !important;
}

/* border-dark / border-card */
.theme-active-light .border-dark,
.theme-active-light .border-border {
  border-color: hsl(var(--border)) !important;
}

/* ── Navbar — transparent na top, solid po scroll lub body.gtr-nav-solid ── */
.theme-active-light .gtr-nav.gtr-nav-scrolled,
.theme-active-light.gtr-nav-solid .gtr-nav,
.theme-active-light .navbar {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
  backdrop-filter: blur(12px);
}
/* Logo text — biały na hero, ciemny po scroll */
.theme-active-light .gtr-nav.gtr-nav-scrolled .gtr-nav-logo-text,
.theme-active-light.gtr-nav-solid .gtr-nav .gtr-nav-logo-text {
  color: hsl(var(--foreground)) !important;
  text-shadow: none !important;
}
/* Links — ciemne tylko gdy nav solid */
.theme-active-light .gtr-nav.gtr-nav-scrolled .gtr-nav-links a,
.theme-active-light.gtr-nav-solid .gtr-nav .gtr-nav-links a {
  color: hsl(215 16% 35%) !important;
  text-shadow: none !important;
}
.theme-active-light .gtr-nav.gtr-nav-scrolled .gtr-nav-links a:hover,
.theme-active-light .gtr-nav.gtr-nav-scrolled .gtr-nav-links a.active,
.theme-active-light.gtr-nav-solid .gtr-nav .gtr-nav-links a:hover,
.theme-active-light.gtr-nav-solid .gtr-nav .gtr-nav-links a.active {
  color: hsl(var(--primary)) !important;
}
.theme-active-light .gtr-nav.gtr-nav-scrolled .gtr-nav-dropdown-trigger,
.theme-active-light.gtr-nav-solid .gtr-nav .gtr-nav-dropdown-trigger {
  color: hsl(215 16% 35%) !important;
  text-shadow: none !important;
}
.theme-active-light .gtr-nav-dropdown-menu {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.15) !important;
}
.theme-active-light .gtr-nav-dropdown-menu a {
  color: hsl(215 16% 35%) !important;
}
.theme-active-light .gtr-nav-dropdown-menu a:hover {
  color: hsl(var(--primary)) !important;
  background: hsl(var(--secondary)) !important;
}
.theme-active-light .gtr-nav-mobile {
  background: hsl(var(--background)) !important;
  border-top: 1px solid hsl(var(--border)) !important;
}
.theme-active-light .gtr-nav-mobile a {
  color: hsl(var(--foreground)) !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
}
.theme-active-light .gtr-nav-hamburger {
  color: hsl(var(--foreground)) !important;
}

/* React Navbar (index.php) — bg-dark/90 */
.theme-active-light nav.bg-dark\/90,
.theme-active-light nav[class*="bg-dark"] {
  background: rgba(255, 255, 255, 0.94) !important;
  color: hsl(var(--foreground)) !important;
}

/* ── Sekcje z bg-dark / bg-card ──────────────────── */
.theme-active-light .bg-dark { background-color: hsl(var(--background)) !important; }
.theme-active-light .bg-card { background-color: hsl(var(--card)) !important; box-shadow: var(--shadow-card); }

/* React sections z inline className 'bg-dark text-white' */
.theme-active-light section.bg-dark {
  background-color: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
}

/* ── Cards & Form inputs ─────────────────────────── */
.theme-active-light input,
.theme-active-light textarea,
.theme-active-light select {
  background-color: hsl(var(--input)) !important;
  border-color: hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
}
.theme-active-light input::placeholder,
.theme-active-light textarea::placeholder {
  color: hsl(var(--muted-foreground)) !important;
}

/* ── Footer (z partials/footer.php uses --surface-deep) ── */
/* Footer pozostaje ciemny dla kontrastu — białe tło wszędzie indziej, ciemny granat na dole */
.theme-active-light footer {
  color: hsl(var(--background)) !important;
}
.theme-active-light footer * {
  color: inherit;
}
.theme-active-light footer a:hover {
  color: hsl(var(--primary)) !important;
}

/* ── React Hero — direct inline styles override ─── */
.theme-active-light section[style*="background"] {
  /* Jeśli sekcja ma inline gradient z hsl(222...) — to już jest podmienione na surface vars przez refactor.
     Ten override jest backup'em na wypadek niestandardowych stylów. */
}

/* ── Backdrop pattern (random paint w hero) ────────── */
.theme-active-light .absolute.inset-0[style*="linear-gradient"] {
  opacity: 0.5;
}

/* ── Buttons z .gtr-nav-cta — wyższa specyficzność niż .gtr-nav-links a ── */
.theme-active-light .gtr-nav-links a.gtr-nav-cta,
.theme-active-light a.gtr-nav-cta {
  background: hsl(var(--primary) / 0.08) !important;
  border-color: hsl(var(--primary) / 0.4) !important;
  color: hsl(var(--primary)) !important;
}
.theme-active-light .gtr-nav-links a.gtr-nav-cta:hover,
.theme-active-light a.gtr-nav-cta:hover {
  background: hsl(var(--primary)) !important;
  color: #fff !important;
}

/* ── Sticky telephone button — utrzymać kolor primary ── */
.theme-active-light .sticky-call-btn,
.theme-active-light a[href^="tel:"][class*="fixed"] {
  background: var(--gradient-gold) !important;
  color: #fff !important;
}

/* ── Headings ───────────────────────────────────── */
.theme-active-light h1,
.theme-active-light h2,
.theme-active-light h3,
.theme-active-light h4 {
  color: hsl(var(--foreground)) !important;
}

/* Heading który JAWNIE ma .text-white — szanuj intencje (nad ciemnym zdjęciem/overlayem) */
.theme-active-light h1.text-white,
.theme-active-light h2.text-white,
.theme-active-light h3.text-white,
.theme-active-light h4.text-white {
  color: #fff !important;
}

/* Karty z gradientem from-black (np. produktowe) — wewnątrz tekst biały */
.theme-active-light .bg-gradient-to-t ~ * h3,
.theme-active-light .bg-gradient-to-t ~ * h4,
.theme-active-light .bg-gradient-to-t ~ * .text-gray-300 {
  color: #fff !important;
}

/* Hero h1 z ciemnym overlay (text-shadow + color:#fff inline) — biały tekst */
.theme-active-light h1[style*="text-shadow"],
.theme-active-light h2[style*="text-shadow"] {
  color: #fff !important;
}

/* Hero w sekcji z ciemnym overlay — nagłówek h1 zawsze biały */
.theme-active-light section .hero-overlay ~ * h1,
.theme-active-light section:has(.hero-overlay) h1 {
  color: #fff !important;
}

/* Special: gradient text utilities (z bg-clip-text) — zostaw, bo używa --primary */
.theme-active-light [class*="bg-clip-text"] {
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* ── Breadcrumb / sub-page hero overrides ─────────── */
.theme-active-light .breadcrumb {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
}
.theme-active-light .breadcrumb a {
  color: hsl(var(--muted-foreground)) !important;
}

/* ── Shadow adjustments — soft shadows w jasnym motywie ── */
.theme-active-light .shadow-2xl,
.theme-active-light .shadow-xl {
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.15) !important;
}
.theme-active-light .shadow-lg {
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.12) !important;
}

/* ─────────────────────────────────────────────────────────────
   HERO — CIEMNY OVERLAY (biały tekst nad zdjęciem)
   ───────────────────────────────────────────────────────────── */

/* Hero h1/h2 nad zdjęciem — biały tekst, ciemny overlay zapewnia kontrast */
.theme-active-light section:has(.hero-overlay) h1,
.theme-active-light section:has(.hero-overlay) h2,
.theme-active-light section:has(.hero-overlay) .heading-display,
.theme-active-light section:has(.hero-overlay) .heading-section {
  color: #fff !important;
}
/* Hero akapit i text-gray-200 itp. */
.theme-active-light section:has(.hero-overlay) p,
.theme-active-light section:has(.hero-overlay) .text-gray-200,
.theme-active-light section:has(.hero-overlay) .text-gray-300,
.theme-active-light section:has(.hero-overlay) .text-gray-400,
.theme-active-light section:has(.hero-overlay) .body-large {
  color: rgba(255, 255, 255, 0.9) !important;
}
/* Label-caps w hero — primary cyan na ciemnym tle */
.theme-active-light section:has(.hero-overlay) .label-caps {
  color: hsl(var(--primary)) !important;
}
/* Avatar bubble w hero — biały na ciemnym (TYLKO bg dla bubble, NIE dla headingów) */
.theme-active-light section:has(.hero-overlay) .text-white {
  color: #fff !important;
}
.theme-active-light section:has(.hero-overlay) .bg-white\/5,
.theme-active-light section:has(.hero-overlay) .bg-white\/10 {
  background-color: rgba(255, 255, 255, 0.08) !important;
}
.theme-active-light section:has(.hero-overlay) .border-white\/10,
.theme-active-light section:has(.hero-overlay) .border-white\/20 {
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* ─────────────────────────────────────────────────────────────
   BUTTONS — btn-outline na jasnym tle musi być CIEMNY
   ───────────────────────────────────────────────────────────── */

/* Domyślnie w theme-light: btn-outline = ciemny tekst + ciemny border */
.theme-active-light .btn-outline {
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--foreground) / 0.4) !important;
  background: transparent !important;
}
.theme-active-light .btn-outline:hover {
  color: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
  background: hsl(var(--primary) / 0.06) !important;
}
/* W hero (ciemny overlay) — btn-outline biały */
.theme-active-light section:has(.hero-overlay) .btn-outline {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
}
.theme-active-light section:has(.hero-overlay) .btn-outline:hover {
  color: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
  background: rgba(14, 165, 233, 0.12) !important;
}

/* ─────────────────────────────────────────────────────────────
   Sekcje z bg-dark + ciemnym tłem — np. CTA "Gotowy na nowe okna"
   Tam tekst musi być biały, btn-outline biały
   ───────────────────────────────────────────────────────────── */

/* CTA z React App — ma bg: hsl(var(--surface-1)) — jasna sekcja w theme-light.
   Hsl(var(--surface-1)) = bardzo jasny błękit. Tekst musi być ciemny. */
.theme-active-light section[style*="surface-1"] h2,
.theme-active-light section[style*="surface-1"] .text-white {
  color: hsl(var(--foreground)) !important;
}
.theme-active-light section[style*="surface-1"] .text-gray-300 {
  color: hsl(var(--muted-foreground)) !important;
}

/* CTA "Gotowy na nowe okna" — ciemne tło (linear-gradient surface-deep) — biały tekst, kontrastowy button */
.theme-active-light section.cta-section h2,
.theme-active-light section.cta-section h2 * {
  color: #fff !important;
}
.theme-active-light section.cta-section p {
  color: rgba(255, 255, 255, 0.85) !important;
}
.theme-active-light section.cta-section .cta-btn-outline,
.theme-active-light section.cta-section a.btn-outline.cta-btn-outline {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
}
.theme-active-light section.cta-section .cta-btn-outline:hover,
.theme-active-light section.cta-section a.btn-outline.cta-btn-outline:hover {
  background: hsl(var(--primary)) !important;
  color: #fff !important;
  border-color: hsl(var(--primary)) !important;
}

/* ─────────────────────────────────────────────────────────────
   Form inputs w theme-light — bg-dark inputs muszą mieć jasne tło
   ───────────────────────────────────────────────────────────── */
.theme-active-light input.bg-dark,
.theme-active-light textarea.bg-dark,
.theme-active-light select.bg-dark {
  background-color: hsl(var(--input)) !important;
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--border)) !important;
}

/* ─────────────────────────────────────────────────────────────
   Footer — pozostaje ciemny, doprecyzowanie kolorów
   ───────────────────────────────────────────────────────────── */
.theme-active-light footer .gtr-footer-logo-text,
.theme-active-light footer .gtr-footer-col h4 {
  color: #fff !important;
}
.theme-active-light footer .gtr-footer-desc,
.theme-active-light footer .gtr-footer-col ul li a,
.theme-active-light footer .gtr-footer-contact-item,
.theme-active-light footer .gtr-footer-contact-item a {
  color: hsl(215 20% 70%) !important;
}
.theme-active-light footer .gtr-footer-col ul li a:hover,
.theme-active-light footer .gtr-footer-contact-item a:hover {
  color: hsl(var(--primary)) !important;
}
.theme-active-light footer .gtr-footer-social a {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.7) !important;
}
.theme-active-light footer .gtr-footer-social a:hover {
  background: hsl(var(--primary) / 0.18) !important;
  color: #fff !important;
}
.theme-active-light footer .gtr-footer-bottom p,
.theme-active-light footer .gtr-footer-bottom a {
  color: hsl(215 20% 60%) !important;
}
.theme-active-light footer .gtr-footer-nip {
  color: hsl(215 20% 50%) !important;
}
/* React Footer (z components.js) — text-white naglowki, text-gray-400 linki */
.theme-active-light footer.footer-section h4 {
  color: #fff !important;
}
.theme-active-light footer.footer-section .text-gray-400 {
  color: hsl(215 20% 70%) !important;
}
.theme-active-light footer.footer-section .text-gray-500 {
  color: hsl(215 20% 55%) !important;
}
.theme-active-light footer.footer-section a:hover {
  color: hsl(var(--primary)) !important;
}