/*
Theme Name: Quran App Mockup
Description: A simple, clean theme with a "Quran App Mockup" page template. Assign the template to any page to show the design review mockup: Home & Feed screens and the interactive Reader (Muṣḥaf / Āyah modes, comfort settings, mistake marking). All other pages and posts use the default layout.
Version: 1.1.0
Requires at least: 5.9
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: quran-app-mockup
*/

/* ---------- Default layout (all pages except the mockup template) ---------- */
:root {
	--qam-bg: #f3f1eb;
	--qam-panel: #ffffff;
	--qam-ink: #15201e;
	--qam-muted: #5d6b67;
	--qam-line: #e2ded3;
	--qam-accent: #1f6f5f;
	--qam-width: 760px;
	--qam-wide: 1100px;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
	background: var(--qam-bg);
	color: var(--qam-ink);
	font: 17px/1.7 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}
a { color: var(--qam-accent); text-underline-offset: 3px; }
a:hover { color: var(--qam-ink); }
img, video, iframe { max-width: 100%; height: auto; }
h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; }
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
	background: var(--qam-panel); clip: auto !important; clip-path: none; color: var(--qam-ink);
	display: block; height: auto; left: 8px; padding: 12px 16px; top: 8px; width: auto; z-index: 100000;
}

.qam-header { border-bottom: 1px solid var(--qam-line); background: var(--qam-bg); }
.qam-header__in {
	max-width: var(--qam-wide); margin: 0 auto; padding: 18px 24px;
	display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.qam-brand { display: flex; align-items: center; gap: 12px; }
.qam-brand .custom-logo { max-height: 40px; width: auto; display: block; }
.qam-brand__title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.qam-brand__title a { color: var(--qam-ink); text-decoration: none; }
.qam-brand__tagline { margin: 0; font-size: 13px; color: var(--qam-muted); }
.qam-nav { margin-left: auto; }
.qam-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.qam-nav li { position: relative; }
.qam-nav a { color: var(--qam-ink); text-decoration: none; font-size: 15px; font-weight: 500; }
.qam-nav a:hover, .qam-nav .current-menu-item > a { color: var(--qam-accent); }
.qam-nav .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 190px; padding: 8px 0; background: var(--qam-panel); border: 1px solid var(--qam-line); border-radius: 10px; flex-direction: column; gap: 0; z-index: 50; }
.qam-nav .sub-menu a { display: block; padding: 6px 14px; }
.qam-nav li:hover > .sub-menu, .qam-nav li:focus-within > .sub-menu { display: flex; }

.qam-main { max-width: var(--qam-width); margin: 0 auto; padding: 56px 24px 80px; }
.qam-entry + .qam-entry { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--qam-line); }
.qam-entry__title { font-size: clamp(28px, 4vw, 40px); margin: 0 0 8px; }
.qam-entry__title a { color: var(--qam-ink); text-decoration: none; }
.qam-entry__meta { font-size: 14px; color: var(--qam-muted); margin: 0 0 24px; }
.qam-entry__thumb { margin: 0 0 28px; }
.qam-entry__thumb img { border-radius: 14px; display: block; }
.qam-entry__content > * { margin-top: 0; margin-bottom: 1.2em; }
.qam-entry__content .alignwide { max-width: var(--qam-wide); margin-left: calc((var(--qam-width) - var(--qam-wide)) / 2); margin-right: calc((var(--qam-width) - var(--qam-wide)) / 2); }
.qam-entry__content .alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
.qam-entry__content .alignleft { float: left; margin: 0 1.5em 1em 0; }
.qam-entry__content .alignright { float: right; margin: 0 0 1em 1.5em; }
.qam-entry__content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.qam-entry__content blockquote { margin: 0 0 1.2em; padding-left: 20px; border-left: 3px solid var(--qam-accent); color: var(--qam-muted); }
.qam-entry__content pre { overflow-x: auto; background: var(--qam-panel); border: 1px solid var(--qam-line); border-radius: 10px; padding: 16px; font-size: 14px; }
.wp-caption-text, .wp-element-caption { font-size: 14px; color: var(--qam-muted); }
.sticky .qam-entry__title::before { content: "Featured · "; color: var(--qam-accent); }
.qam-more { font-weight: 600; }

.qam-pagination, .post-navigation { margin-top: 56px; display: flex; gap: 12px; flex-wrap: wrap; font-size: 15px; }
.qam-pagination .page-numbers { padding: 6px 12px; border: 1px solid var(--qam-line); border-radius: 999px; background: var(--qam-panel); text-decoration: none; }
.qam-pagination .current { background: var(--qam-ink); color: #fff; border-color: var(--qam-ink); }
.post-navigation .nav-links { display: flex; justify-content: space-between; gap: 16px; width: 100%; }

.qam-comments { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--qam-line); }
.qam-comments ol { list-style: none; padding: 0; }
.qam-comments .children { padding-left: 24px; }
.qam-comments .comment-body { margin-bottom: 24px; }
.qam-comments textarea, .qam-comments input[type="text"], .qam-comments input[type="email"], .qam-comments input[type="url"] {
	width: 100%; padding: 10px 12px; border: 1px solid var(--qam-line); border-radius: 10px; font: inherit; background: var(--qam-panel);
}
.qam-comments input[type="submit"], .search-submit {
	padding: 10px 18px; border: 0; border-radius: 999px; background: var(--qam-ink); color: #fff; font: 600 15px/1 inherit; cursor: pointer;
}
.search-form { display: flex; gap: 8px; }
.search-field { flex: 1; padding: 10px 12px; border: 1px solid var(--qam-line); border-radius: 999px; font: inherit; }

.qam-footer { border-top: 1px solid var(--qam-line); }
.qam-footer__in { max-width: var(--qam-wide); margin: 0 auto; padding: 28px 24px; font-size: 14px; color: var(--qam-muted); }

@media (max-width: 640px) {
	.qam-nav { margin-left: 0; width: 100%; }
	.qam-main { padding-top: 36px; }
}