/* ============================================================
   AWENSO — Dokumenty (polityka, regulaminy)
   Czytelny układ tekstu prawnego na ciemnym motywie witryny.
   Korzysta z tokenów z /style.css (--accent, --body, --display, --mono).
   ============================================================ */

.doc-wrap{
    max-width: 820px;
    margin: 0 auto;
    padding: clamp(120px, 16vh, 200px) var(--gutter, 24px) 120px;
}

/* nagłówek dokumentu */
.doc-head{ margin-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 40px; }
.doc-eyebrow{
    display:inline-block; font-family: var(--mono, monospace);
    font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--accent, #22D3EE); margin-bottom: 18px;
}
.doc-title{
    font-family: var(--display, sans-serif); font-weight: 400;
    font-size: clamp(38px, 7vw, 72px); line-height: .98; letter-spacing: -.01em;
    text-transform: uppercase; margin: 0 0 20px;
}
.doc-meta{
    font-family: var(--mono, monospace); font-size: 13px; color: rgba(255,255,255,.55);
    display:flex; flex-wrap:wrap; gap: 8px 22px;
}

/* spis treści */
.doc-toc{
    margin: 0 0 56px; padding: 26px 28px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: 16px;
}
.doc-toc h2{ font-family: var(--mono, monospace); font-size: 12px; letter-spacing:.16em; text-transform:uppercase; color: rgba(255,255,255,.6); margin: 0 0 16px; }
.doc-toc ol{ margin:0; padding:0; list-style:none; counter-reset: toc; columns: 2; column-gap: 32px; }
.doc-toc li{ counter-increment: toc; margin: 0 0 10px; break-inside: avoid; }
.doc-toc a{ color: rgba(255,255,255,.8); text-decoration:none; font-size: 15px; display:flex; gap:10px; }
.doc-toc a::before{ content: counter(toc, decimal-leading-zero); color: var(--accent, #22D3EE); font-family: var(--mono, monospace); font-size: 12px; }
.doc-toc a:hover{ color:#fff; }

/* treść */
.doc-body{ counter-reset: sec; }
.doc-body section{ counter-increment: sec; margin: 0 0 44px; scroll-margin-top: 100px; }
.doc-body h2{
    font-family: var(--display, sans-serif); font-weight:400;
    font-size: clamp(22px, 3.4vw, 30px); text-transform: uppercase; letter-spacing:-.01em;
    margin: 0 0 18px; display:flex; align-items:baseline; gap:14px;
}
.doc-body h2::before{
    content: counter(sec, decimal-leading-zero);
    font-family: var(--mono, monospace); font-size: 14px; color: var(--accent, #22D3EE); font-weight:400;
}
.doc-body h3{ font-family: var(--body, sans-serif); font-weight:600; font-size: 17px; margin: 26px 0 10px; color:#fff; }
.doc-body p, .doc-body li{
    font-family: var(--body, sans-serif); font-size: 16px; line-height: 1.72; color: rgba(255,255,255,.78);
}
.doc-body p{ margin: 0 0 14px; }
.doc-body ul, .doc-body ol{ margin: 0 0 16px; padding-left: 22px; }
.doc-body li{ margin: 0 0 9px; }
.doc-body a{ color: var(--accent, #22D3EE); text-decoration: underline; text-underline-offset: 3px; }
.doc-body strong{ color:#fff; font-weight:600; }

/* tabela (np. dane kontaktowe / cookies) */
.doc-table{ width:100%; border-collapse: collapse; margin: 6px 0 20px; font-size: 15px; }
.doc-table th, .doc-table td{ text-align:left; padding: 12px 14px; border: 1px solid rgba(255,255,255,.12); vertical-align: top; }
.doc-table th{ font-family: var(--mono, monospace); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: rgba(255,255,255,.6); background: rgba(255,255,255,.03); width: 34%; }
.doc-table td{ color: rgba(255,255,255,.82); }

/* pola do uzupełnienia */
.fill{
    color: var(--accent-2, #A3FF12);
    background: rgba(163,255,18,.08);
    border-bottom: 1px dashed rgba(163,255,18,.55);
    padding: 0 4px; border-radius: 3px; font-style: normal;
    font-family: var(--mono, monospace); font-size: .92em;
}

/* notka informacyjna */
.doc-note{
    margin: 40px 0 0; padding: 18px 22px; border-left: 3px solid var(--accent, #22D3EE);
    background: rgba(34,211,238,.06); border-radius: 0 12px 12px 0;
    font-size: 14px; color: rgba(255,255,255,.7);
}

/* powrót */
.doc-back{
    display:inline-flex; align-items:center; gap:8px; margin-top: 8px;
    font-family: var(--mono, monospace); font-size: 13px; letter-spacing:.06em;
    color: rgba(255,255,255,.65); text-decoration:none;
}
.doc-back:hover{ color: var(--accent, #22D3EE); }

@media (max-width: 640px){
    .doc-toc ol{ columns: 1; }
}