/* Legal and support pages (privacy, terms, support, delete-account, child-safety), written by web/build_legal.py.
   Same design system as the playqahwa.com site (website/src/site/site.css): emerald, gold and cream, Readex Pro for
   text, El Messiri and Marcellus for headings. The fonts are served by the site build at /fonts/. */

@font-face { font-family: "Marcellus"; src: url(/fonts/marcellus-latin.woff2) format("woff2"); font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Readex"; src: url(/fonts/readex-latin.woff2) format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Readex Ar"; src: url(/fonts/readex-arabic.woff2) format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Messiri"; src: url(/fonts/messiri-arabic.woff2) format("woff2"); font-weight: 500 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }

:root {
	--bg: #061814;
	--surface: rgba(15, 58, 49, .38);
	--surface-solid: #0b2620;
	--text: #f4ecd8;
	--muted: rgba(244, 236, 216, .72);
	--accent: #ffe39a;
	--gold: #e9b949;
	--accent-text: #2a1f12;
	--border: rgba(244, 236, 216, .12);
	--line: rgba(233, 185, 73, .3);
	--note-bg: rgba(233, 185, 73, .08);
	--note-border: #e9b949;
	--danger: #ff8a7d;
	--ok: #7fe39a;
	--font: "Readex", "Readex Ar", system-ui, -apple-system, "Segoe UI", Roboto, Tahoma, sans-serif;
	--display: "Marcellus", "Messiri", Georgia, serif;
	color-scheme: dark;
}
html[dir="rtl"] { --display: "Messiri", "Marcellus", Tahoma, sans-serif; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
	margin: 0;
	min-height: 100vh;
	background: radial-gradient(1000px 600px at 85% -10%, rgba(21, 82, 68, .5), transparent 60%), var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.7;
	overflow-wrap: anywhere;
	-webkit-font-smoothing: antialiased;
}
[lang="ar"] { line-height: 1.9; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.top {
	position: sticky; top: 0; z-index: 2;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 12px max(16px, calc((100% - 1160px) / 2));
	background: rgba(6, 24, 20, .9);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--border);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font: 400 1.15rem/1 var(--display); letter-spacing: .06em; text-decoration: none; color: var(--text); }
.brand img { display: block; width: 28px; height: auto; filter: drop-shadow(0 2px 6px rgba(233, 185, 73, .35)); }

.lang-switch { display: flex; gap: 6px; }
.lang-switch button {
	font: inherit; font-size: 15px; min-height: 44px; padding: 6px 14px; border-radius: 999px;
	border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer;
}
.lang-switch button:hover { border-color: var(--line); }
.lang-switch button[aria-pressed="true"] { background: linear-gradient(180deg, #ffd978, #e9b949); color: var(--accent-text); border-color: transparent; font-weight: 600; }

main { max-width: 800px; margin: 0 auto; padding: 16px 20px 64px; }
.doc + .doc { border-top: 1px solid var(--border); margin-top: 40px; padding-top: 8px; }
.js .doc + .doc { border-top: 0; margin-top: 0; }
.doc[hidden], .js[lang="en"] .doc[data-lang="ar"], .js[lang="ar"] .doc[data-lang="en"] { display: none; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; color: var(--text); text-wrap: balance; }
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3 { font-weight: 700; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 2.9rem); line-height: 1.15; margin: 36px 0 16px; }
h1::before { content: ""; display: block; width: 44px; height: 2px; margin-bottom: 22px; background: linear-gradient(90deg, var(--gold), transparent); }
[dir="rtl"] h1::before { background: linear-gradient(-90deg, var(--gold), transparent); }
h2 { font-size: 1.5rem; line-height: 1.3; margin: 40px 0 10px; color: var(--gold); }
h3 { font-size: 1.15rem; margin: 26px 0 6px; }
h1, h2, h3 { scroll-margin-top: 84px; }
p, li { color: rgba(244, 236, 216, .86); }
strong { color: var(--text); }

ul, ol { padding-inline-start: 1.4em; }
li { margin: 6px 0; }
li::marker { color: var(--gold); }
ol.ar-num { list-style-type: arabic-indic; }

code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 5px; padding: 0 5px; }
pre { overflow-x: auto; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
pre code { border: 0; padding: 0; }

.table-wrap { overflow-x: auto; margin: 16px 0; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td { text-align: start; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--border); min-width: 120px; }
tr:last-child td { border-bottom: 0; }
th { background: rgba(233, 185, 73, .1); color: var(--gold); font-weight: 600; }

.note { background: var(--note-bg); border: 1px solid var(--line); border-inline-start: 3px solid var(--note-border); border-radius: 14px; padding: 4px 18px; margin: 18px 0; }

.doc-nav { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--border); }
.doc-nav a { display: inline-block; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; text-decoration: none; color: var(--text); font-size: .95rem; }
.doc-nav a:hover { border-color: var(--line); color: var(--accent); }
.foot { color: var(--muted); font-size: .9rem; margin-top: 20px; }

/* Deletion request form */
.del-form fieldset { position: relative; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); padding: 20px; margin: 20px 0; }
.del-form legend { font-weight: 700; padding: 0 8px; color: var(--gold); }
.del-form label { display: block; font-weight: 600; margin-top: 16px; }
.del-form small { display: block; color: var(--muted); font-size: .85rem; }
.del-form input:not([type="checkbox"]), .del-form textarea {
	width: 100%; font: inherit; font-size: 16px; padding: 11px 13px; margin-top: 6px;
	border: 1px solid var(--border); border-radius: 12px; background: rgba(6, 24, 20, .8); color: var(--text);
}
.del-form input:focus, .del-form textarea:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(233, 185, 73, .25); }
.del-form input[name="player_id"] { letter-spacing: .08em; text-transform: uppercase; }
.del-form .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.del-form .check input { width: 20px; height: 20px; margin-top: 6px; flex: none; accent-color: #e9b949; }
.del-form button {
	margin-top: 18px; font: inherit; font-weight: 700; min-height: 48px; padding: 10px 22px;
	border: 1px solid var(--danger); border-radius: 999px; background: rgba(255, 138, 125, .12); color: var(--danger); cursor: pointer;
}
.del-form button:hover { background: rgba(255, 138, 125, .22); }
.del-form button[disabled] { opacity: .6; cursor: wait; }
.del-form .status:empty { display: none; }
.del-form .status.error { color: var(--danger); font-weight: 600; }
.del-form .status.ok { color: var(--ok); font-weight: 600; }
.del-form .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.del-form small bdi { white-space: nowrap; }

/* Landing block (only used if the legal index page is served on its own) */
.hero { text-align: center; padding: 24px 0 0; }
.hero img { width: min(300px, 80vw); height: auto; }
.page-index h1 { text-align: center; font-size: 1.6rem; margin-top: 8px; }
.store { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 12px 0; }
.store-btn {
	display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 18px; border-radius: 14px;
	background: #030807; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.1rem; line-height: 1.15;
	border: 1px solid rgba(244, 236, 216, .28);
}
.store-btn small { display: block; font-weight: 400; font-size: .75rem; opacity: .85; }
.store-soon { margin: 0; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }