@import url('./shared.css');


/* ---------- Two-column layout ----------
   TOC sits in the first (inline-start) column so it renders on the right
   in Arabic, while the article stays first in the DOM for screen readers. */
.legal-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.legal-body {
    /* Both children are pinned to row 1 explicitly. Without grid-row, the
       article claims row 1 / col 2 and grid's sparse auto-placement pushes
       the TOC — which asks for col 1 — down into a second row. */
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding: clamp(20px, 3vw, 36px);
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}

.legal-toc {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: calc(var(--header-h) + 16px);
    padding: 22px 20px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    max-height: calc(100vh - var(--header-h) - 40px);
    overflow-y: auto;
}

.legal-toc h2 {
    margin-bottom: 14px;
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
}

.legal-toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.legal-toc a {
    display: block;
    padding: 7px 10px;
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.2s, background-color 0.2s;
}

.legal-toc a:hover {
    color: var(--accent);
    background: var(--accent-soft);
}

.legal-toc a.is-current {
    color: var(--accent);
    font-weight: 600;
    background: var(--accent-soft);
}

/* ---------- Article content ---------- */
.legal-section {
    /* Clear the sticky header when jumped to from the TOC */
    scroll-margin-top: calc(var(--header-h) + 24px);
}

.legal-section + .legal-section {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid #EEF1F4;
}

.section-title {
    margin-bottom: 14px;
    color: var(--text);
    font-size: clamp(17px, 2vw, 20px);
    font-weight: 700;
    line-height: 1.5;
}

.section-title .num {
    color: var(--accent);
}

/* .description is used on both <p> and <div> wrappers across these pages,
   and the wrappers hold bare <p> children. */
.legal-section .description,
.legal-section .description p,
.legal-section > p {
    margin-bottom: 12px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.95;
}

.legal-section .description:last-child,
.legal-section .description p:last-child,
.legal-section > p:last-child {
    margin-bottom: 0;
}

.legal-section b {
    color: var(--text);
    font-weight: 600;
}

.legal-section a {
    color: var(--accent);
}

/* Lists — each list carries an inline list-style-type resolved from the
   original page's own stylesheet, so markers render exactly as before.
   Note: no display:flex here. Flex blockifies <li>, which drops ::marker
   and would silently erase the roman/alpha numbering. */
.legal-section ul,
.legal-section ol {
    margin: 0 0 12px;
    padding-inline-start: 26px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.95;
}

/* Lists whose items already carry their own "أ) ب) ج)" prefixes in the text */
.legal-section ul.no-marker,
.legal-section ol.no-marker {
    list-style: none;
    padding-inline-start: 0;
}

.legal-section li {
    margin-bottom: 10px;
}

.legal-section li:last-child {
    margin-bottom: 0;
}

.legal-section li::marker {
    color: var(--accent);
}

/* Nested lists sit closer under their parent item */
.legal-section li > ul,
.legal-section li > ol,
.legal-section ul ul,
.legal-section ol ol {
    margin-top: 10px;
    margin-bottom: 0;
}

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 1000px) {
    /* TOC drops away; the document reads top to bottom */
    .legal-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .legal-body {
        grid-column: 1;
    }

    .legal-toc {
        display: none;
    }
}

@media (max-width: 760px) {
    /* Chrome-hiding for small screens lives in shared.css, scoped to
       body.content so it applies to every content page. */
    .legal-body {
        border-radius: 12px;
    }

    .legal-section .description,
    .legal-section .description p,
    .legal-section ul,
    .legal-section ol {
        font-size: 15px;
        line-height: 1.85;
    }
}