/* ============================================================================
   FAQ — accordion nad obsahem z adminu (korektura klientky 8/2026)

   Stránky s dotazy (Nejčastější otázky, FAQ) mají obsah vložený editorem jako
   karty s <h3> otázkou a odstavci odpovědi. Šablona jim dá data-atr-faq="1",
   JS (hp-redesign.js → initFaqAccordion) z otázek udělá klikací hlavičky.
   Vzhled karet zůstává ten z obsahu — tady se řeší jen chování a šipka.

   Bez JS zůstanou odpovědi vidět (žádné display:none v tomhle souboru není
   napevno — sbalení nastavuje až JS třídou is-faq-zavreno).
   ============================================================================ */

[data-atr-faq] .atr-faq-otazka{
  cursor:pointer;
  position:relative;
  padding-right:44px;
  user-select:none;
  transition:color .18s ease;
}
[data-atr-faq] .atr-faq-otazka:hover{ color:#1170B8; }
[data-atr-faq] .atr-faq-otazka:focus-visible{
  outline:2px solid #1170B8;
  outline-offset:4px;
  border-radius:4px;
}

/* Šipka vpravo od otázky — otočí se, když je odpověď rozbalená. */
[data-atr-faq] .atr-faq-otazka::after{
  content:"";
  position:absolute;
  right:6px;
  top:.35em;
  width:14px;
  height:14px;
  border-right:2.5px solid #1170B8;
  border-bottom:2.5px solid #1170B8;
  transform:rotate(45deg);
  transition:transform .2s ease;
}
[data-atr-faq] .atr-faq-otazka.is-faq-otevreno::after{
  transform:rotate(-135deg);
  top:.6em;
}

/* Odpověď — sbalená přes výšku, ať to jde animovat. */
[data-atr-faq] .atr-faq-odpoved{
  overflow:hidden;
  transition:max-height .28s ease, opacity .2s ease;
}
[data-atr-faq] .atr-faq-odpoved.is-faq-zavreno{
  max-height:0;
  opacity:0;
}

/* Ve sbaleném stavu nemá karta držet spodní mezeru po odstavci. */
[data-atr-faq] .atr-faq-karta .atr-faq-otazka{ margin-bottom:0; }
[data-atr-faq] .atr-faq-karta .atr-faq-otazka.is-faq-otevreno{ margin-bottom:16px; }

@media screen and (max-width: 700px){
  [data-atr-faq] .atr-faq-otazka{ padding-right:34px; }
  [data-atr-faq] .atr-faq-otazka::after{ right:2px; width:11px; height:11px; }
}