/* ==================================================== */
/* category.css – style opisów kategorii (additional desc) */
/* Lokalizacja docelowa:                                  */
/*   /themes/akira_child_theme/assets/css/category.css    */
/*                                                        */
/* WARUNEK: cały opis kategorii musi być owinięty w       */
/*   <div class="da-category-box"> … </div>               */
/*                                                        */
/* Spójność z combo.css (paleta #8cc63f / #6ea830).       */
/* ==================================================== */

/* === KONTENER GŁÓWNY === */
.da-category-box {
  max-width: 900px;
  margin: 2em auto 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #333;
  line-height: 1.7;
  font-size: 15px;
}

/* PrestaShop generuje H1 z nazwy kategorii — w .da-category-box H1 jest zakazany. */
.da-category-box h1 {
  display: none;
}

/* === NAGŁÓWKI === */
.da-category-box h2 {
  font-size: 22px;
  margin: 1.6em 0 0.6em;
  color: #2b2b2b;
  font-weight: 700;
  border-left: 4px solid #8cc63f;
  padding-left: 12px;
  line-height: 1.3;
}

.da-category-box h3 {
  font-size: 17px;
  margin: 1.4em 0 0.5em;
  color: #2b2b2b;
  font-weight: 700;
  line-height: 1.3;
}

/* === TEKST === */
.da-category-box p {
  margin: 0 0 1em;
}

.da-category-box strong {
  color: #2b2b2b;
}

.da-category-box em {
  font-style: italic;
}

/* === LISTY ZWYKŁE === */
.da-category-box ul {
  margin: 0.8em 0 1.2em 1.2em;
  padding-left: 1em;
}

.da-category-box li {
  margin-bottom: 0.4em;
}

/* === LISTA Z CHECKMARKAMI === */
/* Użyj klasy "check" na <ul> aby zamienić bullety na zielone ticki. */
.da-category-box ul.check {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0;
}

.da-category-box ul.check li {
  padding-left: 1.8em;
  position: relative;
  list-style: none !important;
}

.da-category-box ul.check li::before {
  content: "\2714";
  position: absolute;
  left: 0;
  top: 0;
  color: #8cc63f;
  font-weight: bold;
  font-size: 16px;
}

/* === CALLOUT / CTA === */
/* <p class="cta"> albo <div class="cta"> dla wyróżnionych komunikatów. */
.da-category-box .cta {
  background: #f0f8e8;
  border-left: 4px solid #8cc63f;
  padding: 1em 1.2em;
  margin: 1.5em 0;
  border-radius: 4px;
}

.da-category-box .cta strong {
  color: #5a9a1a;
}

/* === NOTKA / OSTRZEŻENIE === */
/* <div class="notice"> — żółtawe, dla ostrzeżeń typu „skonsultuj z lekarzem". */
.da-category-box .notice {
  background: #f9f9f2;
  border-left: 4px solid #d4c94a;
  padding: 0.9em 1.2em;
  margin: 1.5em 0;
  font-size: 14px;
  color: #555;
}

/* === TABELE === */
.da-category-box table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 14px;
}

.da-category-box th {
  background: #8cc63f;
  color: #fff;
  text-align: left;
  padding: 0.7em 0.9em;
  font-weight: 600;
}

.da-category-box td {
  padding: 0.6em 0.9em;
  border-bottom: 1px solid #e0e0e0;
}

.da-category-box tr:nth-child(even) td {
  background: #f7f7f7;
}

/* === LINKI === */
/* !important nadpisuje Elementor/akira inheritance */
.da-category-box a {
  color: #1067a1 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

.da-category-box a:hover {
  color: #0a4d75 !important;
}

.da-category-box a:visited {
  color: #7b4fa2 !important;
}

/* =========================================== */
/* === FAQ — ROZWIJANE PRZEZ <details>      === */
/* =========================================== */
/* Markup:
   <div class="faq-schema-section">
     <h2>Najczęściej zadawane pytania</h2>
     <details class="faq-item">
       <summary class="faq-question">Pytanie?</summary>
       <div class="faq-answer"><p>Odpowiedź.</p></div>
     </details>
     <details class="faq-item">…</details>
   </div>
*/

.da-category-box .faq-schema-section {
  margin-top: 2.5em;
}

.da-category-box .faq-schema-section > h2 {
  margin-bottom: 0.8em;
}

.da-category-box details.faq-item {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  margin: 0 0 10px;
  background: #fff;
  transition: border-color 0.2s ease;
}

.da-category-box details.faq-item[open] {
  border-color: #8cc63f;
  box-shadow: 0 1px 6px rgba(140, 198, 63, 0.12);
}

.da-category-box details.faq-item summary.faq-question {
  list-style: none;
  cursor: pointer;
  padding: 14px 48px 14px 18px;
  font-weight: 700;
  font-size: 16px;
  color: #2b2b2b;
  position: relative;
  user-select: none;
  outline: none;
  line-height: 1.4;
}

/* Wyłącz natywne markery rozwijające */
.da-category-box details.faq-item summary.faq-question::-webkit-details-marker {
  display: none;
}
.da-category-box details.faq-item summary.faq-question::marker {
  content: "";
}

/* Custom strzałka po prawej, rotująca w stanie open */
.da-category-box details.faq-item summary.faq-question::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid #8cc63f;
  border-bottom: 2px solid #8cc63f;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}

.da-category-box details.faq-item[open] summary.faq-question::after {
  transform: translateY(-30%) rotate(-135deg);
}

.da-category-box details.faq-item summary.faq-question:hover,
.da-category-box details.faq-item summary.faq-question:focus-visible {
  color: #5a9a1a;
}

.da-category-box details.faq-item summary.faq-question:focus-visible {
  outline: 2px solid #8cc63f;
  outline-offset: -2px;
  border-radius: 4px;
}

.da-category-box details.faq-item .faq-answer {
  padding: 0 18px 16px 18px;
  font-size: 15px;
  color: #444;
  line-height: 1.65;
}

.da-category-box details.faq-item .faq-answer p {
  margin: 0 0 0.8em;
}

.da-category-box details.faq-item .faq-answer p:last-child {
  margin-bottom: 0;
}

/* =================== MOBILE =================== */
@media (max-width: 600px) {
  .da-category-box {
    font-size: 14px;
    padding: 0 6px;
  }

  .da-category-box h2 {
    font-size: 19px;
    padding-left: 10px;
  }

  .da-category-box h3 {
    font-size: 16px;
  }

  .da-category-box details.faq-item summary.faq-question {
    font-size: 15px;
    padding: 12px 40px 12px 14px;
  }

  .da-category-box details.faq-item .faq-answer {
    padding: 0 14px 14px 14px;
    font-size: 14px;
  }

  .da-category-box table {
    font-size: 13px;
  }

  .da-category-box th,
  .da-category-box td {
    padding: 0.5em 0.6em;
  }
}