/* ==========================================================================
   BASE — reset, document, typography, native elements.

   Bidirectional rules for this whole theme:
     - Logical properties only. No `left`/`right`, no `margin-left`, no
       `text-align: right`. Use inline-start/inline-end and start/end.
     - This is enforced by a grep gate in verification, so a physical property
       will fail the build check rather than quietly shipping.
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

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

body {
	margin: 0;
	background-color: var(--lm-bg);
	color: var(--lm-ink);
	font-family: var(--lm-font);
	font-size: var(--lm-fs-lg);
	font-weight: 400;
	line-height: var(--lm-lh-base);
	/* Persian text benefits from these being on by default. */
	font-kerning: normal;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden; /* belt-and-braces: no page-level horizontal scroll, ever */
}

/* --- Rhythm ---------------------------------------------------------------
   Margin only on the block-end, so vertical space never collapses
   unpredictably and the first child of a section never pushes it open.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, blockquote, figure, pre, table {
	margin-block: 0 var(--lm-s4);
}

/* --- Headings ------------------------------------------------------------
   Every heading is 16px, because the type system is exactly three sizes and
   16px is the largest of them. Size can therefore carry none of the hierarchy,
   so it is carried by weight, colour and the space around a heading instead.

   Practical consequence worth knowing: an h1 is the same size as the paragraph
   beneath it. Spacing is what signals "this starts something", which is why the
   margins below are deliberately larger than a size-based scale would need.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	color: var(--lm-ink-strong);
	line-height: var(--lm-lh-tight);
	/* Persian headings wrap badly at narrow widths; balance avoids orphans. */
	text-wrap: balance;
}

h1,
h2 {
	font-size: var(--lm-fs-lg);
	font-weight: 700;
}

/* A touch of negative tracking so a bold 16px heading reads as a unit rather
   than as emphasised body copy. */
h1 { letter-spacing: -0.01em; margin-block-end: var(--lm-s5); }
h2 { margin-block-end: var(--lm-s4); }

h3 {
	font-size: var(--lm-fs-lg);
	font-weight: 500;
}

h4, h5, h6 {
	font-size: var(--lm-fs-base);
	font-weight: 500;
	color: var(--lm-ink);
}

p {
	text-wrap: pretty;
}

:where(ul, ol) {
	padding-inline-start: var(--lm-s5);
}

li {
	margin-block-end: var(--lm-s2);
}

a {
	color: var(--lm-navy-deep);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--lm-dur) var(--lm-ease);
}

a:hover {
	color: var(--lm-teal);
}

strong, b { font-weight: 700; }
small { font-size: var(--lm-fs-sm); }

hr {
	border: 0;
	border-block-start: 1px solid var(--lm-border);
	margin-block: var(--lm-s6);
}

blockquote {
	border-inline-start: 3px solid var(--lm-teal);
	padding-inline-start: var(--lm-s4);
	color: var(--lm-ink-muted);
}

/* --- Form controls: undo the UA font -------------------------------------
   Chrome's user-agent sheet gives every button and form control
   `font: 400 13.3333px Arial`. The theme styled the common text inputs but
   never `button`, `submit`, `checkbox` or `radio`, so Persian button labels
   were rendering **in Arial at 13.33px** — a font outside the brand and a size
   outside the type system. Up to 39 such elements on a single product page.

   `font: inherit` is the whole fix: family, size, weight and line-height all
   come from the document. Components that want a different size still set one.
   -------------------------------------------------------------------------- */

button,
input,
optgroup,
select,
textarea {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

/* --- Media --------------------------------------------------------------- */

img, svg, video, canvas, picture {
	max-width: 100%;
	height: auto;
	display: block;
}

figure {
	margin-inline: 0;
}

/* --- Tables -------------------------------------------------------------- */

table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--lm-fs-base);
}

th, td {
	padding: var(--lm-s3);
	border-block-end: 1px solid var(--lm-border);
	text-align: start;
}

th {
	font-weight: 500;
	color: var(--lm-ink-strong);
	background-color: var(--lm-surface);
}

/* Wide tables must scroll inside their own box, not the page. */
.lm-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* --- Code --------------------------------------------------------------- */

code, kbd, pre, samp {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: var(--lm-fs-base);   /* not 0.9em — em multiplies its context */
	/* Code is LTR even inside an RTL document. */
	direction: ltr;
	unicode-bidi: embed;
}

pre {
	background-color: var(--lm-surface);
	padding: var(--lm-s4);
	border-radius: var(--lm-radius-sm);
	overflow-x: auto;
}

/* --- Focus ---------------------------------------------------------------
   Never remove the focus ring. `:focus-visible` keeps it off mouse clicks
   while guaranteeing it for keyboard users.
   -------------------------------------------------------------------------- */

:focus-visible {
	outline: 3px solid var(--lm-teal);
	outline-offset: 2px;
	border-radius: 2px;
}

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

.screen-reader-text,
.lm-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Skip link — visible only when focused. */
.lm-skip-link {
	position: absolute;
	inset-block-start: -100vh;
	inset-inline-start: var(--lm-s4);
	z-index: 1000;
	background-color: var(--lm-navy);
	color: var(--lm-on-primary);
	padding: var(--lm-s3) var(--lm-s4);
	border-radius: 0 0 var(--lm-radius-sm) var(--lm-radius-sm);
	text-decoration: none;
}

.lm-skip-link:focus {
	inset-block-start: 0;
	color: var(--lm-on-primary);
}

/* The signature gradient heading. `color` is set FIRST as a real fallback —
   production omitted it, which renders the text invisible on any engine
   without background-clip:text. */
.lm-grad {
	color: var(--lm-navy);
	background-image: var(--lm-gradient);
	-webkit-background-clip: text;
	background-clip: text;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.lm-grad {
		-webkit-text-fill-color: transparent;
	}
}

/* Numerals rendered in Persian digits are converted server-side (see
   inc/digits.php). This keeps them from being re-shaped by the font's
   default Latin figures. */
.lm-num {
	font-variant-numeric: lining-nums;
	font-feature-settings: "ss01" 0;
}