/* ═══════════════════════════════════════════════════════════════
   Technik w Terenie – faq.css
   Style specyficzne dla podstrony /faq
   Bazuje na tokenach z style.css (HeroUI v3 design language)
   Importuje: style.css (musi być załadowany przed faq.css)
═══════════════════════════════════════════════════════════════ */

/* ─── ALIASY TOKENÓW ─────────────────────────────────────────
   faq.css powstał na bazie starszego systemu zmiennych CSS.
   Nowy style.css używa innych nazw tokenów (--c-brand zamiast
   --accent itp.). Poniższy blok definiuje aliasy wyłącznie
   w kontekście strony FAQ – nie wpływa na style.css ani index.html.
─────────────────────────────────────────────────────────────── */
:root {
  /* Kolory tła */
  --background:           var(--c-white);
  --background-secondary: var(--c-gray-50);
  --surface:              var(--c-white);

  /* Krawędzie */
  --border:               var(--c-gray-200);

  /* Tekst */
  --foreground:           var(--c-dark);
  --foreground-secondary: var(--c-gray-700);
  --foreground-muted:     var(--c-gray-400);

  /* Akcent (brand) */
  --accent:               var(--c-brand);
  --accent-dark:          var(--c-brand-dark);
  --accent-muted:         var(--c-brand-mid);
  --accent-foreground:    var(--c-white);
  --accent-subtle:        var(--c-brand-light);
  --accent-subtle-border: var(--c-brand-mid);

  /* Ciemne tło (hero, sidebar CTA) */
  --dark-bg:              var(--c-dark);
  --dark-foreground:      var(--c-white);

  /* Cienie */
  --shadow-accent:        var(--shadow-brand);

  /* Typografia – skala rozmiarów */
  --text-xs:   .75rem;    /*  12px */
  --text-sm:   .875rem;   /*  14px */
  --text-base: 1rem;      /*  16px */
  --text-lg:   1.125rem;  /*  18px */
  --text-xl:   1.25rem;   /*  20px */

  /* Odstępy – skala spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Promienie zaokrągleń – uzupełnienie brakujących wariantów.
     Uwaga: style.css definiuje --radius-sm i --radius-lg bezpośrednio,
     więc --radius-md i --radius-xl musimy zdefiniować jako wartości. */
  --radius-md:   14px;   /* = --radius z style.css */
  --radius-xl:   20px;   /* = --radius-lg z style.css */
  --radius-full: 9999px; /* = --radius-pill z style.css */

  /* Przejście – szybki wariant */
  --transition-fast: .15s cubic-bezier(.4,0,.2,1);
}

/* ─── BREADCRUMB ─── */
.breadcrumb-nav {
  background: var(--background-secondary);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  font-size: var(--text-xs);
  color: var(--foreground-muted);
}

.breadcrumb a {
  color: var(--foreground-secondary);
  font-weight: 600;
  transition: color var(--transition-fast);
}
.breadcrumb a:hover { color: var(--accent-dark); }

.breadcrumb li:last-child {
  color: var(--foreground);
  font-weight: 700;
}

.breadcrumb-sep {
  color: var(--foreground-muted);
  user-select: none;
}

/* ─── PAGE HERO ─── */
.page-hero {
  background: var(--dark-bg);
  padding: 64px 0 var(--space-10);
  position: relative;
  overflow: hidden;
}

/* Dot pattern – spójny z hero na stronie głównej */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0);
  background-size: 32px 32px;
  pointer-events: none;
}

/* Accent glow top */
.page-hero::after {
  content: '';
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(44,197,144,.1), transparent 70%);
  pointer-events: none;
}

.page-hero .container { position: relative; z-index: 1; text-align: center; }

.page-hero .section-tag {
  /* Na ciemnym tle – jaśniejsza wersja tagu */
  color: rgba(44,197,144,.8);
  background: rgba(44,197,144,.1);
  border-color: rgba(44,197,144,.2);
}

.page-hero h1 {
  color: var(--dark-foreground);
  font-weight: 900;
  letter-spacing: -.02em;
  margin-bottom: var(--space-4);
}

.page-hero-desc {
  font-size: var(--text-lg);
  color: rgba(250,250,250,.6);
  max-width: 580px;
  margin: 0 auto var(--space-10);
  line-height: 1.75;
}

.page-hero-desc a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
  transition: color var(--transition-fast);
}
.page-hero-desc a:hover { color: var(--accent-muted); }

/* ─── FAQ FILTERS (HeroUI Tabs pattern) ─── */
.faq-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.faq-filter {
  font-family: var(--font);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: rgba(250,250,250,.55);
  cursor: pointer;
  transition: all var(--transition);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.faq-filter:hover {
  border-color: rgba(44,197,144,.4);
  color: rgba(250,250,250,.85);
  background: rgba(44,197,144,.1);
}

.faq-filter.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-foreground);
  box-shadow: var(--shadow-accent);
}

/* ─── FAQ PAGE SECTION ─── */
.faq-page-section {
  padding: var(--space-16) 0 var(--space-20);
  background: var(--background);
}

/* ─── FAQ PAGE LAYOUT: main + sidebar ─── */
.faq-page-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-16);
  align-items: start;
}

/* ─── FAQ CATEGORIES ─── */
.faq-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.faq-category {
  transition: opacity var(--transition);
}

/* Filtrowanie – kategorie ukryte przez JS */
.faq-category.is-hidden {
  display: none;
}

/* HeroUI Divider + heading pattern */
.faq-category-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--foreground);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--border);
  position: relative;
}

/* Accent underline dla aktywnej kategorii */
.faq-category-title::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--accent);
  border-radius: var(--radius-full);
}

.faq-category-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--accent-subtle);
  border: 1px solid var(--accent-subtle-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}

/* FAQ list resets (dziedziczy z style.css .faq-list) */
.faq-category .faq-list { max-width: none; }

/* ─── FAQ ANSWER – rozbudowana treść ─── */
/* Rozszerzone style dla bogatszego HTML w odpowiedziach */
.faq-answer-inner p {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--foreground-secondary);
  line-height: 1.75;
}
.faq-answer-inner p:last-child { margin-bottom: 0; }

.faq-answer-inner a {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  transition: color var(--transition-fast);
}
.faq-answer-inner a:hover { color: var(--accent); }

/* HeroUI List pattern */
.faq-list-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: var(--space-2) 0 var(--space-3);
  padding-left: var(--space-2);
}

.faq-list-items li {
  font-size: var(--text-sm);
  color: var(--foreground-secondary);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  line-height: 1.6;
}

.faq-list-items li::before {
  content: '·';
  color: var(--accent);
  font-weight: 900;
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}

/* HeroUI Ordered List */
.faq-ordered-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-3) 0;
  counter-reset: faq-counter;
}

.faq-ordered-list li {
  font-size: var(--text-sm);
  color: var(--foreground-secondary);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  line-height: 1.6;
  counter-increment: faq-counter;
}

.faq-ordered-list li::before {
  content: counter(faq-counter);
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--accent-subtle);
  border: 1px solid var(--accent-subtle-border);
  color: var(--accent-dark);
  font-size: .72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* HeroUI Alert/Callout pattern */
.faq-highlight {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--accent-subtle);
  border: 1px solid var(--accent-subtle-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: var(--text-sm);
  color: var(--accent-dark);
  font-weight: 600;
  line-height: 1.6;
  margin-top: var(--space-4);
}

.faq-highlight span:first-child {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

/* HeroUI Steps pattern */
.faq-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.faq-step {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  background: var(--background-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.faq-step:hover {
  border-color: var(--accent-subtle-border);
  background: var(--accent-subtle);
}

.faq-step-num {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-foreground);
  font-size: .78rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.faq-step div { flex: 1; }

.faq-step strong {
  display: block;
  font-weight: 800;
  font-size: var(--text-sm);
  color: var(--foreground);
  margin-bottom: 3px;
}

.faq-step span {
  font-size: var(--text-xs);
  color: var(--foreground-secondary);
  display: block;
  line-height: 1.5;
}

/* ─── SIDEBAR ─── */
.faq-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + var(--bar-h) + var(--space-6));
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* HeroUI Card pattern – sidebar blocks */
.sidebar-cta,
.sidebar-stats,
.sidebar-recall,
.sidebar-links {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

/* CTA box */
.sidebar-cta {
  background: var(--dark-bg);
  border-color: rgba(44,197,144,.25);
  text-align: center;
}

.sidebar-cta-tag {
  font-size: 2rem;
  display: block;
  margin-bottom: var(--space-3);
  line-height: 1;
}

.sidebar-cta h3 {
  color: var(--dark-foreground);
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.sidebar-cta p {
  font-size: var(--text-sm);
  color: rgba(250,250,250,.55);
  margin-bottom: var(--space-5);
  line-height: 1.6;
}

/* Stats */
.sidebar-stats h3 {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--foreground);
  margin-bottom: var(--space-4);
  letter-spacing: -.01em;
}

.sidebar-stats ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sidebar-stats li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  gap: var(--space-2);
}
.sidebar-stats li:last-child { border-bottom: none; }

.sidebar-stats strong {
  font-weight: 900;
  font-size: var(--text-lg);
  color: var(--accent-dark);
  flex-shrink: 0;
}

.sidebar-stats span {
  font-size: var(--text-xs);
  color: var(--foreground-secondary);
  text-align: right;
  line-height: 1.3;
}

/* Recall form sidebar */
.sidebar-recall h3 {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--foreground);
  margin-bottom: var(--space-2);
}

.sidebar-recall > p {
  font-size: var(--text-xs);
  color: var(--foreground-secondary);
  margin-bottom: var(--space-4);
  line-height: 1.5;
}

/* Recall form dziedziczy .recall-form z style.css */
.sidebar-recall .recall-form input[type="tel"] {
  /* Nadpisz – na jasnym tle */
  border: 1.5px solid var(--border);
  background: var(--background-secondary);
  color: var(--foreground);
  border-radius: var(--radius-md);
}
.sidebar-recall .recall-form input[type="tel"]::placeholder {
  color: var(--foreground-muted);
  opacity: 1;
}
.sidebar-recall .recall-form input[type="tel"]:focus {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(44,197,144,.15);
}

/* Quick links */
.sidebar-links h3 {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--foreground);
  margin-bottom: var(--space-4);
}

.sidebar-links ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sidebar-links ul a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--foreground-secondary);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  font-weight: 600;
}

.sidebar-links ul a:hover {
  color: var(--accent-dark);
  background: var(--accent-subtle);
}

.sidebar-links ul a::before {
  content: '→';
  color: var(--accent);
  font-weight: 700;
  font-size: .8rem;
  opacity: 0;
  transform: translateX(-4px);
  transition: all var(--transition-fast);
}

.sidebar-links ul a:hover::before {
  opacity: 1;
  transform: translateX(0);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .faq-page-layout {
    grid-template-columns: 1fr 280px;
    gap: var(--space-10);
  }
}

@media (max-width: 860px) {
  .faq-page-layout {
    grid-template-columns: 1fr;
  }

  .faq-sidebar {
    position: static;
    top: auto;
    /* Na mobile sidebar idzie pod main */
    order: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

  .sidebar-cta { grid-column: 1 / -1; }

  .page-hero { padding: 48px 0 var(--space-8); }

  .faq-category-title { font-size: var(--text-xl); }
}

@media (max-width: 600px) {
  .faq-sidebar { grid-template-columns: 1fr; }

  .faq-filters { gap: var(--space-1); }
  .faq-filter { padding: 7px 14px; font-size: .72rem; }

  .page-hero { padding: var(--space-8) 0 var(--space-6); }
  .page-hero h1 { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  .page-hero-desc { font-size: var(--text-base); }

  .faq-page-section { padding: var(--space-10) 0 var(--space-16); }

  .sidebar-cta,
  .sidebar-stats,
  .sidebar-recall,
  .sidebar-links { border-radius: var(--radius-lg); }
}