/* ==========================================================================
   SepehrDev — foundations
   Design tokens, Persian typography, RTL behaviour and shared components.

   Every layout rule uses CSS logical properties (inline-start/inline-end,
   padding-block, margin-inline) rather than left/right. That is what makes
   the RTL layout correct by construction instead of by a mirrored override
   stylesheet that drifts out of sync.
   ========================================================================== */

/* --- Font ---------------------------------------------------------------- */

@font-face {
	font-family: 'Vazirmatn';
	src: url('../fonts/Vazirmatn-Variable.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
	/* Monochrome base. The palette is deliberately near-neutral so the single
	   accent carries all the emphasis. */
	--sd-ink: #0a0b0f;
	--sd-ink-2: #1c1f27;
	--sd-muted: #5b6472;
	--sd-muted-2: #858d9b;
	--sd-line: #e4e7ec;
	--sd-line-2: #f0f2f5;
	--sd-bg: #ffffff;
	--sd-bg-2: #f8f9fb;

	/* Dark sections */
	--sd-dark: #0a0b0f;
	--sd-dark-2: #14161d;
	--sd-dark-line: #262a35;
	--sd-dark-ink: #f3f4f7;
	--sd-dark-muted: #9aa3b2;

	/* One accent, used sparingly: CTAs, links, active states. */
	--sd-accent: #6d5ef8;
	--sd-accent-ink: #5b4ce8;
	--sd-accent-soft: #eeecfe;

	/* Signal green: reserved for "deployed / done" states in the pipeline
	   diagram. Never used for decoration. */
	--sd-signal: #12b76a;

	/* Type */
	--sd-font: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--sd-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

	/* Rhythm */
	--sd-gutter: clamp(1.25rem, 5vw, 2rem);
	--sd-max: 1120px;
	--sd-max-narrow: 760px;
	/* Applied top AND bottom, so the space between two adjacent sections is
	   double this. At the old 7.5rem that was 240px of empty page between
	   sections whose content was often only ~420px tall. */
	--sd-section: clamp(2.75rem, 5.5vw, 4.5rem);

	--sd-radius: 14px;
	--sd-radius-sm: 9px;

	--sd-shadow: 0 1px 2px rgba(10, 11, 15, .04), 0 12px 32px -12px rgba(10, 11, 15, .12);
}

/* --- Making Vazirmatn win everywhere ------------------------------------- */

/*
 * Blocksy and Tutor LMS do not hardcode their fonts — they read them from CSS
 * custom properties and fall back to a Latin font when the property is unset:
 *
 *   Blocksy:  font-family: var(--theme-font-family)
 *   Tutor:    font-family: var(--tutor-font-family-body, "Inter")
 *
 * Tutor never defines its variable, so every LMS screen silently fell back to
 * Inter. Setting the variables is the right level to fix this: it reaches
 * every rule in both systems at once, needs no !important, and leaves their
 * icon fonts (font-family: tutor / dashicons) untouched.
 *
 * Declared on `body`, not `:root`. Blocksy prints its own `:root` block in an
 * inline <style> that loads AFTER this file, so a `:root` rule here would be
 * overridden. `body` is a closer ancestor than `:root` for everything on the
 * page, so it wins on inheritance no matter the source order.
 */
:root,
body {
	/* Blocksy */
	--theme-font-family: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--theme-form-font-family: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--theme-font-stack-default: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--theme-button-font-family: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Tutor LMS */
	--tutor-font-family-body: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--tutor-font-family-heading: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* --- Typography ---------------------------------------------------------- */

body {
	font-family: var(--sd-font);
	color: var(--sd-ink);
	background: var(--sd-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Headings everywhere, not just inside .sd-section — the checkout, account
   and LMS screens have headings this theme does not otherwise style. */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--sd-font);
}

/*
 * Form controls do not inherit the page font: browsers give them a UA font,
 * and WooCommerce ships its own stack on labels and inputs. This is what left
 * the checkout's Persian labels in a non-Vazirmatn face.
 */
button,
input,
select,
optgroup,
textarea,
label,
.button,
.woocommerce button,
.woocommerce input,
.woocommerce select,
.woocommerce textarea,
.woocommerce label,
.woocommerce .button,
.woocommerce-page label,
.woocommerce-page .button {
	font-family: var(--sd-font);
}

/*
 * The WordPress admin bar, which only the site owner sees, defaults to
 * Tahoma. Targeting the link elements rather than `*` keeps the dashicon
 * pseudo-elements on their own icon font.
 */
#wpadminbar .ab-item,
#wpadminbar .ab-label,
#wpadminbar .display-name {
	font-family: var(--sd-font);
}

/* Persian text needs a little more line-height than Latin to stay readable,
   because of the descenders and the diacritic space above the baseline. */
body,
.sd-section p {
	line-height: 1.85;
}

/*
 * No letter-spacing on Persian, anywhere.
 *
 * Arabic-script letters join to their neighbours. Any tracking — positive or
 * negative — forces gaps between them and the word visually falls apart:
 * "مسئله" becomes "م س ئ ل ه". Tracking is therefore applied only to the
 * Latin/mono elements below, never to body or heading text.
 */
body,
.sd-section h1,
.sd-section h2,
.sd-section h3,
.sd-section h4,
.sd-section p,
.sd-section li {
	letter-spacing: normal;
}

.sd-section h1,
.sd-section h2,
.sd-section h3,
.sd-section h4 {
	font-family: var(--sd-font);
	line-height: 1.4;
	font-weight: 700;
	text-wrap: balance;
	margin-block: 0 0.6em;
}

.sd-section h2 {
	font-size: clamp(1.65rem, 3.6vw, 2.5rem);
}

.sd-section h3 {
	font-size: clamp(1.15rem, 2.2vw, 1.4rem);
}

.sd-section p {
	margin-block: 0 1.1em;
	color: var(--sd-muted);
	font-size: clamp(1rem, 1.6vw, 1.075rem);
}

.sd-section p:last-child {
	margin-block-end: 0;
}

/* --- Mixed Persian + English -------------------------------------------- */

/*
 * Latin technical terms sitting inside Persian sentences — Docker, CI/CD,
 * SSH, VPS, Production.
 *
 * `unicode-bidi: isolate` is the important part: it tells the bidi algorithm
 * to treat the run as a self-contained neutral object, so trailing
 * punctuation and adjacent digits stay on the correct side instead of being
 * flung to the end of the line. Without it, a phrase like "CI/CD را" can
 * render with the slash or the parenthesis in the wrong place.
 */
.sd-tech,
.sd-section code,
.sd-section kbd {
	unicode-bidi: isolate;
	direction: ltr;
	font-family: var(--sd-mono);
	font-size: 0.92em;
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* Inline code in body copy only — not code inside our own components, which
   bring their own styling. */
.sd-section p > code,
.sd-section li > code {
	background: var(--sd-bg-2);
	border: 1px solid var(--sd-line);
	border-radius: 5px;
	padding: 0.1em 0.4em;
}

/* Numbers written in Latin digits inside Persian copy (prices, counts) must
   also be isolated, or the thousands separator can jump position. */
.sd-num {
	unicode-bidi: isolate;
}

/* --- Layout -------------------------------------------------------------- */

/*
 * The landing template puts .sd-page directly inside Blocksy's <main>, which
 * still carries the theme's content width. Neutralising it here is what lets
 * the dark bands run edge to edge instead of floating as inset panels.
 *
 * Done by widening the container rather than with a 100vw breakout, because
 * 100vw includes the scrollbar and would cause horizontal overflow — the one
 * thing an RTL page must never do.
 */
/*
 * Scoped to `main` on purpose.
 *
 * Without the `main` prefix this also matched the header's own .ct-container,
 * so the header stretched edge to edge on the landing page and homepage while
 * staying boxed everywhere else — the nav visibly jumped position between
 * pages. The header and footer keep their normal container; only the page
 * content goes full-bleed.
 */
.sd-marketing main,
.sd-marketing main .ct-container,
.sd-marketing main .ct-container-full,
.sd-marketing main .entry-content {
	max-width: none;
	width: 100%;
	padding-inline: 0;
	margin-inline: 0;
}

.sd-page {
	width: 100%;
}

/* Blocksy prints a page title above the content; the hero already says it. */
.sd-marketing .page-title,
.sd-marketing .entry-header,
.sd-marketing .hero-section {
	display: none;
}

/* --- Header --------------------------------------------------------------
 *
 * Blocksy lays the header out as a two-column grid: data-column="start" holds
 * the logo, data-column="end" holds the menu and search. Under RTL the start
 * column sits on the right, which is correct — but the columns split the width
 * evenly, stranding the nav against the far left edge, a long way from the
 * logo it belongs to.
 *
 * Fixed by letting the logo column shrink to its content and aligning the
 * nav to the inline-start (the right) of the remaining space, so the links sit
 * next to the brand and read right-to-left from it. Search is pushed to the
 * far edge, where a utility control belongs.
 *
 * ID selectors are used so these rules outrank Blocksy's own inline <style>,
 * which is printed after this file.
 */

#header .ct-container {
	/* Same width and gutter on every page, and aligned with .sd-wrap so the
	   logo lines up with the content below it. */
	max-width: var(--sd-max);
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--sd-gutter);

	/*
	 * Flex rather than Blocksy's grid. Its two tracks resolve to fixed widths
	 * (roughly 40/60) that leave the logo column far wider than the wordmark
	 * inside it, stranding the nav hundreds of pixels from the brand. Flex
	 * sizes the logo to its content and lets the nav take the rest.
	 *
	 * !important on these two only. Blocksy sets the header's display and
	 * track sizing from a <style> block it prints after this stylesheet, at
	 * the same specificity, so it wins on source order alone — every other
	 * declaration in this rule applies normally, which is why the rest are
	 * left clean.
	 */
	display: flex !important;
	grid-template-columns: none !important;
	align-items: center;
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

#header [data-column="start"] {
	flex: 0 0 auto;
}

#header [data-column="end"] {
	flex: 1 1 auto;
	min-width: 0;
}

#header [data-column="start"] > [data-items] {
	display: flex;
	align-items: center;
}

#header [data-column="end"] > [data-items] {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2rem);
	/* flex-start is the right-hand side in RTL: hug the logo. */
	justify-content: flex-start;
	width: 100%;
}

#header .menu {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

#header .ct-menu-link {
	font-family: var(--sd-font);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.6;
	color: var(--sd-ink-2);
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s ease;
}

#header .ct-menu-link:hover,
#header .ct-menu-link:focus-visible {
	color: var(--sd-accent);
}

/* The page you are on. */
#header .current-menu-item > .ct-menu-link,
#header .current_page_item > .ct-menu-link {
	color: var(--sd-accent);
}

#header .site-title a {
	font-family: var(--sd-font);
	font-size: clamp(1.15rem, 2.2vw, 1.4rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--sd-ink);
	text-decoration: none;
	unicode-bidi: isolate;
}

/* Utility controls belong at the far edge, away from the navigation. */
#header .ct-header-search {
	margin-inline-start: auto;
	color: var(--sd-muted);
}

#header .ct-header-search:hover {
	color: var(--sd-accent);
}

@media (max-width: 999px) {
	/* Blocksy switches to its own mobile header row below this width, where
	   the logo and a hamburger sit at opposite ends. Only the alignment needs
	   keeping; the flex rules above already do the right thing. */
	#header .ct-container {
		justify-content: space-between;
	}
}

.sd-section {
	padding-block: var(--sd-section);
	padding-inline: var(--sd-gutter);
	position: relative;
}

.sd-wrap {
	max-width: var(--sd-max);
	margin-inline: auto;
	width: 100%;
}

.sd-wrap--narrow {
	max-width: var(--sd-max-narrow);
}

.sd-section--tight {
	padding-block: clamp(2.5rem, 6vw, 4rem);
}

.sd-section--alt {
	background: var(--sd-bg-2);
}

/* Dark sections re-point the tokens rather than overriding every rule, so
   components dropped inside them adapt without extra CSS. */
.sd-section--dark {
	background: var(--sd-dark);
	--sd-ink: var(--sd-dark-ink);
	--sd-muted: var(--sd-dark-muted);
	--sd-line: var(--sd-dark-line);
	--sd-line-2: var(--sd-dark-2);
	--sd-bg: var(--sd-dark);
	--sd-bg-2: var(--sd-dark-2);
	color: var(--sd-dark-ink);
}

.sd-section--dark h1,
.sd-section--dark h2,
.sd-section--dark h3 {
	color: var(--sd-dark-ink);
}

/* --- Section heading ----------------------------------------------------- */

/*
 * Eyebrows are usually mixed ("SepehrDev · ورکشاپ عملی"), so they keep the
 * Persian font and no tracking. Uppercasing is also dropped: it does nothing
 * to Persian and only shouts at the Latin half.
 */
.sd-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--sd-font);
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--sd-accent);
	margin-block-end: 1rem;
}

.sd-section--dark .sd-eyebrow {
	color: #9c92ff;
}

.sd-lede {
	font-size: clamp(1.05rem, 2vw, 1.2rem);
	color: var(--sd-muted);
	max-width: 62ch;
	margin-block-end: 2.5rem;
}

/* --- Buttons ------------------------------------------------------------- */

.sd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.95rem 2rem;
	border-radius: var(--sd-radius-sm);
	font-family: var(--sd-font);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}

.sd-btn--primary {
	background: var(--sd-accent);
	color: #fff;
}

.sd-btn--primary:hover,
.sd-btn--primary:focus-visible {
	background: var(--sd-accent-ink);
	color: #fff;
	transform: translateY(-1px);
}

.sd-btn--ghost {
	background: transparent;
	color: var(--sd-ink);
	border-color: var(--sd-line);
}

.sd-btn--ghost:hover,
.sd-btn--ghost:focus-visible {
	border-color: var(--sd-ink);
	color: var(--sd-ink);
}

.sd-btn:focus-visible {
	outline: 2px solid var(--sd-accent);
	outline-offset: 3px;
}

/* --- Price --------------------------------------------------------------- */

.sd-price {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	font-weight: 700;
	unicode-bidi: isolate;
}

.sd-price__amount {
	font-size: 1.35rem;
	letter-spacing: -0.01em;
}

.sd-price__currency {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--sd-muted);
}

.sd-price--free .sd-price__amount {
	color: var(--sd-signal);
}

/* A CTA and its price, stacked on mobile and side by side above it. */
.sd-cta-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
}

.sd-cta-note {
	font-size: 0.9rem;
	color: var(--sd-muted);
}

/* --- Video --------------------------------------------------------------- */

.sd-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-width: 100%;
	background: var(--sd-dark-2);
	border-radius: var(--sd-radius);
	overflow: hidden;
	border: 1px solid var(--sd-dark-line);
}

.sd-video iframe,
.sd-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Shown until a Cloudflare Stream ID is added, so an empty lesson reads as
   "not uploaded yet" rather than as a broken player. */
.sd-video--placeholder {
	display: grid;
	place-items: center;
	text-align: center;
	padding: var(--sd-gutter);
	color: var(--sd-dark-muted);
	background-image:
		linear-gradient(var(--sd-dark-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--sd-dark-line) 1px, transparent 1px);
	background-size: 44px 44px;
	background-position: center;
}

.sd-video__note {
	font-size: 0.95rem;
	max-width: 34ch;
	line-height: 1.8;
}

.sd-video__badge {
	display: inline-block;
	font-family: var(--sd-mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sd-dark-muted);
	border: 1px solid var(--sd-dark-line);
	border-radius: 999px;
	padding: 0.3rem 0.75rem;
	margin-block-end: 0.9rem;
	unicode-bidi: isolate;
}

/* --- Accessibility ------------------------------------------------------- */

.sd-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

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