/* ============================================================================= Paq Auto Spis Treści — by Paq Studio Stylowanie zbudowane na zmiennych CSS dla pełnej customizacji z motywu. ============================================================================= */ .paq-toc { /* Wartości domyślne — nadpisywane przez --paq-toc-* w i ustawienia. */ --_bg: var(--paq-toc-bg, #eaf2fb); --_border: var(--paq-toc-border, #b9d4ee); --_title: var(--paq-toc-title, #0e2a47); --_text: var(--paq-toc-text, #0e2a47); --_hover: var(--paq-toc-link-hover, #1668c9); --_toggle-bg: var(--paq-toc-toggle-bg, #ffffff); --_radius: var(--paq-toc-radius, 16px); --_fs: var(--paq-toc-font, 16px); background: var(--_bg); border: 1px solid var(--_border); border-radius: var(--_radius); padding: 18px 22px; margin: 28px 0; color: var(--_text); font-family: inherit; /* dziedziczy z motywu */ font-size: var(--_fs); line-height: 1.5; box-sizing: border-box; } .paq-toc *, .paq-toc *::before, .paq-toc *::after { box-sizing: border-box; } /* Header */ .paq-toc__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .paq-toc.is-collapsible .paq-toc__header { cursor: pointer; user-select: none; } .paq-toc__header:focus-visible { outline: 2px solid var(--_hover); outline-offset: 2px; border-radius: 6px; } .paq-toc__title { font-weight: 700; font-size: 1.05em; color: var(--_title); letter-spacing: 0.01em; } .paq-toc__toggle { background: var(--_toggle-bg); border: 1px solid var(--_border); border-radius: 8px; width: 40px; height: 32px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--_title); transition: background-color 0.15s ease, border-color 0.15s ease; padding: 0; flex-shrink: 0; } .paq-toc__toggle:hover, .paq-toc__header:hover .paq-toc__toggle { filter: brightness(0.97); } .paq-toc__toggle svg { display: block; } /* Body z animacją zwijania */ .paq-toc__body { margin-top: 14px; max-height: 4000px; overflow: hidden; opacity: 1; transition: max-height 0.4s ease, opacity 0.25s ease, margin-top 0.25s ease; } .paq-toc.is-collapsed .paq-toc__body { max-height: 0; opacity: 0; margin-top: 0; pointer-events: none; } /* Lista */ .paq-toc__list { list-style: none; margin: 0; padding: 0; } .paq-toc__item { margin: 4px 0; line-height: 1.5; } .paq-toc__item--depth-0 { padding-left: 0; } .paq-toc__item--depth-1 { padding-left: 22px; } .paq-toc__item--depth-2 { padding-left: 44px; } .paq-toc__item--depth-3 { padding-left: 66px; } .paq-toc__item--depth-4 { padding-left: 88px; } .paq-toc__item--depth-5 { padding-left: 110px; } .paq-toc__link { color: var(--_text); text-decoration: none; display: inline-block; padding: 2px 0; transition: color 0.15s ease, border-bottom-color 0.15s ease; border-bottom: 1px solid transparent; } .paq-toc__link:hover, .paq-toc__link:focus-visible { color: var(--_hover); border-bottom-color: currentColor; outline: none; } .paq-toc__number { font-weight: 600; margin-right: 4px; } .paq-toc__text { font-weight: 400; } /* Responsywność */ @media (max-width: 600px) { .paq-toc { padding: 14px 16px; margin: 20px 0; } .paq-toc__item--depth-1 { padding-left: 14px; } .paq-toc__item--depth-2 { padding-left: 28px; } .paq-toc__item--depth-3 { padding-left: 42px; } .paq-toc__item--depth-4 { padding-left: 56px; } .paq-toc__item--depth-5 { padding-left: 70px; } } /* Print – ukryj TOC w wydruku */ @media print { .paq-toc { display: none; } } /* Reduced motion – wyłącz animacje */ @media (prefers-reduced-motion: reduce) { .paq-toc__body, .paq-toc__toggle, .paq-toc__link { transition: none; } }