/* assets/css/v2/pages-legal.css — /about, /terms, /privacy-policy and /contact on the shared v2 chrome.
   Logical properties only (inline-start/end, block, inset-inline) so the same sheet renders
   correctly in Arabic RTL and English LTR. No transform/filter/sticky/animation: these pages
   carry no ad unit, and the ad contract (tools/verify/lint-ad-contract.ps1) must stay green. */

.legal-page { padding-block: var(--sp-5) var(--sp-8); }

.crumbs { display: flex; flex-wrap: wrap; gap: .4rem; font-family: var(--font-mono); font-size: .72rem; color: var(--c-muted); }
.crumbs a { color: var(--c-muted); text-decoration: none; }
.crumbs a:hover { color: var(--c-brand); }

.legal-head { margin-block: var(--sp-5) var(--sp-4); padding-block-start: var(--sp-4); border-block-start: var(--rule); }
.legal-tag { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.legal-head h1 { margin-block-start: var(--sp-2); font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.35; padding-block-end: .06em; }
:lang(ar) .legal-head h1, .legal-head h1:lang(ar) { font-family: "Almarai", "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif; font-weight: 800; font-feature-settings: "mark" 1, "mkmk" 1, "kern" 1; }
.legal-intro { margin-block-start: var(--sp-3); font-size: 1.08rem; line-height: 1.6; color: var(--c-muted); max-inline-size: 62ch; }
.legal-updated { margin-block-start: var(--sp-2); font-family: var(--font-mono); font-size: .72rem; color: var(--c-muted); }

.legal { max-inline-size: 72ch; }
.legal h2 { margin-block: var(--sp-6) var(--sp-2); font-size: clamp(1.2rem, 3vw, 1.5rem); }
.legal p, .legal li { color: #2b2b33; line-height: 1.7; }
.legal p + p { margin-block-start: var(--sp-3); }
.legal ul { list-style: disc; padding-inline-start: 1.4rem; margin-block: var(--sp-2); }
.legal a { color: var(--c-brand); }
.legal .btn { margin-block-start: var(--sp-5); }

/* ---- contact ---- */
.contact-grid { display: grid; gap: var(--sp-6); margin-block-start: var(--sp-4); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1.2fr; } }

.contact-list { list-style: none; display: grid; gap: var(--sp-1); margin: 0; padding: 0; }
.contact-list a, .contact-list li > div { display: grid; gap: 2px; padding-block: var(--sp-2); border-block-end: 1px solid var(--c-line); text-decoration: none; }
.contact-list a:hover .v { color: var(--c-brand); }
.contact-list .k { font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--c-muted); }
.contact-list .v { color: var(--c-text); font-weight: var(--fw-strong); }

.notice { border: 1px solid var(--c-line); border-inline-start: 3px solid var(--c-brand); padding: var(--sp-3); margin-block: var(--sp-4); background: var(--c-surface); line-height: 1.6; }
.notice--ok { border-inline-start-color: #1b7f3b; }
.notice--bad { border-inline-start-color: var(--c-danger); }

.panel { border: 1px solid var(--c-line); padding: var(--sp-5); background: var(--c-bg); }
.panel h2 { margin-block-end: var(--sp-2); font-size: clamp(1.2rem, 3vw, 1.5rem); }
.panel .muted { color: var(--c-muted); font-size: .92rem; margin-block-end: var(--sp-4); }

.field { margin-block-end: var(--sp-3); }
.field label { display: block; font-size: .82rem; font-weight: var(--fw-strong); margin-block-end: 6px; }
.field input, .field textarea { inline-size: 100%; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: var(--radius); font: inherit; background: var(--c-bg); color: var(--c-text); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 1px; }
.field textarea { min-block-size: 140px; resize: vertical; }
.honeypot { position: absolute; inset-inline-start: -9999px; }
.form-status { margin-block-start: var(--sp-3); color: var(--c-muted); font-size: .9rem; }