/* WYFA — public legal and support pages.
   One stylesheet for all three pages. Logical properties throughout, so the
   Arabic page needs nothing but dir="rtl" on <html>. */

:root {
  --navy:   #001830;
  --navy-2: #0a2540;
  --gold:   #f2c230;
  --ink:    #14202e;
  --muted:  #5a6a7a;
  --line:   #dbe2ea;
  --bg:     #ffffff;
  --bg-alt: #f6f8fb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:    #e8eef5;
    --muted:  #9fb0c2;
    --line:   #24384f;
    --bg:     #04101f;
    --bg-alt: #0a1c30;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}

header {
  background: var(--navy);
  color: #fff;
  padding: 2.4rem 1.25rem 2rem;
}

header .wrap { max-width: 44rem; margin-inline: auto; }

header .mark {
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--gold);
  font-size: .82rem;
  margin: 0 0 .5rem;
}

header h1 { margin: 0; font-size: 1.9rem; line-height: 1.2; }
header p  { margin: .6rem 0 0; color: #b9c9db; font-size: .96rem; }

main { max-width: 44rem; margin-inline: auto; padding: 2rem 1.25rem 4rem; }

h2 {
  margin: 2.2rem 0 .6rem;
  font-size: 1.18rem;
  line-height: 1.3;
  padding-block-end: .4rem;
  border-block-end: 1px solid var(--line);
}

h2:first-of-type { margin-block-start: .5rem; }

p, li { color: var(--ink); }
ul { padding-inline-start: 1.2rem; }
li { margin-block: .35rem; }
strong { font-weight: 650; }

a { color: #0b62c4; text-decoration-thickness: 1px; text-underline-offset: 2px; }
@media (prefers-color-scheme: dark) { a { color: #6fb3ff; } }

.updated { color: var(--muted); font-size: .9rem; margin-block-start: 0; }

.callout {
  background: var(--bg-alt);
  border-inline-start: 3px solid var(--gold);
  padding: .9rem 1.1rem;
  border-radius: 0 8px 8px 0;
  margin: 1.4rem 0;
}
[dir="rtl"] .callout { border-radius: 8px 0 0 8px; }

.contact {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.2rem 1.3rem;
  margin: 1.6rem 0;
}
.contact a { font-weight: 650; font-size: 1.05rem; }

.langswitch { margin-block-start: 1rem; font-size: .95rem; }
.langswitch a { color: var(--gold); }

footer {
  border-block-start: 1px solid var(--line);
  margin-block-start: 3rem;
  padding-block-start: 1.2rem;
  color: var(--muted);
  font-size: .88rem;
}

footer a { color: var(--muted); }