/* Quran TV site. Palette from the app ("Cinematic Madinah"): night green, mihrab green,
   gold for actions and rules only, Mushaf parchment only where the phone pages appear. */
@font-face { font-family: 'Amiri'; font-weight: 700; font-display: swap; src: url(fonts/amiri-arabic-700-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Amiri'; font-weight: 700; font-display: swap; src: url(fonts/amiri-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: 'Plex Arabic'; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Plex Arabic'; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Plex Arabic'; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: 'Plex Arabic'; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }

:root {
  --night: #06140f;
  --deep: #0a1f17;
  --mihrab: #0b4a33;
  --gold: #e6c885;
  --gold-line: rgba(230, 200, 133, 0.32);
  --ink: #efe7d2;
  --ink-2: rgba(239, 231, 210, 0.72);
  --ink-3: rgba(239, 231, 210, 0.5);
  --parchment: #f2ecdd;
  --page-ink: #1d2a22;
  --page-ink-2: #5b6157;
  --title: 'Amiri', 'Times New Roman', serif;
  --body: 'Plex Arabic', 'Segoe UI', Tahoma, sans-serif;
  --gutter: clamp(20px, 5vw, 72px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--ink); font: 400 18px/1.75 var(--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
figure { margin: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; border-radius: 6px; }

h1, h2 { font-family: var(--title); font-weight: 700; margin: 0; line-height: 1.25; }
h2 { font-size: clamp(34px, 4.2vw, 54px); }
html[lang='en'] h2 { letter-spacing: -0.005em; }

/* header */
.top { display: flex; align-items: center; gap: 32px; padding: 22px var(--gutter); position: relative; z-index: 2; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 700 24px/1 var(--title); }
.brand img { border-radius: 10px; }
.links { display: flex; gap: 28px; margin-inline-start: auto; }
.links a, .lang { text-decoration: none; color: var(--ink-2); font-size: 16px; }
.links a:hover, .lang:hover { color: var(--ink); }
.lang { border: 1px solid var(--gold-line); border-radius: 999px; padding: 6px 16px; }

/* hero: the mihrab opening onto the real Mushaf spread */
.hero { padding: clamp(32px, 6vw, 72px) var(--gutter) 0; text-align: center; position: relative; overflow: hidden; }
.hero::before { /* a single lamp of light behind the niche */
  content: ''; position: absolute; left: 50%; top: 38%; width: 1100px; height: 900px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(11, 74, 51, 0.75), rgba(11, 74, 51, 0) 100%); pointer-events: none;
}
.hero__text { position: relative; max-width: 760px; margin: 0 auto; }
.hero__title { font-size: clamp(64px, 10vw, 128px); line-height: 1.1; color: var(--ink); }
html[lang='en'] .hero__title { font-size: clamp(56px, 8vw, 104px); }
.hero__title > span { display: block; }
.hero__claim { font: 700 clamp(22px, 2.4vw, 32px)/1.45 var(--title); color: var(--gold); margin-top: 30px; text-wrap: balance; }
.hero__lead { font-size: clamp(19px, 1.7vw, 22px); color: var(--ink-2); margin: 18px auto 0; max-width: 36em; text-wrap: balance; }
.hero__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero__free { margin: 18px 0 0; font-size: 15px; color: var(--ink-3); }

.btn { display: inline-block; text-decoration: none; font-weight: 600; font-size: 17px; padding: 13px 30px; border-radius: 999px; border: 1px solid var(--gold-line); color: var(--ink); transition: background-color 0.2s, border-color 0.2s; }
.btn:hover { border-color: var(--gold); }
.btn--gold { background: var(--gold); border-color: var(--gold); color: #1a1406; }
.btn--gold:hover { background: #f0d79c; }

.mihrab { position: relative; max-width: 1080px; margin: clamp(48px, 6vw, 80px) auto 0; }
.mihrab__frame {
  position: relative; aspect-ratio: 16 / 11.2; overflow: hidden;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 112' preserveAspectRatio='none'%3E%3Cpath d='M0 112V40C0 22 46 9 80 0c34 9 80 22 80 40v72z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 112' preserveAspectRatio='none'%3E%3Cpath d='M0 112V40C0 22 46 9 80 0c34 9 80 22 80 40v72z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  background: var(--deep);
}
.mihrab__frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 75%; }
.mihrab::after { /* gold rule following the arch */
  content: ''; position: absolute; inset: -14px -14px 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 112' preserveAspectRatio='none'%3E%3Cpath d='M.5 112V40C.5 22.3 46 9.4 80 .5c34 8.9 79.5 21.8 79.5 39.5V112' fill='none' stroke='%23e6c885' stroke-opacity='.55' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.mihrab__star { position: absolute; left: 50%; top: -48px; width: 26px; height: 26px; transform: translateX(-50%); fill: var(--gold); }

/* the one orchestrated moment: the niche opens on load */
.js .mihrab__frame img { transform: scale(1.06); opacity: 0; transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 1.2s ease; }
.js .mihrab::after, .js .mihrab__star { opacity: 0; transition: opacity 1.2s ease 0.5s; }
.js .is-in .mihrab__frame img { transform: none; opacity: 1; }
.js .is-in::after, .js .is-in .mihrab__star { opacity: 1; }

/* section heads */
section { scroll-margin-top: 24px; }
.sec-head { max-width: 760px; margin: 0 auto clamp(36px, 4vw, 56px); padding: 0 var(--gutter); text-align: center; }
.sec-head p { margin: 14px 0 0; color: var(--ink-2); font-size: 19px; text-wrap: balance; }

/* TV: a film strip of real screens */
.tv { padding: clamp(96px, 11vw, 150px) 0 clamp(88px, 10vw, 130px); }
.strip { display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 22px; scrollbar-color: var(--gold-line) transparent; }
.strip figure { flex: 0 0 min(78vw, 760px); scroll-snap-align: center; }
.strip img { width: 100%; height: auto; border-radius: 10px; border: 1px solid rgba(239, 231, 210, 0.08); }
.strip figcaption { margin-top: 16px; color: var(--ink-2); font-size: 17px; max-width: 34em; }

/* phone: the parchment page */
.phone { background: var(--parchment); color: var(--page-ink); padding: clamp(88px, 10vw, 130px) var(--gutter); }
.phone .sec-head p { color: var(--page-ink-2); }
.phones { display: flex; justify-content: center; align-items: flex-start; gap: clamp(20px, 4vw, 64px); }
.ph { width: min(28vw, 290px); }
.ph--up { margin-top: -28px; }
.ph__body { border-radius: 38px; padding: 9px; background: #18221c; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 30px 60px -30px rgba(29, 42, 34, 0.55); }
.ph__body img { border-radius: 30px; width: 100%; height: auto; }
.ph figcaption { text-align: center; margin-top: 18px; font-size: 16px; color: var(--page-ink-2); }

/* every feature, set like a table of contents: two columns of groups, a gold star per heading */
.all { padding: clamp(96px, 11vw, 150px) var(--gutter) 0; }
.index { max-width: 1120px; margin: 0 auto; columns: 2; column-gap: clamp(40px, 6vw, 96px); }
.group { break-inside: avoid; padding: 0 0 44px; }
.group h3 { font: 700 30px/1.3 var(--title); margin: 0 0 6px; color: var(--gold); display: flex; align-items: center; gap: 12px; }
.group h3::before { content: ''; width: 14px; height: 14px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill='%23e6c885' d='M20 2l5.3 12.7L38 20l-12.7 5.3L20 38l-5.3-12.7L2 20l12.7-5.3z'/%3E%3C/svg%3E") center / contain no-repeat; }
.group ul { list-style: none; margin: 0; padding: 0; }
.group li { padding: 11px 0; border-bottom: 1px solid rgba(239, 231, 210, 0.09); color: var(--ink-2); font-size: 17px; line-height: 1.6; }
.group li:last-child { border-bottom: 0; }

/* videos */
.watch { padding: clamp(96px, 11vw, 150px) var(--gutter) clamp(72px, 8vw, 110px); }
.videos { display: flex; gap: 28px; max-width: 1240px; margin: 0 auto; }
.video { flex: 1 1 0; position: relative; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--deep); cursor: pointer; color: var(--ink); font: inherit; }
.video img { width: 100%; height: 100%; object-fit: cover; opacity: 0.42; transition: opacity 0.3s; }
.video:hover img { opacity: 0.55; }
.video__play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; border: 1.5px solid var(--gold); background: rgba(6, 20, 15, 0.55); }
.video__play::after { content: ''; position: absolute; left: 31px; top: 25px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent var(--gold); }
.video__title { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; font: 700 26px/1.3 var(--title); }

/* stores */
.get { padding: clamp(72px, 8vw, 110px) var(--gutter); }
.stores { list-style: none; margin: 0 auto; padding: 0; max-width: 820px; border-top: 1px solid var(--gold-line); }
.stores li { border-bottom: 1px solid var(--gold-line); }
.stores__row { display: flex; align-items: baseline; gap: 18px; padding: 22px 6px; text-decoration: none; }
.stores__name { font-weight: 600; font-size: 20px; }
.stores__where { color: var(--ink-3); font-size: 16px; }
.stores__state { margin-inline-start: auto; font-size: 15px; color: var(--ink-3); }
a.stores__row .stores__state { color: var(--gold); font-weight: 600; }
a.stores__row:hover .stores__name { color: var(--gold); }

/* FAQ: plain questions that open in place */
.faq { padding: clamp(72px, 8vw, 110px) var(--gutter); }
.faq__list { max-width: 860px; margin: 0 auto; border-top: 1px solid var(--gold-line); }
.faq details { border-bottom: 1px solid var(--gold-line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 18px; padding: 22px 6px; font-weight: 600; font-size: 19px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; margin-inline-start: auto; color: var(--gold); font: 400 28px/1 var(--body); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--gold); }
.faq details p { margin: 0; padding: 0 6px 24px; color: var(--ink-2); max-width: 46em; }

/* sadaqah + maker */
.sadaqa { padding: clamp(72px, 9vw, 130px) var(--gutter); text-align: center; border-top: 1px solid rgba(239, 231, 210, 0.08); }
.sadaqa__text { font: 700 clamp(26px, 2.8vw, 36px)/1.7 var(--title); max-width: 24em; margin: 0 auto; }
html[lang='en'] .sadaqa__text { font-size: clamp(23px, 2.4vw, 30px); }
.made { display: inline-flex; align-items: center; gap: 16px; margin-top: 44px; text-decoration: none; color: var(--ink-2); font-size: 16px; }
.made img { width: 92px; height: auto; background: var(--parchment); border-radius: 12px; padding: 6px 10px; }
.made__heart { color: #d4605a; }

.foot { padding: 28px var(--gutter) 40px; border-top: 1px solid rgba(239, 231, 210, 0.08); color: var(--ink-3); font-size: 14px; text-align: center; }
.foot p { margin: 4px auto; max-width: 70em; }

/* video player */
.player { position: fixed; inset: 0; z-index: 10; background: rgba(3, 10, 7, 0.92); display: flex; align-items: center; justify-content: center; padding: var(--gutter); }
.player[hidden] { display: none; }
.player__box { position: relative; width: min(1200px, 100%); }
.player video { width: 100%; border-radius: 10px; background: #000; }
.player video[hidden] { display: none; }
.player__soon { text-align: center; font: 700 30px/1.5 var(--title); margin: 0; padding: 80px 20px; border: 1px solid var(--gold-line); border-radius: 10px; }
.player__close { position: absolute; top: -56px; inset-inline-end: 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--gold-line); background: none; color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer; }

@media (max-width: 820px) {
  body { font-size: 17px; }
  .links { display: none; }
  .lang { margin-inline-start: auto; }
  .mihrab__star { top: -36px; }
  .mihrab::after { inset: -8px -8px 0; }
  .mihrab__frame { aspect-ratio: 16 / 13; }
  .phones { gap: 12px; }
  .ph { width: 31vw; }
  .ph__body { border-radius: 22px; padding: 5px; }
  .ph__body img { border-radius: 17px; }
  .ph--up { margin-top: -14px; }
  .ph figcaption { font-size: 13px; line-height: 1.5; }
  .index { columns: 1; }
  .group h3 { font-size: 26px; }
  .videos { flex-direction: column; }
  .video { flex: none; width: 100%; }
  .video__play { width: 60px; height: 60px; margin: -44px 0 0 -30px; }
  .video__play::after { left: 24px; top: 18px; border-width: 11px 0 11px 17px; }
  .video__title { font-size: 20px; bottom: 12px; }
  .stores__row { flex-wrap: wrap; gap: 2px 14px; }
  .stores__where { order: 3; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .mihrab__frame img, .js .mihrab::after, .js .mihrab__star { transition: none; }
}