/* ==========================================================
   FAQ — tylko podstrona FAQ (body.faqPage)
   Bazuje na main.css i naprawia konflikty globalnych paddingów
   ========================================================== */

/* 1) Wyrównanie spacingu jak na scenariuszach (main.css) */
body.faqPage #page,
body.faqPage .wrap#page{
  padding-top: 0 !important; /* usuwa ewentualne 84px z template */
}

body.faqPage section{
  margin: 100px 0 !important; /* jak w main.css */
  padding: 0 !important;
}

/* jeśli WP / template dorzuca cokolwiek ekstra na górze */
body.faqPage main{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 2) FAQ layout */
body.faqPage .faqWrap{
  max-width: 1100px;
  margin: 0 auto;
}

body.faqPage .faqList{
  display: grid;
  gap: 14px;
  margin-top: 0;
}

/* ==========================================================
   KLUCZ: reset konfliktu z main.css:
   main.css ma:
     .frame > :not(iframe){ padding:10px!important; padding-left:22px!important; }
   To psuje FAQ (pasek + rozjazd).
   Dlatego zerujemy padding na dzieciach i ustawiamy własne insety.
   ========================================================== */

/* Inset od ramki (większy z lewej, jak prosiłeś) */
body.faqPage{
  --faqInsetTop: 14px;
  --faqInsetRight: 16px;
  --faqInsetBottom: 14px;
  --faqInsetLeft: 34px; /* ↑ większy odstęp od narożnika z lewej */
  --faqInnerPadY: 18px;
}

body.faqPage .faqItem.frame{
  cursor: pointer;
  outline: none;

  /* UWAGA: padding robimy tu, żeby mieć dystans od ramek/narożników */
  padding: var(--faqInsetTop) var(--faqInsetRight) var(--faqInsetBottom) var(--faqInsetLeft) !important;
}

/* Zabij globalny padding z main.css na bezpośrednich dzieciach frame */
body.faqPage .faqItem.frame > *{
  padding: 0 !important;
}
body.faqPage .faqItem.frame > :not(iframe){
  padding: 0 !important;
  padding-left: 0 !important;
}

/* ==========================================================
   FAQ HERO (tylko kosmetyka; opiera się o Twoje klasy)
   ========================================================== */

body.faqPage .hero{
  text-align: center;
}

body.faqPage .hero h1{
  margin: 0 auto 10px;
  max-width: 32ch;
  font-size: clamp(26px, 4vw, 46px);
  line-height: 1.06;
  letter-spacing: -.02em;
  text-shadow: 0 26px 80px rgba(0,0,0,.55);
}

body.faqPage .hero p{
  margin: 0 auto;
  max-width: 80ch;
  color: rgba(238,243,251,.72);
  line-height: 1.65;
  font-size: 15px;
}

/* ==========================================================
   FAQ item
   ========================================================== */

/* Header (pytanie + ikona) */
body.faqPage .faqHeader{
  padding: var(--faqInnerPadY) 0 !important; /* padding jest na frame, tu tylko pion */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  user-select: none;
}

/* Pytanie */
body.faqPage .faqQ{
  margin: 0;
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(238,243,251,.92);
  line-height: 1.25;
}

/* Ikona */
body.faqPage .faqIcon{
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(238,243,251,.92);
  flex: 0 0 auto;
}

body.faqPage .faqIcon span{
  font-size: 26px;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform .22s ease;
}

body.faqPage .faqItem[aria-expanded="true"] .faqIcon span{
  transform: translateY(-1px) rotate(45deg);
}

/* Divider – cienki, bez “paska” */
body.faqPage .faqDivider{
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 0 0 14px; /* bez bocznych, bo inset jest na frame */
  display: none;
}
body.faqPage .faqItem[aria-expanded="true"] .faqDivider{
  display: block;
}

/* Body */
body.faqPage .faqBody{
  padding: 0 !important;
  overflow: hidden;
  max-height: 0px;
  transition: max-height .32s ease;
}

body.faqPage .faqBodyInner{
  padding: 0 0 18px;
  color: var(--muted);
  font-size: var(--pSize);
  line-height: var(--pLine);
}

body.faqPage .faqBodyInner p{
  margin: 0 0 10px;
}
body.faqPage .faqBodyInner p:last-child{
  margin-bottom: 0;
}

/* Focus ring */
body.faqPage .faqItem:focus-visible{
  box-shadow: 0 0 0 2px rgba(92,255,150,.25);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  body.faqPage .faqBody{ transition: none; }
  body.faqPage .faqIcon span{ transition: none; }
}

/* Mobile: delikatnie mniejszy inset (żeby nie było “ciasno”) */
@media (max-width: 560px){
  body.faqPage{
    --faqInsetRight: 12px;
    --faqInsetLeft: 22px; /* nadal większy z lewej, ale bez przesady */
  }

  body.faqPage .faqIcon{
    width: 56px;
    height: 56px;
  }
}

body.faqPage .faqList{
  margin-top: 50px !important;
}