/* Public website styling. Colours: deep green (#123024-#2b6a54), gold (#b8944f), warm cream (#faf8f4). */
:root {
  --g900: #123024; --g800: #1f4638; --g700: #245645; --g600: #2b6a54; --g500: #3d8268;
  --gold: #b8944f; --gold-light: #cfae6a; --cream: #faf8f4;
}
html { scroll-behavior: smooth; }
body { background: var(--cream); }

/* ---------- Geometric pattern (an eight-pointed star), used very faintly ---------- */
.pattern-light {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.075' stroke-width='1'%3E%3Cpath d='M36 4l32 32-32 32L4 36z'/%3E%3Cpath d='M14 14h44v44H14z'/%3E%3Ccircle cx='36' cy='36' r='9'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 72px;
}
.pattern-dark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23245645' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M36 4l32 32-32 32L4 36z'/%3E%3Cpath d='M14 14h44v44H14z'/%3E%3Ccircle cx='36' cy='36' r='9'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 72px;
}
.hero-bg {
  background:
    radial-gradient(60% 80% at 15% 0%, rgba(207,174,106,.22) 0, transparent 60%),
    radial-gradient(50% 70% at 90% 100%, rgba(61,130,104,.45) 0, transparent 60%),
    linear-gradient(160deg, #123024 0%, #1f4638 48%, #2b6a54 100%);
}

/* ---------- Scroll-in animation (only when JS is available) ---------- */
html.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
html.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .lift, .lift:hover { transition: none; transform: none; }
}

/* ---------- Section headings with a gold-to-green rule ---------- */
.sec-title { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.sec-title::after { content: ''; width: 68px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--gold), var(--g600)); transition: width .4s ease; }
.sec-title:hover::after { width: 120px; }

/* ---------- Cards ---------- */
.lift { transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease; }
.lift:hover { transform: translateY(-5px); box-shadow: 0 20px 40px -18px rgba(18,48,36,.38); border-color: rgba(184,148,79,.75); }
.cat-ico { transition: transform .35s cubic-bezier(.2,.8,.2,1), background-color .3s ease, color .3s ease; }
.cat-tile:hover .cat-ico { transform: scale(1.1) rotate(-6deg); background: var(--gold); color: #fff; }
.cat-tile .cat-go { opacity: 0; transform: translateX(8px); transition: opacity .3s ease, transform .3s ease; }
.cat-tile:hover .cat-go { opacity: 1; transform: none; }
[dir="rtl"] .cat-tile .cat-go { transform: translateX(-8px); }
[dir="rtl"] .cat-tile:hover .cat-go { transform: none; }

/* Fatwa cards: coloured accent edge that grows on hover */
.fcard { position: relative; overflow: hidden; }
.fcard::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: linear-gradient(180deg, var(--gold), var(--g600)); transition: width .3s ease; }
.fcard:hover::before { width: 8px; }

/* List rows (latest / popular) */
.frow { transition: background-color .25s ease, padding .25s ease; }
.frow:hover { background: #f2f7f5; }
.frow:hover .frow-num { background: var(--gold); color: #fff; }
.frow-num { transition: background-color .25s ease, color .25s ease; }

/* ---------- Header navigation ---------- */
.nav-a { position: relative; padding: .35rem 0; transition: color .2s ease; }
.nav-a::after { content: ''; position: absolute; inset-inline: 0; bottom: -3px; height: 3px; border-radius: 3px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .3s ease; }
.nav-a:hover { color: var(--g600); }
.nav-a:hover::after, .nav-a.is-active::after { transform: scaleX(1); }
.nav-a.is-active { color: var(--g700); font-weight: 700; }

/* ---------- Buttons ---------- */
.btn-gold { background: linear-gradient(135deg, #cfae6a, #b8944f 55%, #a17f3f); color: #fff; box-shadow: 0 8px 20px -8px rgba(161,127,63,.7); transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -10px rgba(161,127,63,.8); filter: brightness(1.05); }

/* Subtle pulse for the small "live" dot */
@keyframes softpulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.pulse-dot { animation: softpulse 2s ease-in-out infinite; }

/* Form fields on public pages */
.field { width: 100%; background: #fff; border: 1.5px solid #cfe3da; border-radius: .85rem; padding: .7rem .9rem; color: var(--g900); transition: border-color .2s ease, box-shadow .2s ease; }
.field:focus { outline: none; border-color: var(--g600); box-shadow: 0 0 0 4px rgba(61,130,104,.18); }
.field::placeholder { color: #8aa398; }

/* Digits/Latin in Inter (Jameel's own Latin glyphs look dated next to modern UI). */
.num { font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; }

/* ---------- Static pages (About, Privacy, ...): Tailwind's reset removes list/heading styling, restore it ---------- */
.page-prose { line-height: 2.2; }
.page-prose > :first-child { margin-top: 0; }
.page-prose h2 { font-size: 1.7rem; font-weight: 700; color: var(--g800); margin: 2rem 0 .75rem; }
.page-prose h3 { font-size: 1.4rem; font-weight: 700; color: var(--g700); margin: 1.5rem 0 .5rem; }
.page-prose p { margin: 0 0 1rem; }
.page-prose ul { list-style: disc; padding-inline-start: 1.6rem; margin: 0 0 1rem; }
.page-prose ol { list-style: decimal; padding-inline-start: 1.6rem; margin: 0 0 1rem; }
.page-prose li { margin-bottom: .35rem; }
.page-prose a { color: var(--g600); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.page-prose blockquote { border-inline-start: 4px solid var(--gold); background: #faf8f4; padding: .75rem 1.25rem; margin: 1rem 0; border-radius: .5rem; }