/* ── Mushaf page rendering ──────────────────────────────────────────────────── */

@font-face {
  font-family: 'UthmanicHafs';
  src: url('https://verses.quran.foundation/fonts/quran/hafs/uthmanic_hafs/UthmanicHafs1Ver18.woff2') format('woff2');
  font-display: swap;
}

.mushaf-page {
  /* 8-point gold star, reused by surah frame + decorated page borders */
  --star: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cg%20fill='%23c9a84c'%3E%3Crect%20x='7'%20y='7'%20width='10'%20height='10'/%3E%3Crect%20x='7'%20y='7'%20width='10'%20height='10'%20transform='rotate(45%2012%2012)'/%3E%3C/g%3E%3C/svg%3E");
  flex: 0 1 min(100vw, 760px);
  display: flex;
  flex-direction: column;
  background: var(--page-bg);
  color: var(--page-text);
  position: relative;
  overflow: hidden;
  max-width: min(100vw, 760px);
  padding:
    calc(max(10px, env(safe-area-inset-top, 0px)) + 8px)
    calc(max(14px, env(safe-area-inset-right, 0px)) + 8px)
    calc(max(12px, env(safe-area-inset-bottom, 0px)) + 8px)
    calc(max(14px, env(safe-area-inset-left, 0px)) + 8px);
  font-size: var(--mushaf-fit-size, clamp(13px, min(6vw, 3.2dvh), 42px));
  line-height: 1.18;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  animation: pageIn .2s ease;
}
/* Opacity-only so it doesn't fight the swipe-slot transforms. */
@keyframes pageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Page header (surah / juz line) ────────────────────────────────────────── */
.page-header {
  display: flex;
  justify-content: space-between;
  font-size: clamp(12px, 2.45vw, 17px);
  color: var(--page-text-soft);
  padding: 0 4px 5px;
  margin-bottom: 3px;
  font-family: -apple-system, sans-serif;
  direction: ltr;
}
.header-surah, .header-juz { font-weight: 700; letter-spacing: .01em; }

/* ── Surah banner — ornamental header cartouche ────────────────────────────── */
.surah-banner {
  text-align: center;
  margin: 8px 0 4px;
}
.surah-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(78%, 340px);
  padding: 6px 24px;
  border: 4px double var(--gold);
  border-radius: 2px;
  background:
    var(--star) top 4px left 4px / 13px 13px no-repeat,
    var(--star) top 4px right 4px / 13px 13px no-repeat,
    var(--star) bottom 4px left 4px / 13px 13px no-repeat,
    var(--star) bottom 4px right 4px / 13px 13px no-repeat,
    var(--surah-frame-grad);
  box-shadow: var(--surah-frame-shadow);
}
.surah-frame-name {
  font-family: 'Scheherazade New', 'Amiri', Georgia, serif;
  font-size: clamp(15px, 4.6vw, 23px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--gold-light);
  letter-spacing: .015em;
  direction: rtl;
}
.surah-frame-name::before,
.surah-frame-name::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 11px;
  background: var(--gold);
  transform: rotate(45deg);
  vertical-align: .12em;
}

/* ── Bismillah — calligraphic SVG, not type ────────────────────────────────── */
/* Use the SVG as a mask so the calligraphy takes the page text colour (cream on
   the dark theme, dark ink on the light theme) instead of its baked-in fill,
   which was invisible cream-on-parchment in light mode. */
.bismillah {
  width: min(64%, 290px);
  aspect-ratio: 17168 / 3372;
  margin: 6px auto 2px;
  background-color: var(--page-text);
  -webkit-mask: url('../assets/icons/basmalah.svg') center / contain no-repeat;
          mask: url('../assets/icons/basmalah.svg') center / contain no-repeat;
}

/* ── Mushaf lines — the 15 equal-height rows of a page ─────────────────────── */
.mushaf-line {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  direction: rtl;
  padding: 0 4px;
  min-height: 0;
  overflow: visible;
}
/* The glyph run flows as one inline line, centred within its row. */
.mushaf-line-inner {
  width: 100%;
  direction: rtl;
  text-align: center;
  white-space: nowrap;
}
.mushaf-page.qcf-active .mushaf-line-inner {
  letter-spacing: 0;
  word-spacing: 0;
}

/* The surah header ornament occupies two printed lines (banner + bismillah),
   so it claims two row-units of the flex grid. */
.mushaf-page.qcf-active .surah-banner {
  flex: 2 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 0;
}

.mushaf-page.qcf-active .word.qcf-word,
.mushaf-page.qcf-active .ayah-marker.qcf-word {
  display: inline;
  direction: rtl;
  font-family: inherit;
  line-height: 1;
  padding: 0;
  unicode-bidi: isolate;
}
.mushaf-page.qcf-active .ayah-marker {
  font-family: inherit;
  color: var(--ayah-color);
}

/* ── Individual words ──────────────────────────────────────────────────────── */
.word {
  display: inline-block;
  cursor: pointer;
  border-radius: 3px;
  padding: 1px 2px;
  transition: background .1s;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  direction: rtl;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  /* Block iOS long-press selection + callout (Copy / Look Up / Share) so a
     long-press on a word never lights up the page with a blue selection. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
/* Hover only fires on devices that actually have hover (mouse / pen).
   On touch screens we don't want sticky hover backgrounds after a tap. */
@media (hover: hover) {
  .word:hover, .word:focus-visible {
    background: var(--word-hover-bg);
    outline: none;
  }
}


/* ── Ayah end markers ──────────────────────────────────────────────────────── */
.ayah-marker {
  display: inline-block;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  direction: rtl;
  padding: 1px 2px;
  border-radius: 50%;
  transition: background .1s;
  color: var(--ayah-color);
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.ayah-marker:hover  { background: var(--ayah-hover-bg); }
.ayah-marker:active { background: var(--ayah-active-bg); }

/* ── Verse highlights (4 colours) ──────────────────────────────────────────── */
.word.hl-red,    .ayah-marker.hl-red    { background: rgba(224, 78, 78, .34); }
.word.hl-yellow, .ayah-marker.hl-yellow { background: rgba(228, 191, 70, .36); }
.word.hl-blue,   .ayah-marker.hl-blue   { background: rgba(86, 138, 224, .36); }
.word.hl-green,  .ayah-marker.hl-green  { background: rgba(86, 178, 96, .34); }
.word[class*="hl-"] { border-radius: 2px; }

/* Long-press / click focus — added by JS, persists while the word popup is
   open, cleared on close. Placed after .hl-* so it wins on tie. */
.word.word-active {
  background: var(--word-active-bg);
  border-radius: 3px;
}

/* Ayah with a saved note — a gold ring on its end marker. */
.ayah-marker.has-note {
  box-shadow: 0 0 0 2px var(--word-active-ring);
  border-radius: 50%;
}

/* ── Page footer (page number) ─────────────────────────────────────────────── */
.page-footer {
  display: flex;
  font-size: clamp(12px, 2.5vw, 17px);
  color: var(--page-text-footer);
  padding: 3px 4px 0;
  margin-top: 2px;
  font-family: -apple-system, sans-serif;
  font-weight: 700;
  direction: ltr;
}
.page-footer.footer-left  { justify-content: flex-start; }
.page-footer.footer-right { justify-content: flex-end; }

/* ── Decorated opening pages (1–2) ─────────────────────────────────────────── */
/* Al-Fatihah and the opening of Al-Baqarah sit in an illuminated frame with
   the (short) content centred, rather than the standard 15-line grid. */
.mushaf-page.decorated-page {
  padding:
    calc(max(22px, env(safe-area-inset-top, 0px)) + 8px)
    calc(max(22px, env(safe-area-inset-right, 0px)) + 8px)
    calc(max(22px, env(safe-area-inset-bottom, 0px)) + 8px)
    calc(max(22px, env(safe-area-inset-left, 0px)) + 8px);
}
/* margin-auto on header + footer centres the banner/lines group between them */
.mushaf-page.decorated-page .page-header { margin-bottom: auto; }
.mushaf-page.decorated-page .page-footer { margin-top: auto; }
.mushaf-page.decorated-page .mushaf-line { flex: 0 0 auto; min-height: 1.5em; }
.mushaf-page.decorated-page.qcf-active .surah-banner { flex: 0 0 auto; }

/* outer double-rule frame with star corners */
.mushaf-page.decorated-page::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 4px double var(--gold);
  border-radius: 4px;
  background:
    var(--star) top 6px left 6px / 17px 17px no-repeat,
    var(--star) top 6px right 6px / 17px 17px no-repeat,
    var(--star) bottom 6px left 6px / 17px 17px no-repeat,
    var(--star) bottom 6px right 6px / 17px 17px no-repeat;
  box-shadow: inset 0 0 26px var(--decor-shadow);
  pointer-events: none;
}
/* inner hairline */
.mushaf-page.decorated-page::after {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid var(--decor-inner-border);
  border-radius: 2px;
  pointer-events: none;
}

/* ── Responsive sizing ─────────────────────────────────────────────────────── */
#mushaf-container { container-type: size; }

#mushaf-container.spread-mode .mushaf-page {
  flex: 1;
  max-width: 50%;
  font-size: var(--mushaf-fit-size, clamp(11px, min(3.6vw, 3.1dvh), 30px));
}

/* ── Fluid-swipe strip (single-page mode) ──────────────────────────────────────
   In single-page mode the three swipe slots are absolutely positioned and
   translated by a shared --swipe-dx CSS variable, so they all move together
   while the user drags. `dragging` disables transitions; `snap` re-enables
   them for the release animation. Higher-numbered pages sit off-screen LEFT
   and lower-numbered pages off-screen RIGHT (RTL physical-book layout). */
#mushaf-container:not(.spread-mode) #page-prev,
#mushaf-container:not(.spread-mode) #page-right,
#mushaf-container:not(.spread-mode) #page-next {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  flex: none;
  will-change: transform;
  backface-visibility: hidden;
}
#mushaf-container:not(.spread-mode) #page-prev {
  transform: translate3d(calc(100% + var(--swipe-dx, 0px)), 0, 0);
}
#mushaf-container:not(.spread-mode) #page-right {
  transform: translate3d(var(--swipe-dx, 0px), 0, 0);
}
#mushaf-container:not(.spread-mode) #page-next {
  transform: translate3d(calc(-100% + var(--swipe-dx, 0px)), 0, 0);
}
#mushaf-container.snap #page-prev,
#mushaf-container.snap #page-right,
#mushaf-container.snap #page-next {
  transition: transform .28s cubic-bezier(.32, .72, .31, 1);
}
/* The neighbour swipe slots only need to be on screen while a swipe is actually
   in progress. Keep them hidden when idle so they don't peek in beside a centred
   page on wide screens (where the page is narrower than the viewport and the
   ±100% rest offset isn't enough to push them off). They're revealed only while
   the container is dragging or running the snap animation. Empty edge slots
   (before page 1 / after 604) never show. */
#mushaf-container:not(.spread-mode) .swipe-slot { visibility: hidden; }
#mushaf-container:not(.spread-mode).dragging .swipe-slot:not(:empty),
#mushaf-container:not(.spread-mode).snap     .swipe-slot:not(:empty) {
  visibility: visible;
}
#mushaf-container.spread-mode .swipe-slot {
  display: none !important;
}

/* Phone landscape: pages are taller than the short viewport, so lines are
   fitted to width and each page scrolls vertically WITHIN its own swipe slot.
   The horizontal 3-slot strip stays active so page-turning is still a fluid
   drag. `touch-action: pan-y` lets the browser own vertical scrolling inside a
   page while our JS owns the horizontal swipe; a looser line-height gives the
   diacritics room so adjacent rows don't visually overlap. */
@media (orientation: landscape) and (max-height: 560px) {
  /* Standard pages scroll vertically within their slot. Decorated pages (1–2)
     are excluded: they keep the fixed full-height slot so their illuminated
     frame still wraps the whole page instead of being cut off by the scroll. */
  #mushaf-container:not(.spread-mode) #page-prev:not(.decorated-page),
  #mushaf-container:not(.spread-mode) #page-right:not(.decorated-page),
  #mushaf-container:not(.spread-mode) #page-next:not(.decorated-page) {
    /* Use the full container width (drop the 760px portrait cap) and trim the
       side padding so the justified lines fill the screen instead of sitting
       in a narrow centred column with big empty margins. */
    max-width: none;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    justify-content: flex-start;
    padding-right: calc(max(18px, env(safe-area-inset-right, 0px)) + 6px);
    padding-left:  calc(max(18px, env(safe-area-inset-left, 0px)) + 6px);
    line-height: 1.7;
  }
  #mushaf-container:not(.spread-mode) .mushaf-page:not(.decorated-page) .mushaf-line {
    flex: 0 0 auto;
    min-height: 1.75em;
  }
}

/* Spine: row-reverse puts page-right (lower number) on the visual right. */
#mushaf-container.spread-mode #page-right {
  border-left: 1px solid var(--page-spine);
}

/* ── Unicode fallback (before the QCF page font loads) ─────────────────────── */
.mushaf-page:not(.qcf-active) .word,
.mushaf-page:not(.qcf-active) .ayah-marker {
  font-family: 'UthmanicHafs', 'Amiri Quran', 'Scheherazade New', serif;
}

/* ── Page empty / loading ──────────────────────────────────────────────────── */
.page-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--page-loading);
  font-size: .85rem;
}