/* Companions of the Prophet ﷺ — Burlington Masjid
   Flat design: deep forest green, gold, cream, white cards. No shadows, no gradients. */

/* Guarantee: the honorific ﷺ and any bare Arabic inside English text render in Amiri.
   Same gstatic file the Google Fonts <link> already loads, scoped to Arabic ranges only. */
@font-face {
  font-family: "Amiri Fallback";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/amiri/v30/J7aRnpd8CGxBHpUrtLMS7JNKIjk.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFC;
}

:root {
  --green-deep: #16382B;
  --green: #1E4633;
  --gold: #C9A227;
  --gold-ink: #8A6D14;   /* darker gold for text on light backgrounds */
  --gold-soft: #E5C55C;  /* lighter gold for text on green */
  --cream: #F7F3E8;
  --cream-2: #F1EAD7;
  --white: #FFFFFF;
  --line: #E3DCC6;
  --ink: #26251E;
  --muted: #6C6858;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Amiri Fallback", "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
}

.wrap { max-width: 850px; margin: 0 auto; padding: 0 1.25rem; }

h1, h2, h3, h4 { font-family: "Amiri Fallback", "Playfair Display", Georgia, serif; color: var(--green-deep); }

a { color: var(--green); }
a:hover { color: var(--gold-ink); }

/* ---------- Arabic typography (Amiri everywhere, incl. the ﷺ glyph) ---------- */

.lang-ar,
.saw,
.ar-inline,
.quote .ar {
  font-family: "Amiri", "Traditional Arabic", serif;
}

.lang-ar { font-size: 1.15em; line-height: 2.05; }
.lang-ar h1, .lang-ar h2, .lang-ar h3, .lang-ar h4 {
  font-family: "Amiri", serif;
  line-height: 1.7;
}

/* ---------- Language visibility ---------- */

.lang-ar { display: none; }
html.ar .lang-en { display: none; }
html.ar div.lang-ar, html.ar p.lang-ar, html.ar aside.lang-ar { display: block; }
html.ar span.lang-ar, html.ar strong.lang-ar { display: inline; }

/* ---------- Header ---------- */

.site-header {
  background: var(--green-deep);
  border-bottom: 3px solid var(--gold);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}
.wordmark { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.wordmark-text {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: var(--cream);
}
#masjid-logo { height: 36px; width: auto; }

#lang-toggle {
  font-family: "Amiri", serif;
  font-size: 1rem;
  line-height: 1;
  padding: 0.45rem 1.1rem 0.55rem;
  color: var(--gold-soft);
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 999px;
  cursor: pointer;
}
#lang-toggle:hover { background: var(--green); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--green-deep);
  color: var(--cream);
  text-align: center;
  padding: 3.25rem 0 3.5rem;
}
.hero-pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.13;
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }

.crumb { margin: 0 0 1.5rem; font-size: 0.9rem; text-align: start; }
.crumb a { color: var(--gold-soft); text-decoration: none; }
.crumb a:hover { color: var(--cream); text-decoration: underline; }

.hero .ar-name,
.hero h1 .lang-ar {
  font-family: "Amiri", serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 3.75rem);
  line-height: 1.5;
  color: var(--white);
  margin: 0;
}
.hero h1 { margin: 0; }
.hero h1 .lang-en {
  font-size: clamp(1.9rem, 5.5vw, 2.9rem);
  color: var(--white);
  line-height: 1.3;
}
.hero .en-name {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.25rem, 3.5vw, 1.7rem);
  color: var(--gold-soft);
  margin: 0.4rem 0 1rem;
}
.hero .framing {
  font-size: 1.1rem;
  color: var(--cream);
  opacity: 0.92;
  max-width: 42rem;
  margin: 1.1rem auto 0;
}

.chip {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold-soft);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 0.25rem 0.95rem;
}
.chip .lang-ar { font-size: 1.05rem; letter-spacing: 0; line-height: 1.4; }
html.ar .chip { text-transform: none; }

.hero .tagline {
  font-size: 1.08rem;
  color: var(--cream);
  opacity: 0.9;
  max-width: 44rem;
  margin: 1.1rem auto 0;
}

/* ---------- Main content ---------- */

main { padding: 2.5rem 0 1rem; }

.content-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 2rem 2.25rem 2.25rem;
}

article > p:first-child { margin-top: 0; }
article h2 { font-size: 1.45rem; color: var(--green); margin: 2.2rem 0 0.75rem; }
article h3 { font-size: 1.2rem; color: var(--green); margin: 1.8rem 0 0.6rem; }
article ul { padding-inline-start: 1.4rem; }
article li { margin: 0.5rem 0; }

/* ---------- Quotes ---------- */

figure.quote {
  margin: 1.75rem 0;
  padding: 1.15rem 1.4rem;
  background: var(--cream);
  border-left: 4px solid var(--gold);
  border-radius: 6px;
}
figure.quote .ar {
  font-size: 1.5rem;
  line-height: 2.1;
  direction: rtl;
  text-align: right;
  color: var(--green-deep);
}
figure.quote .tr {
  font-style: italic;
  color: var(--muted);
  margin-top: 0.5rem;
  font-size: 0.98rem;
}
figure.quote .en { margin-top: 0.4rem; }
figure.quote figcaption {
  margin-top: 0.65rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.lang-ar figure.quote,
html.ar figure.quote {
  border-left: none;
  border-right: 4px solid var(--gold);
}

/* ---------- Sources ---------- */

section.sources {
  margin-top: 2.75rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
section.sources h2 { font-size: 1.1rem; margin: 0 0 0.5rem; color: var(--green); }
section.sources ul { margin: 0; padding-inline-start: 1.3rem; }
section.sources li { font-size: 0.93rem; color: var(--muted); margin: 0.3rem 0; }
section.sources p { font-size: 0.93rem; color: var(--muted); margin: 0.3rem 0; }
.talk-framing { color: var(--muted); margin: 0 0 1.6rem; }

/* ---------- "Listen to this talk" player (prototype) ---------- */
.audio-player {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 2rem;
  padding: 0.9rem 1.1rem;
  background: var(--green-deep);
  border-radius: 10px;
  color: var(--cream);
}
.audio-btn {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: transparent;
  color: var(--gold-soft);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.audio-btn:hover { background: var(--gold); color: var(--green-deep); }
.audio-player.is-playing .audio-btn { background: var(--gold); color: var(--green-deep); }
.audio-glyph { pointer-events: none; }
.audio-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.audio-meta { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.audio-title { font-weight: 600; font-size: 1.05rem; }
.audio-note { font-size: 0.82rem; color: var(--gold-soft); opacity: 0.85; }
.audio-controls { display: flex; align-items: center; gap: 0.8rem; }
.audio-scrub { flex: 1 1 auto; padding: 0.5rem 0; cursor: pointer; }
.audio-scrub:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
.audio-track {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.audio-fill { height: 100%; width: 0%; background: var(--gold); border-radius: 3px; transition: width 0.1s linear; }
.audio-time { flex: 0 0 auto; font-size: 0.82rem; color: var(--gold-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.audio-restart {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 39, 0.5);
  background: transparent;
  color: var(--gold-soft);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.audio-restart:hover { background: var(--gold); color: var(--green-deep); }
html.ar .audio-player { flex-direction: row-reverse; text-align: right; }
html.ar .audio-controls { flex-direction: row-reverse; }
/* No Arabic recording yet: in Arabic mode the player becomes a "coming soon" card —
   hide the play button and transport, leaving only the message. */
html.ar .audio-btn, html.ar .audio-controls { display: none; }
html.ar .audio-note { opacity: 1; }
@media (max-width: 30rem) {
  .audio-player { flex-wrap: wrap; }
  .audio-body { flex-basis: 100%; }
}

/* ---------- Master playlist (index) ---------- */
.playlist {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  background: var(--green-deep);
  border-radius: 12px;
  color: var(--cream);
}
.pl-buttons { flex: 0 0 auto; display: flex; align-items: center; gap: 0.4rem; }
.pl-btn {
  border: none; background: transparent; color: var(--gold-soft);
  cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.pl-prev, .pl-next { width: 2.2rem; height: 2.2rem; font-size: 1.1rem; }
.pl-play { width: 3rem; height: 3rem; font-size: 1rem; border: 1.5px solid var(--gold); }
.pl-btn:hover { background: var(--gold); color: var(--green-deep); }
.playlist.is-playing .pl-play { background: var(--gold); color: var(--green-deep); }
.pl-glyph { pointer-events: none; }
.pl-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.pl-meta { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.pl-kicker { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold-soft); }
html.ar .pl-kicker { text-transform: none; letter-spacing: 0; font-size: 1rem; }
.pl-now { font-size: 1.05rem; font-weight: 600; }
.pl-controls { display: flex; align-items: center; gap: 0.8rem; }
.pl-scrub { flex: 1 1 auto; padding: 0.5rem 0; cursor: pointer; }
.pl-scrub:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
.pl-trackbar { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.18); overflow: hidden; }
.pl-fill { height: 100%; width: 0%; background: var(--gold); border-radius: 3px; transition: width 0.1s linear; }
.pl-time { flex: 0 0 auto; font-size: 0.82rem; color: var(--gold-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-count { opacity: 0.8; margin-inline-end: 0.5rem; }
html.ar .playlist { flex-direction: row-reverse; text-align: right; }
html.ar .pl-buttons, html.ar .pl-controls { flex-direction: row-reverse; }
/* No Arabic audio yet: hide the transport in Arabic mode; the note carries the message. */
html.ar .pl-buttons, html.ar .pl-controls { display: none; }
@media (max-width: 34rem) {
  .playlist { flex-wrap: wrap; }
  .pl-body { flex-basis: 100%; }
}

/* ---------- Index card grid ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
  gap: 1.25rem;
  margin: 0.5rem 0 1rem;
}
a.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--green);
  border-radius: 10px;
  padding: 1.4rem 1.5rem 1.25rem;
  text-decoration: none;
  color: inherit;
}
a.card:hover { border-color: var(--gold); color: inherit; }
.card .card-ar {
  font-family: "Amiri", serif;
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1.5;
  color: var(--green-deep);
  margin: 0;
}
.card .card-en {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.12rem;
  color: var(--green);
  margin: 0.15rem 0 0.8rem;
}
.card .chip {
  color: var(--gold-ink);
  border-color: var(--gold);
  align-self: flex-start;
}
.card .card-tagline { font-size: 0.95rem; color: var(--muted); margin: 0.8rem 0 1rem; flex: 1; }
.card .card-read { font-weight: 600; font-size: 0.95rem; color: var(--gold-ink); }


/* Sixth card: Hamza — muted, non-clickable */
div.card.coming {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 1px dashed #CFC7AE;
  border-top: 4px dashed #CFC7AE;
  border-radius: 10px;
  padding: 1.4rem 1.5rem 1.25rem;
  cursor: default;
}
div.card.coming .card-ar,
div.card.coming .card-en { color: var(--muted); }
div.card.coming .chip { color: var(--muted); border-color: #CFC7AE; align-self: flex-start; }
div.card.coming .card-tagline { font-size: 0.95rem; color: var(--muted); margin: 0.8rem 0 0; }

/* ---------- Khutbah link box / coming soon ---------- */

.khutbah-box {
  margin-top: 2rem;
  background: var(--green-deep);
  border-radius: 10px;
  padding: 1.35rem 1.6rem;
  color: var(--cream);
}
.khutbah-box p { margin: 0; }
.khutbah-box .kicker {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 0.35rem;
}
html.ar .khutbah-box .kicker { text-transform: none; letter-spacing: 0; font-size: 1rem; }
.khutbah-box a { color: var(--gold-soft); font-weight: 600; font-size: 1.1rem; text-decoration: none; }
.khutbah-box a:hover { color: var(--white); text-decoration: underline; }

.coming-soon {
  margin-top: 2rem;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--white);
  padding: 0.9rem 1.25rem;
  text-align: center;
  color: var(--muted);
  font-style: italic;
}
.coming-soon .lang-ar { font-style: normal; }

/* ---------- Back link & footer ---------- */

.back-link { margin: 2.25rem 0 0.5rem; }
.back-link a { text-decoration: none; font-weight: 600; color: var(--green); }
.back-link a:hover { color: var(--gold-ink); }

.site-footer {
  margin-top: 3rem;
  background: var(--green-deep);
  border-top: 3px solid var(--gold);
  color: #D9D2BE;
  padding: 2rem 0 2.25rem;
  font-size: 0.92rem;
  text-align: center;
}
.site-footer .footer-name {
  font-family: "Playfair Display", Georgia, serif;
  color: var(--cream);
  font-size: 1.02rem;
  margin: 0 0 0.5rem;
}
html.ar .site-footer .footer-name { font-family: "Amiri", serif; }
.site-footer .footer-note { margin: 0 auto; max-width: 40rem; line-height: 1.7; }

/* ---------- Khutbah page ---------- */

.khutbah-meta {
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0 0 0.9rem;
  font-weight: 600;
}
.khutbah-hero h1 {
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  color: var(--white);
  line-height: 1.3;
  margin: 0;
}
.khutbah-hero .hero-sub { color: var(--cream); opacity: 0.9; margin: 0.9rem auto 0; font-size: 1.05rem; }

.dua-note {
  text-align: center;
  color: var(--muted);
  font-style: italic;
  margin: 1.5rem 0;
}
.flag-note {
  margin-top: 2rem;
  background: var(--cream);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 1.1rem 1.4rem;
  font-size: 0.95rem;
}
.flag-note h2 { font-size: 1.05rem; margin: 0 0 0.5rem; color: var(--green); }

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  .content-card { padding: 1.4rem 1.15rem 1.6rem; }
  figure.quote { padding: 1rem 1.05rem; margin-left: 0; margin-right: 0; }
  figure.quote .ar { font-size: 1.3rem; }
  .hero { padding: 2.5rem 0 2.75rem; }
  body { font-size: 1rem; }
}