/* al-ikhlas-app.pages.dev — one stylesheet for every page.
   Colours are the app's own tokens (lib/ui/theme/tokens.dart: emerald day / emerald night;
   lib/ui/theme/sky.dart: the night sky). Fonts are the app's own files, served from this site:
   nothing is loaded from any other host. */

@font-face { font-family: "Cinzel"; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/Cinzel-SemiBold.ttf) format("truetype"); }
@font-face { font-family: "Jakarta"; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/PlusJakartaSans-Regular.ttf) format("truetype"); }
@font-face { font-family: "Jakarta"; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/PlusJakartaSans-Medium.ttf) format("truetype"); }
@font-face { font-family: "Jakarta"; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/PlusJakartaSans-SemiBold.ttf) format("truetype"); }

:root {
  --bg: #F7F4EC;
  --surface: #FFFDF8;
  --ink: #17241D;
  --ink2: #4E5A53;
  --ink3: #66706A;
  --hairline: #E3DCCB;
  --primary: #0F6E4B;
  --gold-text: #86621A;
  --gold: #CFA049;
  --sky-0: #0A1228;
  --sky-1: #141F47;
  --sky-2: #22305E;
  --sky-rose: #B76E8E;
  --on-sky: #FFFFFF;
  --on-sky-muted: #D9DEF0;
  --sans: "Jakarta", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --measure: 40rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15181A;
    --surface: #1D2124;
    --ink: #ECEEEA;
    --ink2: #A7B0AA;
    --ink3: #808A84;
    --hairline: rgba(255, 255, 255, 0.085);
    --primary: #72CFA3;
    --gold-text: #E2BE72;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 2px; }

/* ── The sky: the splash's night, with the evening light low on one side. ── */
.sky {
  position: relative;
  overflow: hidden;
  color: var(--on-sky);
  background:
    radial-gradient(120% 70% at 92% 112%, rgba(225, 148, 111, 0.55), rgba(183, 110, 142, 0.28) 38%, transparent 70%),
    linear-gradient(180deg, var(--sky-0) 0%, var(--sky-1) 55%, var(--sky-2) 100%);
}
/* A few fixed stars (no script, no image): one tiny dot, repeated by box-shadow. */
.sky::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    6vw 7vh rgba(255,255,255,.55), 18vw 3vh rgba(255,255,255,.35), 24vw 16vh rgba(255,255,255,.5),
    33vw 6vh rgba(255,255,255,.3), 47vw 12vh rgba(255,255,255,.45), 58vw 4vh rgba(255,255,255,.35),
    66vw 18vh rgba(255,255,255,.5), 75vw 8vh rgba(255,255,255,.4), 84vw 14vh rgba(255,255,255,.6),
    91vw 5vh rgba(255,255,255,.35), 12vw 28vh rgba(255,255,255,.3), 39vw 25vh rgba(255,255,255,.25),
    71vw 30vh rgba(255,255,255,.3), 95vw 24vh rgba(255,255,255,.4), 4vw 38vh rgba(255,255,255,.25),
    28vw 40vh rgba(255,255,255,.2), 88vw 40vh rgba(255,255,255,.25);
  pointer-events: none;
}
/* The evening star. */
.sky::after {
  content: "";
  position: absolute;
  top: 34%; right: 15%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #FFF6E2;
  box-shadow: 0 0 6px 2px rgba(255, 240, 210, 0.55);
  pointer-events: none;
}

.bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 64rem;
  margin: 0 auto;
  padding: 1.1rem 1.25rem 0;
}
.bar a { color: var(--on-sky-muted); text-decoration: none; font-size: 0.9375rem; font-weight: 500; }
.bar a:hover { color: var(--on-sky); }
.bar nav { display: flex; gap: 1.25rem; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.32em;
  font-size: 0.875rem;
}
.bar .brand { color: var(--on-sky); }
.brand svg { width: 1rem; height: 1rem; flex: none; }

.hero {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 4.5rem 1.25rem 5.5rem;
}
.hero .crescent { width: 2.75rem; height: 2.75rem; display: block; margin: 0 auto 1.6rem; }
.wordmark {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.1rem, 7vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: 0.44em;
  /* The tracking adds space after the last letter too; pull it back so the name is centred. */
  margin-right: -0.44em;
  text-shadow: 0 1px 3px rgba(3, 10, 25, 0.34);
}
.tagline {
  margin: 1.1rem 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(1rem, 2.6vw, 1.3rem);
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(3, 10, 25, 0.34);
}
.status {
  display: inline-block;
  margin-top: 2.2rem;
  padding: 0.5rem 1.05rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: var(--on-sky);
  font-size: 0.9375rem;
  font-weight: 500;
}

/* A small sky band for the inner pages. Its text lines up with the page's text below:
   the band is the reading column plus its own side padding. */
.sky.slim .hero { padding: 2.75rem 1.25rem 3rem; text-align: left; max-width: calc(var(--measure) + 2.5rem); margin: 0 auto; }
.sky.slim h1 { margin: 0; font-size: clamp(1.75rem, 5vw, 2.25rem); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.sky.slim .lede { margin: 0.6rem 0 0; color: var(--on-sky-muted); }

/* ── Page body ── */
main { padding: 0 1.25rem; }
.wrap { max-width: var(--measure); margin: 0 auto; padding-block: 3rem 4rem; }
.wrap.wide { max-width: 56rem; }

h2 {
  margin: 2.75rem 0 0.75rem;
  font-size: 1.3rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h2:first-child { margin-top: 0; }
h3 { margin: 1.75rem 0 0.4rem; font-size: 1.05rem; font-weight: 600; }
p { margin: 0 0 1rem; color: var(--ink2); }
p strong, li strong { color: var(--ink); font-weight: 600; }
ul { margin: 0 0 1rem; padding: 0; list-style: none; }
li { position: relative; padding-left: 1.15rem; margin-bottom: 0.65rem; color: var(--ink2); }
li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.68em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ink3);
}
.note {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.9375rem;
  color: var(--ink2);
}
.updated { font-size: 0.9375rem; color: var(--ink3); margin-bottom: 2rem; }
.mail { font-weight: 600; white-space: nowrap; }

/* Home: the three promises, one line each, ruled like the app's lists. */
.promises {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 2rem;
  margin: 0 0 3.25rem;
  padding: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.promises li { padding: 1.2rem 0; margin: 0; color: var(--ink); font-weight: 500; }
.promises li::before { display: none; }
.promises li span { display: block; margin-top: 0.2rem; color: var(--ink3); font-weight: 400; font-size: 0.9375rem; }
.intro { font-size: 1.125rem; line-height: 1.65; color: var(--ink2); max-width: 36rem; margin-bottom: 2.25rem; }

.inside {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 2.5rem;
  margin: 0;
  padding: 0;
}
.inside li { padding: 0; margin: 0; }
.inside li::before { display: none; }
.inside b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 0.2rem; }
.inside .glyph {
  display: block;
  width: 1.5rem; height: 1.5rem;
  margin-bottom: 0.6rem;
  color: var(--gold);
}
.langs { font-size: 0.9375rem; color: var(--ink3); margin-top: 2.75rem; }
.langs span[lang] { color: var(--ink2); }

footer {
  border-top: 1px solid var(--hairline);
  padding: 1.6rem 1.25rem 2.2rem;
}
footer .row {
  max-width: 56rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9375rem;
  color: var(--ink3);
}
footer nav { display: flex; gap: 1.25rem; }
footer .brand { color: var(--gold-text); font-size: 0.8125rem; }

@media (max-width: 40rem) {
  .promises { grid-template-columns: 1fr; }
  .promises li + li { border-top: 1px solid var(--hairline); }
  .inside { grid-template-columns: 1fr; }
  .hero { padding: 3.5rem 1rem 4.25rem; }
  .bar { padding: 1rem 1rem 0; }
  .bar .brand span { display: none; }
  main { padding: 0 1rem; }
  .sky.slim .hero { padding-inline: 1rem; }
}
.sky .lede a { color: inherit; }