/*
Theme Name:   KW-Transport Astra Child
Theme URI:    https://kw-transport.pl
Description:  Motyw potomny Astry dla kw-transport.pl - Kompendium Wiedzy Transportowej. Kolorystyka czerwono-biało/jasnoszara.
Author:       Firma SEO
Template:     astra
Version:      1.0.0
Text Domain:  kw-transport-child
*/

/* ==========================================================================
   0. Zmienne
   ========================================================================== */
:root{
  --kwt-red:#D0102A;
  --kwt-red-dark:#A00C21;
  --kwt-red-tint:rgba(208,16,42,0.08);
  --kwt-red-tint-strong:rgba(208,16,42,0.12);
  --kwt-ink:#1F2328;
  --kwt-text:#3C4148;
  --kwt-muted:#6B7078;
  --kwt-gray-light:#F4F5F7;
  --kwt-gray-mid:#EDEFF2;
  --kwt-border:#E3E5E9;
  --kwt-white:#FFFFFF;
  --kwt-radius-lg:20px;
  --kwt-radius-md:16px;
  --kwt-radius-sm:12px;
  --kwt-font-head:'Poppins', sans-serif;
  --kwt-font-body:'Inter', sans-serif;

  /* Motyw nadrzędny Astra koloruje stan hover/focus/aktywny WSZYSTKICH
     przycisków (spis treści, menu mobilne, "pokaż więcej", itd.) zmienną
     --ast-global-color-7, która w Personalizacji została kiedyś ustawiona
     na żółty (#ffcd57) - stąd żółty "błysk" po kliknięciu w dowolny
     przycisk na stronie. Nadpisanie tej jednej zmiennej tutaj naprawia to
     naraz wszędzie, zamiast łatać każdy przycisk z osobna. */
  --ast-global-color-7: var(--kwt-red);
}

body{
  font-family:var(--kwt-font-body);
  color:var(--kwt-text);
  background:var(--kwt-white);
}
h1,h2,h3,h4,.kwt-logo{
  font-family:var(--kwt-font-head);
  color:var(--kwt-ink);
}
a{ color:var(--kwt-red); }
a:hover{ color:var(--kwt-red-dark); }

.ast-container{ max-width:1180px; }

/* ==========================================================================
   1. Header
   ========================================================================== */
.kwt-header{
  background:var(--kwt-white);
  border-bottom:1px solid var(--kwt-border);
}
.kwt-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  max-width:1180px;
  margin:0 auto;
  padding:18px 24px;
  flex-wrap:wrap;
}
.kwt-header__logo img{
  height:44px;
  width:auto;
  display:block;
}
.kwt-header__nav{
  display:flex;
  gap:28px;
  flex-wrap:wrap;
  margin:0;
  padding:0;
  list-style:none;
}
.kwt-header__nav a{
  color:var(--kwt-ink);
  text-decoration:none;
  font-weight:500;
  font-size:15px;
}
.kwt-header__nav a:hover{ color:var(--kwt-red); }
.kwt-header__cta{
  background:var(--kwt-red);
  color:#fff !important;
  padding:10px 22px;
  border-radius:999px;
  font-weight:600;
  font-size:14px;
  text-decoration:none;
  white-space:nowrap;
}
.kwt-header__cta:hover{ background:var(--kwt-red-dark); color:#fff !important; }
.kwt-header__toggle{ display:none; }

@media(max-width:880px){
  .kwt-header__nav{
    display:none;
    width:100%;
    order:3;
    flex-direction:column;
    gap:14px;
    padding-top:14px;
    border-top:1px solid var(--kwt-border);
    margin-top:14px;
  }
  .kwt-header__nav.is-open{ display:flex; }
  .kwt-header__toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;height:40px;
    border-radius:10px;
    border:1px solid var(--kwt-border);
    background:none;
    cursor:pointer;
  }
  /* !important: ten sam "efekt zapalania się" przycisku po dotyku na
     telefonie co w spisie treści - patrz komentarz przy .kwt-toc__toggle. */
  .kwt-header__toggle:hover,
  .kwt-header__toggle:focus,
  .kwt-header__toggle:active{
    background:none !important;
    border-color:var(--kwt-border) !important;
    box-shadow:none !important;
    outline:none !important;
  }
}

/* ==========================================================================
   2. Hero (front-page.php)
   ========================================================================== */
.kwt-hero{
  background:linear-gradient(180deg,var(--kwt-gray-light) 0%, var(--kwt-white) 100%);
  padding:72px 24px;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--kwt-border);
}
.kwt-hero::after{
  content:"";
  position:absolute;
  right:-160px; top:-160px;
  width:520px; height:520px;
  background:radial-gradient(circle, var(--kwt-red-tint) 0%, rgba(208,16,42,0) 70%);
  pointer-events:none;
}
.kwt-hero__inner{
  display:flex;
  align-items:center;
  gap:56px;
  max-width:1180px;
  margin:0 auto;
  position:relative;
  z-index:1;
}
.kwt-hero__text{ flex:1; min-width:280px; position:relative; z-index:1; }
.kwt-eyebrow{
  color:var(--kwt-red);
  font-weight:700;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:14px;
}
.kwt-hero__text h1{
  font-size:clamp(28px,4vw,44px);
  line-height:1.15;
  font-weight:700;
  margin:0 0 20px;
  max-width:620px;
}
.kwt-hero__text h1 .accent{ color:var(--kwt-red); }
.kwt-hero__text p{
  font-size:17px;
  line-height:1.6;
  color:var(--kwt-muted);
  max-width:540px;
  margin:0 0 32px;
}
.kwt-hero__ctas{ display:flex; gap:14px; flex-wrap:wrap; }
.kwt-btn-primary,
.kwt-btn-secondary{
  padding:14px 28px;
  border-radius:999px;
  font-weight:600;
  text-decoration:none;
  display:inline-block;
}
.kwt-btn-primary{ background:var(--kwt-red); color:#fff !important; }
.kwt-btn-primary:hover{ background:var(--kwt-red-dark); color:#fff !important; }
.kwt-btn-secondary{ background:var(--kwt-white); border:1.5px solid var(--kwt-border); color:var(--kwt-ink) !important; }
.kwt-btn-secondary:hover{ border-color:var(--kwt-red); color:var(--kwt-red) !important; }

.kwt-hero__card{
  flex:0 0 340px;
  background:var(--kwt-white);
  border-radius:var(--kwt-radius-lg);
  padding:28px;
  position:relative; z-index:1;
  box-shadow:0 20px 45px rgba(31,35,40,0.10);
  border:1px solid var(--kwt-border);
}
.kwt-hero__card .kwt-tag{
  display:inline-block;
  background:var(--kwt-red-tint);
  color:var(--kwt-red);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.4px;
  text-transform:uppercase;
  padding:5px 10px;
  border-radius:999px;
  margin-bottom:12px;
}
.kwt-hero__card h3{ margin:0 0 6px; font-size:16px; }
.kwt-hero__card p{ margin:0 0 16px; font-size:13px; color:var(--kwt-muted); line-height:1.5; }
.kwt-stat-row{ display:flex; justify-content:space-between; border-top:1px solid var(--kwt-border); padding-top:14px; gap:8px; }
.kwt-stat b{ display:block; font-size:20px; color:var(--kwt-red); font-family:var(--kwt-font-head); }
.kwt-stat span{ font-size:11px; color:var(--kwt-muted); }

@media(max-width:780px){
  .kwt-hero{ padding:48px 20px; }
  .kwt-hero__inner{ flex-direction:column; }
  .kwt-hero__card{ width:100%; }
}

/* ==========================================================================
   3. Sekcja filarów / siatka artykułów
   ========================================================================== */
.kwt-section{ padding:64px 5%; }
.kwt-section--tint{ background:var(--kwt-gray-light); }
.kwt-section__head{ text-align:center; max-width:640px; margin:0 auto 40px; }
.kwt-section__head h2{ font-size:28px; margin:8px 0 12px; }
.kwt-section__head p{ color:var(--kwt-muted); font-size:15px; line-height:1.6; }

.kwt-pillars{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  max-width:1180px;
  margin:0 auto;
}
.kwt-card{
  background:var(--kwt-white);
  border-radius:var(--kwt-radius-md);
  padding:26px;
  border:1px solid var(--kwt-border);
  text-decoration:none;
  display:block;
  transition:box-shadow .15s ease, transform .15s ease;
}
.kwt-card:hover{ box-shadow:0 14px 30px rgba(31,35,40,0.08); transform:translateY(-2px); }
.kwt-icon-badge{
  width:44px;height:44px;
  border-radius:12px;
  background:var(--kwt-red-tint);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
.kwt-icon-badge svg{ width:22px;height:22px;stroke:var(--kwt-red);fill:none;stroke-width:1.8; }
.kwt-card h3{ font-size:17px; margin:0 0 8px; color:var(--kwt-ink); }
.kwt-card p{ font-size:14px; color:var(--kwt-muted); line-height:1.55; margin:0; }

@media(max-width:900px){ .kwt-pillars{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .kwt-pillars{ grid-template-columns:1fr; } }

.kwt-destinations{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  max-width:1180px;
  margin:0 auto;
}
.kwt-destination{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--kwt-white);
  border:1px solid var(--kwt-border);
  border-radius:var(--kwt-radius-md);
  padding:16px 18px;
  text-decoration:none;
  transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.kwt-destination:hover{
  box-shadow:0 14px 30px rgba(31,35,40,0.08);
  transform:translateY(-2px);
  border-color:var(--kwt-red);
}
.kwt-icon-badge--sm{ width:36px; height:36px; border-radius:10px; margin-bottom:0; flex-shrink:0; }
.kwt-icon-badge--sm svg{ width:18px; height:18px; }
.kwt-destination__name{ flex:1; font-weight:700; font-size:15px; color:var(--kwt-ink); }
.kwt-destination__arrow{ width:16px; height:16px; flex-shrink:0; color:var(--kwt-muted); transition:transform .15s ease; }
.kwt-destination:hover .kwt-destination__arrow{ transform:translateX(3px); color:var(--kwt-red); }
@media(max-width:900px){ .kwt-destinations{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .kwt-destinations{ grid-template-columns:1fr; } }

/* Siatka artykułów (najnowsze / powiązane) - stała liczba kolumn, nie auto-fit,
   żeby przy małej liczbie wpisów karty nie rozciągały się na całą szerokość */
.kwt-articles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  max-width:1180px;
  margin:0 auto;
}
@media(max-width:900px){ .kwt-articles{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .kwt-articles{ grid-template-columns:1fr; } }

.kwt-article-card{
  background:var(--kwt-white);
  border:1px solid var(--kwt-border);
  border-radius:var(--kwt-radius-md);
  overflow:hidden;
  text-decoration:none;
  display:flex;
  flex-direction:column;
}
.kwt-article-card__thumb{
  aspect-ratio:16/10;
  background:var(--kwt-gray-mid) center/cover no-repeat;
}
.kwt-article-card__body{ padding:20px; }
.kwt-article-card__cat{
  color:var(--kwt-red);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.4px;
  margin-bottom:8px;
  display:block;
}
.kwt-article-card h3{ font-size:16px; margin:0 0 8px; line-height:1.35; color:var(--kwt-ink); }
.kwt-article-card__meta{ font-size:12px; color:var(--kwt-muted); }

/* ==========================================================================
   3b. Pasek rynkowy: kursy walut (NBP) + ceny paliw
   ========================================================================== */
.kwt-market{
  padding:0 24px 64px;
  background:var(--kwt-gray-light);
}
.kwt-market__inner{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  background:var(--kwt-white);
  border:1px solid var(--kwt-border);
  border-radius:var(--kwt-radius-md);
  padding:24px;
}
.kwt-market__tile{
  text-align:center;
  padding:8px 4px;
  border-right:1px solid var(--kwt-border);
}
.kwt-market__tile:last-child{ border-right:none; }
.kwt-market__label{
  display:block;
  font-size:12px;
  color:var(--kwt-muted);
  text-transform:uppercase;
  letter-spacing:0.4px;
  margin-bottom:6px;
}
.kwt-market__value{
  display:block;
  font-family:var(--kwt-font-head);
  font-size:22px;
  font-weight:700;
  color:var(--kwt-red);
}
.kwt-market__note{
  max-width:1180px;
  margin:12px auto 0;
  font-size:12px;
  color:var(--kwt-muted);
  text-align:center;
}
@media(max-width:780px){
  .kwt-market__inner{ grid-template-columns:repeat(2,1fr); }
  .kwt-market__tile:nth-child(2){ border-right:none; }
  .kwt-market__tile{ border-bottom:1px solid var(--kwt-border); padding-bottom:16px; }
  .kwt-market__tile:nth-child(3),
  .kwt-market__tile:nth-child(4){ border-bottom:none; }
}

/* ==========================================================================
   3c. Aktualności ze świata transportu (RSS zewnętrzne)
   ========================================================================== */
.kwt-news{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  max-width:1180px;
  margin:0 auto;
}
.kwt-news__item{
  background:var(--kwt-white);
  border:1px solid var(--kwt-border);
  border-radius:var(--kwt-radius-md);
  padding:22px;
  text-decoration:none;
  display:block;
  transition:box-shadow .15s ease, transform .15s ease;
}
.kwt-news__item:hover{ box-shadow:0 14px 30px rgba(31,35,40,0.08); transform:translateY(-2px); }
.kwt-news__date{
  display:block;
  font-size:12px;
  color:var(--kwt-muted);
  margin-bottom:8px;
}
.kwt-news__item h3{ font-size:16px; margin:0 0 8px; color:var(--kwt-ink); line-height:1.35; }
.kwt-news__item p{ font-size:14px; color:var(--kwt-muted); line-height:1.55; margin:0 0 12px; }
.kwt-news__source{
  font-size:12px;
  font-weight:600;
  color:var(--kwt-red);
}
@media(max-width:780px){ .kwt-news{ grid-template-columns:1fr; } }

/* ==========================================================================
   3d. Terminarz wydarzeń branżowych TSL (konferencje i targi)
   ========================================================================== */
.kwt-events__title{
  font-family:var(--kwt-font-head);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.3px;
  font-size:clamp(24px,3vw,32px);
  color:var(--kwt-ink);
  margin:0 0 10px;
}
.kwt-events__table-wrap{
  max-width:1180px;
  margin:0 auto;
  overflow-x:auto;
  border:1px solid var(--kwt-border);
  border-radius:var(--kwt-radius-md);
}
.kwt-events__table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  min-width:640px;
}
.kwt-events__table thead th{
  background:var(--kwt-gray-mid);
  text-align:left;
  font-family:var(--kwt-font-head);
  font-weight:700;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.3px;
  color:var(--kwt-ink);
  padding:14px 18px;
  border-bottom:1px solid var(--kwt-border);
}
.kwt-events__table tbody td{
  padding:16px 18px;
  border-bottom:1px solid var(--kwt-border);
  color:var(--kwt-text);
  vertical-align:top;
}
.kwt-events__table tbody tr:last-child td{ border-bottom:none; }
.kwt-events__table tbody tr:hover{ background:var(--kwt-gray-light); }
.kwt-events__table tbody td.kwt-events__name{
  color:var(--kwt-ink);
  font-weight:600;
}
.kwt-events__icon{
  display:inline-flex;
  vertical-align:middle;
  margin-right:8px;
  color:var(--kwt-red);
  flex-shrink:0;
}
.kwt-events__icon svg{ width:16px; height:16px; display:block; }
.kwt-events__cat{
  display:inline-block;
  font-size:12px;
  font-weight:600;
  padding:4px 12px;
  border-radius:999px;
  white-space:nowrap;
}
.kwt-events__cat--konferencja{ background:var(--kwt-gray-mid); color:var(--kwt-text); }
.kwt-events__cat--targi{ background:var(--kwt-red-tint); color:var(--kwt-red); }
@media(max-width:600px){
  .kwt-events__table{ font-size:13px; }
  .kwt-events__table thead th, .kwt-events__table tbody td{ padding:12px; }
}
.kwt-events__toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  margin-top:16px;
  padding:12px 20px;
  background:none;
  border:1px solid var(--kwt-border);
  border-radius:var(--kwt-radius-md);
  font-family:var(--kwt-font-head);
  font-weight:700;
  font-size:13px;
  letter-spacing:0.3px;
  text-transform:uppercase;
  color:var(--kwt-red);
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
.kwt-events__toggle:hover,
.kwt-events__toggle:focus,
.kwt-events__toggle:active{
  background:var(--kwt-red-tint) !important;
  border-color:var(--kwt-red) !important;
  color:var(--kwt-red) !important;
  box-shadow:none !important;
  outline:none !important;
}
.kwt-events__toggle-icon{ width:16px; height:16px; flex-shrink:0; transition:transform .2s; }
.kwt-events__toggle[aria-expanded="true"] .kwt-events__toggle-icon{ transform:rotate(180deg); }

/* ==========================================================================
   4. Nagłówek kategorii / archiwum
   ========================================================================== */
.kwt-archive-header{
  background:var(--kwt-gray-light);
  border-bottom:1px solid var(--kwt-border);
  padding:48px 5%;
}
.kwt-archive-header h1{ font-size:32px; margin:10px 0; }
.kwt-archive-header p{ color:var(--kwt-muted); max-width:640px; font-size:15px; line-height:1.6; }

/* ==========================================================================
   4b. Baza wiedzy (page-baza-wiedzy.php) - filtry grupujące wg działu
   ========================================================================== */
.kwt-kb-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  max-width:1180px;
  margin:0 auto 32px;
}
/* !important poniżej zabezpiecza przed globalnym stylem przycisków (hover)
   z motywu nadrzędnego Astra, który nadpisywał kolor na żółty. */
.kwt-kb-filter{
  font-family:var(--kwt-font-body) !important;
  font-size:14px !important;
  font-weight:600 !important;
  color:var(--kwt-text) !important;
  background:var(--kwt-white) !important;
  background-image:none !important;
  border:1.5px solid var(--kwt-border) !important;
  border-radius:999px !important;
  padding:10px 20px !important;
  cursor:pointer;
  box-shadow:none !important;
  text-shadow:none !important;
  transition:border-color .15s, color .15s, background .15s;
}
.kwt-kb-filter:hover,
.kwt-kb-filter:focus{
  background:var(--kwt-white) !important;
  border-color:var(--kwt-red) !important;
  color:var(--kwt-red) !important;
}
.kwt-kb-filter.is-active{
  background:var(--kwt-red) !important;
  border-color:var(--kwt-red) !important;
  color:#fff !important;
}
.kwt-kb-filter.is-active:hover,
.kwt-kb-filter.is-active:focus{
  background:var(--kwt-red-dark) !important;
  border-color:var(--kwt-red-dark) !important;
  color:#fff !important;
}
.kwt-kb-grid{ margin-bottom:0; }
.kwt-kb-empty{
  color:var(--kwt-muted);
  font-size:15px;
  padding:32px 0;
  text-align:center;
}

/* ==========================================================================
   5. Okruszki (breadcrumbs)
   ========================================================================== */
.kwt-breadcrumbs{
  font-size:13px;
  color:var(--kwt-muted);
  margin-bottom:12px;
}
.kwt-breadcrumbs a{ color:var(--kwt-muted); text-decoration:none; }
.kwt-breadcrumbs a:hover{ color:var(--kwt-red); }
.kwt-breadcrumbs .sep{ margin:0 6px; color:#B9BEC6; }

/* ==========================================================================
   6. Wpis (single.php)
   ========================================================================== */
.kwt-post-header{
  background:var(--kwt-ink);
  color:#fff;
  padding:44px 5% 90px;
}
.kwt-post-header__cat{
  display:inline-block;
  background:rgba(255,255,255,0.1);
  color:#FF8A97;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.4px;
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:16px;
  text-decoration:none;
}
.kwt-post-header h1{ color:#fff; font-size:clamp(26px,3.4vw,38px); line-height:1.2; margin:0 0 16px; max-width:960px; }
.kwt-post-header__meta{ color:#B9BEC6; font-size:13px; display:flex; gap:16px; flex-wrap:wrap; }

.kwt-post-wrap{ max-width:960px; margin:-56px auto 0; padding:0 5% 64px; position:relative; }
/* Gdy jest spis treści, poszerzamy zewnętrzny kontener, żeby spis treści
   mieścił się OBOK głównej, 960-pikselowej kolumny z treścią (zamiast
   ściskać tekst, dzieląc te same 960px na pół). Sama kolumna z treścią
   (.ast-container w środku) zostaje przy max-width:960px bez zmian. */
.kwt-post-wrap--with-toc{ max-width:1300px; }
.kwt-post-shell{ display:block; }
.kwt-post-wrap--with-toc .kwt-post-shell{
  display:grid;
  grid-template-columns:260px minmax(0,960px);
  gap:40px;
  justify-content:center;
}
/* Poniżej 1300px spis treści i treść stają się jedną kolumną. Celowo NIE
   robimy tego przez grid-template-columns:1fr - w praktyce (na żywej
   stronie, w realnej przeglądarce) taki jednokolumnowy grid potrafi
   "rozdmuchać" drugi element (kolumnę z treścią) do jego naturalnej,
   znacznie szerszej wielkości mimo justify-items/justify-self:stretch,
   co przewijało całą stronę w bok na telefonie. display:block usuwa
   grid na tym breakpoincie - dzieci układają się jedna pod drugą na
   100% szerokości, bez żadnej dwuznaczności w rozciąganiu. */
@media (max-width:1300px){
  .kwt-post-wrap--with-toc .kwt-post-shell{ display:block; }
  .kwt-post-wrap--with-toc .kwt-toc{ margin-bottom:32px; }
  .kwt-toc__inner{ position:static; }
}
.kwt-post-thumb{
  border-radius:var(--kwt-radius-lg);
  overflow:hidden;
  box-shadow:0 24px 50px rgba(0,0,0,0.16);
  margin-bottom:36px;
  background:var(--kwt-gray-mid);
}
.kwt-post-thumb img{ display:block; width:100%; height:auto; }

/* Spis treści - patrz .kwt-post-wrap--with-toc / .kwt-post-shell wyżej
   (obok "3d. Nagłówek posta") dla samego układu kolumn. Poniżej tylko
   wygląd samego panelu. */
.kwt-toc__inner{
  position:sticky;
  top:24px;
  background:#fff;
  border:1px solid var(--kwt-border);
  border-radius:var(--kwt-radius-md);
  padding:20px 20px 16px;
}
/* !important poniżej: bez tego motyw Astra podświetla ten przycisk (i inne
   "gołe" <button> bez własnego stanu hover/focus) swoim globalnym kolorem
   na dotknięcie/kliknięcie - na telefonie (gdzie nie ma hover, tylko stan
   po dotyku) wyglądało to jak "zapalanie się" przycisku na czerwono. */
.kwt-toc__toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  background:none !important;
  border:none !important;
  padding:0 0 14px;
  margin:0 0 14px;
  border-bottom:2px solid var(--kwt-red);
  font-family:var(--kwt-font-head);
  font-weight:800;
  font-size:12.5px;
  letter-spacing:0.4px;
  text-transform:uppercase;
  color:var(--kwt-ink) !important;
  cursor:pointer;
  box-shadow:none !important;
  outline:none !important;
}
.kwt-toc__toggle:hover,
.kwt-toc__toggle:focus,
.kwt-toc__toggle:active{
  background:none !important;
  color:var(--kwt-ink) !important;
  border:none !important;
  border-bottom:2px solid var(--kwt-red) !important;
  box-shadow:none !important;
  outline:none !important;
}
.kwt-toc__chevron{ width:14px; height:14px; flex-shrink:0; transition:transform .2s; }
.kwt-toc.is-collapsed .kwt-toc__chevron{ transform:rotate(180deg); }
.kwt-toc.is-collapsed .kwt-toc__list{ display:none; }
.kwt-toc__list{
  list-style:none;
  counter-reset:kwt-toc;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:11px;
  max-height:60vh;
  overflow-y:auto;
}
.kwt-toc__list li{ counter-increment:kwt-toc; display:flex; gap:7px; }
.kwt-toc__list li::before{
  content:counter(kwt-toc)".";
  color:var(--kwt-muted);
  font-size:13px;
  font-weight:600;
  flex-shrink:0;
}
.kwt-toc__list a{
  font-size:13.5px;
  line-height:1.5;
  color:var(--kwt-text);
  text-decoration:none;
}
.kwt-toc__list a:hover{ color:var(--kwt-red); }
.kwt-toc__list li.is-active a{ color:var(--kwt-red); font-weight:700; }

.kwt-entry-content{ font-size:17px; line-height:1.75; color:var(--kwt-text); }
.kwt-entry-content h2{ font-size:24px; margin:40px 0 16px; }
.kwt-entry-content h3{ font-size:19px; margin:32px 0 12px; }
.kwt-entry-content p{ margin:0 0 20px; }
.kwt-entry-content ul,.kwt-entry-content ol{ margin:0 0 20px; padding-left:22px; }
.kwt-entry-content li{ margin-bottom:8px; }
.kwt-entry-content a{ text-decoration:underline; }
.kwt-entry-content blockquote{
  border-left:3px solid var(--kwt-red);
  margin:24px 0; padding:4px 20px;
  color:var(--kwt-muted); font-style:italic;
}
/* Tabele w treści wpisu bywają szerokie (wiele kolumn, długie opisy) i bez
   tego by przy wąskim ekranie przewijały w bok CAŁĄ stronę. JS (kwt.js)
   owija każdą tabelę w .kwt-table-wrap - ten sam sprawdzony wzorzec co przy
   tabeli wydarzeń (kwt-events__table-wrap): przewija się sama tabela,
   układ kolumn zostaje nienaruszony. */
.kwt-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:24px 0;
  border-radius:var(--kwt-radius-sm);
}
.kwt-entry-content table{
  width:100%;
  min-width:480px;
  border-collapse:collapse;
  font-size:15px;
  margin:0;
}
.kwt-entry-content table th,
.kwt-entry-content table td{
  border:1px solid var(--kwt-border);
  padding:10px 14px;
  text-align:left;
}
.kwt-entry-content table th{
  background:var(--kwt-gray-light);
  font-weight:600;
  color:var(--kwt-ink);
}

/* Skrzynka autora */
.kwt-author-box{
  display:flex;
  gap:16px;
  align-items:flex-start;
  background:var(--kwt-gray-light);
  border:1px solid var(--kwt-border);
  border-radius:var(--kwt-radius-md);
  padding:20px 22px;
  margin:36px 0;
}
.kwt-author-box__avatar{ flex-shrink:0; }
.kwt-author-box__avatar img{
  width:56px;
  height:56px;
  border-radius:50%;
  display:block;
}
.kwt-author-box__name{
  font-family:var(--kwt-font-head);
  font-weight:700;
  color:var(--kwt-ink);
  margin:0 0 6px;
  font-size:15px;
}
.kwt-author-box__bio{
  font-size:14px;
  line-height:1.6;
  color:var(--kwt-muted);
  margin:0 0 10px;
}
.kwt-author-box__bio:last-child{ margin-bottom:0; }
@media (max-width:480px){
  .kwt-author-box{ padding:16px; gap:12px; }
  .kwt-author-box__avatar img{ width:44px; height:44px; }
}

/* Wariant rozbudowany - strona /o-nas */
.kwt-author-box--large{
  background:#fff;
  padding:28px 30px;
  gap:22px;
  box-shadow:0 1px 3px rgba(20,22,26,0.06);
}
.kwt-author-box--large .kwt-author-box__avatar img{ width:96px; height:96px; }
.kwt-author-box--large .kwt-author-box__name{ font-size:19px; margin-bottom:2px; }
.kwt-author-box--large .kwt-author-box__role{
  font-size:13px;
  font-weight:600;
  color:var(--kwt-red);
  text-transform:uppercase;
  letter-spacing:0.3px;
  margin:0 0 12px;
}
.kwt-author-box--large .kwt-author-box__bio{ font-size:15px; }
@media (max-width:480px){
  .kwt-author-box--large{ padding:18px; gap:14px; }
  .kwt-author-box--large .kwt-author-box__avatar img{ width:64px; height:64px; }
}

.kwt-tags{ margin:32px 0; display:flex; flex-wrap:wrap; gap:8px; }
.kwt-tags a{
  background:var(--kwt-gray-light);
  border:1px solid var(--kwt-border);
  color:var(--kwt-muted) !important;
  padding:6px 14px;
  border-radius:999px;
  font-size:13px;
  text-decoration:none !important;
}
.kwt-tags a:hover{ border-color:var(--kwt-red); color:var(--kwt-red) !important; }

/* FAQ */
.kwt-faq{ margin:40px 0; }
.kwt-faq h2{ font-size:22px; margin:0 0 18px; }
.kwt-faq--home{ max-width:820px; margin:0 auto; }
.kwt-faq__item{
  background:var(--kwt-white);
  border:1px solid var(--kwt-border);
  border-radius:var(--kwt-radius-md);
  margin-bottom:12px;
  overflow:hidden;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.kwt-faq__item:last-child{ margin-bottom:0; }
.kwt-faq__item.is-open{
  border-color:var(--kwt-red);
  box-shadow:0 10px 26px rgba(31,35,40,0.07);
}
/* !important konieczne, bo motyw Astra narzuca globalny (żółty) styl przycisków
   na hover/focus - bez tego "reset" tutaj by nie wystarczył. */
.kwt-faq__q{
  width:100% !important;
  text-align:left !important;
  background:var(--kwt-white) !important;
  border:none !important;
  box-shadow:none !important;
  outline:none !important;
  margin:0 !important;
  padding:18px 20px !important;
  font-size:15.5px !important;
  font-weight:700 !important;
  color:var(--kwt-ink) !important;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  font-family:var(--kwt-font-body);
  line-height:1.4;
}
.kwt-faq__q:hover,
.kwt-faq__q:focus,
.kwt-faq__q:active{
  background:var(--kwt-white) !important;
  color:var(--kwt-ink) !important;
  border:none !important;
  box-shadow:none !important;
  outline:none !important;
}
.kwt-faq__item.is-open .kwt-faq__q,
.kwt-faq__item.is-open .kwt-faq__q:hover,
.kwt-faq__item.is-open .kwt-faq__q:focus{ color:var(--kwt-red) !important; }
.kwt-faq__q-text{ flex:1; }
.kwt-faq__chevron{ width:18px; height:18px; flex-shrink:0; color:var(--kwt-red); transition:transform .2s ease; }
.kwt-faq__item.is-open .kwt-faq__chevron{ transform:rotate(180deg); }
.kwt-faq__a{ display:none; padding:0 20px 20px; color:var(--kwt-text); line-height:1.65; }
.kwt-faq__item.is-open .kwt-faq__a{ display:block; }
.kwt-faq__a a{ color:var(--kwt-red); font-weight:600; }

/* Related */
.kwt-related{ margin-top:56px; border-top:1px solid var(--kwt-border); padding-top:40px; }
.kwt-related h2{ font-size:22px; margin:0 0 22px; }

/* Sidebar - widget Kategorie */
.widget_categories ul{ list-style:none; margin:0; padding:0; }
.widget_categories li{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0; border-bottom:1px solid var(--kwt-border); font-size:14px;
}
.widget_categories li a{ color:var(--kwt-text); text-decoration:none; }
.widget_categories li a:hover{ color:var(--kwt-red); }
.widget_categories .kwt-current > a{ color:var(--kwt-red); font-weight:600; }

/* ==========================================================================
   6b. Komentarze (comments.php)
   ========================================================================== */
.kwt-comments{
  margin-top:56px;
  border-top:1px solid var(--kwt-border);
  padding-top:40px;
}
.kwt-comments__title{ font-size:22px; margin:0 0 24px; }
.kwt-comments__closed{
  background:var(--kwt-gray-light);
  border:1px solid var(--kwt-border);
  border-radius:var(--kwt-radius-sm);
  padding:14px 18px;
  color:var(--kwt-muted);
  font-size:14px;
}

.kwt-comments__list,
.kwt-comments__list ul.children{
  list-style:none;
  margin:0;
  padding:0;
}
.kwt-comments__list ul.children{
  margin-left:24px;
  padding-left:24px;
  border-left:2px solid var(--kwt-border);
}

.kwt-comment{ margin:0 0 22px; }
.kwt-comment__inner{
  display:flex;
  gap:14px;
  background:var(--kwt-gray-light);
  border:1px solid var(--kwt-border);
  border-radius:var(--kwt-radius-md);
  padding:18px 20px;
}
.kwt-comment.trackback .kwt-comment__inner,
.kwt-comment.pingback .kwt-comment__inner{ background:var(--kwt-white); }
.kwt-comment__avatar{ flex-shrink:0; }
.kwt-comment__avatar img{
  border-radius:50%;
  display:block;
  width:48px;
  height:48px;
}
.kwt-comment__body{ flex:1; min-width:0; }
.kwt-comment__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px;
  margin-bottom:6px;
}
.kwt-comment__author{
  font-family:var(--kwt-font-head);
  font-weight:600;
  color:var(--kwt-ink);
  font-size:14px;
}
.kwt-comment__author a{ color:var(--kwt-ink); text-decoration:none; }
.kwt-comment__date{ font-size:12px; }
.kwt-comment__date a{ color:var(--kwt-muted); text-decoration:none; }
.kwt-comment__date a:hover{ color:var(--kwt-red); }
.kwt-comment__pending{
  color:var(--kwt-red);
  font-size:13px;
  font-style:italic;
  margin:0 0 8px;
}
.kwt-comment__text{ font-size:15px; line-height:1.65; color:var(--kwt-text); }
.kwt-comment__text p:last-child{ margin-bottom:0; }
.kwt-comment__reply{ margin-top:10px; }
.kwt-comment__reply a{
  font-size:13px;
  font-weight:600;
  color:var(--kwt-red);
  text-decoration:none;
}
.kwt-comment__reply a:hover{ color:var(--kwt-red-dark); }

/* Formularz komentarza - karta w stylu "Dodaj swój komentarz" */
.kwt-sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.comment-respond{
  background:var(--kwt-white);
  border:1px solid var(--kwt-border);
  border-radius:var(--kwt-radius-lg);
  padding:32px;
  margin-top:40px;
  box-shadow:0 1px 2px rgba(31,35,40,0.04);
}
#respond .comment-reply-title{
  font-family:var(--kwt-font-head);
  font-size:20px;
  font-weight:700;
  color:var(--kwt-ink);
  margin:0 0 20px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
}
#respond .comment-reply-title small{ margin-left:12px; }
#respond .comment-reply-title small a{
  font-size:13px;
  font-weight:400;
  color:var(--kwt-muted);
  text-decoration:underline;
}
.kwt-comment-form{ margin:0; padding:0; }
.kwt-comment-form p{ margin:0 0 16px; }
.kwt-comment-form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.kwt-comment-form-row p{ margin:0; }
.kwt-comment-form input[type="text"],
.kwt-comment-form input[type="email"],
.kwt-comment-form input[type="url"],
.kwt-comment-form textarea{
  width:100%;
  border:1px solid var(--kwt-border);
  border-radius:var(--kwt-radius-sm);
  padding:14px 16px;
  font-family:var(--kwt-font-body);
  font-size:14px;
  color:var(--kwt-text);
  background:var(--kwt-white);
}
.kwt-comment-form input::placeholder,
.kwt-comment-form textarea::placeholder{ color:var(--kwt-muted); opacity:1; }
.kwt-comment-form input:focus,
.kwt-comment-form textarea:focus{
  outline:none;
  border-color:var(--kwt-red);
  box-shadow:0 0 0 3px var(--kwt-red-tint);
}
.kwt-comment-form textarea{ resize:vertical; }
.kwt-comment-form .comment-form-cookies-consent{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:13px;
  color:var(--kwt-muted);
}
.kwt-comment-form .comment-form-cookies-consent label{ margin:0; font-weight:400; }
.kwt-comment-form .form-submit{ margin:20px 0 0; }
/* !important celowo: część instalacji Astry narzuca własny, globalny kolor
   przycisków (z Personalizacji -> Przyciski) na natywne input[type=submit] -
   to zabezpiecza, żeby przycisk komentarza zawsze był czerwony, a nie żółty/
   inny z globalnych ustawień motywu nadrzędnego. */
.kwt-comment-form input[type="submit"].kwt-btn-primary,
.kwt-comment-form .kwt-btn-primary{
  background:var(--kwt-red) !important;
  background-image:none !important;
  color:#fff !important;
  border:none !important;
  border-radius:10px !important;
  padding:14px 30px !important;
  font-weight:700 !important;
  font-family:var(--kwt-font-body) !important;
  font-size:15px !important;
  line-height:normal !important;
  cursor:pointer !important;
  box-shadow:none !important;
  text-shadow:none !important;
  -webkit-appearance:none;
  appearance:none;
}
.kwt-comment-form input[type="submit"].kwt-btn-primary:hover,
.kwt-comment-form .kwt-btn-primary:hover{
  background:var(--kwt-red-dark) !important;
  color:#fff !important;
}
.kwt-comment-form .logged-in-as{
  font-size:13px;
  color:var(--kwt-muted);
  margin:0 0 20px;
  padding-bottom:16px;
  border-bottom:1px solid var(--kwt-border);
}
.kwt-comment-form .logged-in-as a{ color:var(--kwt-red); text-decoration:underline; }
.kwt-comment-form .logged-in-as a:hover{ color:var(--kwt-red-dark); }

@media (max-width:600px){
  .kwt-comment__inner{ padding:14px; gap:10px; }
  .kwt-comment__avatar img{ width:36px; height:36px; }
  .kwt-comments__list ul.children{ margin-left:14px; padding-left:14px; }
  .comment-respond{ padding:22px; }
  .kwt-comment-form-row{ grid-template-columns:1fr; }
}

/* ==========================================================================
   7. Stopka
   ========================================================================== */
.kwt-footer{
  background:var(--kwt-ink);
  color:#B9BEC6;
  padding:44px 5%;
  text-align:center;
  font-size:13px;
}
.kwt-footer img{
  height:32px; margin:0 auto 14px; display:block;
  filter:brightness(0) invert(1);
}
.kwt-footer a{ color:#B9BEC6; }
.kwt-footer a:hover{ color:#fff; }
