/* =========================================================
   ReflectMe - Centrum Pomocy (dodatkowy arkusz, addytywny)
   Reużywa tokenów i komponentów z style.css + home-refined.css.
   Dodaje tylko to, czego landing jeszcze nie ma.
   ========================================================= */

:root{
  --pomoc-ink:#13233f;
  --pomoc-accent:#2563eb;     /* niebieski akcent (== --accent) */
  --pomoc-violet:#8b5cf6;
  --pomoc-teal:#008384;       /* akcent „bezpieczeństwo" z FAQ */
  --pomoc-teal-line:#006f70;
  --pomoc-soft:#f7f9fc;
  --pomoc-line:#e6eaf2;
  --pomoc-muted:#475569;
  --pomoc-radius:18px;
  --pomoc-radius-lg:26px;
  --pomoc-shadow-soft:0 10px 22px rgba(15,23,42,.06);
  --pomoc-shadow:0 14px 30px rgba(15,23,42,.08);
}

.pomoc-page main{ display:block; }
.pomoc-hidden{ display:none !important; }

/* Mniejszy odstęp między hero a pierwszą sekcją na podstronach Pomocy.
   Landing globalnie wymusza .page-hero + .section { padding-top: clamp(42px,5vw,70px) }
   - przebijamy max specyficznością + !important (ten sam wzorzec co contact.css/about). */
html body.pomoc-page .page-hero{ padding-bottom: 4px !important; }
html body.pomoc-page .page-hero + .section{ padding-top: clamp(16px, 1.8vw, 28px) !important; }

/* ---------- HERO: pole wyszukiwania ---------- */
.pomoc-search{ position:relative; max-width:560px; margin:24px 0 2px; }
.pomoc-search svg{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; color:#94a3b8; pointer-events:none;
}
.pomoc-search input{
  width:100%; font:inherit; font-size:16px; color:var(--text);
  padding:15px 16px 15px 46px; border:1px solid var(--pomoc-line);
  border-radius:14px; background:#fff; box-shadow:var(--pomoc-shadow-soft); outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.pomoc-search input::placeholder{ color:#94a3b8; }
.pomoc-search input:focus{
  border-color:var(--pomoc-accent); box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

/* ---------- 4 KARTY POMOCY ---------- */
.pomoc-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:4px;
}
.pomoc-card{
  display:flex; flex-direction:column; padding:26px; background:#fff;
  border:1px solid var(--pomoc-line); border-radius:var(--pomoc-radius-lg);
  box-shadow:var(--pomoc-shadow-soft); color:inherit; text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pomoc-card:hover{
  transform:translateY(-3px); box-shadow:var(--pomoc-shadow);
  border-color:rgba(37,99,235,.28);
}
.pomoc-card:focus-visible{ outline:3px solid rgba(37,99,235,.4); outline-offset:3px; }
.pomoc-card__icon{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  margin-bottom:16px; color:var(--pomoc-accent);
  background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(139,92,246,.12));
}
.pomoc-card__icon svg{ width:24px; height:24px; }
.pomoc-card h3{
  font-size:19px; font-weight:700; letter-spacing:-.02em; color:var(--pomoc-ink); margin:0;
}
.pomoc-card__desc{ color:var(--pomoc-muted); font-size:15px; margin:8px 0 16px; }
.pomoc-card__list{ list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:9px; }
.pomoc-card__list li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:#334155; }
.pomoc-card__list li svg{ width:16px; height:16px; color:var(--pomoc-teal); flex:0 0 auto; margin-top:3px; }
.pomoc-card__cta{
  margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
  font-weight:650; font-size:14.5px; color:var(--pomoc-accent);
}
.pomoc-card__cta svg{ width:16px; height:16px; transition:transform .18s ease; }
.pomoc-card:hover .pomoc-card__cta svg{ transform:translateX(3px); }

/* ---------- BRAK WYNIKÓW (wyszukiwarka) ---------- */
.pomoc-noresults{
  display:none; margin-top:18px; padding:22px 24px; border:1px dashed var(--pomoc-line);
  border-radius:16px; color:var(--pomoc-muted); max-width:560px; font-size:15px;
}
.pomoc-noresults.is-shown{ display:block; }
.pomoc-noresults a{ color:var(--pomoc-accent); font-weight:600; }

/* ---------- BLOK „NIE ZNALAZŁEŚ ODPOWIEDZI?" ---------- */
.pomoc-cta__box{
  border:1px solid var(--pomoc-line); border-radius:var(--pomoc-radius-lg);
  padding:clamp(28px,4vw,44px); box-shadow:var(--pomoc-shadow-soft);
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px;
  background:
    radial-gradient(700px 200px at 100% 0%, rgba(139,92,246,.07), transparent 60%),
    linear-gradient(180deg,#fff,var(--pomoc-soft));
}
.pomoc-cta__box h2{ font-size:clamp(20px,2.6vw,25px); margin:0; color:var(--pomoc-ink); letter-spacing:-.02em; }
.pomoc-cta__box p{ color:var(--pomoc-muted); margin:6px 0 0; max-width:430px; }
.pomoc-cta__actions{ margin-left:auto; display:flex; gap:12px; flex-wrap:wrap; }

/* =========================================================
   PODSTRONY POMOCY
   ========================================================= */

/* ---------- Breadcrumb + powrót ---------- */
.pomoc-breadcrumb{
  text-align:left;
  font-size:13.5px; color:var(--pomoc-muted);
  margin-bottom:14px;
}
.pomoc-breadcrumb a{ color:var(--pomoc-muted); }
.pomoc-breadcrumb a:hover{ color:var(--pomoc-accent); }
.pomoc-breadcrumb svg{ width:14px; height:14px; opacity:.6; }
.pomoc-breadcrumb .pomoc-breadcrumb__here{ color:var(--pomoc-ink); font-weight:600; }

.pomoc-back{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14.5px;
  color:var(--pomoc-accent); margin-top:6px;
}
.pomoc-back svg{ width:16px; height:16px; transition:transform .15s ease; }
.pomoc-back:hover svg{ transform:translateX(-3px); }

/* ---------- Sekcja treści na podstronie ---------- */
.pomoc-article{ padding-top:clamp(8px,2vw,20px); }
.pomoc-block{ margin:0 auto clamp(34px,5vw,52px); max-width:780px; }
.pomoc-block > h2{
  font-size:clamp(21px,2.8vw,26px); font-weight:750; letter-spacing:-.02em;
  color:var(--pomoc-ink); margin:0 0 6px;
}
.pomoc-block > .pomoc-block__lead{ color:var(--pomoc-muted); margin:0 0 18px; font-size:15.5px; }
.pomoc-block p{ color:#334155; }

/* ---------- Kroki (numerowane) ---------- */
.pomoc-steps{ list-style:none; counter-reset:step; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.pomoc-steps li{
  position:relative; counter-increment:step; padding:16px 18px 16px 60px;
  border:1px solid var(--pomoc-line); border-radius:16px; background:#fff;
  box-shadow:var(--pomoc-shadow-soft);
}
.pomoc-steps li::before{
  content:counter(step); position:absolute; left:16px; top:16px;
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  font-size:14px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--pomoc-accent),var(--pomoc-violet));
}
.pomoc-steps li strong{ display:block; color:var(--pomoc-ink); font-size:15.5px; margin-bottom:2px; }
.pomoc-steps li span{ color:var(--pomoc-muted); font-size:14.5px; }

/* ---------- Callout (informacja / ostrzeżenie) ---------- */
.pomoc-callout{
  display:flex; gap:14px; padding:16px 18px; border-radius:16px; margin:18px 0 0;
  background:var(--pomoc-soft); border:1px solid var(--pomoc-line);
}
.pomoc-callout svg{ width:22px; height:22px; flex:0 0 auto; margin-top:1px; color:var(--pomoc-teal); }
.pomoc-callout p{ margin:0; font-size:14.5px; color:#334155; }
.pomoc-callout strong{ color:var(--pomoc-ink); }
.pomoc-callout--shield{ background:var(--faq-open-bg,rgba(0,131,132,.06)); border-color:rgba(0,131,132,.22); }
.pomoc-callout--shield svg{ color:var(--pomoc-teal-line); }
.pomoc-callout--warn{ background:rgba(245,158,11,.07); border-color:rgba(245,158,11,.28); }
.pomoc-callout--warn svg{ color:#b45309; }

/* ---------- Kafelki aplikacji Authenticator ---------- */
.pomoc-apps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:4px;
}
.pomoc-app{
  display:flex; flex-direction:column; gap:6px; padding:18px;
  border:1px solid var(--pomoc-line); border-radius:18px; background:#fff;
  box-shadow:var(--pomoc-shadow-soft); color:inherit; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pomoc-app:hover{ transform:translateY(-2px); box-shadow:var(--pomoc-shadow); border-color:rgba(37,99,235,.26); }
.pomoc-app__logo{
  width:42px; height:42px; border-radius:11px; display:grid; place-items:center; color:#fff;
}
.pomoc-app__logo svg{ width:24px; height:24px; }
.pomoc-app__logo--g{ background:linear-gradient(135deg,#1a73e8,#1557b0); }
.pomoc-app__logo--ms{ background:linear-gradient(135deg,#0a5bd3,#0b3e91); }
.pomoc-app__logo--open{ background:linear-gradient(135deg,#0f9d6b,#0b7a52); }
.pomoc-app__name{ font-weight:700; color:var(--pomoc-ink); font-size:15px; margin-top:6px; }
.pomoc-app__meta{ font-size:12.5px; color:var(--pomoc-muted); }
.pomoc-apps__note{ font-size:13.5px; color:var(--pomoc-muted); margin:14px 0 0; }

/* ---------- Legenda statusów ---------- */
.pomoc-statuses{ display:flex; flex-direction:column; gap:10px; margin:0; padding:0; list-style:none; }
.pomoc-status{
  display:flex; align-items:flex-start; gap:14px; padding:14px 16px;
  border:1px solid var(--pomoc-line); border-radius:14px; background:#fff;
}
.pomoc-status__badge{
  flex:0 0 auto; font-size:12.5px; font-weight:650; padding:4px 11px; border-radius:999px;
  white-space:nowrap; margin-top:1px;
}
.pomoc-status__badge--sent{ background:rgba(37,99,235,.10); color:#1d4ed8; }
.pomoc-status__badge--read{ background:rgba(99,102,241,.12); color:#4338ca; }
.pomoc-status__badge--progress{ background:rgba(234,179,8,.14); color:#a16207; }
.pomoc-status__badge--waiting{ background:rgba(236,72,153,.12); color:#be185d; }
.pomoc-status__badge--closed{ background:rgba(34,197,94,.12); color:#15803d; }
.pomoc-status__text{ font-size:14.5px; color:#334155; }
.pomoc-status__text strong{ color:var(--pomoc-ink); }

/* ---------- Powiązane tematy (dół podstrony) ---------- */
.pomoc-related{ max-width:780px; margin:0 auto; border-top:1px solid var(--pomoc-line); padding-top:28px; }
.pomoc-related h2{ font-size:18px; font-weight:700; color:var(--pomoc-ink); margin:0 0 14px; letter-spacing:-.01em; }
.pomoc-related__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.pomoc-related__link{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px; border:1px solid var(--pomoc-line); border-radius:14px; background:#fff;
  color:var(--pomoc-ink); font-weight:600; font-size:14.5px; text-decoration:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.pomoc-related__link:hover{ border-color:rgba(37,99,235,.3); box-shadow:var(--pomoc-shadow-soft); }
.pomoc-related__link svg{ width:16px; height:16px; color:var(--pomoc-accent); flex:0 0 auto; }

/* =========================================================
   RESPONSYWNOŚĆ
   ========================================================= */
@media (max-width:860px){
  .pomoc-grid{ grid-template-columns:1fr; }
  .pomoc-apps{ grid-template-columns:1fr; }
  .pomoc-related__grid{ grid-template-columns:1fr; }
  .pomoc-cta__actions{ margin-left:0; width:100%; }
  .pomoc-cta__actions .btn{ flex:1; }
}
@media (prefers-reduced-motion:reduce){
  .pomoc-card, .pomoc-app, .pomoc-card__cta svg, .pomoc-back svg{ transition:none !important; }
}