/*
 * ============================================================
 *  SILIKONY POLSKIE — Visual Refresh 2025
 *  Subtelne odświeżenie wyglądu. Nie modyfikuje main.css.
 *  Podłączony przez wp_enqueue_scripts w functions.php
 * ============================================================
 */

/* ── 1. TYPOGRAFIA BAZOWA ───────────────────────────────────
   Lekko zwiększone line-height i weight dla czytelności      */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ══════════════════════════════════════════════════════════
   2. NAWIGACJA — NOWOCZESNY REDESIGN
   ══════════════════════════════════════════════════════════ */

/* ── Ogólna struktura nawigacji ──────────────────────────── */
nav {
  border-bottom: none !important;
}

/* ── Pasek nawigacji: tło i cień ────────────────────────── */
nav .navbar-wrap .navbar {
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 4px 24px rgba(0,0,0,0.06);
  transition: background 0.35s ease, box-shadow 0.35s ease !important;
  border-bottom: 2px solid #fecc00;
}

/* Na stronie głównej — początkowo półprzezroczysty */
.home nav .navbar-wrap .navbar {
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: none;
  border-bottom-color: rgba(254, 204, 0, 0.6);
}

/* Po przewinięciu — pełne tło */
.home nav.scrolled .navbar-wrap .navbar {
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 4px 24px rgba(0,0,0,0.08);
  border-bottom-color: #fecc00;
}

/* ── Logo: identyczny na wszystkich stronach ────────────── */
nav .navbar-wrap .navbar .logo,
.home nav .navbar-wrap .navbar .logo {
  height: 64px !important;
  width: 200px !important;
  padding: 10px 14px !important;
  display: flex;
  align-items: center;
  background: #fff !important;
  border-right: 1px solid rgba(0,0,0,0.06);
  box-shadow: none !important;
  /* Anuluj padding-top: 102px z main.css */
  padding-top: 10px !important;
}

/* Po scrollu — bez zmian, logo już jest kompaktowe */
.home nav.scrolled .navbar-wrap .navbar .logo {
  height: 64px !important;
  padding: 10px 14px !important;
  padding-top: 10px !important;
}

/* ── Menu container — identyczny na wszystkich stronach ─── */
nav .navbar-wrap .navbar .menu-container,
.home nav .navbar-wrap .navbar .menu-container {
  width: calc(100% - 200px) !important;
  height: 64px !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  float: left !important;
}

/* Menu ul — flex wszędzie */
nav .navbar-wrap .navbar .menu-container ul,
.home nav .navbar-wrap .navbar .menu-container ul {
  margin-top: 0 !important;
  display: flex;
  align-items: center;
  height: 64px;
  margin-bottom: 0;
  padding-top: 0;
}

/* Po scrollu — bez zmian */
.home nav.scrolled .navbar-wrap .navbar .menu-container {
  height: 64px !important;
}

.home nav.scrolled .navbar-wrap .navbar .menu-container ul {
  margin-top: 0 !important;
}

/* ── Pozycje menu ────────────────────────────────────────── */
nav .navbar-wrap .navbar .menu-container li,
.home nav .navbar-wrap .navbar .menu-container li {
  padding: 0 6px !important;
  position: relative;
}

/* ── Linki menu — nowoczesny styl ───────────────────────── */
nav .navbar-wrap .navbar .menu-container li a,
.home nav .navbar-wrap .navbar .menu-container li a {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #444 !important;
  padding: 6px 2px;
  position: relative;
  transition: color 0.25s ease !important;
}

/* Nowoczesny underline zamiast nawiasów [ ] */
nav .navbar-wrap .navbar .menu-container li a::after,
.home nav .navbar-wrap .navbar .menu-container li a::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: #fecc00 !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
  opacity: 1 !important;
  top: auto !important;
}

/* Ukryj stare nawiasy [ ] */
nav .navbar-wrap .navbar .menu-container li::after,
nav .navbar-wrap .navbar .menu-container li::before,
.home nav .navbar-wrap .navbar .menu-container li::after,
.home nav .navbar-wrap .navbar .menu-container li::before {
  display: none !important;
}

/* Hover i aktywny link */
nav .navbar-wrap .navbar .menu-container li:hover > a,
nav .navbar-wrap .navbar .menu-container li.current-menu-item > a,
nav .navbar-wrap .navbar .menu-container li.current_page_item > a,
.home nav .navbar-wrap .navbar .menu-container li:hover > a,
.home nav .navbar-wrap .navbar .menu-container li.current-menu-item > a,
.home nav .navbar-wrap .navbar .menu-container li.current_page_item > a {
  color: #222 !important;
}

nav .navbar-wrap .navbar .menu-container li:hover > a::after,
nav .navbar-wrap .navbar .menu-container li.current-menu-item > a::after,
nav .navbar-wrap .navbar .menu-container li.current_page_item > a::after,
.home nav .navbar-wrap .navbar .menu-container li:hover > a::after,
.home nav .navbar-wrap .navbar .menu-container li.current-menu-item > a::after,
.home nav .navbar-wrap .navbar .menu-container li.current_page_item > a::after {
  transform: scaleX(1) !important;
}

/* ── Przycisk SKLEP ONLINE — pill CTA ───────────────────── */
nav .navbar-wrap .shop,
.home nav .navbar-wrap .shop {
  width: 200px !important;
  height: auto !important;
  background: transparent !important;
  border-left: 1px solid rgba(0,0,0,0.06);
  transition: none !important;
}

nav .navbar-wrap .shop .text,
.home nav .navbar-wrap .shop .text {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
}

nav .navbar-wrap .shop .btn,
.home nav .navbar-wrap .shop .btn {
  height: 64px !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

nav .navbar-wrap .shop .btn a,
.home nav .navbar-wrap .shop .btn a {
  position: static !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 32px !important;
  width: 100% !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  transition: background 0.25s ease, color 0.25s ease !important;
}

nav .navbar-wrap .shop .btn a.client-form,
.home nav .navbar-wrap .shop .btn a.client-form {
  background: #f0f0f0 !important;
  color: #555 !important;
  top: auto !important;
}

nav .navbar-wrap .shop .btn a.client-form:hover,
.home nav .navbar-wrap .shop .btn a.client-form:hover {
  background: #e0e0e0 !important;
  color: #222 !important;
}

nav .navbar-wrap .shop .btn a.option--2,
.home nav .navbar-wrap .shop .btn a.option--2 {
  background: #fecc00 !important;
  color: #222 !important;
  top: auto !important;
  font-weight: 700 !important;
}

nav .navbar-wrap .shop .btn a.option--2:hover,
.home nav .navbar-wrap .shop .btn a.option--2:hover {
  background: #e8bb00 !important;
}

/* Ukryj efekt hover przesuwania */
.home nav .navbar-wrap .shop .btn:hover a.option--1 {
  transform: none !important;
}

/* Po scrollu — shop bez zmian (już jest stały) */
.home nav.scrolled .navbar-wrap .shop {
  height: auto !important;
}

.home nav.scrolled .navbar-wrap .shop .text {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
}

/* ── WPML — przełącznik języka ───────────────────────────── */
nav .navbar-wrap .navbar .menu-container li.wpml-ls-item::after,
nav .navbar-wrap .navbar .menu-container li.wpml-ls-item::before {
  display: none !important;
}

/* ── MOBILE — ulepszone menu ─────────────────────────────── */
@media only screen and (max-width: 768px) {
  /* Logo mobilny */
  nav .navbar-wrap .navbar .logo,
  .home nav .navbar-wrap .navbar .logo {
    width: 130px !important;
    height: 50px !important;
    padding: 8px 10px !important;
    padding-top: 8px !important;
    border-right: none;
  }

  /* Menu mobilny — slider z góry */
  nav .navbar-wrap .navbar .menu-container,
  .home nav .navbar-wrap .navbar .menu-container {
    background: #fff !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    border-top: 3px solid #fecc00;
    width: 100% !important;
    height: auto !important;
    display: none;
  }

  nav .navbar-wrap .navbar .menu-container ul,
  .home nav .navbar-wrap .navbar .menu-container ul {
    display: block !important;
    height: auto !important;
    padding: 8px 0 16px;
  }

  nav .navbar-wrap .navbar .menu-container li,
  .home nav .navbar-wrap .navbar .menu-container li {
    display: block !important;
    padding: 0 !important;
    border-bottom: 1px solid #f5f5f5;
  }

  nav .navbar-wrap .navbar .menu-container li:last-child {
    border-bottom: none;
  }

  nav .navbar-wrap .navbar .menu-container li a,
  .home nav .navbar-wrap .navbar .menu-container li a {
    padding: 12px 20px !important;
    display: block !important;
    font-size: 13px !important;
  }

  /* Ukryj podkreślenie na mobile */
  nav .navbar-wrap .navbar .menu-container li a::after,
  .home nav .navbar-wrap .navbar .menu-container li a::after {
    display: none !important;
  }

  nav .navbar-wrap .navbar .menu-container li:hover > a,
  .home nav .navbar-wrap .navbar .menu-container li:hover > a {
    background: #fffbea;
    color: #222 !important;
  }

  /* Przycisk hamburgera */
  nav .mobile-btn .btn__menu span {
    background: #333 !important;
  }
}



/* ── 3. HERO / FIXED-BG ─────────────────────────────────────
   Mniejsza wysokość — baner nie zajmuje ekranu               */

/* Podstrony: 400px → 260px */
.fixed-bg {
  height: 260px !important;
}

/* Strona główna: 600px → 380px */
.home .fixed-bg {
  height: 380px !important;
}

/* Mobile */
@media only screen and (max-width: 768px) {
  .fixed-bg {
    height: 160px !important;
  }
  .home .fixed-bg {
    height: 220px !important;
  }
  /* Logo na mobile po scrollu wraca do małego */
  .home nav .navbar-wrap .navbar .logo {
    transition: height 0.3s ease, padding-top 0.3s ease;
  }
}

/* ── 4. NAGŁÓWKI SEKCJI ─────────────────────────────────────
   Lepsza hierarchia, subtelne letter-spacing                  */
.section__title h1,
.section__title h2 {
  letter-spacing: 0.08em;
  font-weight: 500;
}

/* Żółta linia pod tytułem sekcji */
.section__title > div::after,
.section__title > .col-md-12::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: #fecc00;
  margin-top: 8px;
  transition: width 0.4s ease;
}

/* ── 5. LISTA ARTYKUŁÓW — brak zdjęć z treści ──────────────
   Zdjęcia wewnątrz treści artykułu NIE wyświetlają się       
   na liście aktualności (home.php)                            */
.home .post-prev .prev-text img,
.home .post-prev .post-excerpt img {
  display: none !important;
}

/* Kafelek artykułu — czysty układ */
.home .post-prev {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 0 !important;
  display: flex;
  align-items: flex-start;
}

.home .post-prev:last-child {
  border-bottom: none;
}

/* Tytuł artykułu */
.home .post-prev strong {
  font-size: 17px;
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
  line-height: 1.3;
  color: #222;
}

/* Data — mniejsza i szara */
.post-date {
  display: block;
  font-size: 13px;
  color: #999;
  margin-bottom: 10px;
  margin-top: 2px;
}

/* Excerpt — czytelny, ograniczona długość */
.post-excerpt {
  margin-bottom: 12px;
}

.post-excerpt p {
  font-size: 14px;
  line-height: 1.65;
  color: #555;
  margin: 0;
  /* Ogranicz do 3 linii z wielokropkiem */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 6. KARTY PRODUKTÓW ─────────────────────────────────────
   Płynniejszy hover, lepszy cień, bardziej widoczny tytuł    */
a.thumb__link {
  display: block;
}

a.thumb__link .thumb__img {
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

a.thumb__link:hover .thumb__img {
  box-shadow: 0 8px 28px rgba(0,0,0,0.14);
  transform: translateY(-3px);
}

/* Zoom zdjęcia wolniejszy i płynniejszy */
a.thumb__link .thumb__photo {
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

a.thumb__link:hover .thumb__photo {
  transform: scale(1.07) !important;
}

/* Hover overlay — mniej agresywny żółty */
a.thumb__link .thumb__img::after {
  background: rgba(254, 204, 0, 0.18) !important;
  transition: opacity 0.35s ease !important;
}

/* Tytuł pod karta — bold, lekki spacing */
.thumb__title {
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* ── 6. PRZYCISKI "READ MORE" ───────────────────────────────
   Nowoczesny look: bolder, lepszy underline animation         */
.read-more {
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 13px;
  transition: color 0.25s ease !important;
}

.read-more:hover {
  color: #fecc00;
}

/* ── 7. PRZYCISK SKLEPU ─────────────────────────────────────
   Płynniejszy hover                                           */
nav .navbar-wrap .shop .btn a.option--2,
.home nav .navbar-wrap .shop .btn a.option--2 {
  transition: background 0.3s ease, opacity 0.3s ease !important;
  letter-spacing: 0.06em;
}

nav .navbar-wrap .shop .btn a.option--2:hover,
.home nav .navbar-wrap .shop .btn a.option--2:hover {
  background: #e8bb00 !important;
}

/* ── 8. SEKCJA DYSTRYBUTORÓW ────────────────────────────────
   Ciemniejsze tło, lepszy kontrast                           */
.home .distributors {
  background: linear-gradient(135deg, #888 0%, #6e6e6e 100%) !important;
  padding: 40px 0 !important;
}

/* ── 9. SEKCJA AKTUALNOŚCI / ABOUT (strona główna) ─────────
   Subtelna karta z cieniem przy hover                        */
.home .post-prev,
.home .about {
  transition: transform 0.3s ease;
  padding: 20px 0;
  border-bottom: 1px solid #f0f0f0;
}

.home .post-prev:last-of-type,
.home .about:last-of-type {
  border-bottom: none;
}

/* Zdjęcia w sekcji about — cień */
.home .prev-photo .thumb__img,
.home .prev-photo .square-icon {
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  border-radius: 2px;
  overflow: hidden;
}

/* ── 10. STOPKA ─────────────────────────────────────────────
   Lepszy gradient, wyraźniejsza separacja                     */
footer {
  background: linear-gradient(160deg, #2a2a2a 0%, #1a1a1a 100%) !important;
  color: #ccc !important;
}

footer .contact-info .title strong,
footer .col-md-4 .title strong {
  color: #fecc00;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

footer a {
  color: #bbb !important;
  transition: color 0.25s ease;
}

footer a:hover {
  color: #fecc00 !important;
}

footer .icon svg path {
  fill: #aaa;
  transition: fill 0.3s ease;
}

footer .icon a:hover svg path {
  fill: #fecc00;
}

footer .copyright {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  color: #888 !important;
  font-size: 13px;
}

/* ── 11. SEKCJA OFERTY (kafelki kategorii) ──────────────────
   Płynniejszy hover overlay                                   */
.offer__option .thumb__photo {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* ── 12. POJEDYNCZY PRODUKT ─────────────────────────────────
   Lepszy układ karty produktu                                 */
.product .fixed__dark {
  transition: background 0.2s ease !important;
}

/* ── 13. WYNIKI WYSZUKIWANIA ────────────────────────────────
   Lepszy wygląd kafelków wyników                              */
.search-result .thumb__title {
  font-size: 16px;
  font-weight: 600;
}

/* ── 14. SECTION TITLE — YELLOW VARIANT ────────────────────
   Lepsza widoczność żółtego tytułu                           */
.section__title--yellow {
  font-weight: 600 !important;
}

/* ── 15. MICRO ANIMATIONS — scroll reveal ───────────────────
   Fade-in przy pierwszym pojawieniu się sekcji               */
@keyframes sp-fadein {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.content .row,
.seo-section {
  animation: sp-fadein 0.5s ease both;
}

/* ── 16. MOBILE IMPROVEMENTS ───────────────────────────────
   Lepsze spacing i czytelność na urządzeniach mobilnych       */
@media only screen and (max-width: 768px) {
  .content {
    padding-top: 24px !important;
    padding-bottom: 40px !important;
  }

  .section__title {
    margin-bottom: 24px !important;
  }

  footer {
    padding-top: 32px !important;
    padding-bottom: 0 !important;
  }

  footer .col-md-4 {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
}