/**
 * Projekt: KamikStudio Theme
 * Autor: KamikStudio - Patryk Dariusz Kowalski (ps. Kamik)
 * Web: https://kamikstudio.pl
 * Email: biuro@kamikstudio.pl
 * Data: 2026-01-08
 * Wersja: 1.0
 * Opis: Style CSS - dokumentacja.css.
 */
/**
 * KamikStudio - Dokumentacja
 * @package KamikStudio
 * @version 1.0.0
 */

/* === ZMIENNE === */
.dok-page {--dok-bg: #ffffff;--dok-bg-alt: #f8fafc;--dok-bg-code: #1e293b;--dok-text: #1e293b;--dok-text-muted: #64748b;--dok-primary: var(--color-primary);--dok-primary-light: #1a4a6d;--dok-accent: var(--color-accent);--dok-success: #10b981;--dok-warning: #f59e0b;--dok-danger: #ef4444;--dok-border: #e2e8f0;--dok-radius: 8px;--dok-radius-lg: 12px}

/* === HERO === */
.dok-hero {padding: var(--spacing-4xl) 0 var(--spacing-3xl);background: linear-gradient(135deg, var(--dok-primary) 0%, var(--dok-primary-light) 100%);color: #ffffff}
.dok-breadcrumb {display: flex;flex-wrap: wrap;align-items: center;gap: 0.5rem;font-size: var(--font-size-sm);margin-bottom: var(--spacing-xl);opacity: 0.85}
.dok-breadcrumb a {color: inherit;text-decoration: none}
.dok-breadcrumb a:hover {text-decoration: underline}
.dok-breadcrumb span {opacity: 0.6}
.dok-hero__content {max-width: 800px}
.dok-hero__badge {display: inline-flex;gap: 0.5rem;margin-bottom: var(--spacing-md)}
.dok-hero__badge-version, .dok-hero__badge-platform {padding: 0.25rem 0.75rem;background: rgba(255,255,255,0.15);border-radius: var(--radius-full);font-size: var(--font-size-sm);font-weight: var(--font-weight-medium)}
.dok-hero__title {font-size: clamp(2rem, 5vw, 2.75rem);font-weight: var(--font-weight-bold);margin-bottom: var(--spacing-sm)}
.dok-hero__desc {font-size: var(--font-size-lg);opacity: 0.9;margin-bottom: var(--spacing-lg)}
.dok-hero__meta {display: flex;flex-wrap: wrap;gap: var(--spacing-lg);margin-bottom: var(--spacing-xl)}
.dok-hero__meta-item {display: flex;align-items: center;gap: 0.5rem;font-size: var(--font-size-sm);opacity: 0.85}
.dok-hero__meta-item svg {width: 18px;height: 18px;opacity: 0.7}
.dok-hero__actions {display: flex;flex-wrap: wrap;gap: var(--spacing-md)}

/* === LAYOUT === */
.dok-layout {padding: var(--spacing-3xl) 0}
.dok-layout__grid {display: grid;grid-template-columns: 260px 1fr;gap: var(--spacing-3xl)}

/* === SIDEBAR === */
.dok-sidebar {position: relative}
.dok-sidebar__sticky {position: sticky;top: calc(var(--nav-height) + 24px)}
.dok-sidebar__title {font-size: var(--font-size-sm);font-weight: var(--font-weight-semibold);text-transform: uppercase;letter-spacing: 0.05em;color: var(--dok-text-muted);margin-bottom: var(--spacing-md)}
.dok-toc ul {list-style: none;padding: 0;margin: 0}
.dok-toc li {margin-bottom: 0.25rem}
.dok-toc a {display: block;padding: 0.5rem 0.75rem;font-size: var(--font-size-sm);color: var(--dok-text-muted);text-decoration: none;border-radius: var(--dok-radius);transition: all 0.15s ease}
.dok-toc a:hover {color: var(--dok-primary);background: var(--dok-bg-alt)}
.dok-toc a.active {color: var(--dok-primary);background: rgba(15,51,84,0.08);font-weight: var(--font-weight-medium)}
.dok-sidebar__cta {margin-top: var(--spacing-xl);padding: var(--spacing-md);background: var(--dok-bg-alt);border-radius: var(--dok-radius);text-align: center}
.dok-sidebar__cta p {font-size: var(--font-size-sm);color: var(--dok-text-muted);margin-bottom: 0.5rem}
.dok-sidebar__cta a {font-size: var(--font-size-sm);font-weight: var(--font-weight-medium);color: var(--dok-primary)}

/* === CONTENT === */
.dok-content {min-width: 0}
.dok-section {margin-bottom: var(--spacing-3xl);padding-bottom: var(--spacing-3xl);border-bottom: 1px solid var(--dok-border)}
.dok-section:last-of-type {border-bottom: none}
.dok-section h2 {font-size: var(--font-size-2xl);font-weight: var(--font-weight-bold);color: var(--dok-text);margin-bottom: var(--spacing-lg);padding-top: var(--spacing-md)}
.dok-section h3 {font-size: var(--font-size-lg);font-weight: var(--font-weight-semibold);color: var(--dok-text);margin: var(--spacing-xl) 0 var(--spacing-md)}
.dok-section h4 {font-size: var(--font-size-base);font-weight: var(--font-weight-semibold);color: var(--dok-text);margin: var(--spacing-lg) 0 var(--spacing-sm)}
.dok-section p {color: var(--dok-text);line-height: 1.7;margin-bottom: var(--spacing-md)}
.dok-section ul, .dok-section ol {color: var(--dok-text);line-height: 1.7;margin-bottom: var(--spacing-md);padding-left: 1.5rem}
.dok-section li {margin-bottom: 0.5rem}
.dok-section code {padding: 0.125rem 0.375rem;background: var(--dok-bg-alt);border-radius: 4px;font-size: 0.875em;color: var(--dok-primary)}

/* === COMPARISON === */
.dok-comparison {display: grid;grid-template-columns: 1fr 1fr;gap: var(--spacing-md);margin: var(--spacing-lg) 0}
.dok-comparison__item {padding: var(--spacing-lg);border-radius: var(--dok-radius-lg);display: flex;flex-direction: column;gap: 0.5rem}
.dok-comparison__item--before {background: rgba(239,68,68,0.05);border: 1px solid rgba(239,68,68,0.2)}
.dok-comparison__item--after {background: rgba(16,185,129,0.05);border: 1px solid rgba(16,185,129,0.2)}
.dok-comparison__label {font-size: var(--font-size-xs);font-weight: var(--font-weight-semibold);text-transform: uppercase;letter-spacing: 0.05em;margin-bottom: 0.5rem}
.dok-comparison__item--before .dok-comparison__label {color: var(--dok-danger)}
.dok-comparison__item--after .dok-comparison__label {color: var(--dok-success)}
.dok-comparison__item code {background: transparent;padding: 0;font-size: var(--font-size-sm)}

/* === TABLE === */
.dok-table-wrapper {overflow-x: auto;margin: var(--spacing-md) 0}
.dok-table {width: 100%;border-collapse: collapse;font-size: var(--font-size-sm)}
.dok-table th, .dok-table td {padding: 0.75rem 1rem;text-align: left;border-bottom: 1px solid var(--dok-border)}
.dok-table th {background: var(--dok-bg-alt);font-weight: var(--font-weight-semibold);color: var(--dok-text)}
.dok-table td {color: var(--dok-text)}
.dok-table code {font-size: 0.8125rem}

/* === FEATURES LIST === */
.dok-features {list-style: none;padding: 0;margin: var(--spacing-lg) 0}
.dok-features li {display: flex;align-items: flex-start;gap: 0.75rem;padding: 0.75rem 0;border-bottom: 1px solid var(--dok-border)}
.dok-features li:last-child {border-bottom: none}
.dok-features li svg {width: 20px;height: 20px;color: var(--dok-success);flex-shrink: 0;margin-top: 2px}
.dok-features li div {flex: 1}
.dok-features li strong {display: block;color: var(--dok-text);margin-bottom: 0.25rem}
.dok-features li span {font-size: var(--font-size-sm);color: var(--dok-text-muted)}

/* === COMPATIBILITY === */
.dok-compat {display: flex;flex-wrap: wrap;gap: 0.5rem;margin: var(--spacing-md) 0}
.dok-compat__item {padding: 0.375rem 0.75rem;border-radius: var(--radius-full);font-size: var(--font-size-sm);font-weight: var(--font-weight-medium)}
.dok-compat__item--yes {background: rgba(16,185,129,0.1);color: var(--dok-success)}

/* === CODE BLOCK === */
.dok-code {margin: var(--spacing-md) 0;border-radius: var(--dok-radius-lg);overflow: hidden;background: var(--dok-bg-code)}
.dok-code__header {padding: 0.5rem 1rem;background: rgba(255,255,255,0.05);border-bottom: 1px solid rgba(255,255,255,0.1)}
.dok-code__header span {font-size: var(--font-size-xs);font-weight: var(--font-weight-medium);color: rgba(255,255,255,0.6);text-transform: uppercase;letter-spacing: 0.05em}
.dok-code pre {margin: 0;padding: 1rem;overflow-x: auto}
.dok-code code {font-family: 'SF Mono', 'Fira Code', Consolas, monospace;font-size: 0.8125rem;line-height: 1.6;color: #e2e8f0;background: transparent;padding: 0}

/* === STEPS === */
.dok-steps {margin: var(--spacing-lg) 0}
.dok-step {display: flex;gap: var(--spacing-lg);padding: var(--spacing-lg) 0;border-bottom: 1px solid var(--dok-border)}
.dok-step:last-child {border-bottom: none}
.dok-step__number {width: 36px;height: 36px;background: var(--dok-primary);color: #ffffff;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: var(--font-weight-bold);font-size: var(--font-size-sm);flex-shrink: 0}
.dok-step__content {flex: 1;min-width: 0}
.dok-step__content h4 {font-size: var(--font-size-base);font-weight: var(--font-weight-semibold);color: var(--dok-text);margin: 0 0 0.5rem}
.dok-step__content p {font-size: var(--font-size-sm);color: var(--dok-text-muted);margin: 0}

/* === NOTICE === */
.dok-notice {display: flex;gap: 0.75rem;padding: var(--spacing-md);border-radius: var(--dok-radius);margin: var(--spacing-lg) 0}
.dok-notice svg {width: 20px;height: 20px;flex-shrink: 0;margin-top: 2px}
.dok-notice div {flex: 1}
.dok-notice strong {display: block;margin-bottom: 0.25rem}
.dok-notice--info {background: rgba(59,130,246,0.08);border: 1px solid rgba(59,130,246,0.2)}
.dok-notice--info svg {color: #3b82f6}
.dok-notice--warning {background: rgba(245,158,11,0.08);border: 1px solid rgba(245,158,11,0.2)}
.dok-notice--warning svg {color: var(--dok-warning)}

/* === FLOW DIAGRAM === */
.dok-flow {margin: var(--spacing-lg) 0;padding: var(--spacing-lg);background: var(--dok-bg-alt);border-radius: var(--dok-radius-lg)}
.dok-flow__item {padding: 0.75rem 1rem;background: #ffffff;border: 1px solid var(--dok-border);border-radius: var(--dok-radius);font-size: var(--font-size-sm);color: var(--dok-text)}
.dok-flow__item code {background: rgba(15,51,84,0.08);font-size: 0.8125rem}
.dok-flow__item--result {background: rgba(16,185,129,0.1);border-color: rgba(16,185,129,0.3)}
.dok-flow__arrow {text-align: center;padding: 0.5rem;color: var(--dok-text-muted);font-size: 1.25rem}

/* === ACCORDION === */
.dok-accordion {margin: var(--spacing-lg) 0}
.dok-accordion__item {border: 1px solid var(--dok-border);border-radius: var(--dok-radius);margin-bottom: 0.5rem;overflow: hidden}
.dok-accordion__item summary {padding: 1rem;font-weight: var(--font-weight-medium);color: var(--dok-text);cursor: pointer;list-style: none;display: flex;align-items: center;justify-content: space-between}
.dok-accordion__item summary::-webkit-details-marker {display: none}
.dok-accordion__item summary::after {content: '+';font-size: 1.25rem;color: var(--dok-text-muted)}
.dok-accordion__item[open] summary::after {content: '−'}
.dok-accordion__item[open] summary {border-bottom: 1px solid var(--dok-border)}
.dok-accordion__content {padding: 1rem}

/* === FAQ === */
.dok-faq {margin: var(--spacing-lg) 0}
.dok-faq__item {border: 1px solid var(--dok-border);border-radius: var(--dok-radius);margin-bottom: 0.75rem;overflow: hidden}
.dok-faq__item summary {padding: 1rem 1.25rem;font-weight: var(--font-weight-medium);color: var(--dok-text);cursor: pointer;list-style: none}
.dok-faq__item summary::-webkit-details-marker {display: none}
.dok-faq__item[open] summary {background: var(--dok-bg-alt);border-bottom: 1px solid var(--dok-border)}
.dok-faq__item p, .dok-faq__item ul {padding: 1rem 1.25rem;margin: 0;font-size: var(--font-size-sm);color: var(--dok-text-muted);line-height: 1.7}
.dok-faq__item ul {padding-top: 0}

/* === LICENSE === */
.dok-license {background: var(--dok-bg-alt);padding: var(--spacing-xl);border-radius: var(--dok-radius-lg)}
.dok-license h3 {margin-top: 0}
.dok-license h4 {margin-top: var(--spacing-lg)}
.dok-license ul {margin-bottom: 0}

/* === CHANGELOG === */
.dok-changelog {margin: var(--spacing-lg) 0}
.dok-changelog__item {padding: var(--spacing-lg);background: var(--dok-bg-alt);border-radius: var(--dok-radius-lg);margin-bottom: var(--spacing-md)}
.dok-changelog__version {display: flex;align-items: center;gap: var(--spacing-md);margin-bottom: var(--spacing-md)}
.dok-changelog__badge {padding: 0.25rem 0.75rem;background: var(--dok-primary);color: #ffffff;border-radius: var(--radius-full);font-size: var(--font-size-sm);font-weight: var(--font-weight-bold)}
.dok-changelog__date {font-size: var(--font-size-sm);color: var(--dok-text-muted)}
.dok-changelog__content p {font-size: var(--font-size-lg);margin-bottom: var(--spacing-sm)}
.dok-changelog__content ul {margin: 0;padding-left: 1.25rem}
.dok-changelog__content li {font-size: var(--font-size-sm);color: var(--dok-text-muted)}

/* === SUPPORT === */
.dok-support {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: var(--spacing-xl)}
.dok-support__contact, .dok-support__report, .dok-support__paid {padding: var(--spacing-lg);background: var(--dok-bg-alt);border-radius: var(--dok-radius-lg)}
.dok-support h3 {margin-top: 0;margin-bottom: var(--spacing-md)}
.dok-support__contact ul {list-style: none;padding: 0;margin: 0}
.dok-support__contact li {display: flex;align-items: center;gap: 0.75rem;padding: 0.5rem 0;font-size: var(--font-size-sm)}
.dok-support__contact li svg {width: 18px;height: 18px;color: var(--dok-text-muted)}
.dok-support__contact a {color: var(--dok-primary);text-decoration: none}
.dok-support__contact a:hover {text-decoration: underline}
.dok-support__rate {margin-top: var(--spacing-md);padding-top: var(--spacing-md);border-top: 1px solid var(--dok-border)}

/* === FOOTER === */
.dok-footer {margin-top: var(--spacing-3xl);padding-top: var(--spacing-xl);border-top: 1px solid var(--dok-border);text-align: center}
.dok-footer p {font-size: var(--font-size-sm);color: var(--dok-text-muted);margin-bottom: 0.5rem}

/* === BUTTONS === */
.btn {display: inline-flex;align-items: center;justify-content: center;gap: 0.5rem;padding: 0.75rem 1.5rem;border-radius: var(--dok-radius);font-size: var(--font-size-base);font-weight: var(--font-weight-medium);text-decoration: none;cursor: pointer;border: none;transition: all 0.15s ease}
.btn--primary {background: var(--dok-accent);color: #ffffff}
.btn--primary:hover {background: #e55a2b}
.btn--outline {background: transparent;color: #ffffff;border: 2px solid rgba(255,255,255,0.3)}
.btn--outline:hover {background: rgba(255,255,255,0.1);border-color: rgba(255,255,255,0.5)}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
.dok-layout__grid {grid-template-columns: 1fr}
.dok-sidebar {display: none}
}

@media (max-width: 768px) {
.dok-hero {padding: var(--spacing-3xl) 0 var(--spacing-2xl)}
.dok-hero__title {font-size: 1.75rem}
.dok-hero__meta {flex-direction: column;gap: var(--spacing-sm)}
.dok-hero__actions {flex-direction: column}
.dok-hero__actions .btn {width: 100%}
.dok-comparison {grid-template-columns: 1fr}
.dok-step {flex-direction: column;gap: var(--spacing-md)}
.dok-support {grid-template-columns: 1fr}
}