/*
 * Quran Media theme styles.
 * Colours: only var(--qm-*) tokens (printed by inc/colors.php). Direction: logical properties, so RTL and LTR both work.
 */

:root {
	--qm-font: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
	--qm-container: 1200px;
	--qm-prose: 760px;
	--qm-gutter: max(16px, env(safe-area-inset-left, 0px));
	--qm-gutter-end: max(16px, env(safe-area-inset-right, 0px));
	--qm-radius: 14px;
	--qm-radius-sm: 8px;
	--qm-header-h: 68px;
	--qm-shadow: 0 1px 2px rgb(16 28 44 / 6%), 0 8px 24px rgb(16 28 44 / 6%);

	/* Type scale (1.25) */
	--qm-step--1: 0.875rem;
	--qm-step-0: 1rem;
	--qm-step-1: 1.25rem;
	--qm-step-2: 1.5625rem;
	--qm-step-3: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
}

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--qm-header-h) + 12px);
}

body {
	margin: 0;
	background: var(--qm-bg);
	color: var(--qm-text);
	font-family: var(--qm-font);
	font-size: var(--qm-step-0);
	line-height: 1.75;
	text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
	color: var(--qm-heading);
	line-height: 1.35;
	font-weight: 700;
	text-wrap: balance;
	margin: 0 0 0.6em;
}
h1 { font-size: var(--qm-step-3); }
h2 { font-size: var(--qm-step-2); }
h3 { font-size: var(--qm-step-1); }
p { margin: 0 0 1em; }

a { color: var(--qm-link); text-underline-offset: 0.2em; }
a:hover { color: var(--qm-link-hover); }

:focus-visible {
	outline: 2px solid var(--qm-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.qm-skip:focus {
	position: fixed !important;
	inset-block-start: 8px;
	inset-inline-start: 8px;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	z-index: 100;
	padding: 8px 14px;
	background: var(--qm-surface);
	color: var(--qm-heading);
	border-radius: var(--qm-radius-sm);
	box-shadow: var(--qm-shadow);
}

.qm-container {
	width: 100%;
	max-width: var(--qm-container);
	margin-inline: auto;
	padding-left: var(--qm-gutter);
	padding-right: var(--qm-gutter-end);
}

/* ---------------------------------------------------------------- header */

/* Paints the phone's status-bar band in the header colour. */
body::before {
	content: "";
	position: fixed;
	inset: 0 0 auto;
	height: env(safe-area-inset-top, 0px);
	background: var(--qm-header-bg);
	z-index: 51;
}

.qm-header {
	position: sticky;
	top: env(safe-area-inset-top, 0px);
	z-index: 50;
	background: var(--qm-header-bg);
	color: var(--qm-header-text);
	border-block-end: 1px solid var(--qm-border);
}
.admin-bar .qm-header { top: calc(var(--wp-admin--admin-bar--height, 32px) + env(safe-area-inset-top, 0px)); }

.qm-header-inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: var(--qm-header-h);
}

.qm-brand { flex: none; }
.qm-logo { display: block; line-height: 0; }
.qm-logo-svg { height: 42px; width: auto; display: block; }
.qm-logo-svg .qm-l-w1 { fill: var(--qm-logo-word1); }
.qm-logo-svg .qm-l-w2 { fill: var(--qm-logo-word2); }
.qm-logo-svg .qm-l-star { fill: var(--qm-logo-star); }
.qm-logo-svg .qm-l-line { stroke: var(--qm-logo-gold); }
.qm-logo-svg .qm-l-gold { fill: var(--qm-logo-gold); }
.custom-logo { max-height: 48px; width: auto; display: block; }

.qm-nav { flex: 1; min-width: 0; }
.qm-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.qm-menu a {
	display: block;
	padding: 8px 12px;
	border-radius: var(--qm-radius-sm);
	color: var(--qm-header-text);
	text-decoration: none;
	font-weight: 500;
	position: relative;
}
.qm-menu a:hover { background: color-mix(in srgb, var(--qm-header-text) 8%, transparent); color: var(--qm-header-text); }
.qm-menu .current-menu-item > a::after,
.qm-menu .current_page_item > a::after {
	content: "";
	position: absolute;
	inset-inline: 12px;
	inset-block-end: 2px;
	height: 2px;
	border-radius: 2px;
	background: var(--qm-menu-active);
}
.qm-menu .sub-menu { list-style: none; margin: 0; padding: 0; }

.qm-header-tools { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.qm-account-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border: 1px solid var(--qm-border);
	border-radius: 999px;
	color: var(--qm-header-text);
	text-decoration: none;
	font-weight: 500;
	font-size: var(--qm-step--1);
}
.qm-account-link:hover { border-color: var(--qm-primary); color: var(--qm-header-text); }
.qm-account-link .qm-icon { width: 18px; height: 18px; }
@media (max-width: 420px) { .qm-account-link span { display: none; } .qm-account-link { padding: 9px; } }
.qm-icon-btn {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--qm-header-text);
	cursor: pointer;
}
.qm-icon-btn:hover { background: color-mix(in srgb, var(--qm-header-text) 8%, transparent); }
.qm-icon { display: block; }

/* Mode toggle: shows the mode you'd switch to. */
.qm-mode-toggle .qm-icon-sun { display: none; }
:root[data-theme="dark"] .qm-mode-toggle .qm-icon-sun { display: block; }
:root[data-theme="dark"] .qm-mode-toggle .qm-icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .qm-mode-toggle .qm-icon-sun { display: block; }
	:root:not([data-theme="light"]) .qm-mode-toggle .qm-icon-moon { display: none; }
}

.qm-nav-toggle { display: none; }
.qm-nav-toggle .qm-icon-close { display: none; }
.qm-nav-toggle[aria-expanded="true"] .qm-icon-close { display: block; }
.qm-nav-toggle[aria-expanded="true"] .qm-icon-menu { display: none; }

@media (max-width: 760px) {
	:root { --qm-header-h: 60px; }
	.qm-logo-svg { height: 36px; }
	.qm-nav-toggle { display: inline-grid; }
	.qm-nav {
		position: absolute;
		inset-inline: 0;
		inset-block-start: 100%;
		background: var(--qm-header-bg);
		border-block-end: 1px solid var(--qm-border);
		padding: 8px var(--qm-gutter-end) 16px var(--qm-gutter);
		display: none;
	}
	.qm-nav.is-open { display: block; }
	.qm-menu { flex-direction: column; }
	.qm-menu a { padding: 12px; }
	.qm-menu .current-menu-item > a::after,
	.qm-menu .current_page_item > a::after { inset-inline: auto 0; inset-block: 12px; width: 3px; height: auto; }
	.qm-menu .sub-menu { padding-inline-start: 16px; }
}
@media (min-width: 761px) {
	.qm-menu > li { position: relative; }
	.qm-menu .sub-menu {
		position: absolute;
		inset-inline-start: 0;
		top: 100%;
		min-width: 200px;
		padding: 6px;
		background: var(--qm-surface);
		border: 1px solid var(--qm-border);
		border-radius: var(--qm-radius-sm);
		box-shadow: var(--qm-shadow);
		display: none;
	}
	.qm-menu li:hover > .sub-menu,
	.qm-menu li:focus-within > .sub-menu { display: block; }
}

/* ---------------------------------------------------------------- main */

.qm-main { display: block; min-height: 50vh; outline: none; }

.qm-hero { padding-block: 40px 20px; }
.qm-hero-title { margin-bottom: 0.35em; }
.qm-hero-lead { max-width: 62ch; color: var(--qm-muted); font-size: var(--qm-step-1); line-height: 1.7; margin: 0; }
@media (max-width: 760px) {
	.qm-hero { padding-block: 24px 12px; }
	.qm-hero-lead { font-size: var(--qm-step-0); }
}

.qm-maker-section { padding-block: 12px 56px; }
/* Hold the maker's space while it loads, so the sections below don't jump (layout shift). */
.qm-maker-section .avm-loading { min-height: 100vh; }

.qm-page-head { padding-block: 40px 8px; }
.qm-page-title { margin: 0; }
.qm-prose { max-width: calc(var(--qm-prose) + 32px); padding-block: 16px 56px; }
.qm-page-head.is-prose { max-width: calc(var(--qm-prose) + 32px); }
.qm-page-wide { padding-block: 16px 56px; }
.qm-prose > * + * { margin-block-start: 1em; }
.qm-prose ul, .qm-prose ol { padding-inline-start: 1.3em; }

.qm-card {
	background: var(--qm-surface);
	border: 1px solid var(--qm-border);
	border-radius: var(--qm-radius);
	padding: 20px 22px;
}
.qm-card + .qm-card { margin-block-start: 16px; }
.qm-card-title { font-size: var(--qm-step-1); margin-bottom: 0.2em; }
.qm-card-title a { color: var(--qm-heading); text-decoration: none; }
.qm-card-meta { color: var(--qm-muted); font-size: var(--qm-step--1); }

.qm-btn,
.wp-block-button__link {
	display: inline-block;
	padding: 11px 20px;
	border: 0;
	border-radius: var(--qm-radius-sm);
	background: var(--qm-button);
	color: var(--qm-button-text);
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}
.qm-btn:hover,
.wp-block-button__link:hover { background: var(--qm-button-hover); color: var(--qm-button-text); }

.qm-notice {
	padding: 14px 16px;
	border-radius: var(--qm-radius-sm);
	border-inline-start: 4px solid var(--qm-warning);
	background: var(--qm-surface);
}

/* ---------------------------------------------------------------- homepage sections */

.qm-hero-actions { margin: 20px 0 0; }
.qm-maker-section { scroll-margin-top: calc(var(--qm-header-h) + 8px); outline: none; }

.qm-section, .qm-band { padding-block: 48px; }
.qm-band { background: var(--qm-surface); border-block: 1px solid var(--qm-border); }
.qm-section + .qm-section { padding-block-start: 0; }

.qm-steps {
	list-style: none;
	counter-reset: qm-step;
	margin: 0 0 16px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 16px;
}
.qm-steps li {
	counter-increment: qm-step;
	display: grid;
	gap: 4px;
	padding-inline-start: 52px;
	position: relative;
	min-height: 40px;
}
.qm-steps li::before {
	content: counter(qm-step, arabic-indic);
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--qm-primary);
	color: var(--qm-primary-text);
	font-weight: 700;
}
.qm-steps strong, .qm-features strong { color: var(--qm-heading); }
.qm-steps span, .qm-features span { color: var(--qm-muted); }

.qm-features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 16px;
}
.qm-features li {
	display: grid;
	gap: 4px;
	padding: 18px 20px;
	background: var(--qm-surface);
	border: 1px solid var(--qm-border);
	border-block-start: 3px solid var(--qm-accent);
	border-radius: var(--qm-radius-sm);
}

.qm-faq > * { max-width: var(--qm-prose); }
.qm-faq details {
	border-block-end: 1px solid var(--qm-border);
	padding-block: 14px;
}
.qm-faq summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--qm-heading);
	list-style-position: inside;
}
.qm-faq details p { margin: 8px 0 0; color: var(--qm-text); }

/* ---------------------------------------------------------------- page content */

.qm-lead { font-size: var(--qm-step-1); color: var(--qm-muted); line-height: 1.7; }
.qm-prose h2 { margin-block-start: 1.6em; }
.qm-prose li + li { margin-block-start: 0.4em; }
.qm-prose .wp-block-image { margin-block: 1.5em; }
.qm-prose .wp-block-image img { border: 1px solid var(--qm-border); border-radius: var(--qm-radius-sm); box-shadow: var(--qm-shadow); }
.qm-prose .wp-element-caption { margin-top: 8px; text-align: center; color: var(--qm-muted); font-size: var(--qm-step--1); }

/* ---------------------------------------------------------------- forms */

.qm-form { display: grid; gap: 16px; max-width: 620px; }
.qm-field { display: grid; gap: 6px; margin: 0; }
.qm-field label { font-weight: 500; color: var(--qm-heading); }
.qm-form input[type="text"],
.qm-form input[type="email"],
.qm-form textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--qm-border);
	border-radius: var(--qm-radius-sm);
	background: var(--qm-surface);
	color: var(--qm-text);
	font: inherit;
}
.qm-form input:focus-visible, .qm-form textarea:focus-visible { border-color: var(--qm-primary); outline-offset: 0; }
.qm-field.has-error input, .qm-field.has-error textarea { border-color: var(--qm-danger); }
.qm-field-error { color: var(--qm-danger); font-size: var(--qm-step--1); }
.qm-form-actions { margin: 0; }
.qm-form-note { margin: 0; color: var(--qm-muted); font-size: var(--qm-step--1); }
.qm-form-notice {
	padding: 12px 16px;
	border-radius: var(--qm-radius-sm);
	background: var(--qm-surface);
	border: 1px solid var(--qm-border);
	border-inline-start: 4px solid var(--qm-success);
}
.qm-form-notice.is-error { border-inline-start-color: var(--qm-danger); }
/* The field people never see (spam trap). */
.qm-hp { position: absolute !important; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------- footer */

.qm-footer {
	background: var(--qm-footer-bg);
	color: var(--qm-footer-text);
	padding-block: 32px calc(32px + env(safe-area-inset-bottom, 0px));
	font-size: var(--qm-step--1);
}
.qm-footer a { color: var(--qm-footer-text); }
.qm-footer a:hover { color: var(--qm-accent); }
.qm-footer-inner { display: grid; gap: 16px; }
.qm-footer-name { color: var(--qm-accent); font-weight: 700; font-size: var(--qm-step-1); margin: 0; }
.qm-footer-tagline { margin: 0; }
.qm-footer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.qm-copy { margin: 0; opacity: 0.8; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}