/* Clash Esports: the legal pages (terms, privacy, refund, contact). Loads after style.css. English and Arabic
   sit side by side in the markup; the page language (html[lang]) shows one. */

html[lang="en"] [data-l="ar"], html[lang="ar"] [data-l="en"] { display: none; }

.legal-actions { margin-inline-start: auto; }
.legal-main { max-width: 760px; margin-inline: auto; padding: 8px var(--margin) 72px; }

.doc-tabs { display: flex; flex-wrap: wrap; gap: 6px 4px; margin-bottom: 32px; border-bottom: 1px solid var(--surface-2); }
.doc-tabs a {
  text-decoration: none; font-weight: 600; font-size: var(--step-small); color: var(--muted);
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; border-bottom: 3px solid transparent;
  transition: color 0.6s ease, border-color 0.6s ease;
}
.doc-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--red); }
@media (hover: hover) and (pointer: fine) { .doc-tabs a:hover { color: var(--ink); } }

.doc h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); line-height: 1.05; text-wrap: balance; }
.doc[lang="ar"] h1 { font-family: var(--font-text); font-weight: 800; line-height: 1.25; }
.doc-meta { margin-top: 10px; color: var(--muted); font-size: var(--step-small); }
.doc-intro { margin-top: 20px; font-size: var(--step-lead); line-height: 1.45; font-weight: 600; }
.doc section { margin-top: 36px; padding-inline-start: 16px; border-inline-start: 4px solid var(--surface-2); }
.doc h2 { font-weight: 800; font-size: 1.25rem; line-height: 1.3; margin-bottom: 10px; }
.doc p + p, .doc p + ul, .doc ul + p { margin-top: 12px; }
.doc p, .doc li { font-size: var(--step-body); overflow-wrap: anywhere; }
.doc ul { list-style: disc; padding-inline-start: 1.25em; display: grid; gap: 6px; }
.doc li::marker { color: var(--muted); }
.doc a { color: var(--blue-strong); text-underline-offset: 0.25em; }

.legal-foot { background: var(--surface); padding: 32px var(--margin) calc(32px + var(--safe-bottom)); border-top: 4px solid var(--red); display: grid; gap: 12px; justify-items: center; text-align: center; }
.legal-foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; }
.legal-foot a { text-decoration: none; font-weight: 600; font-size: var(--step-small); min-height: 44px; display: inline-flex; align-items: center; }
.legal-foot p { color: var(--muted); font-size: var(--step-small); }
@media (hover: hover) and (pointer: fine) { .legal-foot a:hover { text-decoration: underline; text-underline-offset: 0.3em; } }