/* Talaqira website — inner pages (privacy, terms, support, account deletion).
   Same look as the homepage (home.html): dark background, Cairo, teal + gold, the approved logo. */
@font-face { font-family: "Cairo"; src: url("fonts/Cairo-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cairo"; src: url("fonts/Cairo-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cairo"; src: url("fonts/Cairo-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }

:root {
  --bg-obsidian: #060d10;
  --bg-navy: #12232b;
  --bg-surface: #162b35;
  --teal-dark: #0e6b5c;
  --teal-bright: #1a9273;
  --teal-text: #3fb898;
  --amber: #e8a33d;
  --amber-light: #f3c06b;
  --text-white: #f8fafc;
  --text-muted: #cbd5e1;
  --text-dim: #94a3b8;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-amber: rgba(232, 163, 61, 0.38);
  --border-teal: rgba(26, 146, 115, 0.4);
  --measure: 42rem;
  --gutter: 1.25rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: "Cairo", system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.9;
  color: var(--text-muted);
  background-color: var(--bg-obsidian);
  background-image:
    radial-gradient(at 80% 4%, rgba(26, 146, 115, 0.14) 0px, transparent 45%),
    radial-gradient(at 15% 18%, rgba(232, 163, 61, 0.07) 0px, transparent 40%),
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 56px 56px, 56px 56px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--amber-light); text-underline-offset: 0.22em; }
a:hover { color: var(--amber); }
a:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { color: var(--text-white); font-weight: 800; line-height: 1.45; margin: 0; }
.skip { position: absolute; inset-inline-start: 1rem; top: -4rem; background: var(--amber); color: var(--bg-obsidian); padding: .5rem 1rem; border-radius: 8px; z-index: 200; font-weight: 700; }
.skip:focus { top: 1rem; }
mark.todo { background: rgba(232, 163, 61, 0.16); color: var(--amber-light); border: 1px dashed var(--amber); border-radius: 4px; padding: 0 .3em; }

/* ---------- top bar (same as the homepage) ---------- */
.navbar-wrapper { position: sticky; top: 0; z-index: 100; padding: 1rem var(--gutter) 0; }
.navbar {
  max-width: 1240px; margin: 0 auto; min-height: 4.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .5rem 1.25rem;
  background: rgba(18, 35, 43, 0.92);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--border-subtle); border-radius: 1.15rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.brand { display: inline-flex; flex-shrink: 0; }
.brand img { display: block; width: auto; height: 2.6rem; }
.foot-logo img { height: 2.3rem; }
.nav-links { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; font-size: .92rem; font-weight: 700; }
.nav-links a { color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--amber); }
.lang-btn {
  display: inline-block; white-space: nowrap; text-decoration: none;
  padding: .4rem 1rem; border-radius: .75rem;
  background: rgba(255, 255, 255, 0.07); border: 1px solid var(--border-amber);
  color: var(--amber-light); font-size: .85rem; font-weight: 700; line-height: 1.6;
}
.lang-btn:hover { background: rgba(232, 163, 61, 0.2); color: var(--amber-light); }
@media (max-width: 1000px) {
  .nav-links { display: none; }
  .brand img { height: 2.3rem; }
}

/* ---------- documents ---------- */
.doc {
  max-width: 72rem; margin: 0 auto; padding: 3rem var(--gutter) 4rem;
  display: grid; grid-template-columns: 16rem minmax(0, var(--measure)); column-gap: 3rem; justify-content: center;
  grid-template-areas: "head head" "toc body";
}
.doc.narrow { grid-template-columns: minmax(0, var(--measure)); grid-template-areas: "head" "body"; }
.doc-head { grid-area: head; margin-bottom: 2.25rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-subtle); position: relative; }
.doc-head::after { content: ""; position: absolute; inset-inline-start: 0; bottom: -2px; width: 4.5rem; height: 3px; border-radius: 99px; background: var(--amber); }
.doc-head h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); }
.meta { margin: .35rem 0 0; color: var(--text-dim); font-size: .95rem; }
.lead { margin: .75rem 0 0; font-size: 1.12rem; color: var(--text-muted); }
.toc {
  grid-area: toc; align-self: start; position: sticky; top: 7rem; font-size: .92rem;
  background: linear-gradient(160deg, rgba(22, 43, 53, 0.76) 0%, rgba(10, 20, 25, 0.9) 100%);
  border: 1px solid var(--border-subtle); border-radius: 1.2rem; padding: 1.1rem 1rem;
}
.toc-h { margin: 0 0 .5rem; font-weight: 800; color: var(--text-white); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li a { display: block; padding: .3rem .6rem; border-radius: .5rem; color: var(--text-dim); text-decoration: none; line-height: 1.55; }
.toc li a:hover { color: var(--amber-light); background: rgba(255, 255, 255, 0.04); }
.doc-body { grid-area: body; min-width: 0; }
.doc-sec { padding: 0 0 1.75rem; scroll-margin-top: 7rem; }
.doc-sec h2 { font-size: 1.28rem; margin-bottom: .6rem; }
.doc-sec p { margin: 0 0 .75rem; }
.doc-sec ul { list-style: none; margin: 0; padding: 0; }
.doc-sec ul li { position: relative; padding-inline-start: 1.5rem; margin-bottom: .6rem; }
.doc-sec ul li::before { content: ""; position: absolute; inset-inline-start: 0; top: .85em; width: .75rem; height: 4px; border-radius: 2px; background: var(--teal-bright); }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding-inline-start: 2.9rem; margin-bottom: 1rem; min-height: 2.1rem; }
.steps li::before {
  content: counter(s); position: absolute; inset-inline-start: 0; top: .05rem; width: 2.1rem; height: 2.1rem; border-radius: .7rem;
  background: rgba(232, 163, 61, 0.14); border: 1px solid var(--border-amber); color: var(--amber-light); font-weight: 800;
  display: grid; place-items: center; line-height: 1;
}
.contact-line {
  display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; margin: 0 0 2rem;
  padding: 1rem 1.25rem; background: #071116; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: .9rem;
}
.contact-line span { color: var(--text-dim); font-size: .95rem; }
.contact-line a { font-weight: 700; font-size: 1.1rem; direction: ltr; unicode-bidi: isolate; }
@media (max-width: 900px) {
  .doc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "toc" "body"; padding-top: 2rem; }
  .toc { position: static; margin-bottom: 2rem; }
  .toc ol { columns: 2; column-gap: 1.25rem; }
}
@media (max-width: 480px) { .toc ol { columns: 1; } body { font-size: 1rem; } }

/* ---------- footer ---------- */
.foot { background: #04090b; border-top: 1px solid var(--border-subtle); margin-top: 2rem; }
.foot-in {
  max-width: 1240px; margin: 0 auto; padding: 2.5rem var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem;
}
.rights { margin: 0; font-size: .88rem; font-weight: 700; color: var(--text-muted); }
.foot-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.35rem; font-size: .88rem; font-weight: 700; }
.foot-nav a:not(.lang-btn) { color: var(--text-dim); text-decoration: none; }
.foot-nav a:not(.lang-btn):hover, .foot-nav a[aria-current="page"] { color: var(--amber); }
@media (max-width: 760px) { .foot-in { flex-direction: column; text-align: center; } .foot-nav { justify-content: center; } }