/* ═══════════════════════════════════════════════════════════════
   BUMAGA LEGAL PAGES — Shared Styles v1.0
   Location: /assets/css/legal-pages.css
   ═══════════════════════════════════════════════════════════════

   Единый стиль-фундамент для всех правовых страниц проекта:
     • about.php
     • terms.php
     • privacy.php
     • acceptable-use.php

   Архитектура скопирована с labels.css / receipts.css:
     • Hero 1:1 (gradient icon + bold title + muted subtitle)
     • Namespace `leg-*`
     • Только --bp-* токены, ноль хардкод-цветов
     • Dependencies: tokens.css (обязателен)

   Layout: 2-колоночный grid (контент + sticky TOC справа) на desktop,
   TOC сверху в виде аккордеона на mobile.

   Контент-колонка ограничена 1100px максимум для читабельности
   юридических текстов (не каталог, а длинные параграфы).

   Namespace ownership:
     .leg-container     — внешняя обёртка (max-width + padding)
     .leg-hero          — шапка (title + icon + subtitle + meta)
     .leg-layout        — grid (content + sidebar)
     .leg-content       — колонка с текстом
     .leg-sidebar       — колонка с TOC (sticky)
     .leg-toc           — оглавление
     .leg-section       — логический раздел документа (<section>)
     .leg-card          — карточка внутри секции (для выделенных блоков)
     .leg-callout       — цветной блок (info / warning / success / danger)
     .leg-table         — юр-таблицы (сроки, условия, матрицы)
     .leg-def           — definition row (для Terms → "Определения")
     .leg-cross         — блок "См. также" внизу страницы
     .leg-back-to-top   — кнопка "наверх" (fixed)
   ═══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   CONTAINER
   ══════════════════════════════════════════════════════════════ */
.leg-container { max-width:1100px; margin:0 auto; padding:40px 24px 60px; }


/* ══════════════════════════════════════════════════════════════
   HERO — 1:1 с labels.css / receipts.css / exchange
   ══════════════════════════════════════════════════════════════ */
.leg-hero { text-align:center; margin-bottom:48px; }
.leg-hero-title { font-size:42px; font-weight:900; margin-bottom:15px; display:flex; align-items:center; justify-content:center; gap:15px; color:var(--bp-text); line-height:1.15; }
.leg-hero-icon { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; background:linear-gradient(135deg, var(--bp-accent) 0%, #2d7cd6 100%); border-radius:var(--bp-radius); box-shadow:var(--bp-shadow-accent); flex-shrink:0; }
.leg-hero-icon svg { width:32px; height:32px; color:#fff; }
.leg-hero-subtitle { color:var(--bp-text-secondary); font-size:18px; max-width:600px; margin:0 auto; line-height:1.6; }

/* ── Meta badges под subtitle: "Last updated", "Effective date" ── */
.leg-meta { display:flex; justify-content:center; gap:10px; margin-top:22px; flex-wrap:wrap; }
.leg-meta-item { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; background:var(--bp-surface); border:1px solid var(--bp-border); border-radius:var(--bp-radius-xs); font-size:0.78rem; color:var(--bp-text-secondary); }
.leg-meta-item svg { width:13px; height:13px; color:var(--bp-text-muted); }
.leg-meta-item strong { color:var(--bp-text); font-weight:600; }


/* ══════════════════════════════════════════════════════════════
   LAYOUT — 2 колонки: контент + sticky TOC справа
   ══════════════════════════════════════════════════════════════ */
.leg-layout { display:grid; grid-template-columns:minmax(0, 1fr) 240px; gap:48px; align-items:start; }
.leg-layout--no-toc { grid-template-columns:minmax(0, 1fr); }
.leg-content { min-width:0; /* prevents horizontal overflow from long URLs */ }
.leg-sidebar { position:sticky; top:100px; }


/* ══════════════════════════════════════════════════════════════
   TABLE OF CONTENTS (TOC)
   ══════════════════════════════════════════════════════════════ */
.leg-toc { background:var(--bp-card); border:1px solid var(--bp-border); border-radius:var(--bp-radius); padding:18px 16px; }
.leg-toc-title { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.9px; color:var(--bp-text-muted); margin:0 0 12px; padding:0 6px 10px; border-bottom:1px solid var(--bp-border); }
.leg-toc-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:1px; }
.leg-toc-link { display:block; padding:8px 10px; font-size:0.85rem; color:var(--bp-text-secondary); text-decoration:none; border-radius:var(--bp-radius-xs); border-left:2px solid transparent; transition:all var(--bp-transition-fast); line-height:1.35; }
.leg-toc-link:hover { color:var(--bp-text); background:rgba(255,255,255,0.03); }
.leg-toc-link.active { color:var(--bp-accent); background:var(--bp-accent-dim); border-left-color:var(--bp-accent); font-weight:500; }

/* ── Mobile: TOC сверху, собранная в <details> ── */
.leg-toc-mobile-summary { display:none; }


/* ══════════════════════════════════════════════════════════════
   SECTIONS (логические разделы)
   ══════════════════════════════════════════════════════════════ */
.leg-section { margin-bottom:44px; scroll-margin-top:100px; /* sticky header offset для якорей */ }
.leg-section:last-child { margin-bottom:0; }

.leg-section-title { font-size:1.5rem; font-weight:700; color:var(--bp-text); margin:0 0 20px; padding-bottom:12px; border-bottom:1px solid var(--bp-border); position:relative; line-height:1.3; }
.leg-section-title::after { content:''; position:absolute; bottom:-1px; left:0; width:56px; height:2px; background:var(--bp-accent); }

.leg-subsection { margin-top:28px; }
.leg-subsection-title { font-size:1.08rem; font-weight:600; color:var(--bp-text); margin:0 0 12px; line-height:1.35; }


/* ══════════════════════════════════════════════════════════════
   CONTENT ELEMENTS (текст, списки, ссылки)
   ══════════════════════════════════════════════════════════════ */
.leg-content p { color:var(--bp-text-secondary); line-height:1.7; margin:0 0 14px; font-size:0.95rem; }
.leg-content p:last-child { margin-bottom:0; }

.leg-content strong { color:var(--bp-text); font-weight:600; }
.leg-content em { color:var(--bp-text); font-style:italic; }

/* Prose links (inside running text: paragraphs, lists, cards, callouts, definitions, tables).
   Action-style links (.ab-stat-main, .ab-contact-cta, .leg-cross-link, .leg-toc-link)
   intentionally fall OUTSIDE this selector so their button/card styling is not overridden. */
.leg-content :is(p, li, dd) a,
.leg-content .leg-card p a,
.leg-content .leg-callout-body a,
.leg-content .leg-def-body a,
.leg-content .leg-table a {
    color: var(--bp-accent);
    text-decoration: none;
    border-bottom: 1px dashed var(--bp-accent-border);
    transition: border-bottom var(--bp-transition-fast), color var(--bp-transition-fast);
}
.leg-content :is(p, li, dd) a:hover,
.leg-content .leg-card p a:hover,
.leg-content .leg-callout-body a:hover,
.leg-content .leg-def-body a:hover,
.leg-content .leg-table a:hover {
    color: var(--bp-accent-hover);
    border-bottom: 1px solid var(--bp-accent);
}

.leg-content ul, .leg-content ol { color:var(--bp-text-secondary); line-height:1.7; padding-left:22px; margin:0 0 14px; font-size:0.95rem; }
.leg-content li { margin-bottom:7px; }
.leg-content li:last-child { margin-bottom:0; }
.leg-content li::marker { color:var(--bp-accent); }

.leg-content code { background:var(--bp-surface); padding:2px 8px; border-radius:var(--bp-radius-xs); font-family:var(--bp-mono); font-size:0.85em; color:var(--bp-accent); border:1px solid var(--bp-border); }

.leg-content hr { border:none; border-top:1px solid var(--bp-border); margin:28px 0; }


/* ══════════════════════════════════════════════════════════════
   CARDS — выделенные блоки внутри секции
   ══════════════════════════════════════════════════════════════ */
.leg-card { background:var(--bp-card); border:1px solid var(--bp-border); border-radius:var(--bp-radius); padding:20px 24px; margin:20px 0; }
.leg-card--raised { background:var(--bp-card-raised); }
.leg-card-title { font-size:1rem; font-weight:600; color:var(--bp-text); margin:0 0 10px; }
.leg-card p:last-child, .leg-card ul:last-child, .leg-card ol:last-child { margin-bottom:0; }


/* ══════════════════════════════════════════════════════════════
   CALLOUTS — info / warning / success / danger
   ══════════════════════════════════════════════════════════════ */
.leg-callout { padding:14px 18px; border-radius:var(--bp-radius-sm); border-left:3px solid; margin:18px 0; display:flex; gap:12px; align-items:flex-start; }
.leg-callout-icon { flex-shrink:0; width:20px; height:20px; display:flex; align-items:center; justify-content:center; font-size:1rem; margin-top:1px; }
.leg-callout-body { flex:1; font-size:0.9rem; line-height:1.6; color:var(--bp-text-secondary); }
.leg-callout-body p { margin:0 0 8px; color:inherit; font-size:inherit; line-height:inherit; }
.leg-callout-body p:last-child { margin-bottom:0; }
.leg-callout-body strong { color:var(--bp-text); }

.leg-callout--info    { background:var(--bp-accent-dim); border-left-color:var(--bp-accent); }
.leg-callout--warning { background:var(--bp-orange-dim); border-left-color:var(--bp-orange); }
.leg-callout--success { background:var(--bp-green-dim);  border-left-color:var(--bp-green);  }
.leg-callout--danger  { background:var(--bp-red-dim);    border-left-color:var(--bp-red);    }


/* ══════════════════════════════════════════════════════════════
   TABLES — юр-таблицы (сроки возврата, матрицы прав и т.п.)
   ══════════════════════════════════════════════════════════════ */
.leg-table-wrap { overflow-x:auto; margin:20px 0; border-radius:var(--bp-radius); border:1px solid var(--bp-border); }
.leg-table { width:100%; border-collapse:separate; border-spacing:0; background:var(--bp-card); }
.leg-table th, .leg-table td { padding:12px 16px; text-align:left; font-size:0.88rem; }
.leg-table th { background:var(--bp-surface); color:var(--bp-text); font-weight:600; font-size:0.76rem; text-transform:uppercase; letter-spacing:0.6px; border-bottom:1px solid var(--bp-border); white-space:nowrap; }
.leg-table td { color:var(--bp-text-secondary); line-height:1.6; border-bottom:1px solid var(--bp-border-light); }
.leg-table tbody tr:last-child td { border-bottom:none; }
.leg-table tbody tr:hover td { background:rgba(255,255,255,0.02); }


/* ══════════════════════════════════════════════════════════════
   DEFINITION LIST — для секции "Определения" (Terms)
   ══════════════════════════════════════════════════════════════ */
.leg-def-list { margin:20px 0; background:var(--bp-card); border:1px solid var(--bp-border); border-radius:var(--bp-radius); padding:4px 20px; }
.leg-def { display:grid; grid-template-columns:200px 1fr; gap:20px; padding:14px 0; border-bottom:1px solid var(--bp-border-light); font-size:0.92rem; align-items:start; }
.leg-def:last-child { border-bottom:none; }
.leg-def-term { font-weight:600; color:var(--bp-text); }
.leg-def-body { color:var(--bp-text-secondary); line-height:1.6; }
.leg-def-body p:last-child { margin-bottom:0; }


/* ══════════════════════════════════════════════════════════════
   CROSS-LINKS — "См. также" блок внизу страницы
   ══════════════════════════════════════════════════════════════ */
.leg-cross { margin-top:56px; padding-top:36px; border-top:1px solid var(--bp-border); }
.leg-cross-title { font-size:0.76rem; font-weight:700; text-transform:uppercase; letter-spacing:0.9px; color:var(--bp-text-muted); margin:0 0 18px; text-align:center; }
.leg-cross-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; }
.leg-cross-link { display:flex; align-items:center; gap:12px; padding:14px 18px; background:var(--bp-card); border:1px solid var(--bp-border); border-radius:var(--bp-radius-sm); text-decoration:none; color:var(--bp-text); transition:all var(--bp-transition); }
.leg-cross-link:hover { border-color:var(--bp-accent-border-strong); background:var(--bp-card-hover); transform:translateY(-1px); }
.leg-cross-link-icon { width:36px; height:36px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--bp-surface); border-radius:var(--bp-radius-xs); color:var(--bp-accent); }
.leg-cross-link-icon svg { width:18px; height:18px; }
.leg-cross-link-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.leg-cross-link-label { font-size:0.68rem; color:var(--bp-text-muted); text-transform:uppercase; letter-spacing:0.5px; }
.leg-cross-link-name { font-size:0.9rem; font-weight:600; color:var(--bp-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }


/* ══════════════════════════════════════════════════════════════
   BACK TO TOP — плавающая кнопка
   ══════════════════════════════════════════════════════════════ */
.leg-back-to-top { position:fixed; bottom:30px; right:30px; width:44px; height:44px; border-radius:50%; background:var(--bp-accent); color:#fff; border:none; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity var(--bp-transition), visibility var(--bp-transition), transform var(--bp-transition), background var(--bp-transition); box-shadow:var(--bp-shadow-accent); z-index:100; display:flex; align-items:center; justify-content:center; }
.leg-back-to-top.visible { opacity:1; visibility:visible; transform:translateY(0); }
.leg-back-to-top:hover { background:var(--bp-accent-hover); transform:translateY(-2px); }
.leg-back-to-top svg { width:18px; height:18px; }


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet / Mobile
   ══════════════════════════════════════════════════════════════ */
@media (max-width:1023px) {
    .leg-layout { grid-template-columns:minmax(0, 1fr); gap:24px; }
    .leg-sidebar { position:static; order:-1; }

    /* TOC превращается в collapsible блок */
    .leg-toc { padding:0; }
    .leg-toc-title { display:none; }
    .leg-toc-mobile-summary { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; cursor:pointer; user-select:none; font-size:0.85rem; font-weight:600; color:var(--bp-text); list-style:none; }
    .leg-toc-mobile-summary::-webkit-details-marker { display:none; }
    .leg-toc-mobile-summary::after { content:''; width:10px; height:10px; border-right:2px solid var(--bp-text-secondary); border-bottom:2px solid var(--bp-text-secondary); transform:rotate(45deg); transition:transform var(--bp-transition); }
    details[open] .leg-toc-mobile-summary::after { transform:rotate(-135deg); }
    .leg-toc-list { padding:0 12px 12px; }
}

@media (max-width:640px) {
    .leg-container { padding:24px 16px 40px; }
    .leg-hero { margin-bottom:32px; }
    .leg-hero-title { font-size:28px; gap:12px; }
    .leg-hero-icon { width:44px; height:44px; }
    .leg-hero-icon svg { width:24px; height:24px; }
    .leg-hero-subtitle { font-size:15px; }
    .leg-section { margin-bottom:32px; }
    .leg-section-title { font-size:1.25rem; }
    .leg-subsection-title { font-size:1rem; }
    .leg-content p, .leg-content ul, .leg-content ol { font-size:0.92rem; }
    .leg-card { padding:16px 18px; }
    .leg-callout { padding:12px 14px; gap:10px; }
    .leg-def { grid-template-columns:1fr; gap:4px; padding:12px 0; }
    .leg-def-term { font-size:0.9rem; }
    .leg-cross-grid { grid-template-columns:1fr; }
    .leg-back-to-top { bottom:20px; right:20px; width:40px; height:40px; }
    .leg-back-to-top svg { width:16px; height:16px; }
}


/* ══════════════════════════════════════════════════════════════
   PRINT — читабельная печатная версия
   ══════════════════════════════════════════════════════════════ */
@media print {
    .leg-sidebar, .leg-back-to-top, .leg-hero-icon, .leg-cross { display:none !important; }
    .leg-layout { grid-template-columns:1fr; }
    .leg-container { max-width:none; padding:0; }
    .leg-section { page-break-inside:avoid; margin-bottom:24px; }
    .leg-hero-title, .leg-section-title, .leg-subsection-title, .leg-content strong { color:#000 !important; }
    .leg-hero-subtitle, .leg-content p, .leg-content li, .leg-meta-item { color:#222 !important; }
    body { background:#fff !important; }
    .leg-content a { color:#000 !important; text-decoration:underline !important; border-bottom:none !important; }
    .leg-callout, .leg-card, .leg-table, .leg-def-list { border:1px solid #999 !important; background:#fafafa !important; break-inside:avoid; }
    .leg-section-title::after { background:#000 !important; }
}


/* ══════════════════════════════════════════════════════════════
   ACCESSIBILITY — focus states
   ══════════════════════════════════════════════════════════════ */
.leg-toc-link:focus-visible,
.leg-cross-link:focus-visible,
.leg-back-to-top:focus-visible,
.leg-content a:focus-visible { outline:2px solid var(--bp-accent); outline-offset:2px; border-radius:var(--bp-radius-xs); }

@media (prefers-reduced-motion: reduce) {
    .leg-back-to-top, .leg-cross-link, .leg-toc-link, .leg-content a { transition:none !important; }
    .leg-back-to-top:hover, .leg-cross-link:hover { transform:none !important; }
}