/* ============================================================
   Warianty wyglądu (motywy).
   Kolory, typografia, promienie, cienie i tło hero pochodzą TERAZ z tokenów
   w App\Models\Theme::THEMES i są emitowane inline do <head> (body.theme-{key}).
   Ten plik trzyma tylko nieliczne reguły STRUKTURALNE motywu, których nie da się
   wyrazić samą podmianą tokenu. Panel admina przejmuje wyłącznie kolory motywu
   (body.admin.atheme-{key} — emitowane inline).
   Kolejny motyw = wpis w Theme::THEMES (+ ewentualnie reguła strukturalna tutaj).
   ============================================================ */

/* ============================================================
   NOWOCZESNY (domyślny) — jasny motyw. Hero i nagłówki podstron są JASNE
   (ciemne zostają TYLKO baner CTA i stopka, w neutralnym grafit-slate).
   Reguły strukturalne, bo szablon zakłada ciemne pasy z jasnym tekstem;
   wariant ze zdjęciem (.hero--photo / .page-head--photo) zostaje ciemny.
   ============================================================ */

/* Wypełniony przycisk „on-dark": ciemniejsza limonka = biały tekst 5:1 (WCAG AA). */
body.theme-nowoczesny .btn--on-dark{ background:var(--blue-600); border-color:var(--blue-600); }

/* Ikony usług / numery kroków = limonkowy kafelek (biały glif) zamiast ciemnego grafit-limonka. */
body.theme-nowoczesny .svc__icon,
body.theme-nowoczesny .step__num{ background:linear-gradient(150deg,var(--blue-600),var(--blue-700)); }

/* --- JASNY HERO (bez zdjęcia) --- */
body.theme-nowoczesny .hero:not(.hero--photo){ color:var(--body); }
body.theme-nowoczesny .hero:not(.hero--photo) h1{ color:var(--ink); }
body.theme-nowoczesny .hero:not(.hero--photo) h1 .hl{ color:var(--blue-600); }
body.theme-nowoczesny .hero:not(.hero--photo) .hero__sub{ color:var(--body); }
body.theme-nowoczesny .hero:not(.hero--photo) .trust__item{ color:var(--body); }
body.theme-nowoczesny .hero:not(.hero--photo) .trust__item svg{ color:var(--blue-600); }
body.theme-nowoczesny .hero:not(.hero--photo)::after{
  background-image:
    linear-gradient(rgba(16,24,40,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,24,40,.035) 1px, transparent 1px);
}
/* Drugi CTA (ghost) na jasnym hero: widoczna ramka + limonkowy hover. */
body.theme-nowoczesny .hero:not(.hero--photo) .btn--on-dark-outline{ border-color:var(--line); color:var(--ink); }
body.theme-nowoczesny .hero:not(.hero--photo) .btn--on-dark-outline:hover{ border-color:var(--blue-600); color:var(--blue-600); }

/* --- JASNE nagłówki podstron (page-head bez zdjęcia) --- */
body.theme-nowoczesny .page-head:not(.page-head--photo){ background:var(--hero-bg); color:var(--body); }
body.theme-nowoczesny .page-head:not(.page-head--photo) h1,
body.theme-nowoczesny .page-head:not(.page-head--photo) strong{ color:var(--ink); }
body.theme-nowoczesny .page-head:not(.page-head--photo) p{ color:var(--body); }
body.theme-nowoczesny .page-head:not(.page-head--photo) .eyebrow{ color:var(--blue-600); }
body.theme-nowoczesny .page-head:not(.page-head--photo) .crumbs a{ color:var(--body); }
body.theme-nowoczesny .page-head:not(.page-head--photo) .crumbs a:hover,
body.theme-nowoczesny .page-head:not(.page-head--photo) .crumbs [aria-current]{ color:var(--ink); }

/* --- CIEMNE PASY → JASNE: wspólny prymityw .section--dark (cta-band, trust, whyus, 404) --- */
body.theme-nowoczesny .section--dark{ background:var(--bg-soft); color:var(--body); }
body.theme-nowoczesny .section--dark h2,
body.theme-nowoczesny .section--dark h3{ color:var(--ink); }
body.theme-nowoczesny .section--dark .eyebrow{ color:var(--blue-600); }
body.theme-nowoczesny .section--dark .feature p{ color:var(--muted); }
body.theme-nowoczesny .section--dark .feature__icon{ background:var(--bg-softer); color:var(--blue-600); }

/* Baner CTA: jasny limonkowy „bookend" (jak hero) + czytelny drugi przycisk (ghost). */
body.theme-nowoczesny .cta-band{ background:var(--hero-bg); }
body.theme-nowoczesny .cta-band p{ color:var(--body); }
body.theme-nowoczesny .cta-band .btn--on-dark-outline{ border-color:var(--line); color:var(--ink); }
body.theme-nowoczesny .cta-band .btn--on-dark-outline:hover{ border-color:var(--blue-600); color:var(--blue-600); }

/* Kafle zaufania (badge-item): jasna karta zamiast półprzezroczystej bieli. */
body.theme-nowoczesny .badge-item{ background:var(--bg); border-color:var(--line); }
body.theme-nowoczesny .badge-item svg{ color:var(--blue-600); }
body.theme-nowoczesny .badge-item b{ color:var(--ink); }
body.theme-nowoczesny .badge-item span{ color:var(--muted); }

/* Segmenty „dla firm / dla domu" (home + strony usług): jasne karty. */
body.theme-nowoczesny .segment{ background:var(--bg-soft); color:var(--body); border:1px solid var(--line); }
body.theme-nowoczesny .segment--home{ background:var(--bg-softer); }
body.theme-nowoczesny .segment h3{ color:var(--ink); }
body.theme-nowoczesny .segment__lead{ color:var(--muted); }
body.theme-nowoczesny .segment--home .segment__lead{ color:var(--body); }
body.theme-nowoczesny .segment li{ color:var(--body); }
body.theme-nowoczesny .segment li svg,
body.theme-nowoczesny .segment--home li svg{ color:var(--blue-600); }

/* Strona 404 (.errpage) — jasna. */
body.theme-nowoczesny .errpage__chip{ background:var(--bg); border-color:var(--line); color:var(--blue-600); }
body.theme-nowoczesny .errpage h1{ color:var(--ink); }
body.theme-nowoczesny .errpage p,
body.theme-nowoczesny .errpage__hint{ color:var(--muted); }
body.theme-nowoczesny .errpage__links a{ background:var(--bg); border-color:var(--line); color:var(--body); }
body.theme-nowoczesny .errpage__links a:hover{ background:var(--bg-softer); border-color:var(--blue-600); color:var(--blue-600); }
body.theme-nowoczesny .errpage__links svg{ color:var(--blue-600); }

/* Stopka JASNA (logotyp stopki: wybierz ciemną/kolorową wersję w panelu). */
body.theme-nowoczesny .footer{ background:var(--bg-soft); color:var(--muted); border-top:1px solid var(--line); }
body.theme-nowoczesny .footer h4{ color:var(--ink); }
body.theme-nowoczesny .footer a{ color:var(--body); }
body.theme-nowoczesny .footer a:hover{ color:var(--blue-600); }
body.theme-nowoczesny .footer__contact svg{ color:var(--blue-600); }
body.theme-nowoczesny .footer__bottom{ border-top-color:var(--line); color:var(--muted); }
body.theme-nowoczesny .footer__bottom a{ color:var(--muted); }
body.theme-nowoczesny .footer .social-links a{ background:var(--bg-softer); color:var(--body); }
body.theme-nowoczesny .footer .social-links a:hover{ background:var(--blue-600); color:#fff; }

/* --- Ciaśniejszy rytm frontu: mniejsze przerwy sekcji i odstępy pól --- */
body.theme-nowoczesny .section{ padding:clamp(32px,4.5vw,56px) 0; }
body.theme-nowoczesny .page-head{ padding:clamp(26px,3.5vw,44px) 0; }
body.theme-nowoczesny .hero__inner{ padding-block:clamp(40px,5vw,68px) clamp(30px,4vw,52px); }
body.theme-nowoczesny .section-head{ margin-bottom:clamp(18px,2.5vw,28px); }
body.theme-nowoczesny .form .field{ margin-bottom:11px; }
body.theme-nowoczesny .footer{ padding:40px 0 22px; }
body.theme-nowoczesny .footer__grid{ gap:26px; }

/* MIĘKKI — ciemniejsza zieleń wypełnionego przycisku „on-dark" (czytelny biały tekst, WCAG AA). */
body.theme-miekki .btn--on-dark{ background:var(--blue-600); border-color:var(--blue-600); }

/* ============================================================
   GRAFIT — warianty układu (nagłówek header-grafit.php, stopka footer-grafit.php).
   Klasy .header--g / .footer--g / .footer-g__* występują tylko w tych partialach.
   ============================================================ */
/* Nagłówek: logo | menu wyśrodkowane (wersaliki) | telefon + CTA „Wycena" */
.header--g .header__bar{ gap:16px; }
.header--g .nav{ margin-inline:auto; }
.header--g .nav__list{ gap:2px; }
.header--g .nav__list a{ text-transform:uppercase; letter-spacing:.06em; font-size:.82rem; font-weight:700; }
.header__logo--txt{ font-weight:800; font-size:1.2rem; color:var(--ink); letter-spacing:.01em; }
.header__phone{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-weight:700; font-size:.9rem; white-space:nowrap; }
.header__phone svg{ width:18px; height:18px; color:var(--blue-600); flex:none; }
.header__cta{ padding:10px 18px; }
.header__cta svg{ width:17px; height:17px; }
@media (max-width:1100px){ .header--g .header__phone span{ display:none; } }
@media (max-width:820px){ .header--g .header__phone{ display:none; } }

/* Stopka: marka + duży kontakt/social u góry, poziomy pasek linków pod spodem */
.footer--g .footer-g__top{ display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.footer-g__brand{ max-width:440px; }
.footer-g__name{ font-size:1.4rem; font-weight:800; color:var(--on-dark-strong); margin-bottom:8px; }
.footer-g__tagline{ margin:0 0 14px; color:var(--on-dark-muted); }
.footer-g__contact{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.footer-g__big{ display:inline-flex; align-items:center; gap:10px; font-size:1.08rem; font-weight:700; color:var(--on-dark-strong); }
.footer-g__big svg{ width:20px; height:20px; color:var(--blue-600); flex:none; }
.footer-g__big:hover{ color:var(--blue-300); }
.footer-g__addr{ display:inline-flex; align-items:flex-start; gap:10px; color:var(--on-dark-muted); }
.footer-g__addr svg{ width:18px; height:18px; color:var(--blue-600); flex:none; margin-top:3px; }
.footer--g .footer-g__links{ display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); }
.footer-g__links a{ text-transform:uppercase; letter-spacing:.05em; font-size:.8rem; font-weight:700; color:var(--on-dark); }
.footer-g__links a:hover{ color:var(--on-dark-strong); }
.footer--g .footer__bottom{ margin-top:22px; }
@media (max-width:640px){ .footer--g .footer-g__top{ flex-direction:column; gap:24px; } }

/* ============================================================
   KDSBUD — motyw firmy budowlanej (terakota + grafitowy łupek, industrialny,
   minimalne zaokrąglenia). Hero JASNY (jak nowoczesny), ale pasy CTA/„dlaczego my"/
   „zaufanie"/nagłówki podstron ZOSTAJĄ ciemne (łupek) — terakota mocno pika na ciemnym.
   Warianty układu: header-kdsbud.php / footer-kdsbud.php (klasy .header--k / .footer--k / .footer-k__*).
   ============================================================ */

/* Wypełniony przycisk „on-dark" = mocna terakota z białym tekstem (5,48:1) — poprawia też
   przyciski na ciemnych pasach (domyślny --blue był za jasny na biały tekst). */
body.theme-kdsbud .btn--on-dark{ background:var(--blue-600); border-color:var(--blue-600); }

/* Ikony usług / numery kroków / ikony „dlaczego my" = terakotowy kafel (biały glif). */
body.theme-kdsbud .svc__icon,
body.theme-kdsbud .step__num{ background:linear-gradient(150deg,var(--blue-600),var(--blue-700)); }
body.theme-kdsbud .section--dark .feature__icon{ background:linear-gradient(150deg,var(--blue-600),var(--blue-700)); color:#fff; }

/* Akcent architektoniczny: krótka terakotowa kreska przed „eyebrow". */
body.theme-kdsbud .eyebrow{ display:inline-flex; align-items:center; gap:10px; }
body.theme-kdsbud .eyebrow::before{ content:""; width:22px; height:2px; background:currentColor; flex:none; opacity:.85; }

/* Karta usługi: terakotowa listwa u góry po najechaniu (bez skoku układu). */
body.theme-kdsbud .svc:hover{ box-shadow:var(--shadow), inset 0 3px 0 var(--blue-600); }

/* --- JASNY HERO (bez zdjęcia) — subtelna „kratka rysunkowa" (blueprint) na ciepłej bieli --- */
body.theme-kdsbud .hero:not(.hero--photo){ color:var(--body); }
body.theme-kdsbud .hero:not(.hero--photo) h1{ color:var(--ink); }
body.theme-kdsbud .hero:not(.hero--photo) h1 .hl{ color:var(--blue-600); }
body.theme-kdsbud .hero:not(.hero--photo) .hero__sub{ color:var(--body); }
body.theme-kdsbud .hero:not(.hero--photo) .trust__item{ color:var(--body); }
body.theme-kdsbud .hero:not(.hero--photo) .trust__item svg{ color:var(--blue-600); }
body.theme-kdsbud .hero:not(.hero--photo)::after{
  background-image:
    linear-gradient(rgba(58,65,73,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58,65,73,.05) 1px, transparent 1px);
}
/* Drugi CTA (ghost) na jasnym hero: widoczna ramka + terakotowy hover. */
body.theme-kdsbud .hero:not(.hero--photo) .btn--on-dark-outline{ border-color:var(--line); color:var(--ink); }
body.theme-kdsbud .hero:not(.hero--photo) .btn--on-dark-outline:hover{ border-color:var(--blue-600); color:var(--blue-600); }

/* ------ Nagłówek KDSBUD: logo | menu wyśrodkowane (wersaliki) | telefon + CTA „Wycena" ------ */
.header--k .nav{ margin-inline:auto; }
.header--k .nav__list{ gap:2px; }
.header--k .nav__list a{ text-transform:uppercase; letter-spacing:.06em; font-size:.82rem; font-weight:700; }
@media (max-width:1100px){ .header--k .header__phone span{ display:none; } }
@media (max-width:820px){ .header--k .header__phone{ display:none; } }

/* ------ Stopka KDSBUD: KLASYCZNY układ (bazowa stopka footer.php, 4 kolumny) z akcentami
   motywu — terakotowa listwa u góry i mniejszy (szeroki) logotyp KDSBUD. ------ */
body.theme-kdsbud .footer{ border-top:3px solid var(--blue-600); }
body.theme-kdsbud .footer__logo{ height:52px; }
body.theme-kdsbud .footer__contact svg{ color:var(--blue-300); }