/*
Theme Name: Kadence Child - QuranTeacher
Theme URI: https://herqurantutor.com
Description: Child theme of Kadence for QuranTutor (female-only Quran teachers & students). Carries the brand design system: colour tokens, paired typography, soft components, glass panels, Islamic-geometric motifs, calm motion and accessible focus states.
Author: Unicorn (Muhammad Asif Hameed)
Template: kadence
Version: 2.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: kadence-child-quranteacher
*/

/* ==========================================================================
   0. Fonts (self-hosted — no Google request, no visitor IP leaves the site;
      font-display: swap keeps LCP fast). Latin subsets only: Urdu/Arabic
      fall through to the script-aware system stacks in --qt-font-*.
   ========================================================================== */

@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("assets/fonts/source-sans-3-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Source Sans 3";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/source-sans-3-italic-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Lora";
	font-style: normal;
	font-weight: 500 600;
	font-display: swap;
	src: url("assets/fonts/lora-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Lora";
	font-style: italic;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/lora-italic-latin.woff2") format("woff2");
}

/* ==========================================================================
   1. Design tokens. Every colour has ONE job — see docs/DESIGN-SYSTEM.md.
      All text pairings below were checked for WCAG AA (4.5:1 body text,
      3:1 large text / UI boundaries).
   ========================================================================== */

:root {
	/* Primary green — CTAs, primary nav, links, active states. */
	--qt-primary-50: #eaf4ee;
	--qt-primary-100: #cfe5d8;
	--qt-primary: #2d6a4f;        /* white text on it: 6.4:1 */
	--qt-primary-dark: #1f4d39;   /* hover/pressed, focus ring: 9.6:1 on white */

	/* Secondary teal — calm backgrounds, section bands, info notices. Never a CTA. */
	--qt-teal-50: #eef6f5;
	--qt-teal-100: #d7ebe8;
	--qt-teal-600: #2f7a76;
	--qt-teal-800: #1d4e4b;

	/* Accent gold — sparingly: badges, star ratings, ornament dividers.
	   #c9a227 is DECORATIVE ONLY (2.4:1 on white) — never text, never the
	   only signal of state. Use gold-700/900 when it must carry meaning. */
	--qt-gold-100: #f8efd2;
	--qt-gold: #c9a227;
	--qt-gold-700: #9a7a10;        /* stars, icons: 4.1:1 on white */
	--qt-gold-900: #6b5200;        /* badge text on gold-100: 6.5:1 */

	/* Neutral base — text and surfaces. */
	--qt-white: #ffffff;
	--qt-neutral-25: #fbfbf8;
	--qt-neutral-50: #f7f7f2;      /* page background (carried over from live site) */
	--qt-neutral-100: #ecebe4;
	--qt-neutral-200: #dcdad0;
	--qt-neutral-400: #8a877b;     /* form borders: 3.6:1 on white */
	--qt-neutral-600: #5f5c52;     /* secondary text: 6.7:1 on white */
	--qt-neutral-700: #45433b;
	--qt-neutral-900: #1f2420;     /* body text: 14.7:1 on page bg */

	/* Feedback */
	--qt-success-bg: #e9f5ee; --qt-success-fg: #1f5133;
	--qt-error-bg: #fdf0ef;   --qt-error-fg: #9b2c2c;
	--qt-info-bg: var(--qt-teal-50); --qt-info-fg: var(--qt-teal-800);

	/* Typography: humanist sans for UI, soft serif for headings/quotes. */
	--qt-font-ui: "Source Sans 3", "Segoe UI", system-ui, -apple-system, "Noto Sans", "Noto Naskh Arabic", "Noto Nastaliq Urdu", Tahoma, sans-serif;
	--qt-font-display: "Lora", Georgia, "Noto Naskh Arabic", "Times New Roman", serif;

	/* Shape, depth, spacing */
	--qt-radius-sm: 8px;
	--qt-radius: 14px;
	--qt-radius-lg: 22px;
	--qt-radius-pill: 999px;
	--qt-shadow-sm: 0 1px 2px rgba(31, 36, 32, .06), 0 1px 3px rgba(31, 36, 32, .05);
	--qt-shadow: 0 4px 14px rgba(31, 77, 57, .08), 0 1px 3px rgba(31, 36, 32, .05);
	--qt-shadow-lg: 0 14px 36px rgba(31, 77, 57, .12);
	--qt-space-1: 4px; --qt-space-2: 8px; --qt-space-3: 12px; --qt-space-4: 16px;
	--qt-space-5: 24px; --qt-space-6: 32px; --qt-space-7: 48px; --qt-space-8: 72px;

	/* Motion — subtle only; collapsed to 0 under prefers-reduced-motion. */
	--qt-ease: cubic-bezier(.2, .7, .2, 1);
	--qt-dur-fast: 150ms;
	--qt-dur: 280ms;
	--qt-dur-slow: 480ms;

	--qt-pattern: url("assets/img/geometric-pattern.svg");
	--qt-divider: url("assets/img/star-divider.svg");
}

/* Kadence bridge (global palette + font variables mapped onto these
   tokens) is printed inline by functions.php so it can be switched off. */

/* ==========================================================================
   2. Base
   ========================================================================== */

/* Replaces the old Customizer → Additional CSS background fix. */
body,
.site,
.site-content,
.content-area,
#content,
.entry-content-wrap {
	background-color: var(--qt-neutral-50);
}
.content-bg,
.entry.content-bg {
	background-color: var(--qt-white);
	border-radius: var(--qt-radius);
	box-shadow: var(--qt-shadow-sm);
}

body {
	font-family: var(--qt-font-ui);
	color: var(--qt-neutral-900);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4,
.entry-title,
.site-title {
	font-family: var(--qt-font-display);
	color: var(--qt-neutral-900);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.005em;
}
h5, h6 { font-family: var(--qt-font-ui); font-weight: 700; }

/* Fluid, mobile-first type scale. */
h1, .entry-title { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); }
h3 { font-size: clamp(1.2rem, 1.1rem + .6vw, 1.45rem); }

a { color: var(--qt-primary); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--qt-primary-dark); text-decoration-thickness: 2px; }

blockquote,
.wp-block-quote,
.wp-block-pullquote blockquote {
	font-family: var(--qt-font-display);
	font-style: italic;
	border-inline-start: 3px solid var(--qt-gold);
	padding-inline-start: var(--qt-space-5);
	color: var(--qt-neutral-700);
}

/* RTL scripts: serif Latin faces don't cover Arabic script, and Nastaliq
   needs extra line height to avoid clipping. */
[lang^="ur"], [lang^="ar"], [dir="rtl"] { line-height: 1.95; }
[lang^="ur"] :is(h1, h2, h3, h4),
[lang^="ar"] :is(h1, h2, h3, h4) { font-family: var(--qt-font-ui); line-height: 1.6; }

/* ==========================================================================
   3. Accessibility: focus states, skip link, selection
   ========================================================================== */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--qt-primary-dark);
	outline-offset: 2px;
	border-radius: 4px;
}
.skip-link:focus { background: var(--qt-primary-dark); color: var(--qt-white); }
::selection { background: var(--qt-gold-100); color: var(--qt-neutral-900); }

/* ==========================================================================
   4. Components — buttons, cards, forms, badges, glass panels
   ========================================================================== */

/* Buttons: rounded pill, primary green, soft lift on hover. */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--qt-space-3); }
.qt-button, a.qt-button, .wp-block-button__link { text-decoration: none; display: inline-flex; align-items: center; }
.qt-button,
a.qt-button,
.wp-block-button__link,
.button,
button[type="submit"],
input[type="submit"] {
	font-family: var(--qt-font-ui);
	font-weight: 600;
	border-radius: var(--qt-radius-pill);
	min-height: 44px; /* touch target */
	padding: 10px 24px;
	background: var(--qt-primary);
	border: 1px solid var(--qt-primary);
	color: var(--qt-white);
	box-shadow: var(--qt-shadow-sm);
	transition: background-color var(--qt-dur-fast) var(--qt-ease), transform var(--qt-dur-fast) var(--qt-ease), box-shadow var(--qt-dur-fast) var(--qt-ease);
}
.qt-button:hover,
.wp-block-button__link:hover,
.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	background: var(--qt-primary-dark);
	border-color: var(--qt-primary-dark);
	color: var(--qt-white);
	transform: translateY(-1px);
	box-shadow: var(--qt-shadow);
}
.is-style-outline .wp-block-button__link,
.qt-button-secondary {
	background: transparent;
	color: var(--qt-primary);
	border: 2px solid var(--qt-primary);
}
.is-style-outline .wp-block-button__link:hover,
.qt-button-secondary:hover { background: var(--qt-primary-50); color: var(--qt-primary-dark); }

/* Cards: white surface, generous radius, soft shadow. */
.qt-card,
.is-style-qt-card {
	background: var(--qt-white);
	border: 1px solid var(--qt-neutral-100);
	border-radius: var(--qt-radius);
	box-shadow: var(--qt-shadow-sm);
	padding: var(--qt-space-5);
	transition: box-shadow var(--qt-dur) var(--qt-ease), transform var(--qt-dur) var(--qt-ease);
}
a.qt-card:hover { box-shadow: var(--qt-shadow-lg); transform: translateY(-2px); }

/* Forms: 44px+ controls, visible 3:1 borders, clear labels. */
input[type="text"], input[type="email"], input[type="number"], input[type="url"],
input[type="search"], input[type="tel"], input[type="password"], select, textarea {
	font-family: var(--qt-font-ui);
	font-size: 1rem;
	min-height: 44px;
	border: 1px solid var(--qt-neutral-400);
	border-radius: var(--qt-radius-sm);
	background: var(--qt-white);
	color: var(--qt-neutral-900);
	transition: border-color var(--qt-dur-fast) var(--qt-ease), box-shadow var(--qt-dur-fast) var(--qt-ease);
}
input:focus, select:focus, textarea:focus {
	border-color: var(--qt-primary);
	box-shadow: 0 0 0 3px var(--qt-primary-100);
}

/* Badge: the main legitimate use of gold. */
.qt-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: var(--qt-radius-pill);
	background: var(--qt-gold-100);
	color: var(--qt-gold-900);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .02em;
}

/* Glassmorphism — ONLY for hero and feature panels, always over the teal
   pattern band so the frosted surface has something to frost. Text sits on
   a ≥72% white layer, so contrast never depends on what's behind it. */
.qt-glass,
.is-style-qt-glass {
	background: rgba(255, 255, 255, .74);
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: var(--qt-radius-lg);
	box-shadow: var(--qt-shadow-lg);
	padding: clamp(var(--qt-space-5), 4vw, var(--qt-space-7));
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.qt-glass, .is-style-qt-glass { background: rgba(255, 255, 255, .94); }
}

/* Hero / pattern band: teal wash + geometric motif (no stock photos). */
.qt-hero,
.is-style-qt-pattern {
	background-color: var(--qt-teal-50);
	background-image:
		radial-gradient(ellipse at 15% 20%, rgba(201, 162, 39, .12), transparent 55%),
		radial-gradient(ellipse at 85% 80%, rgba(45, 106, 79, .14), transparent 60%),
		var(--qt-pattern);
	background-size: auto, auto, 96px 96px;
	border-radius: var(--qt-radius-lg);
	padding: clamp(var(--qt-space-6), 6vw, var(--qt-space-8)) clamp(var(--qt-space-4), 4vw, var(--qt-space-7));
}
.is-style-qt-teal-band { background: var(--qt-teal-50); border-radius: var(--qt-radius-lg); padding: var(--qt-space-6) var(--qt-space-5); }

/* Ornamental divider: gold eight-point star. */
.qt-divider,
hr.is-style-qt-star {
	border: 0;
	height: 24px;
	background: var(--qt-divider) center / 160px 24px no-repeat;
	margin: var(--qt-space-6) auto;
	max-width: 160px;
	opacity: 1;
}

/* ==========================================================================
   5. Header, nav & footer (replaces the Customizer-only nav colour/weight)
   ========================================================================== */

.main-navigation .primary-menu-container > ul > li.menu-item > a,
.header-navigation .header-menu-container > ul > li.menu-item > a {
	color: var(--qt-primary);
	font-weight: 600;
}
.main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.main-navigation .primary-menu-container > ul > li.current-menu-item > a {
	color: var(--qt-primary-dark);
}
.site-footer { border-top: 1px solid var(--qt-neutral-100); }

/* Low-key donate link (output by the plugin in the footer). */
.qt-footer-support {
	text-align: center;
	font-size: .9rem;
	color: var(--qt-neutral-600);
	padding: var(--qt-space-4) var(--qt-space-4) var(--qt-space-5);
	background: var(--qt-neutral-50);
}
.qt-footer-support a { color: var(--qt-neutral-700); }

/* ==========================================================================
   6. Motion — subtle fade/slide only. No parallax, no scroll-jacking.
   ========================================================================== */

@keyframes qt-fade-up {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}
.qt-animate,
.is-style-qt-fade-in {
	animation: qt-fade-up var(--qt-dur-slow) var(--qt-ease) both;
}
.qt-animate-delay-1 { animation-delay: 80ms; }
.qt-animate-delay-2 { animation-delay: 160ms; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	a.qt-card:hover, .qt-button:hover, .wp-block-button__link:hover { transform: none; }
}

/* ==========================================================================
   7. Responsive — mobile-first. Breakpoints: 600 / 900 / 1200px.
   ========================================================================== */

.qt-container { width: min(100% - 32px, 1160px); margin-inline: auto; }

@media (min-width: 600px) {
	body { font-size: 1.0625rem; }
}
@media (min-width: 900px) {
	body { font-size: 1.125rem; }
}
@media (max-width: 599px) {
	.qt-glass, .is-style-qt-glass { border-radius: var(--qt-radius); }
	.qt-button, .wp-block-button__link { width: 100%; text-align: center; justify-content: center; }
}

/* Windows High Contrast / forced colours: keep boundaries visible. */
@media (forced-colors: active) {
	.qt-card, .qt-glass, .qt-button, .qt-badge { border: 1px solid CanvasText; }
}

/* ==========================================================================
   8. Blog / Resources (Kadence archive + single post) — same look as the
      rest of the site: geometric hero band with a glass title panel, and
      posts as soft white cards with readable title sizes.
   ========================================================================== */

/* Title band on the Resources page, category pages and single posts. */
.entry-hero.post-archive-hero-section .entry-hero-container-inner,
.entry-hero.page-hero-section .entry-hero-container-inner,
.entry-hero.post-hero-section .entry-hero-container-inner {
	background-color: var(--qt-teal-50);
	background-image:
		radial-gradient(ellipse at 15% 20%, rgba(201, 162, 39, .12), transparent 55%),
		radial-gradient(ellipse at 85% 80%, rgba(45, 106, 79, .14), transparent 60%),
		var(--qt-pattern);
	background-size: auto, auto, 96px 96px;
}
.entry-hero .hero-section-overlay { background: transparent !important; }
.entry-hero .entry-header {
	display: inline-block;
	max-width: min(100%, 820px);
	margin-inline: auto;
	padding: clamp(20px, 3vw, 32px) clamp(24px, 4vw, 48px);
	background: rgba(255, 255, 255, .74);
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: var(--qt-radius-lg);
	box-shadow: var(--qt-shadow-lg);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
}
.entry-hero .hero-container { text-align: center; }
.entry-hero .archive-title,
.entry-hero .page-title,
.entry-hero .entry-title { margin: 0; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.7rem); }
.entry-hero .archive-description { margin-top: 8px; color: var(--qt-neutral-700); }

/* Post cards in the list. */
.loop-entry {
	background: var(--qt-white);
	border: 1px solid var(--qt-neutral-100);
	border-radius: var(--qt-radius);
	box-shadow: var(--qt-shadow-sm);
	overflow: hidden;
	transition: box-shadow var(--qt-dur) var(--qt-ease), transform var(--qt-dur) var(--qt-ease);
}
.loop-entry:hover { box-shadow: var(--qt-shadow-lg); transform: translateY(-2px); }
.loop-entry .entry-content-wrap { padding: clamp(20px, 2.5vw, 28px); }
/* Inside any white card (post cards, single post), the content area stays white. */
.content-bg .entry-content-wrap,
.loop-entry .entry-content-wrap { background-color: transparent; }
.loop-entry .entry-title { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); line-height: 1.3; margin-bottom: 10px; }
.loop-entry .entry-title a { color: var(--qt-neutral-900); text-decoration: none; }
.loop-entry .entry-title a:hover { color: var(--qt-primary); }
.loop-entry .entry-taxonomies a,
.entry-taxonomies a {
	display: inline-block;
	padding: 3px 10px;
	border-radius: var(--qt-radius-pill);
	background: var(--qt-primary-50);
	color: var(--qt-primary-dark) !important;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-decoration: none;
}
.loop-entry .entry-summary { color: var(--qt-neutral-700); font-size: 1rem; }
.loop-entry .more-link-wrap { margin-top: 12px; }
.loop-entry .post-more-link { color: var(--qt-primary); font-weight: 700; text-decoration: none; }
.loop-entry .post-more-link:hover { text-decoration: underline; }

/* No author/date line on posts (the site speaks as one team). */
.entry-meta .posted-by,
.entry-meta .posted-on,
.entry-meta .updated-on,
.entry-meta .meta-label { display: none !important; }
.entry-meta:not(:has(> :not(.posted-by):not(.posted-on):not(.updated-on):not(.meta-label))) { display: none; }

/* Single post reading width + pagination. */
.single-post .entry-content { max-width: 760px; margin-inline: auto; }
.pagination .page-numbers {
	min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--qt-neutral-200); border-radius: var(--qt-radius-sm); background: var(--qt-white);
}
.pagination .page-numbers.current { background: var(--qt-primary); border-color: var(--qt-primary); color: var(--qt-white); }