/* =====================================================
   legal.css — RapiX Solutions Legal Page Bundle
   var() colours only (RULE 1). Loaded on the Legal Page
   template via enqueue.php.
   Two blocks: .legal-header (small editorial intro) +
   .legal-prose (long-form WYSIWYG content styling).
   ===================================================== */

/* =====================================================
   Header — editorial intro
   Eyebrow chip + "Last updated …" meta on the top row,
   hairline, page title at .display scale, optional intro,
   closing hairline. Same visual language as the universal
   page-hero but lighter — legal pages don't need drama.
   ===================================================== */

.legal-header__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-width: var(--container-max);
}

.legal-header__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.legal-header__updated {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.legal-header__rule {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 0;
    width: 100%;
}

.legal-header__title {
    margin: 0;
    max-width: 18ch;
}

.legal-header__intro {
    font-family: var(--font-body);
    font-size: var(--text-body-lg);
    line-height: var(--leading-body);
    color: var(--color-muted);
    max-width: var(--measure-text);
}

.legal-header__intro p { margin: 0 0 var(--space-3); }
.legal-header__intro p:last-child { margin-bottom: 0; }

.legal-header__intro em {
    font-family: var(--font-accent);
    font-style: italic;
    color: var(--color-text);
    font-size: 1.06em;
    font-weight: 500;
}

@media ( max-width: 640px ) {
    .legal-header__top {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-2);
    }
    .legal-header__title { max-width: 100%; }
}

/* =====================================================
   Prose — long-form editorial body content
   Targets the default WP editor output. Editorial typography
   tokens, generous line-height, refined headings, primary-
   orange anchor links, italic Cormorant accents on em.
   max-width ~72ch for legal-document readability.
   ===================================================== */

.legal-prose {
    max-width: 72ch;
    margin: 0 auto;
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.75;
    color: var(--color-text);
}

/* ---- Headings ---- */

.legal-prose h2,
.legal-prose h3,
.legal-prose h4,
.legal-prose h5,
.legal-prose h6 {
    font-family: var(--font-heading);
    font-weight: var(--fw-extrabold);
    line-height: var(--leading-snug);
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.legal-prose h2 {
    font-size: var(--text-h2);
    margin: var(--space-16) 0 var(--space-5);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
}

.legal-prose h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.legal-prose h3 {
    font-size: var(--text-h3);
    margin: var(--space-10) 0 var(--space-4);
}

.legal-prose h4 {
    font-size: var(--text-h4);
    margin: var(--space-8) 0 var(--space-3);
}

/* ---- Paragraphs ---- */

.legal-prose p {
    margin: 0 0 var(--space-5);
}

.legal-prose p:last-child { margin-bottom: 0; }

/* ---- Lists ----
   Tailwind's preflight resets list-style: none on every ul/ol, which
   kills the default markers. We render our own custom markers via
   ::before so they always show regardless of any global reset — and
   they look more editorial than the default disc + decimal anyway. */

.legal-prose ul,
.legal-prose ol {
    list-style: none;
    margin: 0 0 var(--space-5);
    padding: 0;
}

.legal-prose ul li,
.legal-prose ol li {
    position: relative;
    padding-left: var(--space-7);
    margin-bottom: var(--space-3);
    line-height: 1.75;
}

/* Unordered list — small primary-orange dot */
.legal-prose ul > li::before {
    content: '';
    position: absolute;
    left: var(--space-2);
    top: 0.7em;
    width: 6px;
    height: 6px;
    background-color: var(--color-primary);
    border-radius: var(--radius-full);
}

/* Ordered list — primary-orange numerals (1. 2. 3. …) */
.legal-prose ol {
    counter-reset: legal-counter;
}

.legal-prose ol > li {
    counter-increment: legal-counter;
    padding-left: var(--space-8);
}

.legal-prose ol > li::before {
    content: counter( legal-counter ) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-primary);
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    line-height: 1.75;
    min-width: var(--space-7);
}

/* Nested lists keep the same marker style, just tighter spacing */
.legal-prose ul ul,
.legal-prose ul ol,
.legal-prose ol ul,
.legal-prose ol ol {
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
}

/* ---- Links ---- */

.legal-prose a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color var(--ease-base);
}

.legal-prose a:hover {
    color: var(--color-primary-dark);
}

/* ---- Inline accents ---- */

.legal-prose strong {
    font-weight: var(--fw-bold);
    color: var(--color-text);
}

.legal-prose em {
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 500;
    color: var(--color-text);
}

/* ---- Blockquote ---- */

.legal-prose blockquote {
    margin: var(--space-8) 0;
    padding: var(--space-2) 0 var(--space-2) var(--space-6);
    border-left: 3px solid var(--color-primary);
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 500;
    font-size: var(--text-body-lg);
    line-height: var(--leading-snug);
    color: var(--color-text);
}

.legal-prose blockquote p { margin: 0 0 var(--space-3); }
.legal-prose blockquote p:last-child { margin-bottom: 0; }

/* ---- Code ---- */

.legal-prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    font-size: 0.9em;
    background-color: var(--color-bg);
    padding: 0.125em 0.4em;
    border-radius: var(--radius-sm);
    color: var(--color-text);
}

.legal-prose pre {
    background-color: var(--color-bg);
    padding: var(--space-5);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: var(--space-6) 0;
    font-size: var(--text-sm);
    line-height: 1.6;
}

.legal-prose pre code {
    background: none;
    padding: 0;
    font-size: inherit;
}

/* ---- Tables (for data-collection / itemised legal data) ---- */

.legal-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-6) 0;
    font-size: var(--text-body);
}

.legal-prose th,
.legal-prose td {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    line-height: var(--leading-snug);
    vertical-align: top;
}

.legal-prose th {
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    font-size: var(--text-xs);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom-width: 2px;
    border-bottom-color: var(--color-text);
}

/* ---- Horizontal rule ---- */

.legal-prose hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-10) 0;
}

/* ---- Responsive ---- */

@media ( max-width: 768px ) {
    .legal-prose {
        font-size: var(--text-body);
        line-height: 1.7;
    }
    .legal-prose h2 {
        margin: var(--space-12) 0 var(--space-4);
        padding-top: var(--space-6);
    }
    .legal-prose h3 { margin: var(--space-8) 0 var(--space-3); }
    .legal-prose ul > li { padding-left: var(--space-6); }
    .legal-prose ol > li { padding-left: var(--space-7); }
    .legal-prose ul > li::before { left: var(--space-1); }
}

@media ( max-width: 480px ) {
    .legal-prose h2 { margin-top: var(--space-10); padding-top: var(--space-5); }
}