/*
 * legal.css — Strona Prawna (FC\Sklep\Legal).
 * Port 1:1 z handoff8 „Strona Prawna.dc.html", selektory scopowane do .fc-root.
 * Ładowane tylko na stronach prawnych (Legal::assets).
 */

/* Zmienne bazowe marki (z projektu :root) — appearance_css (html .fc-root) nadpisze gdy włączone.
   Bez tego var(--fc-bg-soft)/(--fc-border) bywają niezdefiniowane → nieprawidłowe deklaracje (brak tła TOC, kreski h2). */
.fc-root {
    --fc-yellow: #FFDE2C;
    --fc-magenta: #C800A7;
    --fc-magenta-light: #CC55B8;
    --fc-cyan: #6EC1E4;
    --fc-text: #54595F;
    --fc-text-soft: #7A7A7A;
    --fc-border: #ECECEC;
    --fc-bg: #FFFFFF;
    --fc-bg-soft: #F7F8F8;
    --fc-font-head: 'Poppins', sans-serif;
    --fc-font-body: 'Lato', sans-serif;
    --fc-r: 10px;
    --fc-r-sm: 7px;
}

/* Strona prawna: pełna szerokość jak reszta sklepu (respektuje „Szerokość kontenera").
   Astra domyślnie boksuje zwykłe strony w wąski kontener — odklejamy go i centrujemy .fc-root. */
.fc-root.fc-legal{max-width:var(--fc-container,1280px);margin:0 auto;width:100%}
.fc-root.fc-legal .fc-wrap{padding:0 24px}
body.fc-shop-ctx .ast-container:has(.fc-root.fc-legal){max-width:none}
@media (max-width: 600px){ .fc-root.fc-legal .fc-wrap{padding:0 16px} }

/* ── breadcrumb + nagłówek strony ───────────────────────────────────────── */

.fc-root .lg-top {
    background: transparent;
    border-bottom: 1px solid var(--fc-border);
}

.fc-root .lg-bc {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--fc-text-soft);
    padding: 18px 0 0;
}

.fc-root .lg-bc a:hover {
    color: var(--fc-magenta);
}

.fc-root .lg-bc i {
    opacity: .5;
}

.fc-root .lg-bc b {
    color: var(--fc-text);
    font-weight: 700;
    font-family: var(--fc-font-head);
}

.fc-root .lg-head {
    padding: 18px 0 34px;
}

.fc-root .lg-eyebrow {
    display: inline-block;
    font-family: var(--fc-font-head);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--fc-magenta);
    margin-bottom: 12px;
}

.fc-root .lg-head h1 {
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -.6px;
}

.fc-root .lg-meta {
    display: flex;
    align-items: center;
    gap: 10px 18px;
    flex-wrap: wrap;
    margin-top: 16px;
    font-size: 13.5px;
    color: var(--fc-text-soft);
}

.fc-root .lg-meta b {
    color: var(--fc-text);
    font-family: var(--fc-font-head);
    font-weight: 600;
}

.fc-root .lg-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1px solid var(--fc-border);
    border-radius: 999px;
    padding: 5px 12px;
    font-family: var(--fc-font-head);
    font-weight: 600;
    font-size: 12px;
    color: var(--fc-text-soft);
}

.fc-root .lg-chip i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fc-cyan);
    flex: none;
}

/* ── layout: sidebar + artykuł ──────────────────────────────────────────── */

.fc-root .lg-layout {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
    padding: 46px 0 70px;
}

/* ── sidebar ────────────────────────────────────────────────────────────── */

.fc-root .lg-aside {
    position: sticky;
    top: 90px;
}

.fc-root .lg-asideh {
    font-family: var(--fc-font-head);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--fc-text-soft);
    padding: 0 14px 10px;
}

.fc-root .lg-doclist {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fc-root .lg-doclink {
    display: flex;
    align-items: center;
    gap: 11px;
    text-align: left;
    width: 100%;
    border: 1px solid transparent;
    background: none;
    border-radius: var(--fc-r-sm);
    padding: 11px 14px;
    font-family: var(--fc-font-head);
    font-weight: 600;
    font-size: 14px;
    color: var(--fc-text-soft);
    cursor: pointer;
    transition: .13s;
    text-decoration: none;
}

.fc-root .lg-doclink:hover {
    color: var(--fc-text);
    background: var(--fc-bg-soft);
}

.fc-root .lg-doclink.is-active {
    background: var(--fc-magenta-soft,#fbeaf6);
    color: var(--fc-magenta);
    border-color: #f1d3e9;
}

.fc-root .lg-doclink svg {
    flex: none;
    opacity: .85;
}

/* ── artykuł ────────────────────────────────────────────────────────────── */

.fc-root .lg-article {
    min-width: 0;
}

/* Spis treści */
.fc-root .lg-toc {
    background: var(--fc-bg-soft);
    border: 1px solid var(--fc-border);
    border-radius: var(--fc-r);
    padding: 16px 18px;
    margin: 0 0 28px;
}

.fc-root .lg-toc__l {
    display: block;
    font-family: var(--fc-font-head);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--fc-text-soft);
    margin-bottom: 11px;
}

.fc-root .lg-toc__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fc-root .lg-toc__chip {
    font-family: var(--fc-font-head);
    font-weight: 600;
    font-size: 13px;
    color: var(--fc-text);
    background: #fff;
    border: 1px solid var(--fc-border);
    border-radius: 999px;
    padding: 6px 13px;
    transition: .13s;
    text-decoration: none;
}

.fc-root .lg-toc__chip:hover {
    border-color: var(--fc-magenta);
    color: var(--fc-magenta);
}

/* Treść z edytora WP — h2/p/ul/li (brak klasy lg-sec, celujemy bezpośrednio) */
.fc-root .lg-content h2 {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.2px;
    padding-top: 30px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--fc-bg-soft);
    scroll-margin-top: 88px;
    font-family: var(--fc-font-head);
    color: var(--fc-text);
    line-height: 1.18;
}

.fc-root .lg-content p {
    font-size: 15.5px;
    line-height: 1.72;
    color: var(--fc-text);
    margin: 14px 0 0;
    text-wrap: pretty;
}

.fc-root .lg-content ul {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fc-root .lg-content li {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--fc-text);
    text-wrap: pretty;
}

.fc-root .lg-content ul > li {
    position: relative;
    padding-left: 26px;
}

.fc-root .lg-content ul > li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--fc-magenta);
}

/* Listy numerowane (ol z edytora WP) — numer przeglądarki, bez kwadracika */
.fc-root .lg-content ol {
    margin: 14px 0 0;
    padding: 0 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fc-root .lg-content ol ol,
.fc-root .lg-content ol ul,
.fc-root .lg-content ul ol {
    margin-top: 10px;
}

/* Inline strong/em w treści */
.fc-root .lg-content strong {
    font-weight: 700;
    color: var(--fc-text);
}

/* Stan pusty — dokument bez treści (np. w przygotowaniu) */
.fc-root .lg-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:48px 24px;border:1px dashed var(--fc-border);border-radius:14px;background:#fff}
.fc-root .lg-empty__ic{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:var(--fc-magenta-soft,#fbeaf6);color:var(--fc-magenta)}
.fc-root .lg-empty h2{font-size:22px;font-weight:700;color:var(--fc-text);margin:0}
.fc-root .lg-empty p{max-width:460px;color:var(--fc-text-soft);line-height:1.6;margin:0}
.fc-root .lg-empty__cta{display:inline-flex;align-items:center;margin-top:6px;padding:11px 22px;border-radius:999px;background:var(--fc-magenta);color:#fff;font-weight:700;font-family:var(--fc-font-head);text-decoration:none}
.fc-root .lg-empty__cta:hover{background:var(--fc-magenta-dark,#a90b8f);color:#fff}

/* ── responsywność ──────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .fc-root .lg-layout {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .fc-root .lg-aside {
        position: static;
        margin-bottom: 20px;
    }

    .fc-root .lg-doclist {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .fc-root .lg-doclink {
        width: auto;
    }
}

@media (max-width: 760px) {
    .fc-root .lg-head h1 {
        font-size: 29px;
    }
}