/*
 * Style własne EKKON — motyw potomny.
 * Plik ładowany po custom.css motywu nadrzędnego (patrz functions.php).
 */

/* --- slider na stronie głównej: bez filtra koloru ------------------------
 * Uwaga klienta z 20.08.2026: zdjęcia w banerze mają zostać w oryginalnych
 * kolorach, bez czerwonej nakładki. Motyw nadrzędny kładzie na slajdy dwie
 * warstwy (::before — kolor, ::after — czerń 0.8), przez które fotografia
 * BILZ jest nieczytelna. Zerujemy obie i utrzymujemy kontrast napisu
 * inaczej: napis jest ciemny, bo obie fotografie są jasne, a pod tekstem
 * leży delikatna biała poświata zamiast przyciemnienia całego kadru.
 */

.slide1::before,
.slide2::before {
  background: none;
  mix-blend-mode: normal;
}

.slide1::after,
.slide2::after {
  background: none;
  opacity: 0;
}

.slide1 p,
.slide2 p {
  color: #1b1b1b;
  text-shadow:
      0 0 18px rgba(255, 255, 255, .95),
      0 0 42px rgba(255, 255, 255, .85),
      0 1px 2px rgba(255, 255, 255, .9);
}

/* --- kolumny tekstowe (ekkon_text_columns) ------------------------------- */

.lead-text p {
  font-size: 1.08rem;
  line-height: 1.75;
}

.text-column h2 {
  font-size: 1.35rem;
  line-height: 1.4;
  margin-bottom: .6rem;
  font-family: "Jost", sans-serif;
  font-weight: 500;
}

.text-column p {
  margin-bottom: .9rem;
}

.text-column p:last-child {
  margin-bottom: 0;
}

/* delikatna linia oddzielająca sekcje w siatce */
.text-column {
  border-top: 2px solid #e8161b;
  padding-top: 1rem;
}

/* --- opis BILZ na stronie głównej ---------------------------------------- */

.bilz-desc p:last-child {
  margin-bottom: 0;
}

.bilz-desc p {
  margin-bottom: .8rem;
}

/* --- Centrum danych AI ---------------------------------------------------- */

.ekkon-datahub .dh-heading {
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  margin: 2.5rem 0 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid #e8161b;
}

.ekkon-datahub .dh-heading:first-of-type {
  margin-top: 0;
}

.dh-table th {
  width: 34%;
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #555;
  vertical-align: top;
}

.dh-table td {
  font-size: 1.02rem;
}

.dh-table td.dh-missing {
  color: #b02a2e;
  background: #fdf3f3;
}

.dh-taxonomy {
  columns: 2;
  column-gap: 2.5rem;
  padding-left: 1.2rem;
}

.dh-taxonomy li {
  margin-bottom: .4rem;
  break-inside: avoid;
}

.dh-glossary dt {
  font-family: "Jost", sans-serif;
  font-weight: 500;
  margin-top: 1rem;
}

.dh-glossary dd {
  margin: .2rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid #e9ecef;
  text-align: justify;
  text-justify: inter-word;
}

.dh-langs {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.dh-langs li a {
  display: inline-block;
  padding: .35rem .8rem;
  border: 1px solid #dee2e6;
  border-radius: 2rem;
  color: #222;
  text-decoration: none;
}

.dh-langs li a:hover {
  border-color: #e8161b;
  color: #e8161b;
}

.dh-langs .dh-code {
  font-size: .75rem;
  color: #888;
  margin-left: .2rem;
}

.dh-resources {
  padding-left: 1.2rem;
}

.dh-stamp {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid #e9ecef;
  font-size: .9rem;
  color: #666;
}

@media (max-width: 767px) {
  .dh-taxonomy { columns: 1; }
  .dh-table th { width: 45%; font-size: .75rem; }
}

/* --- FAQ ------------------------------------------------------------------ */

.ekkon-faq .accordion-button {
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
}

.ekkon-faq .accordion-button:not(.collapsed) {
  color: #e8161b;
  background-color: #fff;
  box-shadow: none;
}

.ekkon-faq .accordion-button:focus {
  border-color: #e8161b;
  box-shadow: 0 0 0 .15rem rgba(232, 22, 27, .2);
}

.ekkon-faq .accordion-body {
  text-align: justify;
  text-justify: inter-word;
}

/* --- źródła wiedzy -------------------------------------------------------- */

.ekkon-sources ul {
  list-style: none;
  padding-left: 0;
}

.ekkon-sources li {
  display: inline-block;
  margin: 0 .35rem .5rem 0;
}

.ekkon-sources li a {
  display: inline-block;
  padding: .35rem .8rem;
  border: 1px solid #dee2e6;
  border-radius: 2rem;
  font-size: .9rem;
  color: #222;
  text-decoration: none;
  transition: all .2s ease;
}

.ekkon-sources li a:hover,
.ekkon-sources li a:focus {
  border-color: #e8161b;
  color: #e8161b;
}

@media (max-width: 1024px) {
  .text-column {
    border-top-width: 1px;
  }
}

/* --- zdjęcia produktów przy nagłówkach opisu ------------------------------
 * Poprawka klienta z 20.08.2026, pkt 3: przy każdym tytule na stronie głównej
 * jedno lub dwa małe zdjęcia. Pasek jest elastyczny, więc przy jednym zdjęciu
 * nie zostaje pusta luka, a na telefonie zdjęcia zwężają się razem z kolumną.
 */

.section-shots {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 0 0 1rem;
}

.section-shots img {
  flex: 1 1 0;
  min-width: 0;
  max-width: 220px;
  height: auto;
  object-fit: contain;
  background: #fff;
  border: 1px solid #e9ecef;
  padding: .35rem;
}

.section-shots img:only-child {
  /* pojedyncze zdjęcie (np. sterownik EPN) jest panoramiczne — szersza ramka
     wyrównuje jego wysokość do sekcji z dwoma zdjęciami */
  flex: 0 1 460px;
  max-width: 460px;
}

@media (max-width: 575px) {
  .section-shots img { max-width: 50%; }
}

/* --- kafelki na /oferta/ ---------------------------------------------------
 * Zdjęcia dwóch nowych kafelków (fiksatory, fundamenty blokowe) są mniejsze
 * niż pozostałe, więc bez tego wypełnienia kafelek byłby węższy od sąsiadów.
 */

.project-block-four .image-box figure.image img {
  width: 100%;
  height: auto;
}

/* --- listy w treści wpisu --------------------------------------------------
 * Motyw zeruje list-style globalnie (menu, karuzele). W treści artykułu
 * punktory są potrzebne — przywracamy je tylko tam.
 */

#container-content-single ul {
  list-style: disc;
  padding-left: 1.3rem;
}

#container-content-single ul li {
  margin-bottom: .35rem;
}

#container-content-single img {
  max-width: 100%;
  height: auto;
}

/* --- strona FAQ ----------------------------------------------------------- */

.faq-group-heading {
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  margin: 2.5rem 0 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid #e8161b;
}

.faq-group-heading:first-of-type {
  margin-top: 0;
}

/* --- przegląd oferty BILZ (dwie rubryki) ----------------------------------- */

.bilz-index-heading {
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  margin: 0 0 1.25rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid #e8161b;
}

.bilz-index-subheading {
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: .6rem;
}

.bilz-index-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1.5rem;
  columns: 1;
}

.bilz-index-list li {
  margin-bottom: .3rem;
  border-bottom: 1px solid #f1f3f5;
}

.bilz-index-list li a {
  display: block;
  padding: .35rem 0;
  color: #222;
  text-decoration: none;
}

.bilz-index-list li a:hover,
.bilz-index-list li a:focus {
  color: #e8161b;
}

/* --- treść artykułów: ujednolicenie typografii -----------------------------
 * Uwaga klienta z 24.08.2026: w Poradniku tekst wchodzi na zdjęcia, nagłówki
 * mają różne wielkości i grubości, a odstępy raz są, raz ich nie ma.
 *
 * Źródło problemu: treść to resztka po Elementorze — zostały znaczniki
 * <section data-element_type> i <div data-widget_type>, ale arkusz stylów
 * Elementora już nie. Nagłówki rozjechały się po h1, h2, h4 i h6 (247 widżetów
 * heading w treści), a widżety odstępu (spacer) renderują się jako puste divy
 * o zerowej wysokości. Poniższe reguły sprowadzają to do jednej skali.
 */

/* jedna rodzina i jeden kolor w całej treści — bez spadku po Elementorze */
#container-content-single .row > .col-12 :is(p, li, td, th, div) {
  font-family: "Poppins", sans-serif;
  color: #222;
}

/* dwa poziomy nagłówka zamiast pięciu przypadkowych */
#container-content-single :is(h1, h2, h3) {
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.35;
  color: #1b1b1b;
  margin: 2.25rem 0 .9rem;
  text-transform: none;
  letter-spacing: 0;
}

#container-content-single :is(h4, h5, h6) {
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.4;
  color: #1b1b1b;
  margin: 1.75rem 0 .7rem;
  text-transform: none;
  letter-spacing: 0;
}

/* nagłówek nie zmienia grubości przez <strong> ani <b> w środku */
#container-content-single :is(h1, h2, h3, h4, h5, h6) :is(strong, b, span) {
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
}

/* pierwszy nagłówek nie odbija się od góry sekcji */
#container-content-single :is(h1, h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}

#container-content-single p {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

/* Zdjęcia: zawsze odstęp, nigdy sklejone z tekstem.
 * Uwaga klienta z 25.08.2026: zdjęcia w dziale Oferta były „wielkimi bykami” —
 * rozciągały się na całą szerokość kolumny, bo pliki mają po 1300–2000 px.
 * Ograniczamy je do 720 px i wyśrodkowujemy; przy szerszym ekranie nic to nie
 * zabiera czytelności, a strona produktowa skraca się kilkukrotnie.
 *
 * Reguła celowo omija drobne obrazki wplecione w tekst — przede wszystkim
 * miniatury flag WPML pod wpisem. Bez tego wyjątku flagi wskakiwały nad
 * odnośniki językowe i robiły z nich kolorowy słupek. */
#container-content-single img:not(.wpml-ls-flag):not(.emoji) {
  display: block;
  max-width: min(100%, 720px);
  height: auto;
  margin: 1.5rem auto;
}

#container-content-single img.aligncenter,
#container-content-single .aligncenter img {
  margin-left: auto;
  margin-right: auto;
}

/* puste widżety odstępu po Elementorze — przywracamy im wysokość */
#container-content-single [data-widget_type^="spacer"] {
  min-height: 1.75rem;
}

/* kolumny Elementora obok siebie zamiast jedna pod drugą bez marginesu */
#container-content-single [data-element_type="column"] {
  margin-bottom: 1rem;
}

/* Odnośniki w treści w kolorze marki, a nie domyślnym niebieskim.
 * Wyłączamy z tego listę wersji językowych pod wpisem — ta ma wyglądać
 * spokojnie, jak reszta serwisu (uwaga klienta z 25.08.2026). */
#container-content-single .row > .col-12 a:not(.wpml-ls-link) {
  color: #e8161b;
  text-decoration: underline;
  text-underline-offset: .15em;
}

#container-content-single .row > .col-12 a:not(.wpml-ls-link):hover {
  color: #b02a2e;
}

/* tabele danych katalogowych nie rozpychają strony na telefonie */
#container-content-single table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: .95rem;
}

#container-content-single :is(td, th) {
  border: 1px solid #e9ecef;
  padding: .5rem .6rem;
  vertical-align: top;
}

/* --- nagłówek H1 na stronie głównej ----------------------------------------
 * Uwaga klienta z 25.08.2026: strona główna nie miała H1. Nagłówek stoi nad
 * akapitem wstępnym; wielkością nie konkuruje z napisem w banerze, ale jest
 * pełnoprawnym nagłówkiem strony dla wyszukiwarek i czytników ekranu.
 */

.strona-glowna-h1 {
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: 1.9rem;
  line-height: 1.3;
  color: #1b1b1b;
  margin: 0 0 1.5rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid #e8161b;
}

@media (max-width: 575px) {
  .strona-glowna-h1 { font-size: 1.5rem; }
}

/* --- odnośniki do wersji językowych pod wpisem -----------------------------
 * Uwaga klienta z 25.08.2026: napisy „Litewski, Estoński…” miały wyglądać jak
 * reszta serwisu. Ustawiamy je w jednej linii, w kolorze tekstu, z flagą
 * obok napisu zamiast nad nim.
 */

.wpml-ls-statics-post_translations {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid #e9ecef;
  font-size: .95rem;
  color: #555;
}

.wpml-ls-statics-post_translations .wpml-ls-link {
  color: #222;
  text-decoration: none;
  white-space: nowrap;
}

.wpml-ls-statics-post_translations .wpml-ls-link:hover,
.wpml-ls-statics-post_translations .wpml-ls-link:focus {
  color: #e8161b;
  text-decoration: underline;
  text-underline-offset: .15em;
}

.wpml-ls-statics-post_translations img.wpml-ls-flag {
  display: inline-block;
  width: 18px;
  height: 12px;
  margin: 0 .35rem 0 0;
  vertical-align: baseline;
  border: 0;
  padding: 0;
}

.wpml-ls-statics-post_translations .wpml-ls-display {
  color: #777;
}

/* --- para zdjęć obok siebie w treści wpisu ---------------------------------
 * Klient (25.08.2026) chciał zdjęcie fiksatora obok rysunku technicznego.
 * Na telefonie para składa się do jednej kolumny.
 */

.ekkon-para-zdjec {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin: 1.5rem 0;
}

#container-content-single .ekkon-para-zdjec img {
  flex: 1 1 280px;
  max-width: 360px;
  margin: 0;
}

@media (max-width: 575px) {
  #container-content-single .ekkon-para-zdjec img { max-width: 100%; }
}