/* Globalna poprawa koloru czcionku dla elementu code w wpisach - tylko ciemny motyw */

html[data-neve-theme="dark"] .wp-block-code,
html[data-neve-theme="dark"] .wp-block-code code,
html[data-neve-theme="dark"] pre,
html[data-neve-theme="dark"] pre code {
    color: #fff;
}

/* ============================================================================
   AKS Article Styles
   Style dedykowane stronom artykułów na blogu allkeystore.pl.
   Plik niezależny od stylów strony głównej — używa własnego prefiksu klas.
   ============================================================================
   Zawartość:
     1. Custom properties (zmienne kolorów / odstępów)
     2. Accordion FAQ — .aks-art-faq
     3. Sidebar TOC — .aks-art-toc
     4. Wsparcie dla trybu ciemnego Neve (data-neve-theme="dark")
   ============================================================================ */


/* --------------------------------------------------------------------------
   1. Custom properties
   -------------------------------------------------------------------------- */

:root {
  --aks-art-color-text:        #1a1a1a;
  --aks-art-color-text-muted:  #5a5550;
  --aks-art-color-bg:          #ffffff;
  --aks-art-color-bg-soft:     #f7f4ed;
  --aks-art-color-border:      #e2dccd;
  --aks-art-color-accent:      #3a6b3a;
  --aks-art-color-accent-soft: #e6efe1;
  --aks-art-color-terracotta:  #c46340;

  --aks-art-radius:        6px;
  --aks-art-radius-sm:     3px;
  --aks-art-shadow:        0 1px 0 rgba(0, 0, 0, 0.04), 0 8px 24px -16px rgba(26, 24, 21, 0.10);
  --aks-art-transition:    0.22s ease;

  --aks-art-font:          'Plus Jakarta Sans', -apple-system, system-ui, 'Segoe UI', sans-serif;
}


/* ==========================================================================
   2. Accordion FAQ
   ========================================================================== */

.aks-art-faq {
  margin: 1.5rem 0 2rem;
  font-family: var(--aks-art-font);
  color: var(--aks-art-color-text);
}

.aks-art-faq__item {
  background: var(--aks-art-color-bg);
  border: 1px solid var(--aks-art-color-border);
  border-radius: var(--aks-art-radius);
  margin-bottom: 0.5rem;
  overflow: hidden;
  transition: border-color var(--aks-art-transition), box-shadow var(--aks-art-transition);
}

.aks-art-faq__item:hover {
  border-color: var(--aks-art-color-accent);
}

.aks-art-faq__item[open] {
  border-color: var(--aks-art-color-accent);
  box-shadow: var(--aks-art-shadow);
}

/* --- Pytanie (summary) --- */
.aks-art-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background-color var(--aks-art-transition);
}

/* Wyłącz domyślną strzałkę <summary> w różnych przeglądarkach */
.aks-art-faq__question::-webkit-details-marker { display: none; }
.aks-art-faq__question::marker { content: ""; }

.aks-art-faq__question:hover,
.aks-art-faq__question:focus-visible {
  background: var(--aks-art-color-bg-soft);
  outline: none;
}

.aks-art-faq__question:focus-visible {
  outline: 2px solid var(--aks-art-color-accent);
  outline-offset: -2px;
}

.aks-art-faq__question-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--aks-art-color-text);
  flex: 1 1 auto;
}

/* --- Ikona chevron --- */
.aks-art-faq__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  position: relative;
  transition: transform var(--aks-art-transition);
}

.aks-art-faq__icon::before,
.aks-art-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 2px;
  background: var(--aks-art-color-accent);
  border-radius: 1px;
  transition: transform var(--aks-art-transition);
}

.aks-art-faq__icon::before {
  left: 1px;
  transform: translateY(-50%) rotate(45deg);
}

.aks-art-faq__icon::after {
  right: 1px;
  transform: translateY(-50%) rotate(-45deg);
}

.aks-art-faq__item[open] .aks-art-faq__icon::before {
  transform: translateY(-50%) rotate(-45deg);
}
.aks-art-faq__item[open] .aks-art-faq__icon::after {
  transform: translateY(-50%) rotate(45deg);
}

/* --- Odpowiedź --- */
.aks-art-faq__answer {
  padding: 0 1.25rem 1.1rem;
  border-top: 1px solid var(--aks-art-color-border);
  color: var(--aks-art-color-text);
}

.aks-art-faq__answer > *:first-child { margin-top: 0.9rem; }
.aks-art-faq__answer > *:last-child  { margin-bottom: 0; }

.aks-art-faq__answer p {
  margin: 0.6rem 0;
  line-height: 1.6;
}

.aks-art-faq__answer code {
  background: var(--aks-art-color-bg-soft);
  padding: 0.1em 0.35em;
  border-radius: var(--aks-art-radius-sm);
  font-size: 0.9em;
  color: var(--aks-art-color-terracotta);
}

.aks-art-faq__answer ul,
.aks-art-faq__answer ol {
  margin: 0.6rem 0;
  padding-left: 1.4rem;
}

.aks-art-faq__answer li { margin: 0.3rem 0; }

.aks-art-faq__answer a {
  color: var(--aks-art-color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.aks-art-faq__answer a:hover { color: var(--aks-art-color-terracotta); }


/* ==========================================================================
   3. Sidebar TOC
   ========================================================================== */

.aks-art-toc {
  background: var(--aks-art-color-bg);
  border: 1px solid var(--aks-art-color-border);
  border-radius: var(--aks-art-radius);
  padding: 1.25rem 1.4rem;
  font-family: var(--aks-art-font);
  font-size: 0.95rem;
  color: var(--aks-art-color-text);
  box-shadow: var(--aks-art-shadow);
  max-width: 320px;
}

/* --- Header (tytuł + chevron) --- */
.aks-art-toc__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.aks-art-toc__header::-webkit-details-marker { display: none; }
.aks-art-toc__header::marker { content: ""; }

.aks-art-toc__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--aks-art-color-text);
}

.aks-art-toc__chevron {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  position: relative;
  transition: transform var(--aks-art-transition);
}

.aks-art-toc__chevron::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--aks-art-color-text);
  border-bottom: 2px solid var(--aks-art-color-text);
  transform: rotate(45deg);
  transition: transform var(--aks-art-transition);
}

.aks-art-toc[open] .aks-art-toc__chevron::before {
  transform: rotate(-135deg);
  top: 6px;
}

/* --- Lista linków --- */
.aks-art-toc__list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  counter-reset: aks-toc;
}

.aks-art-toc__item {
  counter-increment: aks-toc;
  margin: 0;
  padding: 0;
  position: relative;
}

.aks-art-toc__link {
  display: block;
  padding: 0.5rem 0 0.5rem 2rem;
  color: var(--aks-art-color-text-muted);
  text-decoration: none;
  line-height: 1.4;
  transition: color var(--aks-art-transition);
  border-bottom: 1px solid transparent;
}

.aks-art-toc__link::before {
  content: counter(aks-toc) ".";
  position: absolute;
  left: 0;
  top: 0.5rem;
  font-weight: 600;
  color: var(--aks-art-color-text-muted);
  width: 1.6rem;
  text-align: left;
  transition: color var(--aks-art-transition);
}

.aks-art-toc__link:hover,
.aks-art-toc__link:focus-visible {
  color: var(--aks-art-color-accent);
  outline: none;
}

.aks-art-toc__link:hover::before,
.aks-art-toc__link:focus-visible::before {
  color: var(--aks-art-color-accent);
}

/* Stan aktywny — sekcja widoczna w viewport (klasa dodawana przez JS, opcjonalnie) */
.aks-art-toc__link.is-active {
  color: var(--aks-art-color-accent);
  font-weight: 600;
}
.aks-art-toc__link.is-active::before {
  color: var(--aks-art-color-accent);
}

/* Sticky w sidebarze (gdy widget renderowany w sidebar template) */
.aks-art-toc--sticky {
  position: sticky;
  top: 100px; /* wysokość sticky headera Neve, ew. dostosuj */
}


/* ==========================================================================
   4. Tryb ciemny Neve (data-neve-theme="dark")
   ========================================================================== */

[data-neve-theme="dark"] {
  --aks-art-color-text:        #e8e4dc;
  --aks-art-color-text-muted:  #a8a29a;
  --aks-art-color-bg:          #1f1d1a;
  --aks-art-color-bg-soft:     #2a2723;
  --aks-art-color-border:      #3a3631;
  --aks-art-color-accent:      #7eb87e;
  --aks-art-color-accent-soft: #2d3a2d;
  --aks-art-color-terracotta:  #e08868;
}


/* ==========================================================================
   5. Responsywność
   ========================================================================== */

@media (max-width: 768px) {
  .aks-art-toc {
    max-width: 100%;
  }
  .aks-art-faq__question { padding: 0.85rem 1rem; }
  .aks-art-faq__question-title { font-size: 0.95rem; }
  .aks-art-faq__answer { padding: 0 1rem 1rem; }
  .aks-art-faq__answer > *:first-child { margin-top: 0.75rem; }
}