/*
Theme Name: Falmis
Theme URI: https://github.com/worksinasohani/FalmisWordpress
Author: Falmis
Description: The Falmis Design System as a WordPress theme. Persian RTL, dark only, Vazirmatn. Every colour and size comes from assets/ds/falmis-tokens.css — read assets/ds/DESIGN_SYSTEM.md before changing any UI.
Version: 2.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: falmis
Tags: rtl-language-support, custom-menu, custom-logo, translation-ready, blog
*/

/* =============================================================
   THEME LAYER

   WordPress plumbing only. No new design decisions live here.

   Two jobs:
     1. Style markup WordPress emits that the system has no class
        for — post content, pagination, the skip link.
     2. Map plugin markup onto system components, the way the
        system's own Contact Form 7 block does.

   Rule 1 of the system applies to this file too: no raw hex, px,
   or ms. Every value is a token.
   ============================================================= */

/* =============================================================
   SCALE

   The whole interface, one multiplier.

   The design system's sizes are literal px, so a root font-size
   change would do nothing. Instead every size token is redefined
   here as its original value times --fm-scale. Components read
   tokens, so type, spacing, radii, control heights and gutters
   all follow from this one number.

   Container widths are deliberately NOT scaled. If the column
   grew with the text, a wide screen would look exactly as it did
   before — bigger text inside the same column is what actually
   reads as zoomed in.

   Change --fm-scale to 1 to put everything back.
   ============================================================= */

:root {
	--fm-scale: 1.2;

	/* type */
	--fm-text-2xs: calc(11px * var(--fm-scale));
	--fm-text-xs: calc(12px * var(--fm-scale));
	--fm-text-sm: calc(13px * var(--fm-scale));
	--fm-text-base: calc(15px * var(--fm-scale));
	--fm-text-md: calc(17px * var(--fm-scale));
	--fm-text-lg: calc(20px * var(--fm-scale));
	--fm-text-xl: calc(24px * var(--fm-scale));
	--fm-text-2xl: calc(30px * var(--fm-scale));
	--fm-text-3xl: calc(38px * var(--fm-scale));
	--fm-text-4xl: calc(48px * var(--fm-scale));

	/* spacing */
	--fm-space-1: calc(4px * var(--fm-scale));
	--fm-space-2: calc(8px * var(--fm-scale));
	--fm-space-3: calc(12px * var(--fm-scale));
	--fm-space-4: calc(16px * var(--fm-scale));
	--fm-space-5: calc(20px * var(--fm-scale));
	--fm-space-6: calc(24px * var(--fm-scale));
	--fm-space-8: calc(32px * var(--fm-scale));
	--fm-space-10: calc(40px * var(--fm-scale));
	--fm-space-12: calc(48px * var(--fm-scale));
	--fm-space-16: calc(64px * var(--fm-scale));
	--fm-space-20: calc(80px * var(--fm-scale));
	--fm-space-24: calc(96px * var(--fm-scale));

	/* radius — full stays a pill */
	--fm-radius-sm: calc(8px * var(--fm-scale));
	--fm-radius-md: calc(12px * var(--fm-scale));
	--fm-radius-lg: calc(16px * var(--fm-scale));
	--fm-radius-xl: calc(24px * var(--fm-scale));

	/* controls and gutter */
	--fm-control-sm: calc(36px * var(--fm-scale));
	--fm-control-md: calc(44px * var(--fm-scale));
	--fm-control-lg: calc(52px * var(--fm-scale));
	--fm-gutter: calc(16px * var(--fm-scale));

	/* the navbar's own height, hardcoded in falmis-nav.css */
	--fm-nav-h: calc(72px * var(--fm-scale));
}

/*
 * The system steps the four largest sizes down on small screens.
 * That rule lives in a media query, which carries no extra
 * specificity — so the plain :root block above would otherwise
 * beat it and leave phones with desktop-sized headings.
 */
@media (max-width: 640px) {

	:root {
		--fm-text-4xl: calc(32px * var(--fm-scale));
		--fm-text-3xl: calc(27px * var(--fm-scale));
		--fm-text-2xl: calc(23px * var(--fm-scale));
		--fm-text-xl: calc(20px * var(--fm-scale));
	}
}

@media (max-width: 860px) {

	:root {
		--fm-nav-h: calc(64px * var(--fm-scale));
	}
}

/* ---------- the px values that live inside components ---------- */

.fm-i {
	--i-size: calc(24px * var(--fm-scale));
}

.fm-i--xs {
	--i-size: calc(16px * var(--fm-scale));
}

.fm-i--sm {
	--i-size: calc(20px * var(--fm-scale));
}

.fm-i--md {
	--i-size: calc(24px * var(--fm-scale));
}

.fm-i--lg {
	--i-size: calc(32px * var(--fm-scale));
}

.fm-i--xl {
	--i-size: calc(48px * var(--fm-scale));
}

.fm-i-box {
	inline-size: calc(40px * var(--fm-scale));
	block-size: calc(40px * var(--fm-scale));
}

.fm-i-box--lg {
	inline-size: calc(56px * var(--fm-scale));
	block-size: calc(56px * var(--fm-scale));
}

.fm-nav__inner {
	height: var(--fm-nav-h);
}

.fm-logo__mark {
	width: calc(32px * var(--fm-scale));
	height: calc(32px * var(--fm-scale));
}

.fm-badge {
	height: calc(22px * var(--fm-scale));
}

/* The service strip's fixed height, so the media keeps its proportion. */
.fm-card--service {
	--svc-h: calc(136px * var(--fm-scale));
}

@media (max-width: 520px) {

	.fm-card--service {
		--svc-h: calc(108px * var(--fm-scale));
	}
}

.fm-footer__thumb {
	width: calc(76px * var(--fm-scale));
	height: calc(76px * var(--fm-scale));
}

.fm-footer__list a {
	min-height: calc(32px * var(--fm-scale));
}

/*
 * The system reserves --sm for "dense desktop rows only", because 44px is
 * the touch minimum. A button sitting in a card footer is a touch target
 * on a phone, so below the desktop breakpoint the small ones grow back to
 * full control height. On desktop they stay compact, which is the
 * exception the system actually allows.
 */
@media (max-width: 860px) {

	.fm-card__footer .fm-btn--sm {
		--btn-h: var(--fm-control-md);
	}
}

/*
 * The service strip clamps its line to 2 rows. At 1.2x the copy no
 * longer fits that, and two of the six were cutting mid-sentence — the
 * strip is taller now, so the room exists. A third row keeps the
 * system's intent, "one line of thought, never a paragraph", which two
 * truncated rows had stopped delivering.
 */
.fm-card--service .fm-card__text {
	-webkit-line-clamp: 3;
}

/* -------------------------------------------------------------
   Skip link
   ------------------------------------------------------------- */

.fm-skip {
	position: absolute;
	inset-inline-start: -9999px;
	inset-block-start: 0;
	z-index: var(--fm-z-tooltip);
	padding: var(--fm-space-3) var(--fm-space-5);
	border-radius: 0 0 var(--fm-radius-md) 0;
	background: var(--fm-surface-3);
	color: var(--fm-text-primary);
	font-size: var(--fm-text-sm);
	text-decoration: none;
}

.fm-skip:focus {
	inset-inline-start: 0;
}

/* The sticky header would otherwise cover an anchor target. */
html {
	scroll-padding-block-start: calc(var(--fm-nav-h) + var(--fm-space-4));
}

@media (max-width: 860px) {

	html {
		scroll-padding-block-start: calc(var(--fm-nav-h) + var(--fm-space-4));
	}
}

#content {
	min-height: 50vh;
}

/* -------------------------------------------------------------
   Post and page content

   The editor produces bare tags. This gives them the system's
   type scale and colour without inventing anything new.
   ------------------------------------------------------------- */

.fm-prose {
	color: var(--fm-text-body);
	font-size: var(--fm-text-base);
	line-height: var(--fm-lh-base);
}

.fm-prose > * + * {
	margin-block-start: var(--fm-space-5);
}

.fm-prose h2,
.fm-prose h3,
.fm-prose h4 {
	margin-block: var(--fm-space-10) var(--fm-space-3);
	color: var(--fm-text-primary);
	font-weight: var(--fm-weight-bold);
}

.fm-prose h2 {
	font-size: var(--fm-text-xl);
	line-height: var(--fm-lh-xl);
}

.fm-prose h3 {
	font-size: var(--fm-text-lg);
	line-height: var(--fm-lh-lg);
}

.fm-prose h4 {
	font-size: var(--fm-text-md);
	line-height: var(--fm-lh-md);
}

.fm-prose p {
	margin: 0;
}

.fm-prose a {
	color: var(--fm-text-accent);
	text-decoration: underline;
	text-underline-offset: var(--fm-space-1);
}

.fm-prose a:hover {
	color: var(--fm-text-primary);
}

.fm-prose ul,
.fm-prose ol {
	margin: 0;
	padding-inline-start: var(--fm-space-6);
}

.fm-prose li + li {
	margin-block-start: var(--fm-space-2);
}

.fm-prose strong,
.fm-prose b {
	color: var(--fm-text-primary);
	font-weight: var(--fm-weight-bold);
}

.fm-prose blockquote {
	margin: 0;
	padding-inline-start: var(--fm-space-5);
	border-inline-start: 2px solid var(--fm-border-accent);
	color: var(--fm-text-accent);
	font-size: var(--fm-text-md);
	line-height: var(--fm-lh-md);
}

.fm-prose code {
	padding: 2px var(--fm-space-2);
	border-radius: var(--fm-radius-sm);
	background: var(--fm-surface-2);
	color: var(--fm-text-accent);
	font-size: var(--fm-text-sm);
}

.fm-prose img,
.fm-figure img {
	max-inline-size: 100%;
	block-size: auto;
	border-radius: var(--fm-radius-lg);
	display: block;
}

.fm-figure {
	margin: 0 0 var(--fm-space-8);
}

.fm-prose hr {
	height: 1px;
	margin-block: var(--fm-space-10);
	border: none;
	background: var(--fm-border-subtle);
}

.fm-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fm-text-sm);
}

.fm-prose th,
.fm-prose td {
	padding: var(--fm-space-3);
	border-block-end: 1px solid var(--fm-border-subtle);
	text-align: start;
}

.fm-prose th {
	color: var(--fm-text-primary);
	font-weight: var(--fm-weight-medium);
}

/* Editor alignment classes. */
.alignwide {
	max-inline-size: var(--fm-container-md);
	margin-inline: auto;
}

.alignfull {
	max-inline-size: none;
}

.aligncenter {
	margin-inline: auto;
	text-align: center;
}

/* =============================================================
   HOME PAGE

   Sections the system has no component for. Built from tokens
   only, following the same conventions as the system sheets.
   ============================================================= */

/* ---------- video hero ----------
 *
 * Runs full-bleed from the top of the document, underneath the navbar.
 * The navbar is sticky, so it holds its own space in the flow; the hero is
 * pulled up by exactly that height and pads itself back out, which puts the
 * video behind the bar without making the bar fixed.
 *
 * --fm-nav-h mirrors the height hardcoded in falmis-nav.css (72px, 64px
 * below 860px). It is not a design token — it is that sheet's value,
 * repeated here because the two must stay in step.
 */

.fm-hero--video {

	position: relative;
	display: grid;
	align-items: center;
	overflow: hidden;
	isolation: isolate;

	margin-block-start: calc(-1 * var(--fm-nav-h));
	padding-block: calc(var(--fm-nav-h) + var(--fm-space-16)) var(--fm-space-16);

	/* Navbar + hero together, comfortably past the 80% floor, with a sliver
	   of the next section showing so the page invites a scroll. */
	min-block-size: max(85vh, 520px);
	min-block-size: max(85svh, 520px);

	border-end-start-radius: var(--fm-radius-xl);
	border-end-end-radius: var(--fm-radius-xl);

	/* The poster frame is the floor of this section: it shows before the
	   video loads, instead of it on phones, and behind it always. */
	background:
		var(--fm-hero-poster, none) center / cover no-repeat,
		var(--fm-gradient-deep);
}

@media (max-width: 860px) {

	.fm-hero--video {
		min-block-size: max(85svh, 480px);
	}
}

.fm-hero__video {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
	border-radius: inherit;
}

.fm-hero__vid {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;

	/* Fades in on loadeddata, so poster to first frame is not a jump. */
	opacity: 0;
	transition: opacity var(--fm-dur-slow) var(--fm-ease-out);
}

.fm-hero__vid.is-ready {
	opacity: 1;
}

/*
 * The veil. Built only from tokens with color-mix, never a raw rgba.
 * Two jobs: hold text contrast over moving footage, and land the section
 * on the page's own surface at the bottom edge so the seam disappears.
 */
.fm-hero__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
	background:
		linear-gradient(to bottom,
			color-mix(in srgb, var(--fm-surface-0) 76%, transparent) 0%,
			color-mix(in srgb, var(--fm-surface-0) 60%, transparent) 38%,
			color-mix(in srgb, var(--fm-surface-0) 72%, transparent) 72%,
			var(--fm-surface-0) 100%),
		linear-gradient(var(--fm-aurora-angle), var(--fm-tint-violet), var(--fm-tint-fuchsia));
}

.fm-hero--video .fm-hero__inner {
	position: relative;
	z-index: 1;
	text-align: center;
}

.fm-hero--video .fm-hero__title,
.fm-hero--video .fm-hero__lead {
	margin-inline: auto;
}

.fm-hero--video .fm-hero__title {
	max-inline-size: 20ch;

	/*
	 * A legibility shadow, not a glow. The system allows one aurora glow
	 * per view and the primary button already has it, so this is a plain
	 * dark shadow that only buys contrast over the moving footage.
	 */
	text-shadow: 0 2px 24px var(--fm-surface-0);
}

.fm-hero--video .fm-hero__lead {
	max-inline-size: 52ch;
	text-shadow: 0 1px 12px var(--fm-surface-0);
}

.fm-hero--video .fm-cluster {
	justify-content: center;
}

/* Reduced motion never gets the video at all — hero.js declines to attach
   a source — so nothing here needs to stop an animation. */

/* ---------- hero artwork ---------- */

.fm-hero__art {
	position: relative;
	display: none;
}

@media (min-width: 861px) {

	.fm-hero__art {
		display: block;
	}
}

.fm-hero__img {
	inline-size: 100%;
	block-size: auto;
	max-block-size: calc(420px * var(--fm-scale));
	object-fit: contain;
	border-radius: var(--fm-radius-xl);

	/* No border on a hero image — a border draws the edge the
	   glow is softening. The system says the same of banners. */
	filter: drop-shadow(0 24px 64px rgba(0, 0, 0, .44));
}

/* ---------- about mark ---------- */

.fm-about__mark {
	margin-inline: auto;
	margin-block-end: var(--fm-space-4);
}

.fm-about__more {
	margin-block-start: var(--fm-space-5);
	margin-block-end: 0;
}

/* ---------- how it works ---------- */

.fm-steps {
	display: grid;
	gap: var(--fm-space-8);
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.fm-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--fm-space-3);
	text-align: center;
}

.fm-step__title {
	margin: 0;
	color: var(--fm-text-primary);
	font-size: var(--fm-text-lg);
	line-height: var(--fm-lh-lg);
	font-weight: var(--fm-weight-bold);
}

.fm-step__text {
	margin: 0;
	max-inline-size: 32ch;
	color: var(--fm-text-muted);
	font-size: var(--fm-text-sm);
	line-height: var(--fm-lh-sm);
}

/* ---------- the arrow row on a card ---------- */

.fm-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--fm-space-2);
	margin-block-start: var(--fm-space-2);
	color: var(--fm-text-accent);
	font-size: var(--fm-text-sm);
	font-weight: var(--fm-weight-medium);
	white-space: nowrap;
}

/*
 * Not a link. `.fm-card__hit` already covers the whole card, and the
 * system forbids nesting a second link inside that target.
 */
.fm-card__cta .fm-i {
	transition: transform var(--fm-dur-fast) var(--fm-ease-out);
}

.fm-card--link:hover .fm-card__cta .fm-i {
	transform: translateX(3px);
}

[dir="rtl"] .fm-card--link:hover .fm-card__cta .fm-i {
	transform: translateX(-3px);
}

/* A service with no poster yet still needs to look deliberate. */
.fm-card__media-empty {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	background: var(--fm-gradient-deep-soft);
	color: var(--fm-text-accent);
	opacity: .5;
}

/* ---------- stats ---------- */

.fm-stats {
	display: grid;
	gap: var(--fm-space-6);
	grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
	padding: var(--fm-space-10) var(--fm-space-6);
	border: 1px solid var(--fm-border);
	border-radius: var(--fm-radius-xl);
	background: var(--fm-surface-1);
}

.fm-stat {
	text-align: center;
}

/*
 * The entrance.
 *
 * Only transform and opacity move, as the system requires — the counting
 * itself is text, held to a fixed width by .fm-num so the digits do not
 * shuffle the layout while they climb.
 *
 * `.is-armed` is added by script, never by PHP. Nothing is hidden unless
 * JavaScript is running to reveal it again.
 */
.fm-stats.is-armed .fm-stat {
	opacity: 0;
	transform: translateY(10px);
	transition:
		opacity var(--fm-dur-reveal) var(--fm-ease-out),
		transform var(--fm-dur-reveal) var(--fm-ease-out);
}

.fm-stats.is-armed.is-in .fm-stat {
	opacity: 1;
	transform: none;
}

.fm-stats.is-armed .fm-stat:nth-child(2) {
	transition-delay: 120ms;
}

.fm-stats.is-armed .fm-stat:nth-child(3) {
	transition-delay: 240ms;
}

@media (prefers-reduced-motion: reduce) {

	html:not(.fm-motion-force) .fm-stats.is-armed .fm-stat {
		opacity: 1;
		transform: none;
		transition-duration: 1ms;
		transition-delay: 0ms;
	}
}

.fm-stat__value {
	display: block;
	color: var(--fm-text-primary);
	font-size: var(--fm-text-3xl);
	line-height: var(--fm-lh-3xl);
	font-weight: var(--fm-weight-display);
}

.fm-stat__label {
	display: block;
	margin-block-start: var(--fm-space-1);
	color: var(--fm-text-muted);
	font-size: var(--fm-text-sm);
}

/* ---------- sign up ---------- */

.fm-signup {
	padding: var(--fm-space-10) var(--fm-space-6);
	border: 1px solid var(--fm-border-accent);
	border-radius: var(--fm-radius-xl);
	background: var(--fm-gradient-deep-soft);
	text-align: center;
}

.fm-signup__title {
	margin: 0 0 var(--fm-space-3);
	color: var(--fm-text-primary);
	font-size: var(--fm-text-xl);
	line-height: var(--fm-lh-xl);
	font-weight: var(--fm-weight-display);
}

.fm-signup__text {
	margin: 0 auto var(--fm-space-6);
	max-inline-size: 46ch;
	color: var(--fm-text-body);
	font-size: var(--fm-text-sm);
	line-height: var(--fm-lh-sm);
}

/* ---------- testimonials ---------- */

.fm-testi__head {
	display: flex;
	align-items: center;
	gap: var(--fm-space-3);
	margin-block-end: var(--fm-space-3);
}

.fm-testi__avatar {
	inline-size: calc(44px * var(--fm-scale));
	block-size: calc(44px * var(--fm-scale));
	flex: none;
	display: grid;
	place-content: center;
	overflow: hidden;
	border: 1px solid var(--fm-border-accent);
	border-radius: var(--fm-radius-full);
	background: var(--fm-tint-violet);
	color: var(--fm-text-accent);
	font-size: var(--fm-text-md);
	font-weight: var(--fm-weight-bold);
}

.fm-testi__avatar img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.fm-testi__name {
	color: var(--fm-text-primary);
	font-size: var(--fm-text-sm);
	font-weight: var(--fm-weight-medium);
}

/* A quote, not a pull quote — the system allows only one of those. */
.fm-testi__quote {
	margin: 0;
	color: var(--fm-text-body);
	font-size: var(--fm-text-sm);
	line-height: var(--fm-lh-sm);
}

/* ---------- FAQ ---------- */

/*
 * Built on <details>, so it opens with the keyboard, is announced
 * correctly, and still works with no JavaScript at all.
 */

.fm-faq {
	display: flex;
	flex-direction: column;
	gap: var(--fm-space-2);
}

.fm-faq__item {
	border: 1px solid var(--fm-border);
	border-radius: var(--fm-radius-md);
	background: var(--fm-surface-2);
	transition: border-color var(--fm-dur-fast) var(--fm-ease-out),
		background var(--fm-dur-fast) var(--fm-ease-out);
}

.fm-faq__item[open] {
	border-color: var(--fm-border-accent);
	background: var(--fm-surface-3);
}

.fm-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fm-space-4);
	min-block-size: var(--fm-control-md);
	padding: var(--fm-space-3) var(--fm-space-5);
	color: var(--fm-text-primary);
	font-size: var(--fm-text-base);
	font-weight: var(--fm-weight-medium);
	cursor: pointer;
	list-style: none;
}

.fm-faq__q::-webkit-details-marker {
	display: none;
}

.fm-faq__q:focus-visible {
	outline: 2px solid var(--fm-focus-ring);
	outline-offset: -2px;
	border-radius: var(--fm-radius-md);
}

/* The sign is a shape, not a colour — state never rides on colour alone. */
.fm-faq__sign {
	position: relative;
	inline-size: calc(14px * var(--fm-scale));
	block-size: calc(14px * var(--fm-scale));
	flex: none;
	color: var(--fm-text-accent);
}

.fm-faq__sign::before,
.fm-faq__sign::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 0;
	inline-size: 100%;
	block-size: 2px;
	margin-block-start: -1px;
	border-radius: var(--fm-radius-full);
	background: currentColor;
	transition: transform var(--fm-dur-base) var(--fm-ease-out);
}

.fm-faq__sign::after {
	transform: rotate(90deg);
}

.fm-faq__item[open] .fm-faq__sign::after {
	transform: rotate(0deg);
}

.fm-faq__a {
	padding: 0 var(--fm-space-5) var(--fm-space-5);
	color: var(--fm-text-body);
	font-size: var(--fm-text-sm);
	line-height: var(--fm-lh-sm);
}

.fm-faq__a p {
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {

	html:not(.fm-motion-force) .fm-faq__sign::before,
	html:not(.fm-motion-force) .fm-faq__sign::after,
	html:not(.fm-motion-force) .fm-card__cta .fm-i {
		transition-duration: 1ms;
	}
}


/* =============================================================
   SERVICE PAGES — shared furniture

   The Hafez and Tarot pages were written first and carry their
   own hz-/tr- classes. Everything built after them shares this
   one set instead, so a new service is a content file and a
   token file, not another copy of the same CSS.

   Nothing here sets a colour literal. The per-service skin
   supplies the tokens; this only supplies the shapes.
   ============================================================= */

.svc-crumb {
	padding-block: var(--fm-space-6) 0;
	color: var(--fm-text-muted);
	font-size: var(--fm-text-xs);
}

.svc-crumb a {
	color: var(--fm-text-muted);
	text-decoration: none;
}

.svc-crumb a:hover {
	color: var(--fm-text-accent);
}

.svc-crumb span {
	margin-inline: var(--fm-space-2);
	opacity: .6;
}

.svc-hero {
	padding-block: var(--fm-space-16) var(--fm-space-12);
	text-align: center;
}

.svc-hero__title {
	margin: var(--fm-space-2) auto var(--fm-space-4);
	max-inline-size: 22ch;
	color: var(--fm-text-primary);
	font-size: var(--fm-text-4xl);
	line-height: var(--fm-lh-4xl);
	font-weight: var(--fm-weight-display);
}

.svc-hero__lead {
	margin: 0 auto;
	max-inline-size: 60ch;
	color: var(--fm-text-muted);
	font-size: var(--fm-text-md);
	line-height: var(--fm-lh-md);
}

.svc-hero .fm-cluster {
	justify-content: center;
	margin-block-start: var(--fm-space-6);
}

.svc-micro {
	margin-block-start: var(--fm-space-3);
	color: var(--fm-text-muted);
	font-size: var(--fm-text-xs);
}

/* Image slot — a deliberate panel until artwork exists. */
.svc-visual {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border: 1px solid var(--fm-border);
	border-radius: var(--fm-radius-xl);
	background: var(--fm-gradient-deep-soft);
}

.svc-visual img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.svc-visual__empty {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	gap: var(--fm-space-3);
	justify-items: center;
	color: var(--fm-text-accent);
	opacity: .45;
}

.svc-visual__empty span {
	font-size: var(--fm-text-xs);
}

@media (min-width: 861px) {

	.svc-result {
		grid-template-columns: 1.05fr .95fr;
	}
}

.svc-author {
	display: flex;
	gap: var(--fm-space-5);
	align-items: center;
}

.svc-author__avatar {
	inline-size: calc(64px * var(--fm-scale));
	block-size: calc(64px * var(--fm-scale));
	flex: none;
	display: grid;
	place-content: center;
	overflow: hidden;
	border: 1px solid var(--fm-border-accent);
	border-radius: var(--fm-radius-full);
	background: var(--fm-gradient-button);
	color: var(--fm-text-on-brand);
}

/* -------------------------------------------------------------
   Signature blocks — the one moment each service owns
   ------------------------------------------------------------- */

.svc-panel {
	display: flex;
	flex-direction: column;
	gap: var(--fm-space-4);
	padding: var(--fm-space-6);
	border: 1px solid var(--fm-border-accent);
	border-radius: var(--fm-radius-xl);
	background: var(--fm-gradient-deep-soft);
}

.svc-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fm-space-3);
}

.svc-panel__title {
	margin: 0;
	color: var(--fm-text-primary);
	font-size: var(--fm-text-lg);
	line-height: var(--fm-lh-lg);
	font-weight: var(--fm-weight-bold);
}

/* a labelled row, used for palm lines and cup symbols */
.svc-rows {
	display: flex;
	flex-direction: column;
	gap: var(--fm-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.svc-row {
	display: flex;
	align-items: flex-start;
	gap: var(--fm-space-3);
	padding: var(--fm-space-3) var(--fm-space-4);
	border: 1px solid var(--fm-border);
	border-radius: var(--fm-radius-md);
	background: var(--fm-surface-2);
}

.svc-row__ico {
	flex: none;
	color: var(--fm-text-accent);
	margin-block-start: 2px;
}

.svc-row b {
	display: block;
	color: var(--fm-text-primary);
	font-size: var(--fm-text-sm);
	font-weight: var(--fm-weight-medium);
}

.svc-row span {
	color: var(--fm-text-muted);
	font-size: var(--fm-text-xs);
	line-height: var(--fm-lh-xs);
}

/* the compatibility meter */
.svc-meter {
	display: flex;
	flex-direction: column;
	gap: var(--fm-space-2);
}

.svc-meter__track {
	block-size: calc(10px * var(--fm-scale));
	border-radius: var(--fm-radius-full);
	background: var(--fm-surface-3);
	overflow: hidden;
}

.svc-meter__fill {
	display: block;
	block-size: 100%;
	border-radius: var(--fm-radius-full);
	background: var(--fm-gradient-button);
}

.svc-meter__label {
	display: flex;
	justify-content: space-between;
	color: var(--fm-text-muted);
	font-size: var(--fm-text-xs);
}

.svc-meter__value {
	color: var(--fm-text-accent);
	font-weight: var(--fm-weight-bold);
}

/* the month picker */
.svc-months {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(90px, 100%), 1fr));
	gap: var(--fm-space-2);
}

.svc-month {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-block-size: var(--fm-control-md);
	padding: var(--fm-space-2);
	border: 1px solid var(--fm-border);
	border-radius: var(--fm-radius-md);
	background: var(--fm-surface-2);
	color: var(--fm-text-body);
	font-size: var(--fm-text-xs);
	text-align: center;
}

.svc-month.is-current {
	border-color: var(--fm-border-accent);
	background: var(--fm-tint-violet);
	color: var(--fm-text-primary);
}

.svc-month small {
	color: var(--fm-text-muted);
	font-size: var(--fm-text-2xs);
}

/* today's date line */
.svc-today {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--fm-space-2) var(--fm-space-4);
	color: var(--fm-text-muted);
	font-size: var(--fm-text-sm);
}

.svc-today strong {
	color: var(--fm-text-accent);
	font-size: var(--fm-text-xl);
	font-weight: var(--fm-weight-display);
}


/* A social account that does not exist yet: present, but plainly not a link. */
.fm-footer__social .is-soon {
	inline-size: var(--fm-control-md);
	block-size: var(--fm-control-md);
	display: grid;
	place-content: center;
	border: 1px dashed var(--fm-border);
	border-radius: var(--fm-radius-md);
	color: var(--fm-text-disabled);
	cursor: default;
}

/* -------------------------------------------------------------
   Search

   One form, three places: the phone drawer, the blog listing and
   the results page itself.
   ------------------------------------------------------------- */

.fm-search {
	display: flex;
	gap: var(--fm-space-2);
	align-items: stretch;
}

.fm-search__input {
	flex: 1;
	min-inline-size: 0;
}

.fm-search__go {
	flex: none;
	--btn-px: var(--fm-space-4);
}

.fm-search-bar {
	max-inline-size: var(--fm-container-sm);
	margin-block-end: var(--fm-space-8);
}

.fm-drawer__search {
	margin-block-end: var(--fm-space-3);
}

/* In the drawer the button is icon-only; the field is the point. */
.fm-drawer__search .fm-search__label {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.fm-drawer__search .fm-search__go {
	--btn-px: 0;
	inline-size: var(--fm-control-md);
}

/* -------------------------------------------------------------
   Blog cards

   Every card in a row must be the same shape, whatever was
   uploaded and however long the title runs. Three things do that:

     1. the media block always renders — see Falmis\card_media()
     2. it holds a fixed 16:10 box, so a portrait upload and a
        panorama occupy identical space
     3. title and excerpt are clamped to a fixed number of lines,
        and reserve that height even when the text is shorter

   Without step 3 a one-line title lifts its card's text up and the
   row stops lining up, which is the thing that actually looks
   broken.
   ------------------------------------------------------------- */

.fm-card--post .fm-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;

	/* Two lines of --fm-text-md at --fm-lh-md, held whether or not
	   the title fills them. */
	min-block-size: calc(2em * var(--fm-lh-md));
}

.fm-card--post .fm-card__text {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;

	/* Three lines of --fm-text-sm at --fm-lh-sm. */
	min-block-size: calc(3em * var(--fm-lh-sm));
}

.fm-card--post .fm-card__footer {
	justify-content: space-between;
}

/* The empty media panel. Deliberate, not a gap — see card_media(). */
.fm-card--post .fm-card__media-empty {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	background: var(--fm-gradient-deep-soft);
	color: var(--fm-text-accent);
	opacity: .45;
}

/* -------------------------------------------------------------
   Single post header image

   Same 16:10 box as the cards, so a post opens at the shape the
   card promised no matter what was uploaded.
   ------------------------------------------------------------- */

.fm-figure--hero {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--fm-radius-lg);
	background: var(--fm-surface-2);
}

.fm-figure--hero img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	border-radius: 0;
}

.fm-figure--hero .fm-card__media-empty {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	background: var(--fm-gradient-deep-soft);
	color: var(--fm-text-accent);
	opacity: .45;
}

/* -------------------------------------------------------------
   Card title links

   `.fm-card__hit` turns the whole card into one target, so the
   anchor inside the title must not also look like a link.
   ------------------------------------------------------------- */

.fm-card__title a {
	color: inherit;
	text-decoration: none;
}

.fm-card--link:hover .fm-card__title a,
.fm-card--link:focus-within .fm-card__title a {
	color: var(--fm-text-accent);
}

/* -------------------------------------------------------------
   Pagination

   WordPress emits `.page-numbers`. Styled as the system's chips.
   ------------------------------------------------------------- */

.fm-pagination {
	margin-block-start: var(--fm-space-10);
}

.fm-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fm-space-2);
	align-items: center;
}

.fm-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: var(--fm-control-md);
	min-block-size: var(--fm-control-md);
	padding-inline: var(--fm-space-4);
	border: 1px solid var(--fm-border);
	border-radius: var(--fm-radius-md);
	background: var(--fm-surface-2);
	color: var(--fm-text-body);
	font-size: var(--fm-text-sm);
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	transition: color var(--fm-dur-fast) var(--fm-ease-out),
		border-color var(--fm-dur-fast) var(--fm-ease-out),
		background var(--fm-dur-fast) var(--fm-ease-out);
}

.fm-pagination .page-numbers:hover {
	border-color: var(--fm-border-accent);
	background: var(--fm-tint-violet);
	color: var(--fm-text-primary);
}

.fm-pagination .page-numbers.current {
	border-color: transparent;
	background: var(--fm-gradient-button);
	color: var(--fm-text-on-brand);
	font-weight: var(--fm-weight-bold);
}

.fm-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
	color: var(--fm-text-muted);
}

.fm-pagination .screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* =============================================================
   COMMENTS

   WordPress emits its own form markup with no classes we can
   reuse, so it is mapped onto the system's form styles the same
   way the plugin forms are.
   ============================================================= */

.comments-area {
	margin-block-start: var(--fm-space-16);
	padding-block-start: var(--fm-space-10);
	border-block-start: 1px solid var(--fm-border-subtle);
}

.comments-title,
.comment-reply-title {
	margin: 0 0 var(--fm-space-5);
	color: var(--fm-text-primary);
	font-size: var(--fm-text-lg);
	line-height: var(--fm-lh-lg);
	font-weight: var(--fm-weight-bold);
}

.comment-list {
	margin: 0 0 var(--fm-space-10);
	padding: 0;
	list-style: none;
}

.comment-list .comment {
	margin-block-end: var(--fm-space-4);
	padding: var(--fm-space-5);
	border: 1px solid var(--fm-border);
	border-radius: var(--fm-radius-lg);
	background: var(--fm-surface-2);
}

.comment-list .children {
	margin-block-start: var(--fm-space-4);
	margin-inline-start: var(--fm-space-5);
	padding: 0;
	list-style: none;
}

.comment-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fm-space-2) var(--fm-space-3);
	align-items: center;
	margin-block-end: var(--fm-space-3);
	font-size: var(--fm-text-xs);
	color: var(--fm-text-muted);
}

.comment-author .fn {
	color: var(--fm-text-primary);
	font-size: var(--fm-text-sm);
	font-weight: var(--fm-weight-medium);
	font-style: normal;
}

.comment-metadata a {
	color: var(--fm-text-muted);
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

.comment-content {
	color: var(--fm-text-body);
	font-size: var(--fm-text-sm);
	line-height: var(--fm-lh-sm);
}

.comment-content p {
	margin: 0 0 var(--fm-space-3);
}

.comment-body .reply a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--fm-control-sm);
	color: var(--fm-text-accent);
	font-size: var(--fm-text-sm);
	text-decoration: none;
}

.comment-body .reply a:hover {
	color: var(--fm-text-primary);
	text-decoration: underline;
	text-underline-offset: var(--fm-space-1);
}

/* ---------- the form ---------- */

.comment-form {
	display: flex;
	flex-direction: column;
	gap: var(--fm-space-5);
}

.comment-form p {
	margin: 0;
}

.comment-notes,
.comment-form .logged-in-as {
	color: var(--fm-text-muted);
	font-size: var(--fm-text-xs);
	line-height: var(--fm-lh-xs);
}

.comment-form label {
	display: block;
	margin-block-end: var(--fm-space-2);
	color: var(--fm-text-body);
	font-size: var(--fm-text-sm);
	font-weight: var(--fm-weight-medium);
}

.comment-form .required {
	color: var(--fm-error);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	inline-size: 100%;
	min-block-size: var(--fm-control-md);
	padding: calc(11px * var(--fm-scale)) var(--fm-space-4);
	border: 1px solid var(--fm-border-input);
	border-radius: var(--fm-radius-md);
	background: var(--fm-surface-2);
	color: var(--fm-text-primary);
	font-family: var(--fm-font);
	font-size: var(--fm-text-base);
	line-height: 1.6;
	transition: border-color var(--fm-dur-fast) var(--fm-ease-out),
		background var(--fm-dur-fast) var(--fm-ease-out),
		box-shadow var(--fm-dur-fast) var(--fm-ease-out);
}

.comment-form textarea {
	min-block-size: calc(120px * var(--fm-scale));
	resize: vertical;
}

.comment-form input[type="email"],
.comment-form input[type="url"] {
	direction: ltr;
	text-align: start;
}

.comment-form input:hover,
.comment-form textarea:hover {
	border-color: var(--fm-border-accent);
}

.comment-form input:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--fm-focus-ring);
	background: var(--fm-surface-3);
	box-shadow: var(--fm-focus-shadow);
}

.comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: var(--fm-space-3);
}

.comment-form-cookies-consent label {
	margin: 0;
	color: var(--fm-text-muted);
	font-size: var(--fm-text-xs);
	font-weight: var(--fm-weight-regular);
}

.comment-form input[type="checkbox"] {
	inline-size: calc(20px * var(--fm-scale));
	block-size: calc(20px * var(--fm-scale));
	flex: none;
	margin: 0;
	border: 1px solid var(--fm-border-input);
	border-radius: var(--fm-radius-sm);
	background: var(--fm-surface-2);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.comment-form input[type="checkbox"]:checked {
	border-color: var(--fm-brand);
	background: var(--fm-brand);
}

/* The comment button is secondary — the page's one primary is elsewhere. */
.comment-form .submit {
	block-size: var(--fm-control-md);
	padding-inline: var(--fm-space-6);
	border: 1px solid var(--fm-border-strong);
	border-radius: var(--fm-radius-full);
	background: var(--fm-surface-2);
	color: var(--fm-text-primary);
	font-family: var(--fm-font);
	font-size: var(--fm-text-sm);
	font-weight: var(--fm-weight-medium);
	line-height: 1;
	cursor: pointer;
	transition: background var(--fm-dur-fast) var(--fm-ease-out),
		border-color var(--fm-dur-fast) var(--fm-ease-out);
}

.comment-form .submit:hover {
	border-color: var(--fm-border-accent);
	background: var(--fm-surface-3);
}

.comment-form .submit:focus-visible {
	outline: 2px solid var(--fm-focus-ring);
	outline-offset: 3px;
}

/* =============================================================
   CONTACT FORM 7

   Nearly all of this is already done: falmis-forms.css ships a CF7
   mapping, so wpcf7-* markup wears the system's form styles with no
   work here. Only the gaps are filled below.
   ============================================================= */

/* The required mark. The system styles `.fm-label .req`, but CF7 emits a
   plain <label>, so the same rule is repeated for that shape. */
.wpcf7-form .req {
	margin-inline-start: 2px;
	color: var(--fm-error);
}

/* CF7 puts each field in a <p>; the system's block zeroes the margin and
   makes the form a flex column, so paired fields need a real grid row. */
.wpcf7-form .fm-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: var(--fm-space-4);
	align-items: start;
}

/* Latin values inside an RTL form keep their own direction and digits. */
.wpcf7-form input[type="tel"] {
	font-variant-numeric: tabular-nums;
}

.wpcf7-form input[type="email"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="tel"] {
	direction: ltr;
	text-align: start;
}

/* The submit button is the page's one primary, so it gets the full
   control height rather than CF7's default padding-driven size. */
.wpcf7-form input[type="submit"] {
	min-block-size: var(--fm-control-lg);
	line-height: 1;
}

.wpcf7-form input[type="submit"]:focus-visible {
	outline: 2px solid var(--fm-focus-ring);
	outline-offset: 3px;
}

/* Colour never carries the message alone — the mark and the words do. */
.wpcf7-not-valid-tip::before {
	content: "✕";
	margin-inline-end: var(--fm-space-2);
	font-size: var(--fm-text-2xs);
}

.wpcf7-spinner {
	margin-inline-start: var(--fm-space-3);
}

/* =============================================================
   REDUCED MOTION

   Guarded with html:not(.fm-motion-force), the system's own
   pattern — a reviewer can override it to tell "nothing moves"
   apart from "it is broken". Never ship that class.
   ============================================================= */

@media (prefers-reduced-motion: reduce) {

	html:not(.fm-motion-force) .fluentform .ff-btn-submit,
	html:not(.fm-motion-force) .fm-pagination .page-numbers {
		transition-duration: 1ms;
	}
}


/* =============================================================
   TRUST SEALS  ·  اینماد و ساماندهی
   -------------------------------------------------------------
   Iranian trust seals are issuer-hosted images we cannot restyle
   and must not alter. eNamad's mark is dark blue on transparency,
   so it disappears against the footer's dark surface. The strip
   below gives them a light plate of their own.

   Sizes are capped rather than fixed: a seal arrives at whatever
   dimensions its issuer chose, and forcing a height would squash
   one that is not square. `object-fit: contain` keeps each mark's
   own proportions inside the cap.
   ============================================================= */

.fm-footer__trust {
	border-block-start: 1px solid var(--fm-border-subtle);
	padding-block: var(--fm-space-5);
	padding-inline: var(--fm-space-5);
}

.fm-trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fm-space-4);
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The light plate. The seals are official marks, not decoration —
 * a plain near-white tile reads as "certificate", and it is the
 * background the issuers designed their artwork against.
 */
.fm-trust__item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-inline-size: calc(88px * var(--fm-scale));
	min-block-size: calc(88px * var(--fm-scale));
	padding: var(--fm-space-3);
	border-radius: var(--fm-radius-md);
	background: #fff;
}

.fm-trust__item a,
.fm-trust__item img {
	display: block;
}

/*
 * Whatever the issuer's own width/height attributes say, the mark
 * is boxed to one size so two seals sit level beside each other.
 */
.fm-trust__item img {
	inline-size: auto;
	block-size: auto;
	max-inline-size: calc(96px * var(--fm-scale));
	max-block-size: calc(96px * var(--fm-scale));
	object-fit: contain;
}


/* =============================================================
   SERVICE → SERVICE LINKS
   -------------------------------------------------------------
   Chips, not cards. The service cards already appeared on the
   home page and on خدمات; repeating them a third time at the
   foot of every service page would out-shout the page's own
   call to action. One primary action per view is the rule.
   ============================================================= */

.svc-more__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fm-space-3);
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.svc-more__link {
	display: inline-flex;
	align-items: center;
	gap: var(--fm-space-2);
	min-block-size: var(--fm-control-md);
	padding-inline: var(--fm-space-5);
	border: 1px solid var(--fm-border);
	border-radius: var(--fm-radius-full);
	background: var(--fm-surface-1);
	color: var(--fm-text-muted);
	font-size: var(--fm-text-sm);
	font-weight: 500;
	transition:
		color var(--fm-dur-reveal) var(--fm-ease-out),
		border-color var(--fm-dur-reveal) var(--fm-ease-out),
		background var(--fm-dur-reveal) var(--fm-ease-out);
}

.svc-more__link:hover,
.svc-more__link:focus-visible {
	color: var(--fm-text-primary);
	border-color: var(--fm-border-strong);
	background: var(--fm-surface-2);
}