/*
Theme Name: Modern Thai-Muslim
Theme URI: https://example.com/modern-thai-muslim
Author: Muslim Prachuap
Author URI: https://example.com
Description: Ultra-modern theme for provincial Islamic committees. A clean, high-trust Thai-Muslim identity in royal emerald, warm gold, and sand, with Hijri dates, prayer times, and qibla.
Version: 1.1.0
Requires at least: 6.2
Tested up to: 6.8
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: modern-thai-muslim
Tags: blog, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, wide-blocks, block-styles
*/

/* -------------------------------------------------------------------------
   Tokens
   Primary emerald #064e3b / #022c22
   Gold #d97706 / #b45309
   Charcoal #0f172a
   Sand #fcfbf7 and cool neutral #f8fafc
   Accent turquoise #0d9488
   ------------------------------------------------------------------------- */

:root {
	--mm-emerald-800: #064e3b;
	--mm-emerald-900: color-mix(in srgb, var(--mm-emerald-800) 58%, #000 42%);
	--mm-emerald-700: color-mix(in srgb, var(--mm-emerald-800) 78%, #14b8a6 22%);
	--mm-gold-600: #d97706;
	--mm-gold-700: color-mix(in srgb, var(--mm-gold-600) 72%, #000 28%);
	--mm-gold-300: #fcd34d;
	--mm-gold-readable: #fbbf24;
	--mm-slate: #0f172a;
	--mm-sand: #fcfbf7;
	--mm-sand-cool: #f8fafc;
	--mm-teal: #0d9488;
	--mm-white: #ffffff;
	--mm-ink: #0f172a;
	--mm-heading: #022c22;
	--mm-muted: #475569;
	--mm-line: rgba(6, 78, 59, 0.14);
	--mm-surface: #fcfbf7;
	--mm-surface-2: #ffffff;
	--mm-header: rgba(252, 251, 247, 0.78);
	--mm-shadow: 0 24px 60px rgba(2, 44, 34, 0.08);
	--mm-radius: clamp(1rem, 0.6rem + 1vw, 1.5rem);
	--mm-font-ui: "Plus Jakarta Sans", "Prompt", "Noto Sans Thai", sans-serif;
	--mm-font-display: "Prompt", "Plus Jakarta Sans", "Noto Sans Thai", sans-serif;
	--mm-font-arabic: "Amiri", "Noto Naskh Arabic", serif;
	--mm-space: clamp(1rem, 0.4rem + 2vw, 2.5rem);
	--mm-wide: min(1180px, calc(100% - var(--mm-space) * 2));
	--mm-measure: 68ch;
	--mm-gap: clamp(0.85rem, 1vw + 0.4rem, 1.5rem);
	--mm-header-offset: 8.5rem;
	--mm-tabbar: 4.75rem;
	color-scheme: light;
}

html[data-theme="dark"] {
	--mm-ink: #e2e8f0;
	--mm-heading: #ffffff;
	--mm-muted: #cbd5e1;
	--mm-sand: #0f172a;
	--mm-sand-cool: #0f172a;
	--mm-surface: #1e293b;
	--mm-surface-2: #1e293b;
	--mm-header: rgba(15, 23, 42, 0.9);
	--mm-line: rgba(248, 250, 252, 0.18);
	--mm-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
	--mm-gold-700: #fcd34d;
	color-scheme: dark;
}

/* -------------------------------------------------------------------------
   Reset
   ------------------------------------------------------------------------- */

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

html {
	scroll-padding-top: var(--mm-header-offset);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--mm-font-ui);
	font-size: clamp(1rem, 0.96rem + 0.15vw, 1.125rem);
	line-height: 1.65;
	color: var(--mm-ink);
	background-color: var(--mm-sand);
	background-image: radial-gradient(circle at 1px 1px, rgba(6, 78, 59, 0.05) 1px, transparent 0);
	background-size: 22px 22px;
	text-rendering: optimizeLegibility;
}

html[data-theme="dark"] body {
	background-image: radial-gradient(circle at 1px 1px, rgba(252, 211, 77, 0.055) 1px, transparent 0);
}

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

button,
input,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

body :is(h1, h2, h3, h4, h5, h6) {
	color: var(--mm-heading);
}

ul,
ol {
	margin: 0;
	padding: 0;
}

a {
	color: var(--mm-emerald-800);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

html[data-theme="dark"] a:not(.mm-btn) {
	color: #f8fafc;
}

html[data-theme="dark"] a:not(.mm-btn):hover {
	color: #fcd34d;
}

html[data-theme="dark"] :is(h1, h2, h3, h4, h5, h6),
html[data-theme="dark"] .mm-display,
html[data-theme="dark"] .mm-section-title,
html[data-theme="dark"] .mm-card-title,
html[data-theme="dark"] .mm-card-title a {
	color: #ffffff;
}

a:hover {
	color: var(--mm-gold-700);
}

:focus {
	outline: none;
}

:focus-visible {
	outline: 3px solid var(--mm-gold-600);
	outline-offset: 3px;
}

html[data-theme="dark"] :focus-visible {
	outline-color: #fcd34d;
}

::selection {
	background: var(--mm-gold-600);
	color: #022c22;
}

/* -------------------------------------------------------------------------
   Utilities
   ------------------------------------------------------------------------- */

.mm-wrap {
	width: var(--mm-wide);
	margin-inline: auto;
}

.mm-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mm-arabic,
.mm-bismillah {
	font-family: var(--mm-font-arabic);
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] .mm-display,
html[lang="ar"] .mm-section-title {
	font-family: var(--mm-font-arabic);
	letter-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}