/* ----- Quran font (KFGQPC Uthmanic Hafs v22) -----
 * Bundled as a TTF in assets/fonts. font-display: swap so any text using
 * the font renders immediately in the fallback stack while the ~290KB
 * font streams in, then re-renders.
 *
 * URL is relative to this CSS file, which sits at assets/css/, so we go
 * up one level to assets/fonts/.
 */
@font-face {
	font-family: 'qpc-hafs';
	/* Browser picks the first format it supports. WOFF2 covers every
	 * modern browser (Chrome 36+, Firefox 39+, Safari 12+, Edge 14+);
	 * TTF stays as a safety net for the rare ancient client. */
	src: url('../fonts/UthmanicHafs_V22.woff2') format('woff2'),
	     url('../fonts/UthmanicHafs_V22.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* ----- Reader shell ----- */

.hafdz-quran { font: inherit; }

.hafdz-quran__index-header {
	margin-bottom: 1rem;
}
.hafdz-quran__index-title { margin: 0; font-size: 1.4rem; }
.hafdz-quran__index-sub  { margin: 0.25rem 0 0; color: rgba(0,0,0,0.6); font-size: 0.9rem; }

.hafdz-quran__grid {
	display: grid;
	gap: 0.5rem;
	/* minmax min-width is the floor — cards never shrink below this, and
	 * the grid lays out as many columns as fit. 320px ≈ 3 columns on
	 * a typical 1080px content width, 4 on a wide desktop, 1 on mobile. */
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.hafdz-quran__card {
	display: grid;
	grid-template-columns: 2.25rem 1fr auto;
	gap: 0.75rem;
	align-items: center;
	padding: 0.6rem 0.75rem;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 8px;
	cursor: pointer;
	font: inherit;
	text-align: start;
	color: inherit;
}
.hafdz-quran__card:hover { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.18); }

.hafdz-quran__card-number {
	display: flex; align-items: center; justify-content: center;
	width: 2.25rem; height: 2.25rem;
	border-radius: 50%;
	background: rgba(0,0,0,0.06);
	font-size: 0.8rem; font-weight: 600;
}
.hafdz-quran__card-body { display: flex; flex-direction: column; min-width: 0; }
.hafdz-quran__card-simple { font-weight: 600; font-size: 0.95rem; }
.hafdz-quran__card-english { font-size: 0.78rem; color: rgba(0,0,0,0.6); }
.hafdz-quran__card-meta { font-size: 0.72rem; color: rgba(0,0,0,0.45); margin-top: 0.1rem; }
.hafdz-quran__card-arabic {
	font-family: 'qpc-hafs', 'Amiri', 'Scheherazade New', 'Traditional Arabic', serif;
	font-size: 1.4rem;
	color: rgba(0,0,0,0.85);
}

/* ----- Reader view ----- */

.hafdz-quran__reader-header {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid rgba(0,0,0,0.08);
}
.hafdz-quran__reader-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
/* Lang switch sits at the right edge of the header; the icon toggles
 * have moved out into the floating .hafdz-quran__toolbar rail. */
.hafdz-quran__reader-controls > .hafdz-quran__lang-switch {
	margin-left: auto;
}

/* Segmented language switch (ID | EN). Single rounded pill; the active
 * segment uses the same blue tint as the icon toggles for consistency. */
.hafdz-quran__lang-switch {
	display: inline-flex;
	border: 1px solid rgba(0,0,0,0.15);
	border-radius: 6px;
	overflow: hidden;
}
.hafdz-quran__lang {
	padding: 0.4rem 0.7rem;
	background: transparent;
	border: 0;
	border-right: 1px solid rgba(0,0,0,0.12);
	cursor: pointer;
	font: inherit;
	font-size: 0.78rem;
	font-weight: 600;
	color: rgba(0,0,0,0.55);
	letter-spacing: 0.04em;
}
.hafdz-quran__lang:last-child { border-right: 0; }
.hafdz-quran__lang.is-active {
	background: rgba(30,136,229,0.12);
	color: #1565c0;
}
.hafdz-quran__lang:not(.is-active):hover { background: rgba(0,0,0,0.04); }
.hafdz-quran__back,
.hafdz-quran__toggle {
	padding: 0.4rem 0.75rem;
	background: transparent;
	border: 1px solid rgba(0,0,0,0.15);
	border-radius: 6px;
	cursor: pointer;
	font: inherit;
	font-size: 0.85rem;
	color: inherit;
}
.hafdz-quran__back:hover,
.hafdz-quran__toggle:hover { background: rgba(0,0,0,0.04); }

/* Toggle reflects state via the .is-active class. The blue tint when
 * active (visible) plus the muted look when off conveys state without
 * needing a second icon — the title/aria-label still announce the
 * action on hover and to screen readers. */
.hafdz-quran__toggle.is-active {
	background: rgba(30,136,229,0.08);
	border-color: rgba(30,136,229,0.4);
	color: #1565c0;
}
.hafdz-quran__toggle:not(.is-active) {
	color: rgba(0,0,0,0.45);
}

/* Square-ish icon button: just enough padding to be a comfortable tap
 * target on mobile, no horizontal padding bias from the old text labels. */
.hafdz-quran__toggle--icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.4rem;
	width: 2.1rem;
	height: 2.1rem;
}
.hafdz-quran__toggle--icon svg { display: block; }

/* ----- Floating reader toolbar (right-side rail) -----
 * Vertically-stacked icon toggles pinned to the right edge of the
 * viewport so they stay reachable while scrolling long surahs. Lives
 * inside [data-hafdz-quran-reader], so the parent's [hidden] attribute
 * removes it from the layout when the user is back on the surah index.
 *
 * Vertically centred and offset above the bottom legend bar (~3.5rem
 * tall). The legend is also fixed; its height plus a 1rem gap is the
 * reason for the bottom: 4.5rem fallback when the rail would otherwise
 * collide with it on short viewports.
 */
.hafdz-quran__toolbar {
	position: fixed;
	top: 50%;
	right: 0.75rem;
	transform: translateY(-50%);
	z-index: 90; /* below the legend (100) so it never sits on top of it */
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.4rem;
	background: rgba(255,255,255,0.96);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 10px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* On narrow viewports, hug the edge tighter and shrink the inner padding
 * so the rail doesn't crowd the ayah text. */
@media (max-width: 480px) {
	.hafdz-quran__toolbar {
		right: 0.4rem;
		padding: 0.3rem;
		gap: 0.3rem;
	}
}

/* ----- Bismillah header (rendered above ayah 1 for surahs 2–8, 10–114) -----
 * Arabic only — no number, translation, or transliteration. Centered, soft
 * decorative background. Surah 1 includes Bismillah as ayah 1 already. */
.hafdz-quran__bismillah {
	display: flex;
	justify-content: center;
	margin: 0 0 1rem;
	padding: 1rem 1rem;
	background: linear-gradient(180deg, rgba(30,136,229,0.04), rgba(30,136,229,0.08));
	border: 1px solid rgba(30,136,229,0.14);
	border-radius: 10px;
	text-align: center;
}
.hafdz-quran__bismillah-text {
	font-family: 'qpc-hafs', 'Amiri', 'Scheherazade New', 'Traditional Arabic', serif;
	font-size: 2.1rem;
	line-height: 2.2;
	direction: rtl;
}

/* When the root carries --no-translation, hide every translation block +
 * its footnote list. The Arabic ayah text stays visible. */
.hafdz-quran--no-translation .hafdz-quran__translation,
.hafdz-quran--no-translation .hafdz-quran__footnotes { display: none; }
.hafdz-quran__reader-titles { text-align: center; }
.hafdz-quran__reader-title-arabic {
	margin: 0;
	font-family: 'qpc-hafs', 'Amiri', 'Scheherazade New', 'Traditional Arabic', serif;
	font-size: 2.4rem;
	font-weight: normal;
	direction: rtl;
}
.hafdz-quran__reader-title-simple { margin: 0.2rem 0 0; font-size: 1.1rem; font-weight: 600; }
.hafdz-quran__reader-meta { margin: 0.2rem 0 0; color: rgba(0,0,0,0.55); font-size: 0.85rem; }

.hafdz-quran__info {
	margin: 0 0 1rem;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 0.5rem;
	overflow: hidden;
}
.hafdz-quran__info-summary {
	cursor: pointer;
	padding: 0.75rem 1rem;
	font-weight: 600;
	font-size: 0.95rem;
	color: rgba(0,0,0,0.75);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}
.hafdz-quran__info-summary::-webkit-details-marker { display: none; }
.hafdz-quran__info-summary::after {
	content: '▾';
	font-size: 0.8rem;
	color: rgba(0,0,0,0.45);
	transition: transform 0.2s ease;
}
.hafdz-quran__info[open] .hafdz-quran__info-summary::after {
	transform: rotate(180deg);
}
.hafdz-quran__info-summary:hover { background: rgba(0,0,0,0.02); }
.hafdz-quran__info-body {
	padding: 0 1rem 1rem;
	font-size: 0.95rem;
	line-height: 1.65;
	color: rgba(0,0,0,0.78);
}
.hafdz-quran__info-body h2 {
	font-size: 1.05rem;
	font-weight: 600;
	margin: 1rem 0 0.4rem;
	color: rgba(0,0,0,0.9);
}
.hafdz-quran__info-body h2:first-child { margin-top: 0; }
.hafdz-quran__info-body p { margin: 0 0 0.75rem; }
.hafdz-quran__info-body p:last-child { margin-bottom: 0; }

.hafdz-quran__ayahs {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.hafdz-quran__ayah {
	display: grid;
	grid-template-columns: 2.25rem 1fr;
	gap: 0.75rem;
	padding: 0.85rem 0.75rem;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.06);
	border-radius: 8px;
}
.hafdz-quran__ayah-number {
	display: flex; align-items: center; justify-content: center;
	width: 2.25rem; height: 2.25rem;
	border-radius: 50%;
	background: rgba(0,0,0,0.05);
	color: rgba(0,0,0,0.65);
	font-size: 0.8rem; font-weight: 600;
}
.hafdz-quran__ayah-body {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	min-width: 0;
}
.hafdz-quran__ayah-text {
	font-family: 'qpc-hafs', 'Amiri', 'Scheherazade New', 'Traditional Arabic', serif;
	font-size: 1.9rem;
	line-height: 2.4;
	direction: rtl;
	text-align: right;
}
.hafdz-quran__transliteration {
	margin: 0;
	font-style: italic;
	color: rgba(0,0,0,0.6);
	font-size: 0.95rem;
	line-height: 1.5;
}
.hafdz-quran__translation {
	margin: 0;
	color: rgba(0,0,0,0.78);
	font-size: 0.95rem;
	line-height: 1.65;
}

/* Toggle-driven hides (mirror the translation pattern). */
.hafdz-quran--no-transliteration .hafdz-quran__transliteration { display: none; }
.hafdz-quran__fn-marker {
	font-size: 0.7em;
	vertical-align: super;
	line-height: 0;
	margin-left: 1px;
}
.hafdz-quran__fn-button {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	color: #1e88e5;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
}
.hafdz-quran__fn-button:hover { text-decoration: underline; }
.hafdz-quran__fn-button[aria-expanded="true"] {
	background: rgba(30,136,229,0.18);
	border-radius: 3px;
	padding: 0 0.2em;
}

.hafdz-quran__footnotes {
	margin: 0.5rem 0 0;
	padding-left: 1.25rem;
	font-size: 0.78rem;
	color: rgba(0,0,0,0.55);
	line-height: 1.5;
}

/* Footnotes are collapsed by default; an item only renders when its
 * marker has been clicked. The :has() rule hides the empty <ol> wrapper
 * so it doesn't take vertical space until at least one item is revealed. */
.hafdz-quran__footnotes li { display: none; }
.hafdz-quran__footnotes li.is-revealed {
	display: list-item;
	margin-bottom: 0.25rem;
	scroll-margin-top: 1rem;
	color: #111;
	background: rgba(30,136,229,0.08);
	border-left: 2px solid rgba(30,136,229,0.5);
	padding: 0.25rem 0.5rem;
	border-radius: 0 4px 4px 0;
	animation: hafdz-quran-fn-flash 1.2s ease-out;
}
.hafdz-quran__footnotes:not(:has(li.is-revealed)) { display: none; }

@keyframes hafdz-quran-fn-flash {
	0%   { background: rgba(30,136,229,0.32); }
	100% { background: rgba(30,136,229,0.08); }
}

/* ----- Tajweed legend (sticky bottom bar inside the reader) -----
 * The reader root carries [hidden] when the surah index is shown, so
 * this element disappears with it automatically — no JS required.
 */
.hafdz-quran__reader { padding-bottom: 5rem; } /* room so last ayah isn't covered */
.hafdz-quran__legend {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: rgba(255,255,255,0.96);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-top: 1px solid rgba(0,0,0,0.08);
	box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}
.hafdz-quran__legend.is-hidden { display: none; }

.hafdz-quran__legend-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: 0.4rem 1.1rem;
	flex-wrap: nowrap;
	overflow-x: auto;
	font-size: 0.76rem;
	color: rgba(0,0,0,0.78);
	flex: 1;
}
.hafdz-quran__legend-list li {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	white-space: nowrap;
}
.hafdz-quran__legend-swatch {
	display: inline-block;
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 3px;
	flex-shrink: 0;
}
.hafdz-quran__legend-close {
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 4px;
	border: 1px solid rgba(0,0,0,0.12);
	background: transparent;
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
	color: rgba(0,0,0,0.6);
}
.hafdz-quran__legend-close:hover { background: rgba(0,0,0,0.05); color: #111; }

/* When the legend is dismissed, give back the reader's bottom padding so
 * trailing ayahs aren't sitting in awkward whitespace. JS toggles
 * .legend-dismissed on the root. */
.hafdz-quran--legend-dismissed .hafdz-quran__reader { padding-bottom: 0; }
.hafdz-quran--legend-dismissed .hafdz-quran__legend { display: none; }
.hafdz-quran--legend-dismissed .hafdz-quran__legend-restore { display: inline-flex; }
.hafdz-quran__legend-restore { display: none; }

.hafdz-quran__loading,
.hafdz-quran__error {
	text-align: center;
	color: rgba(0,0,0,0.55);
	padding: 1.5rem 0;
}

/* ----- Tajweed rule colours -----
 * Standard QPC HAFS palette. Inline <rule class="..."> elements wrap the
 * relevant Arabic letters in the source data.
 */
.hafdz-quran__ayah-text rule[class*="ham_wasl"]        { color: #aaaaaa; }
.hafdz-quran__ayah-text rule[class*="laam_shamsiyah"]  { color: #aaaaaa; }
.hafdz-quran__ayah-text rule[class*="madda_normal"]    { color: #537fff; }
.hafdz-quran__ayah-text rule[class*="madda_permissible"] { color: #4050ff; }
.hafdz-quran__ayah-text rule[class*="madda_necessary"] { color: #000ebc; }
.hafdz-quran__ayah-text rule[class*="qalaqah"]         { color: #dd0008; }
.hafdz-quran__ayah-text rule[class*="madda_obligatory"] { color: #2144c1; }
.hafdz-quran__ayah-text rule[class*="ikhafa_shafawi"]  { color: #d500b7; }
.hafdz-quran__ayah-text rule[class*="ikhafa"]          { color: #9400a8; }
.hafdz-quran__ayah-text rule[class*="idgham_shafawi"]  { color: #58b800; }
.hafdz-quran__ayah-text rule[class*="iqlab"]           { color: #26bffd; }
.hafdz-quran__ayah-text rule[class*="idgham"]          { color: #169200; }
.hafdz-quran__ayah-text rule[class*="ghunnah"]         { color: #ff7e1e; }