/**
 * Noor Daily Hadith & Quranic Verses: front-end styles.
 * No web fonts are loaded; Arabic/Urdu use the best font already on the visitor's device.
 * Override any value with the --noordhq-* custom properties in your theme.
 */

.noordhq {
	--noordhq-bg: #fbfaf6;
	--noordhq-fg: #24231f;
	--noordhq-muted: #6d6a60;
	--noordhq-border: #e6e0d1;
	--noordhq-accent: #8a6a1f;
	--noordhq-soft: #f3efe4;
	--noordhq-radius: 14px;
	--noordhq-font-arabic: "Amiri Quran", "Amiri", "Scheherazade New", "KFGQPC Uthmanic Script HAFS", "Noto Naskh Arabic", "Geeza Pro", "Traditional Arabic", "Times New Roman", serif;
	--noordhq-font-urdu: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Alvi Nastaleeq", "Mehr Nastaliq Web", "Noto Naskh Arabic", "Geeza Pro", serif;

	box-sizing: border-box;
	margin-block: 1.5em;
	margin-inline: 0;
	color: var(--noordhq-fg);
}

.noordhq *,
.noordhq *::before,
.noordhq *::after {
	box-sizing: inherit;
}

/* ---- Card ---- */
.noordhq--card {
	position: relative;
	padding: clamp(1.1rem, 3vw, 1.75rem);
	background: var(--noordhq-bg);
	border: 1px solid var(--noordhq-border);
	border-radius: var(--noordhq-radius);
	overflow: hidden;
}

.noordhq--card::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--noordhq-accent), transparent);
	opacity: 0.7;
}

/* ---- Minimal: no background of its own, so text colours come from the theme ---- */
.noordhq--minimal {
	--noordhq-bg: transparent;
	--noordhq-fg: inherit;
	--noordhq-muted: inherit;
	--noordhq-soft: rgba(127, 127, 127, 0.1);
	--noordhq-border: rgba(127, 127, 127, 0.3);
	padding-inline-start: 1.1rem;
	border-inline-start: 3px solid var(--noordhq-accent);
	color: inherit;
}

/* ---- Plain: inherit everything from the theme ---- */
.noordhq--plain {
	--noordhq-bg: transparent;
	--noordhq-fg: inherit;
	--noordhq-muted: inherit;
	--noordhq-soft: rgba(127, 127, 127, 0.1);
	--noordhq-border: rgba(127, 127, 127, 0.3);
	color: inherit;
}

/* Secondary text in theme-coloured styles: dim it instead of picking a colour. */
.noordhq--minimal :is(.noordhq__narrator, .noordhq__translator, .noordhq__ref, .noordhq__credit, .noordhq__translation-secondary),
.noordhq--plain :is(.noordhq__narrator, .noordhq__translator, .noordhq__ref, .noordhq__credit, .noordhq__translation-secondary) {
	opacity: 0.72;
}

/* ---- Parts ---- */
.noordhq__title {
	margin: 0 0 0.9em;
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--noordhq-accent);
}

.noordhq__title[lang="ur"],
.noordhq__title[lang="ar"] {
	font-family: var(--noordhq-font-arabic);
	font-size: 1em;
	letter-spacing: 0;
	text-transform: none;
}

.noordhq__arabic {
	margin: 0 0 0.9em;
	font-family: var(--noordhq-font-arabic);
	font-size: 1.45em;
	line-height: 2.05;
	text-align: start;
	color: var(--noordhq-fg);
}

.noordhq__arabic--quran {
	font-size: 1.7em;
	line-height: 2.1;
}

.noordhq--hadith .noordhq__arabic {
	font-size: 1.2em;
	padding-block-end: 0.9em;
	border-block-end: 1px dashed var(--noordhq-border);
}

.noordhq__ayah-no {
	display: inline-block;
	font-size: 0.75em;
	color: var(--noordhq-accent);
	white-space: nowrap;
}

.noordhq__narrator {
	margin: 0 0 0.4em;
	font-size: 0.92em;
	font-style: italic;
	color: var(--noordhq-muted);
}

.noordhq blockquote.noordhq__text {
	margin: 0 0 0.9em;
	padding: 0;
	border: 0;
	background: none;
	font-size: 1.05em;
	line-height: 1.75;
	quotes: none;
}

.noordhq blockquote.noordhq__text::before,
.noordhq blockquote.noordhq__text::after {
	content: none;
}

.noordhq [lang="ur"].noordhq__text,
.noordhq [lang="ur"].noordhq__narrator,
.noordhq .noordhq__translation[lang="ur"],
.noordhq .noordhq__text[lang="ur"] {
	font-family: var(--noordhq-font-urdu);
	font-style: normal;
	line-height: 2.3;
}

.noordhq .noordhq__text[lang="ar"],
.noordhq .noordhq__narrator[lang="ar"] {
	font-family: var(--noordhq-font-arabic);
	font-style: normal;
	font-size: 1.2em;
	line-height: 2;
}

.noordhq__translation-secondary {
	padding-block-start: 0.8em;
	border-block-start: 1px solid var(--noordhq-border);
	font-size: 0.95em !important;
	color: var(--noordhq-muted);
}

.noordhq__tr-text {
	display: block;
}

.noordhq__translator {
	display: block;
	margin-block-start: 0.3em;
	font-size: 0.78em;
	font-style: normal;
	color: var(--noordhq-muted);
}

.noordhq__translation {
	margin: 0 0 0.9em;
	padding: 0.7em 0.9em;
	background: var(--noordhq-soft);
	border-radius: calc(var(--noordhq-radius) / 2);
	font-size: 0.98em;
}

.noordhq__ref {
	margin: 0;
	font-size: 0.82em;
	color: var(--noordhq-muted);
}

.noordhq__ref [lang="ar"] {
	font-family: var(--noordhq-font-arabic);
	font-size: 1.15em;
}

.noordhq__credit {
	margin: 0.5em 0 0;
	font-size: 0.7em;
	color: var(--noordhq-muted);
	opacity: 0.8;
}

.noordhq--notice {
	padding: 0.75em 1em;
	border: 1px dashed #c3c4c7;
	border-radius: 6px;
	font-size: 0.9em;
}

.noordhq__muted {
	margin: 0.25em 0 0;
	opacity: 0.7;
	font-size: 0.9em;
}

/* ---- Dark mode: only the card, which paints its own background ---- */
@media (prefers-color-scheme: dark) {
	.noordhq--card {
		--noordhq-bg: #1d1c19;
		--noordhq-fg: #ece7da;
		--noordhq-muted: #a8a293;
		--noordhq-border: #39362e;
		--noordhq-accent: #d2b36a;
		--noordhq-soft: #26241f;
	}

	.noordhq--minimal {
		--noordhq-accent: #c9a54e;
	}
}

/* Themes that set a light background explicitly can force light colours: */
.is-style-light.noordhq,
.noordhq--dashboard {
	--noordhq-bg: #fbfaf6;
	--noordhq-fg: #24231f;
	--noordhq-muted: #6d6a60;
	--noordhq-border: #e6e0d1;
	--noordhq-accent: #8a6a1f;
	--noordhq-soft: #f3efe4;
}

.noordhq--dashboard {
	margin: 0 0 1em;
}

.noordhq--dashboard .noordhq__arabic--quran {
	font-size: 1.45em;
}

@media print {
	.noordhq--card {
		border-color: #999;
		background: none;
	}
}