/*
Theme Name: PPK
Description: Pars Polymer Khavaran — four-language theme (fa, ar RTL; en, tr LTR) in the approved HP-100 datasheet style. Tokens in assets/tokens.css.
Version: 1.1.0
Requires PHP: 8.1
Text Domain: ppk
*/

/* Only logical properties (inline/block) so the same rules serve RTL and LTR. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-block-start: var(--space-6); }
body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font: var(--text-body);
	overflow-wrap: break-word; /* not 'anywhere': that shrinks table columns to one character */
}
.lang-en, .lang-tr { --leading-body: 1.7; }
img { max-inline-size: 100%; block-size: auto; display: block; }
a { color: var(--color-link); text-underline-offset: 0.25em; }
a:hover { color: var(--color-link-hover); }
h1, h2, h3, h4 { color: var(--color-text-strong); margin: 0 0 var(--space-3); text-wrap: balance; }
h1 { font: var(--text-h1); font-weight: 800; }
h2 { font: var(--text-h2); }
h3 { font: var(--text-h3); }
h4 { font: var(--text-h4); }
p { margin: 0 0 var(--space-4); }
small { font-size: var(--size-12); }
bdi { unicode-bidi: isolate; }
.lat { font-family: var(--font-outfit); direction: ltr; unicode-bidi: isolate; }

:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }
.surface-inverse :focus-visible { outline-color: var(--focus-color-inverse); }
#main:focus { outline: none; }

.visually-hidden {
	position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
	position: absolute; inset-inline-start: var(--space-4); inset-block-start: -100px; z-index: 100;
	background: var(--color-surface); color: var(--color-text-strong); padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md); border: var(--border-subtle);
}
.skip-link:focus { inset-block-start: var(--space-4); }
.icon { inline-size: 20px; block-size: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Layout ---------- */
.container { inline-size: 100%; max-inline-size: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter); }
.container--narrow { max-inline-size: calc(var(--measure) + 2 * var(--container-gutter)); }
.section { padding-block: var(--space-12); }
.section--tint { background: var(--color-surface); border-block: var(--border-subtle); }
.section-lead { color: var(--color-text-muted); max-inline-size: var(--measure); margin-block: calc(-1 * var(--space-2)) var(--space-6); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-6); margin-block-end: var(--space-4); }
.section-head .sec-h { margin: 0; }
@media (min-width: 768px) { .section { padding-block: var(--space-16); } }

/* Numbered section heading: «۰۱ مشخصات فنی» */
.sec-h { display: flex; align-items: baseline; gap: var(--space-4); font: var(--text-h3); font-size: var(--size-24); color: var(--color-text-strong); margin: 0 0 var(--space-4); }
.sec-n { font-size: var(--size-14); font-weight: var(--weight-semibold); color: var(--color-primary); }

/* Pills: eyebrow labels and tags */
.eyebrow { display: inline-block; font-size: 0.8125rem; font-weight: var(--weight-semibold); color: var(--color-primary); background: var(--blue-50); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); margin: 0; }
.tags { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag { display: inline-flex; align-items: center; border-radius: var(--radius-pill); padding: var(--space-1) var(--space-4); font-size: var(--size-14); font-weight: var(--weight-semibold); background: var(--color-surface); border: var(--border-subtle); color: var(--color-text-strong); text-decoration: none; }
a.tag { min-block-size: var(--hit-target); }
a.tag:hover { background: var(--blue-50); color: var(--color-primary); }
.tag--ac { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }

/* Logo-colour strip above brand bars */
.strip { display: flex; block-size: 6px; }
.strip span { flex: 1; }
.strip span:nth-child(1) { background: var(--app-wood); }
.strip span:nth-child(2) { background: var(--app-carpet); }
.strip span:nth-child(3) { background: var(--app-textile); }
.strip span:nth-child(4) { background: var(--app-acrylic); }
.strip span:nth-child(5) { background: var(--app-tape); }
.strip span:nth-child(6) { background: var(--logo-green-light); }
.strip span:nth-child(7) { background: var(--app-plastic-paint); }
.strip span:nth-child(8) { background: var(--app-packaging); }

/* ---------- Buttons ---------- */
.button {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
	min-block-size: var(--button-height); padding: var(--space-2) var(--space-6);
	border: 1px solid transparent; border-radius: var(--button-radius);
	font: var(--button-font); text-decoration: none; text-align: center; cursor: pointer;
}
.button--primary, .button--quote { background: var(--color-primary); color: var(--color-on-primary); }
.button--primary:hover, .button--quote:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
.button--secondary { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-border-subtle); }
.button--secondary:hover { background: var(--blue-50); color: var(--color-primary); }
.button--light { background: var(--white); color: var(--navy-900) !important; }
.button--light:hover { background: var(--blue-50); }
.button--ghost { color: var(--color-text-inverse) !important; border-color: rgb(255 255 255 / 0.4); }
.button--ghost:hover { background: var(--navy-800); }
.button .icon { inline-size: 18px; block-size: 18px; }
.button-meta { font-weight: var(--weight-regular); opacity: 0.85; }
.icon-button {
	display: inline-grid; place-items: center; inline-size: var(--hit-target); block-size: var(--hit-target);
	background: transparent; border: 1px solid rgb(255 255 255 / 0.4); border-radius: var(--radius-md); color: inherit; cursor: pointer;
}
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-6); }
.text-link { font-weight: var(--weight-semibold); display: inline-flex; align-items: center; min-block-size: var(--hit-target); }

/* ---------- Header (brand bar) ---------- */
.surface-inverse { background: var(--navy-900); color: var(--color-text-inverse); }
.surface-inverse a:not(.button) { color: var(--color-text-inverse); }
.site-header { position: relative; }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-block-size: 72px; padding-block: var(--space-2); }
.brand img { block-size: 46px; inline-size: auto; }
.site-nav { display: none; }
.site-nav.is-open {
	display: flex; flex-direction: column; gap: var(--space-4);
	position: absolute; inset-inline: 0; inset-block-start: 100%; z-index: 20;
	background: var(--navy-900); padding: var(--space-4) var(--container-gutter) var(--space-6);
	border-block-start: 1px solid rgb(255 255 255 / 0.12);
}
.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.primary-nav .menu a { display: flex; align-items: center; min-block-size: var(--hit-target); text-decoration: none; font-weight: var(--weight-semibold); }
.primary-nav .menu a:hover, .primary-nav .current-menu-item > a, .primary-nav .current-menu-ancestor > a { text-decoration: underline; text-decoration-thickness: 2px; }
.header-actions { display: flex; flex-direction: column; gap: var(--space-3); }
.header-phone { display: inline-flex; align-items: center; min-block-size: var(--hit-target); text-decoration: none; color: var(--gray-on-navy) !important; font-family: var(--font-outfit); white-space: nowrap; }
.lang-switch ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-1); }
.lang-switch a {
	display: inline-flex; align-items: center; min-block-size: var(--hit-target); padding-inline: var(--space-2);
	text-decoration: none; color: var(--gray-on-navy) !important; font-size: var(--size-14);
}
.lang-switch a[aria-current] { color: var(--white) !important; font-weight: var(--weight-semibold); box-shadow: inset 0 -2px 0 var(--white); }
@media (min-width: 1100px) {
	.nav-toggle { display: none; }
	.site-nav, .site-nav.is-open { display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex: 1; gap: var(--space-6); position: static; padding: 0; border: 0; }
	.menu { flex-direction: row; gap: var(--space-5); }
	.header-actions { flex-direction: row; align-items: center; gap: var(--space-4); }
	.primary-nav .menu a, .header-actions .button { white-space: nowrap; }
	.header-actions .button { padding-inline: var(--space-4); }
}
@media (min-width: 1100px) and (max-width: 1279px) { .header-phone { display: none; } } /* phone stays in footer and CTA band */
@media (min-width: 1100px) and (max-width: 1439px) { .lang-en .header-phone, .lang-tr .header-phone { display: none; } } /* longer English/Turkish menu labels */

/* ---------- Page head (datasheet hero style) ---------- */
.page-head { background: var(--color-bg); border-block-end: var(--border-subtle); padding-block: var(--space-10) var(--space-8); }
.page-head h1 { margin-block-start: var(--space-3); }
.lead { font-size: var(--size-18); line-height: var(--leading-body); color: var(--color-text-muted); max-inline-size: var(--measure); margin: 0; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--size-14); color: var(--color-text-muted); margin-block-end: var(--space-3); }
.breadcrumb a { display: inline-flex; align-items: center; min-block-size: var(--hit-target); }

/* Home hero */
.hero { background: var(--color-bg); border-block-end: var(--border-subtle); }
.hero-inner { display: grid; gap: var(--space-8); padding-block: var(--space-10); align-items: center; }
.hero h1 { font-size: clamp(1.875rem, 4.5vw, 2.75rem); font-weight: 800; line-height: 1.35; margin-block: var(--space-4) 0; }
.hero .lead { margin-block-start: var(--space-4); }
.hero-media { position: relative; margin: 0; border-radius: var(--radius-xl); overflow: hidden; background: var(--navy-900); min-block-size: 280px; }
.hero-media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero-media figcaption { position: absolute; inset-inline-end: var(--space-4); inset-block-end: var(--space-4); background: rgb(7 53 87 / 0.88); color: var(--white); font-size: 0.8125rem; font-weight: var(--weight-semibold); padding: 6px 12px; border-radius: var(--radius-pill); }
@media (min-width: 900px) {
	.hero-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding-block: var(--space-16); }
	.hero-media { min-block-size: 420px; }
}

/* ---------- Key figures strip ---------- */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--color-border-subtle); border: var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; } /* 1px gap on a tinted grid = hairlines in any arrangement */
.stat { padding: var(--space-6) var(--space-4); background: var(--color-surface); }
.stat-v { white-space: nowrap; font-size: clamp(var(--size-20), 2.6vw, var(--size-30)); font-weight: var(--weight-bold); line-height: 1.2; color: var(--color-text-strong); }
.stat-v small { font-size: var(--size-16); font-weight: var(--weight-medium); color: var(--color-text-muted); }
.stat-l { font-size: var(--size-14); color: var(--color-text-muted); margin-block-start: var(--space-1); }
@media (min-width: 900px) { .stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; } }

/* ---------- Product code ---------- */
.product-code { font-family: var(--font-code); font-weight: var(--weight-bold); font-size: var(--product-code-size); color: var(--navy-900); letter-spacing: var(--product-code-tracking); line-height: 1.1; white-space: nowrap; unicode-bidi: isolate; }

/* ---------- Application markers ---------- */
.app-marker {
	display: inline-block; inline-size: var(--app-marker-size); block-size: var(--app-marker-size); flex: none;
	background: var(--marker); clip-path: polygon(0 0, 100% 50%, 0 100%);
}
[dir="rtl"] .app-marker { transform: scaleX(-1); }
.app-marker--lg { --app-marker-size: 14px; margin-inline-end: var(--space-2); vertical-align: 0.1em; }
.app-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.app { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--size-14); }
.app a { color: var(--color-text); display: inline-flex; align-items: center; min-block-size: var(--hit-target); }
td .app-list { margin: 0; gap: var(--space-1) var(--space-3); }

/* ---------- Tiles (applications), cards (families) ---------- */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.tile-link { display: flex; align-items: center; gap: var(--space-4); block-size: 100%; padding: var(--space-3); background: var(--color-surface); border: var(--border-subtle); border-radius: var(--radius-lg); text-decoration: none; color: var(--color-text-strong); }
.tile-link:hover { border-color: var(--color-primary); color: var(--color-text-strong); }
.tile-icon { inline-size: 52px; block-size: 52px; flex: none; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--blue-50); color: var(--color-primary); }
.tile-icon .icon { inline-size: 30px; block-size: 30px; }
.tile-text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.tile-name { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-bold); }
.tile-codes { font-family: var(--font-outfit); font-size: var(--size-14); color: var(--color-text-muted); }

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.card { display: flex; flex-direction: column; block-size: 100%; padding: var(--space-6); background: var(--color-surface); border: var(--border-subtle); border-radius: var(--radius-lg); }
.card h3 { font: var(--text-h4); font-size: var(--size-18); margin: 0 0 var(--space-2); }
.card h3 a { color: var(--color-text-strong); text-decoration: none; display: inline-flex; min-block-size: var(--hit-target); align-items: center; }
.card h3 a:hover { color: var(--color-primary); text-decoration: underline; }
.card p { font-size: 0.9375rem; color: var(--color-text); line-height: 1.9; margin: 0; }
.card .tags { margin-block-start: auto; padding-block-start: var(--space-4); }

/* Boxes (about / R&D, like the datasheet storage boxes) */
.boxes { display: grid; gap: var(--space-4); }
.box { padding: var(--space-6); background: var(--color-surface); border: var(--border-subtle); border-radius: var(--radius-lg); }
.box--main { background: var(--color-bg); }
.box h3 { display: flex; align-items: center; gap: var(--space-2); font: var(--text-h4); font-size: 1.0625rem; margin: 0 0 var(--space-2); }
.box h3 .icon { color: var(--color-primary); }
.box p { font-size: 0.9375rem; line-height: 1.9; }
.box p:last-child { margin: 0; }
@media (min-width: 900px) { .boxes { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }

/* ---------- Tables (datasheet rule style) ---------- */
.table-frame { position: relative; /* keeps visually-hidden captions inside the scroll box */ background: var(--color-surface); border: var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
.table-frame--scroll { overflow-x: auto; }
table { inline-size: 100%; border-collapse: collapse; font-size: 0.9375rem; }
thead th { background: var(--navy-900); color: var(--white); font-size: var(--size-14); font-weight: var(--weight-semibold); text-align: start; white-space: nowrap; }
th, td { padding: var(--space-3) var(--space-4); text-align: start; vertical-align: middle; }
tbody tr + tr { border-block-start: var(--border-hairline); }
tbody th { font-weight: var(--weight-semibold); color: var(--color-text-strong); }
td.num, th.num { white-space: nowrap; font-weight: var(--weight-semibold); color: var(--color-text-strong); }
td.unit { color: var(--color-text-muted); white-space: nowrap; }
.table-note { color: var(--color-text-muted); font-size: var(--size-14); margin-block: var(--space-3) 0; }

.compare-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-block-end: var(--space-4); }
.compare-table { min-inline-size: 860px; }
.compare-table tbody tr:hover, .compare-table tbody tr:hover th { background: var(--blue-50); }
.row-link { display: flex; flex-direction: column; gap: 2px; text-decoration: none; min-block-size: var(--hit-target); justify-content: center; }
.row-link .product-code { color: var(--navy-900); font-size: var(--size-18); }
.row-link-title { font-size: var(--size-12); color: var(--color-text-muted); font-weight: var(--weight-regular); }
.row-link:hover .product-code { text-decoration: underline; }
.compare-table tbody th { position: sticky; inset-inline-start: 0; background: var(--color-surface); }
.compare-empty td { text-align: center; padding-block: var(--space-10); color: var(--color-text-muted); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-1); min-inline-size: min(100%, 240px); }
.field--search { flex: 1 1 280px; }
.field label { font-size: var(--size-14); font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.field .optional { font-weight: var(--weight-regular); color: var(--color-text-muted); }
input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
	min-block-size: var(--input-height); padding: var(--space-2) var(--input-padding-inline); inline-size: 100%;
	background: var(--input-bg); color: var(--input-fg); border: var(--input-border); border-radius: var(--input-radius);
	font: inherit; font-size: var(--size-16);
}
textarea { min-block-size: 8rem; resize: vertical; }
.field-hint { color: var(--hint-color); font-size: var(--size-14); margin: 0; }
.field-error { color: var(--color-danger); font-size: var(--size-14); margin: 0; }
[aria-invalid="true"] { border-color: var(--color-danger); box-shadow: 0 0 0 1px var(--color-danger); }
.form { display: grid; gap: var(--space-5); padding: var(--space-6); background: var(--color-surface); border: var(--border-subtle); border-radius: var(--radius-xl); max-inline-size: 720px; }
.form-grid { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .field--wide { grid-column: 1 / -1; } }
.form .button { justify-self: start; }
.form-hp { position: absolute; inset-inline-start: -9999px; }
.notice { padding: var(--space-4); border-radius: var(--radius-lg); font-size: 0.9375rem; max-inline-size: 720px; }
.notice--ok { background: var(--color-success-bg); color: var(--color-success); }
.notice--error { background: var(--color-danger-bg); color: var(--color-danger); }
.notice p { margin: 0; }
.notice-inline { margin: 0; padding: var(--space-3) var(--space-4); background: var(--color-warning-bg); color: var(--color-warning); border-radius: var(--radius-md); font-size: var(--size-14); max-inline-size: var(--measure); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.contact-list li { display: flex; gap: var(--space-4); align-items: flex-start; }
.contact-list .tile-icon { inline-size: 44px; block-size: 44px; }
.contact-list .tile-icon .icon { inline-size: 22px; block-size: 22px; }
.contact-list b { display: block; font-size: var(--size-14); color: var(--color-text-muted); font-weight: var(--weight-medium); }

/* ---------- Prose (editor content) ---------- */
.prose { max-inline-size: var(--measure); }
.prose > * + * { margin-block-start: var(--space-4); }
.prose > :first-child { margin-block-start: 0; }
.prose h2 { font-size: var(--size-24); margin-block-start: var(--space-10); }
.prose h3 { font-size: var(--size-20); margin-block-start: var(--space-8); }
.prose ul, .prose ol { padding-inline-start: var(--space-6); }
.prose li + li { margin-block-start: var(--space-2); }
.prose table { border-block-start: 2px solid var(--navy-900); }
.prose table th, .prose table td { padding: var(--space-3) var(--space-2); border-block-end: var(--border-hairline); }
.prose figure { margin-inline: 0; }
.prose img { border-radius: var(--radius-lg); }
.prose a { font-weight: var(--weight-semibold); }
.term-intro { margin-block-end: var(--space-8); }
.draft-notice { padding: var(--space-3) var(--space-4); background: var(--blue-50); border-inline-start: 3px solid var(--color-primary); border-radius: var(--radius-md); font-size: var(--size-14); max-inline-size: var(--measure); }

/* ---------- Articles ---------- */
.article-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.article-card { position: relative; display: flex; flex-direction: column; block-size: 100%; background: var(--color-surface); border: var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
.article-card:hover { border-color: var(--color-primary); }
.article-card img { aspect-ratio: 16 / 9; object-fit: cover; inline-size: 100%; }
.article-card-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.article-card h3 { font-size: 1.0625rem; font-weight: var(--weight-bold); line-height: 1.6; margin: 0; }
.article-card p { color: var(--color-text-muted); font-size: var(--size-14); margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.article-card time, .article time { color: var(--color-text-muted); font-size: var(--size-14); }
.card-link { color: var(--color-text-strong); text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; }
.card-link:hover { color: var(--color-primary); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-8); }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--hit-target); min-block-size: var(--hit-target); padding-inline: var(--space-3); border: var(--border-subtle); border-radius: var(--radius-md); background: var(--color-surface); text-decoration: none; }
.pagination .current { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.empty { padding: var(--space-10); text-align: center; background: var(--color-surface); border: var(--border-subtle); border-radius: var(--radius-lg); }

/* ---------- CTA band & footer ---------- */
.cta-band-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-10); }
.cta-band h2 { color: var(--white); font-size: var(--size-24); }
.cta-band p { color: var(--gray-on-navy); margin: 0; max-inline-size: var(--measure); }
.cta-band .actions { margin: 0; }
.site-footer { color: var(--gray-on-navy); font-size: var(--size-14); }
.site-footer-inner { display: grid; gap: var(--space-8); padding-block: var(--space-10) var(--space-8); }
.footer-brand img { block-size: 40px; inline-size: auto; margin-block-end: var(--space-3); }
.footer-brand p { margin: 0; }
.footer-nav .menu a { display: inline-flex; min-block-size: var(--hit-target); align-items: center; text-decoration: none; font-weight: var(--weight-semibold); }
.footer-nav .menu a:hover { text-decoration: underline; }
.footer-contact { font-style: normal; line-height: 2.2; }
.footer-contact a { font-weight: var(--weight-semibold); }
.footer-legal { padding-block: var(--space-4); border-block-start: 1px solid rgb(255 255 255 / 0.12); }
.footer-legal p { margin: 0; }
@media (min-width: 768px) { .site-footer-inner { grid-template-columns: 2fr 1fr 1.4fr; } }

@media print { .site-header, .site-footer, .cta-band, .actions, .strip { display: none !important; } }

/* Home «درباره‌ی ما» (canvas v4): sample photo in the main box, R&D and lab boxes stacked beside it */
.about-photo { inline-size: 100%; block-size: 240px; object-fit: cover; border-radius: var(--radius-lg); margin-block: var(--space-2); }
.about-side { display: flex; flex-direction: column; gap: var(--space-4); }
.box--soft { background: var(--blue-50); border-color: var(--blue-50); }
.box--soft p { color: var(--color-text-strong); }

/* ---------- Split hero (About, R&D — same as the product hero in canvas v4) ---------- */
.split-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); margin-block-start: var(--space-6); background: var(--color-bg); border: var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden; }
.split-hero-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-4); padding: var(--space-12); }
.split-hero-text h1 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; line-height: 1.35; margin: 0; }
.split-hero-text .actions { margin-block-start: var(--space-2); }
.split-hero-stats { inline-size: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.split-hero-stat { background: var(--color-surface); border: var(--border-subtle); border-radius: var(--radius-xl); padding: 14px var(--space-4); }
.split-hero-stat .v { font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 800; line-height: 1.3; color: var(--color-text-strong); white-space: nowrap; }
.split-hero-stat .l { font-size: var(--size-14); color: var(--color-text-muted); }
.split-hero-photo { position: relative; margin: 0; min-block-size: 520px; background: var(--navy-900); }
.split-hero-photo img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.split-hero-photo figcaption { position: absolute; inset-inline-end: var(--space-6); inset-block-end: var(--space-6); background: rgb(7 53 87 / 0.88); color: var(--white); font-size: var(--size-14); font-weight: var(--weight-semibold); padding: var(--space-2) 18px; border-radius: var(--radius-pill); }
@media (max-width: 900px) {
	.split-hero { grid-template-columns: 1fr; }
	.split-hero-photo { min-block-size: 260px; order: -1; }
	.split-hero-text { padding: var(--space-6) var(--space-4); }
	.split-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* About: story text beside a numbered timeline (a real sequence) */
.story-grid { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 900px) { .story-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.milestones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.milestones li { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4) var(--space-5); background: var(--color-surface); border: var(--border-subtle); border-radius: var(--radius-lg); }
.milestone-n { inline-size: 36px; block-size: 36px; flex: none; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--white); font-weight: var(--weight-bold); }
.milestones h3 { font-size: 1.0625rem; margin: 0 0 var(--space-1); }
.milestones p { font-size: 0.9375rem; line-height: 1.8; margin: 0; color: var(--color-text); }

/* R&D: three development steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.step { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); background: var(--color-surface); border: var(--border-subtle); border-radius: var(--radius-lg); }
.step-n { font-family: var(--font-outfit); font-weight: 700; color: var(--color-primary); font-size: var(--size-14); margin-block-start: var(--space-2); }
.step h3 { font-size: var(--size-18); margin: 0; }
.step p { font-size: 0.9375rem; line-height: 1.8; margin: 0; }

/* ---------- Home: one section per product family (text + grades beside a photo, sides alternate) ---------- */
.fam-list { display: flex; flex-direction: column; gap: var(--space-6); }
.fam { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); background: var(--color-bg); border: var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden; }
.fam:nth-child(even) .fam-photo { order: -1; }
.fam-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-10); }
.fam-text h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; line-height: 1.35; margin: 0; color: var(--color-text-strong); }
.fam-text p { line-height: 1.9; margin: 0; max-inline-size: var(--measure); }
.fam-text .fam-sub { margin-block-start: calc(-1 * var(--space-1)); color: var(--color-primary); font-weight: var(--weight-semibold); line-height: 1.7; }
.fam-text .tags { margin: 0; }
.fam-text .button { margin-block-start: var(--space-2); }
.fam-photo { position: relative; margin: 0; min-block-size: 360px; background: var(--navy-900); }
.fam-photo img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
@media (max-width: 900px) {
	.fam { grid-template-columns: 1fr; }
	.fam-photo, .fam:nth-child(even) .fam-photo { order: -1; min-block-size: 220px; }
	.fam-text { padding: var(--space-6) var(--space-4); }
}

/* Form draft notice: restored text + a clear link that is a real button */
.form-draft { margin-block-end: var(--space-4); }
.link-button { background: none; border: 0; padding: 0; min-block-size: var(--hit-target); font: inherit; font-weight: var(--weight-semibold); color: var(--color-primary); text-decoration: underline; cursor: pointer; }

/* ---------- Family landing: one card per grade with its key figures ---------- */
.fam-crumb { margin-block: var(--space-6) 0; }
.grades { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.grade { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-6); background: var(--color-bg); border: var(--border-subtle); border-radius: var(--radius-xl); }
.grade-code { margin: 0; font-family: var(--font-outfit); font-weight: 700; font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1; letter-spacing: -1px; color: var(--navy-900); }
.grade h3 { margin: 0; font-size: var(--size-18); line-height: 1.6; }
.grade h3 a { color: var(--color-text-strong); text-decoration: none; }
.grade h3 a:hover { color: var(--color-primary); text-decoration: underline; }
.grade-figs { inline-size: 100%; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.grade-figs div { padding: var(--space-2) var(--space-3); background: var(--color-surface); border-radius: var(--radius-md); }
.grade-figs dt { font-size: var(--size-14); color: var(--color-text-muted); }
.grade-figs dd { margin: 0; font-weight: 800; font-size: var(--size-18); color: var(--color-text-strong); white-space: nowrap; }
.grade .tags { margin: 0; }
.grade-link { margin-block-start: auto; }
.fam-guide { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.fam-guide p { margin: 0; max-inline-size: var(--measure); }
.grade-figs .pd-unit { font-size: var(--size-14); font-weight: var(--weight-regular); color: var(--color-text-muted); }