/* ============================================================
   faq.css — strona /faq (akordeon) ORAZ skrócona sekcja FAQ na /.
   Akordeon na <details>/<summary> (bez JS, dostępny, SEO-friendly).
   Render z bazy: api/publish.js (renderFaqAccordion/HomeMini). Tokeny: styles.css.
============================================================ */

/* --- nagłówek strony FAQ --- */
.faq-hero {
  background: var(--color-navy);
  color: var(--color-cream);
  padding: clamp(72px, 12vw, 120px) 0 clamp(40px, 7vw, 60px);
}
.faq-hero .eyebrow { color: var(--color-brass-light); }
.faq-hero h1 { color: var(--color-cream); margin: 8px 0 14px; }
.faq-hero p { color: rgba(245, 239, 228, 0.72); max-width: 620px; margin: 0; line-height: 1.6; }

.faq-section { padding: clamp(40px, 7vw, 72px) 0 clamp(56px, 9vw, 96px); }

/* --- akordeon --- */
.faq { max-width: 820px; margin: 0 auto; }
.faq__cat + .faq__cat { margin-top: 44px; }
.faq__cat-title {
  font-family: var(--font-serif);
  font-size: clamp(18px, 2.6vw, 22px);
  font-weight: 600;
  color: var(--color-brass);
  margin: 0 0 6px;
}

.faq__item { border-bottom: 1px solid rgba(26, 41, 66, 0.12); }
.faq__cat .faq__item:first-of-type { border-top: 1px solid rgba(26, 41, 66, 0.12); }

.faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2px;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--color-navy);
  min-height: 44px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-right: 2px solid var(--color-brass);
  border-bottom: 2px solid var(--color-brass);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.faq__item[open] > .faq__q::after { transform: rotate(-135deg); }
.faq__q:focus-visible { outline: 2px solid var(--color-brass); outline-offset: 3px; border-radius: 4px; }

.faq__a {
  padding: 0 2px 20px;
  color: var(--color-text-muted);
  line-height: 1.7;
}
.faq__a > *:first-child { margin-top: 0; }
.faq__a > *:last-child { margin-bottom: 0; }
.faq__a p { margin: 0 0 0.8em; }
.faq__a a { color: var(--color-brass); text-decoration: underline; text-underline-offset: 2px; }
.faq__a a:hover { color: var(--color-navy); }
.faq__a ul, .faq__a ol { margin: 0.6em 0; padding-left: 1.4em; }
.faq__a li { margin: 0.3em 0; }
.faq__a li::marker { color: var(--color-brass); }
.faq__a h3 { font-family: var(--font-serif); font-size: 17px; color: var(--color-navy); margin: 1em 0 0.3em; }
.faq__a .legal__callout { background: var(--color-cream-warm); border-left: 3px solid var(--color-brass); border-radius: 8px; padding: 12px 16px; margin: 1em 0; }
.faq__a .legal__icon { width: 1.05em; height: 1.05em; vertical-align: -0.16em; margin-right: 0.3em; color: var(--color-brass); }

/* --- CTA pod listą --- */
.faq-cta { text-align: center; margin-top: clamp(40px, 7vw, 64px); }
.faq-cta__lead { font-family: var(--font-serif); font-size: 19px; color: var(--color-navy); margin: 0 0 16px; }

/* --- skrócona sekcja FAQ na stronie głównej --- */
.faq-home { padding: clamp(48px, 8vw, 88px) 0; background: var(--color-cream-warm); }
.faq-home__head { text-align: center; max-width: 620px; margin: 0 auto clamp(24px, 4vw, 36px); }
.faq-home__head .eyebrow { justify-content: center; }
.faq--home { max-width: 760px; }
.faq--home .faq__item:first-of-type { border-top: 1px solid rgba(26, 41, 66, 0.12); }
.faq__more-wrap { margin: 28px 0 0; text-align: center; }
.faq__more {
  display: inline-block;
  font-weight: 600;
  color: var(--color-brass);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}
.faq__more:hover { border-bottom-color: var(--color-brass); }

@media (prefers-reduced-motion: reduce) {
  .faq__q::after { transition: none; }
}