/* ==========================================================================
   Alzahra Kulttuurikeskus — jaettu design-järjestelmä
   Hyväksytty konsepti: syvä vihreä + patinoitu kulta + lämmin pergamentti,
   Amiri / El Messiri / Reem Kufi, kaari- ja kaksoisvirta-motiivit.
   ========================================================================== */

:root{
  --paper:#F7F1E1; --paper-2:#FCF8ED; --paper-3:#EFE6CC;
  --ink:#16241C; --ink-soft:#3C4A3F; --ink-faint:#6B7568;
  --green-deep:#1E5631; --green-mid:#3F7A2E; --green-line:#2C6B41;
  --gold:#B8842A; --gold-bright:#D89A2E; --gold-ink:#7A5A1C;
  --river:#2E7C99; --stone:#8B8A82;
  --line: rgba(22,36,28,0.14); --line-strong:rgba(22,36,28,0.24);
  --shadow: 0 18px 40px -20px rgba(22,36,28,0.35);

  --font-display:'Amiri', 'Noto Naskh Arabic', serif;
  --font-body:'El Messiri', 'Noto Kufi Arabic', sans-serif;
  --font-label:'Reem Kufi', 'Noto Kufi Arabic', sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0E1912; --paper-2:#152420; --paper-3:#1C2E27;
    --ink:#F3ECD8; --ink-soft:#CFC8B2; --ink-faint:#9C9684;
    --green-deep:#6FAE84; --green-mid:#8FC27A; --green-line:#4F8D69;
    --gold:#E4B44A; --gold-bright:#F3C868; --gold-ink:#F3D48A;
    --river:#6FC0DC; --stone:#9C9A8E;
    --line: rgba(243,236,216,0.16); --line-strong:rgba(243,236,216,0.28);
    --shadow: 0 18px 44px -18px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"]{
  --paper:#0E1912; --paper-2:#152420; --paper-3:#1C2E27;
  --ink:#F3ECD8; --ink-soft:#CFC8B2; --ink-faint:#9C9684;
  --green-deep:#6FAE84; --green-mid:#8FC27A; --green-line:#4F8D69;
  --gold:#E4B44A; --gold-bright:#F3C868; --gold-ink:#F3D48A;
  --river:#6FC0DC; --stone:#9C9A8E;
  --line: rgba(243,236,216,0.16); --line-strong:rgba(243,236,216,0.28);
  --shadow: 0 18px 44px -18px rgba(0,0,0,0.6);
}
:root[data-theme="light"]{
  --paper:#F7F1E1; --paper-2:#FCF8ED; --paper-3:#EFE6CC;
  --ink:#16241C; --ink-soft:#3C4A3F; --ink-faint:#6B7568;
  --green-deep:#1E5631; --green-mid:#3F7A2E; --green-line:#2C6B41;
  --gold:#B8842A; --gold-bright:#D89A2E; --gold-ink:#7A5A1C;
  --river:#2E7C99; --stone:#8B8A82;
  --line: rgba(22,36,28,0.14); --line-strong:rgba(22,36,28,0.24);
  --shadow: 0 18px 40px -20px rgba(22,36,28,0.35);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body.az{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); line-height:1.65; -webkit-font-smoothing:antialiased;
  transition: background .3s ease, color .3s ease;
}
.az img{ max-width:100%; display:block; }
.az .wrap{ max-width:920px; margin:0 auto; padding:0 20px; }
@media (max-width:520px){ .az .wrap{ padding:0 16px; } }

/* ---------------- Lattice bg texture ---------------- */
.az .lattice{
  position:absolute; inset:0; opacity:0.05; pointer-events:none;
  background-image: repeating-conic-gradient(from 45deg, var(--ink) 0deg 90deg, transparent 90deg 180deg);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 72%);
}

/* ---------------- Eyebrow / section titles ---------------- */
.az .eyebrow{
  font-family:var(--font-label); letter-spacing:.12em; text-transform:uppercase;
  font-size:12px; color:var(--gold-ink); font-weight:700;
  display:flex; align-items:center; gap:10px;
}
.az .eyebrow::before{ content:""; width:22px; height:1px; background:var(--gold); display:inline-block; }
[dir="rtl"] .az .eyebrow::before{ order:2; }

.az h1,.az h2,.az h3,.az h4{ font-family:var(--font-display); font-weight:700; color:var(--ink); text-wrap:balance; margin:0; }

/* ---------------- Buttons / nav tiles ---------------- */
.az .tile{
  font-family:var(--font-label); font-size:13px; letter-spacing:.03em; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 14px; border-radius:14px; border:1px solid var(--line-strong);
  background:var(--paper-2); color:var(--ink); text-decoration:none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.az .tile:hover{ transform:translateY(-3px); border-color:var(--gold); box-shadow:0 12px 22px -12px color-mix(in srgb, var(--gold) 55%, transparent); }
.az .tile.gold{ background:linear-gradient(160deg, var(--gold-bright), var(--gold)); color:#241705; border-color:transparent; }
.az .tile.gold:hover{ box-shadow:0 14px 26px -10px color-mix(in srgb, var(--gold) 70%, transparent); }
.az .tile.dark{ background:var(--green-deep); color:var(--paper); border-color:transparent; }
.az .tile.dark:hover{ background:var(--green-line); }
.az .tile i{ font-size:1.05em; }

.az .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-label); font-weight:700; letter-spacing:.02em; font-size:15px;
  padding:15px 22px; border-radius:14px; border:none; cursor:pointer; text-decoration:none;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.az .btn:active{ transform:translateY(1px); }
.az .btn-gold{ background:linear-gradient(160deg, var(--gold-bright), var(--gold)); color:#241705; box-shadow:0 14px 26px -12px color-mix(in srgb, var(--gold) 60%, transparent); }
.az .btn-gold:hover{ filter:brightness(1.04); box-shadow:0 18px 30px -12px color-mix(in srgb, var(--gold) 70%, transparent); }
.az .btn-outline{ background:transparent; color:var(--ink); border:1.5px solid var(--line-strong); }
.az .btn-outline:hover{ border-color:var(--gold); color:var(--gold-ink); }
.az .btn-block{ width:100%; }

/* ---------------- Cards ---------------- */
.az .card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:20px;
  box-shadow:var(--shadow); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.az .card:hover{ transform:translateY(-2px); border-color:var(--gold); }
.az .card-pad{ padding:28px; }
@media (max-width:520px){ .az .card-pad{ padding:22px; } }

/* Arch motif — mihrab-inspired frame accent */
.az .arch-top{
  position:relative;
}
.az .arch-top::before{
  content:""; display:block; height:56px; margin:0 auto -1px;
  max-width:120px;
  border-radius:60px 60px 0 0;
  border:1.5px solid var(--gold); border-bottom:none;
  opacity:.55;
}

/* ---------------- Divider: twin rivers ---------------- */
.az .divider-rivers{ display:flex; flex-direction:column; gap:6px; padding:6px 0; opacity:.8; }
.az .divider-rivers svg{ width:100%; height:16px; display:block; }

/* ---------------- Form fields ---------------- */
.az input, .az textarea, .az select{
  font-family:var(--font-body); font-size:15px;
  border:1px solid var(--line-strong); padding:13px 14px; border-radius:12px;
  background:var(--paper); color:var(--ink); width:100%; outline:none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.az input:focus, .az textarea:focus, .az select:focus{
  border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}
.az label{ display:block; font-family:var(--font-body); font-weight:600; margin-bottom:8px; color:var(--ink-soft); font-size:14.5px; }
.az .hp{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

/* ---------------- Social buttons ---------------- */
.az .social-btn{
  display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px;
  border-radius:50%; color:#fff; font-size:24px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.az .social-btn:hover{ transform:translateY(-4px); box-shadow:0 14px 24px -10px rgba(0,0,0,.28); color:#fff; }
.az .bg-youtube{ background:#C4302B; } .az .bg-instagram{ background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); } .az .bg-facebook{ background:#1863C6; }

/* ---------------- Scroll reveal ---------------- */
.az .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.az .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .az .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------------- Utility ---------------- */
.az .muted{ color:var(--ink-faint); }
.az .soft{ color:var(--ink-soft); }
.az .center{ text-align:center; }