/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: linear-gradient(135deg, var(--color-header-bg) 0%, #1F2937 100%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	transition: box-shadow var(--transition-base);
}

.site-header.is-scrolled {
	box-shadow: var(--shadow-lift);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-3);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

.site-branding__name {
	font-weight: 700;
	letter-spacing: var(--tracking-tight);
	color: #fff;
}

.site-branding__tagline {
	font-size: var(--fs-caption);
	letter-spacing: var(--tracking-wide);
	color: rgba(255, 255, 255, 0.82);
}

.primary-nav__list a {
	position: relative;
	font-size: var(--fs-small);
	color: rgba(255, 255, 255, 0.85);
}

.primary-nav__list a:hover {
	color: var(--color-gold-light);
}

.site-header .icon-button {
	color: rgba(255, 255, 255, 0.85);
}

.site-header .icon-button:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--color-gold-light);
}

/* Mobile menu toggle: hidden on desktop, shown only under the breakpoint
   where the nav collapses (see the mobile block near the bottom of this
   file, kept together with the other header mobile rules for review). */
.site-header__menu-toggle {
	display: none;
}

.site-header__menu-toggle .icon-close {
	display: none;
}

.site-header.nav-is-open .site-header__menu-toggle .icon-menu {
	display: none;
}

.site-header.nav-is-open .site-header__menu-toggle .icon-close {
	display: inline-block;
}

/* The search panel stays a light, readable surface regardless of the
   navy header above it — it's a distinct UI surface, not part of the bar. */
.site-search {
	background: var(--color-card);
	border-bottom: 1px solid var(--color-border);
	padding-block: var(--space-3);
}

/* Mobile header: collapse the full nav (7 items + dropdowns) behind a
   hamburger toggle instead of letting it wrap onto multiple lines, which
   was stretching the header into a tall, squarish block on small screens. */
@media (max-width: 860px) {
	.site-header__menu-toggle {
		display: inline-flex;
	}

	.primary-nav {
		position: absolute;
		inset-inline: 0;
		top: 100%;
		max-height: 0;
		overflow: hidden;
		background: var(--color-header-bg);
		transition: max-height var(--transition-base);
	}

	.site-header.nav-is-open .primary-nav {
		max-height: 80vh;
		overflow-y: auto;
	}

	.primary-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--space-2) var(--space-4) var(--space-4);
	}

	.primary-nav__list > .menu-item {
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	.primary-nav__list > .menu-item > a {
		display: block;
		padding-block: var(--space-3);
	}

	.primary-nav__list > .menu-item > a::after {
		display: none;
	}

	.primary-nav__list .sub-menu {
		position: static;
		box-shadow: none;
		margin-top: 0;
		margin-bottom: var(--space-2);
		animation: none;
		min-width: 0;
	}

	.primary-nav__list .sub-menu .menu-item a {
		white-space: normal;
	}
}

.site-branding__link {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.site-branding__logo {
	display: inline-flex;
	width: 42px;
	height: 42px;
	align-items: center;
	justify-content: center;
	transition: transform var(--transition-base);
}

.site-branding__logo .icon-illustration {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.site-branding__link:hover .site-branding__logo {
	transform: scale(1.06);
}

.site-branding__text {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}

.primary-nav__list {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	flex-wrap: wrap;
}

.primary-nav__list > .menu-item > a {
	padding-block: var(--space-1);
}

.primary-nav__list > .menu-item > a::after {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	bottom: -2px;
	width: 0;
	height: 1.5px;
	background: var(--color-gold);
	transition: width var(--transition-base);
}

.primary-nav__list > .menu-item > a:hover::after {
	width: 100%;
}

/* Dropdown submenus (یادداشت‌ها categories).
   Class names match wp_nav_menu()'s own output so a real menu with nested
   items in Appearance > Menus gets the same behavior for free. */

.primary-nav__list .menu-item-has-children {
	position: relative;
}

.primary-nav__list .menu-item-has-children > a::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-inline-end: var(--space-1);
	border-inline-end: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: rotate(45deg);
	vertical-align: middle;
	transition: transform var(--transition-fast);
}

.primary-nav__list .menu-item-has-children:hover > a::before,
.primary-nav__list .menu-item-has-children.is-open > a::before {
	transform: rotate(225deg);
}

.primary-nav__list .sub-menu {
	display: none;
	position: absolute;
	inset-inline-start: 0;
	top: 100%;
	min-width: 230px;
	margin-top: 0;
	padding: var(--space-3) var(--space-2) var(--space-2);
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lift);
	z-index: 20;
	animation: legalpro-dropdown-in var(--transition-base);
}

@keyframes legalpro-dropdown-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

/* The dropdown panel is always a light/card surface (even under the navy
   header), so its links must never inherit the header's light-on-navy
   text color. !important is deliberate here — this one rule guards
   against literally any other nav-link color rule leaking in. */
.primary-nav__list .sub-menu .menu-item a {
	display: block;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	white-space: nowrap;
	color: var(--color-text) !important;
}

.primary-nav__list .sub-menu .menu-item a::after {
	display: none;
}

.primary-nav__list .sub-menu .menu-item a:hover {
	background: var(--color-bg);
	color: var(--color-gold-text);
}

.primary-nav__list .menu-item-has-children:hover > .sub-menu,
.primary-nav__list .menu-item-has-children:focus-within > .sub-menu,
.primary-nav__list .menu-item-has-children.is-open > .sub-menu {
	display: block;
}

/* ==========================================================================
   Hero — split panel: text left / image right (physical positions,
   independent of RTL — see the forced `direction: ltr` on .hero-split
   itself, with `direction: rtl` set back on the text panel so Persian
   copy still reads and aligns correctly inside it). The curved boundary
   is a single clip-path on the image layer (#legalpro-hero-split-mask,
   defined once in header.php, objectBoundingBox units so it stays
   correct at any size) — the media panel's own white background shows
   through wherever the clip leaves the image short, which is what
   creates the "white panel curving into the photo" look with zero extra
   markup.
   ========================================================================== */

.hero-split {
	direction: ltr;
	display: flex;
	min-height: 442px;
	overflow: hidden;
	background: var(--color-card);
}

.hero-split__text {
	direction: rtl;
	width: 46%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-5) var(--space-6);
}

.hero-split__text-inner {
	max-width: 460px;
}

.hero-split__title {
	position: relative;
	padding-inline-start: var(--space-3);
}

.hero-split__title::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	top: 0.25em;
	bottom: 0.25em;
	width: 3px;
	background: var(--color-gold);
}

.hero-split__subtitle {
	color: var(--color-text-muted);
	max-width: 42ch;
	text-align: justify;
	text-align-last: right;
}

.hero-split__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-gold-text);
	font-weight: 500;
	width: fit-content;
	transition: gap var(--transition-fast), color var(--transition-fast);
}

.hero-split__link:hover {
	gap: var(--space-3);
	color: var(--color-gold-text);
}

.hero-split__media {
	position: relative;
	width: 54%;
	background: var(--color-card);
}

.hero-split__image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 30%;
	background-repeat: no-repeat;
	clip-path: url(#legalpro-hero-split-mask);
}

@media (max-width: 860px) {
	.hero-split {
		direction: rtl;
		flex-direction: column;
		min-height: 0;
	}

	.hero-split__text {
		direction: rtl;
		width: 100%;
		padding: var(--space-5) var(--space-4);
	}

	.hero-split__text-inner {
		max-width: none;
	}

	.hero-split__media {
		width: 100%;
		height: 31.7vh;
		min-height: 179px;
	}

	.hero-split__image {
		clip-path: none;
		border-radius: 0 0 var(--radius-lg) 64px;
	}
}

/* ==========================================================================
   Sections (shared)
   ========================================================================== */

.section {
	padding-block: var(--space-6);
}

.section__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-5);
}

.section__header-title {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.section__header-title .section__title {
	margin-bottom: 0;
}

.section__see-all {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-small);
	color: var(--color-text-muted);
	transition: gap var(--transition-fast), color var(--transition-fast);
}

.section__see-all:hover {
	gap: var(--space-3);
	color: var(--color-gold-text);
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-gold-text);
	font-weight: 500;
	transition: gap var(--transition-fast), color var(--transition-fast);
}

.link-arrow:hover {
	gap: var(--space-3);
	color: var(--color-gold-text);
}

/* ==========================================================================
   Homepage «آموزش» / «ابزارها» panels — stacked full-width sections
   (see front-page.php), each led by a small stat badge (icon + title)
   above its intro copy. .section--panel is the shared light-card
   background; reused by both panels rather than one grid class per row.
   ========================================================================== */

.section--panel {
	background: var(--color-card);
}

.panel-intro {
	margin-bottom: var(--space-4);
}

.stat-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.stat-badge__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	flex-shrink: 0;
}

.stat-badge__icon .icon-illustration {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.stat-badge__icon .icon {
	width: 28px;
	height: 28px;
	color: var(--color-gold);
}

/* ==========================================================================
   ابزارها — homepage tools grid, two rectangular cards per row.
   ========================================================================== */

/* ==========================================================================
   ابزارها — homepage tools panel: one row of icon buttons (icon +
   short label), wrapping on narrow screens.
   ========================================================================== */

.tools-icon-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
}

.tool-icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	width: 108px;
	text-align: center;
}

.tool-icon__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(47, 92, 147, 0.1);
	transition: background var(--transition-fast), transform var(--transition-fast);
}

.tool-icon__badge .icon {
	width: 28px;
	height: 28px;
	color: var(--color-gold);
}

.tool-icon:hover .tool-icon__badge {
	background: var(--color-gold);
	transform: translateY(-3px);
}

.tool-icon:hover .tool-icon__badge .icon {
	color: #fff;
}

.tool-icon__label {
	font-size: var(--fs-small);
	font-weight: 500;
	color: var(--color-text);
	line-height: 1.35;
}

.stat-badge__text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.stat-badge__number {
	font-size: var(--fs-h3);
	font-weight: 700;
	letter-spacing: var(--tracking-tight);
	color: var(--color-primary);
}

.stat-badge__label {
	font-size: var(--fs-caption);
	color: var(--color-text-muted);
}

.category-list {
	margin-bottom: var(--space-4);
}

.category-list__item {
	border-bottom: 1px solid var(--color-border);
}

.category-list__item:last-child {
	border-bottom: 0;
}

.category-list__item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding-block: var(--space-3);
	font-size: var(--fs-small);
	transition: color var(--transition-fast), gap var(--transition-fast);
}

.category-list__item a:hover {
	color: var(--color-gold-text);
	gap: var(--space-3);
}

.category-list__item a .icon {
	flex-shrink: 0;
	color: var(--color-gold);
	font-size: 0.75rem;
}

/* ==========================================================================
   Educational strip
   ========================================================================== */

.chip-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-3);
}

/* ==========================================================================
   Quote banner
   ========================================================================== */

.quote-banner {
	position: relative;
	background: linear-gradient(160deg, var(--color-gold) 0%, var(--color-gold-light) 100%);
	color: #fff;
	padding-block: var(--space-7);
	overflow: hidden;
}

.quote-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 15% 20%, rgba(47, 92, 147, 0.16), transparent 45%);
	pointer-events: none;
}

.quote-banner__text {
	position: relative;
	margin: 0;
	max-width: 60ch;
	margin-inline: auto;
	text-align: center;
	font-size: var(--fs-h3);
	line-height: var(--lh-heading);
}

.quote-banner__mark {
	display: block;
	font-size: 2.5rem;
	line-height: 1;
	color: var(--color-gold-light);
	margin-bottom: var(--space-3);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	position: relative;
	background: var(--color-gold-dark);
	color: #D1D5DB;
}

.site-footer::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.footer-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
	padding-block: var(--space-6);
}

.footer-col__title {
	color: #fff;
	font-size: var(--fs-h3);
	margin-bottom: var(--space-3);
}

.footer-contact-list li,
.footer-link-list li {
	margin-bottom: var(--space-2);
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-small);
}

.footer-contact-list .icon {
	color: var(--color-gold-light);
}

.footer-link-list a:hover,
.footer-contact-list a:hover {
	color: var(--color-gold-light);
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom__inner {
	padding-block: var(--space-3);
	text-align: center;
	font-size: var(--fs-caption);
	color: #9CA3AF;
}

/* ==========================================================================
   Footer newsletter form
   ========================================================================== */

.footer-newsletter__intro {
	font-size: var(--fs-small);
	color: #9CA3AF;
	margin-bottom: var(--space-3);
}

.footer-newsletter__field {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--radius-full);
	padding-inline-start: var(--space-4);
	transition: border-color var(--transition-fast);
}

.footer-newsletter__field:focus-within {
	border-color: var(--color-gold-light);
}

.footer-newsletter__field input {
	flex: 1;
	background: none;
	border: 0;
	padding-block: var(--space-2);
	color: #fff;
	font-family: inherit;
	font-size: var(--fs-small);
}

.footer-newsletter__field input::placeholder {
	color: #9CA3AF;
}

.footer-newsletter__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	margin: 3px;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--color-gold-light), var(--color-gold) 55%, var(--color-gold-dark));
	color: #fff;
	transition: transform var(--transition-fast);
}

.footer-newsletter__submit:hover {
	transform: scale(1.08);
}

.footer-newsletter .notice {
	margin-bottom: var(--space-3);
}

@media (max-width: 860px) {
	.footer-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 520px) {
	.footer-grid {
		grid-template-columns: 1fr;
	}
}


/* ==========================================================================
   v16 — Homepage visual refinement
   Header follows the approved editorial reference: white, quiet and airy.
   Hero is a full-bleed image with readable brand/search overlay.
   ========================================================================== */

.site-header {
	background: rgba(255, 255, 255, 0.98);
	border-bottom: 1px solid var(--color-border);
	backdrop-filter: blur(10px);
}

.site-branding__name,
.primary-nav__list a,
.site-header .icon-button {
	color: var(--color-primary);
}

.site-branding__tagline {
	color: var(--color-text-muted);
}

.primary-nav__list a:hover,
.site-header .icon-button:hover {
	color: var(--color-gold-text);
	background: rgba(47, 92, 147, 0.06);
}

.site-header__menu-toggle {
	color: var(--color-primary);
}

/* Full-bleed hero */
.hero-split.hero-split--overlay {
	position: relative;
	display: block;
	min-height: 520px;
	overflow: hidden;
	direction: rtl;
	background: #0f2743;
}

.hero-split--overlay .hero-split__media,
.hero-split--overlay .hero-split__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hero-split--overlay .hero-split__image {
	background-position: center 38%;
	clip-path: none;
}

.hero-split__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(10, 31, 53, 0.10) 0%, rgba(10, 31, 53, 0.15) 22%, rgba(10, 31, 53, 0.25) 44%, rgba(10, 31, 53, 0.42) 66%, rgba(10, 31, 53, 0.60) 84%, rgba(10, 31, 53, 0.68) 100%),
		linear-gradient(180deg, rgba(8, 24, 42, 0.06) 0%, rgba(8, 24, 42, 0.30) 100%);
	pointer-events: none;
}

.hero-split__content {
	position: relative;
	z-index: 2;
	min-height: 520px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.hero-split__identity {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: var(--space-4);
	color: #fff;
	text-shadow: 0 2px 16px rgba(0,0,0,.22);
}

.hero-split__identity-name {
	font-family: var(--font-heading);
	font-size: clamp(1.8rem, 1.4rem + 1.8vw, 3rem);
	font-weight: 900;
	line-height: 1.05;
}

.hero-split__identity-tagline {
	margin-top: .45rem;
	font-size: var(--fs-small);
	color: rgba(255,255,255,.9);
}

.hero-split--overlay .hero-split__text-inner {
	max-width: 780px;
}

.hero-split--overlay .hero-split__title {
	padding-inline-start: 0;
	color: #fff;
	font-size: clamp(2rem, 1.5rem + 2.8vw, 4rem);
	line-height: 1.22;
	text-shadow: 0 3px 22px rgba(0,0,0,.28);
}

.hero-split--overlay .hero-split__title::before {
	display: none;
}

.hero-split--overlay .hero-split__subtitle {
	max-width: 62ch;
	color: rgba(255,255,255,.92);
	text-align: right;
	text-shadow: 0 2px 12px rgba(0,0,0,.2);
}

.hero-search {
	display: flex;
	align-items: center;
	width: min(760px, 100%);
	min-height: 68px;
	margin-top: var(--space-5);
	padding: 6px;
	background: rgba(255,255,255,.98);
	border: 1px solid rgba(255,255,255,.75);
	border-radius: 16px;
	box-shadow: 0 18px 50px rgba(7, 25, 44, .18);
}

.hero-search .icon {
	flex: 0 0 auto;
	width: 21px;
	height: 21px;
	margin-inline: var(--space-3);
	background-color: var(--color-text-muted);
}

.hero-search input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 56px;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--color-text);
	font: inherit;
	font-size: var(--fs-small);
}

.hero-search input::placeholder {
	color: #8a94a3;
}

.hero-search button {
	flex: 0 0 auto;
	min-height: 54px;
	padding-inline: 28px;
	border-radius: 11px;
	background: var(--color-primary);
	color: #fff;
	font-size: var(--fs-small);
	font-weight: 600;
}

.hero-search button:hover {
	background: var(--color-gold-dark);
	transform: translateY(-1px);
}

/* Newsletter moved below tools */
.homepage-newsletter {
	padding-block: var(--space-5);
	background: var(--color-bg);
}

.homepage-newsletter__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.5rem);
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: linear-gradient(135deg, #0f3156 0%, #173f69 58%, #245784 100%);
	color: #fff;
	box-shadow: var(--shadow-lift);
}

.homepage-newsletter__inner::before {
	content: '✦';
	position: absolute;
	inset-inline-start: 5%;
	top: 8%;
	font-size: 7rem;
	line-height: 1;
	color: rgba(255,255,255,.05);
	transform: rotate(-18deg);
	pointer-events: none;
}

.homepage-newsletter__copy {
	position: relative;
	z-index: 1;
	max-width: 620px;
}

.homepage-newsletter__eyebrow {
	display: inline-block;
	margin-bottom: var(--space-2);
	font-size: var(--fs-caption);
	color: rgba(255,255,255,.7);
}

.homepage-newsletter__copy h2 {
	color: #fff;
	margin-bottom: var(--space-2);
}

.homepage-newsletter__copy p {
	margin: 0;
	color: rgba(255,255,255,.78);
	font-size: var(--fs-small);
}

.homepage-newsletter__form-wrap {
	position: relative;
	z-index: 1;
	width: min(440px, 100%);
	flex: 0 0 auto;
}

.homepage-newsletter__field {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: 5px;
	background: #fff;
	border: 1px solid rgba(255,255,255,.3);
	border-radius: 14px;
}

.homepage-newsletter__field input {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding-inline: var(--space-3);
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--color-text);
	font: inherit;
	font-size: var(--fs-small);
}

.homepage-newsletter__field button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 48px;
	padding-inline: 20px;
	border-radius: 10px;
	background: var(--color-primary);
	color: #fff;
	font-size: var(--fs-small);
	font-weight: 600;
}

.homepage-newsletter__field button:hover {
	background: var(--color-gold-dark);
}

.homepage-newsletter .notice {
	margin-bottom: var(--space-2);
}

@media (max-width: 760px) {
	.hero-split.hero-split--overlay {
		min-height: 560px;
	}

	.hero-split__content {
		min-height: 560px;
		align-items: stretch;
	}

	.hero-split--overlay .hero-split__text-inner {
		max-width: none;
	}

	.hero-search {
		min-height: 62px;
	}

	.hero-search input[type="search"] {
		height: 50px;
	}

	.hero-search button {
		min-height: 50px;
		padding-inline: 18px;
	}

	.homepage-newsletter__inner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-4);
	}

	.homepage-newsletter__form-wrap {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.hero-split.hero-split--overlay {
		min-height: 600px;
	}

	.hero-split__content {
		min-height: 600px;
		padding-block: 3rem;
	}

	.hero-split--overlay .hero-split__title {
		font-size: 2rem;
	}

	.hero-search {
		border-radius: 13px;
	}

	.hero-search .icon {
		margin-inline: .7rem;
	}

	.hero-search button {
		padding-inline: 14px;
	}

	.homepage-newsletter__field button span:first-child {
		display: inline;
	}
}

/* v16 — footer no longer contains newsletter; keep a clean two-column base. */
.footer-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 860px) {
	.footer-grid { grid-template-columns: 1fr; }
}

/* رویه نگر — اختصاصی‌سازی آیکون‌های بخش‌ها و ابزارها */
.section-icon-illustration{display:block;width:42px;height:42px;object-fit:contain}
.tool-icon__badge{background:rgba(247,248,250,.92);border:1px solid var(--color-border);box-shadow:var(--shadow-xs)}
.tool-icon__image{display:block;width:58px;height:58px;object-fit:contain;transition:transform var(--transition-fast)}
.tool-icon:hover .tool-icon__badge{background:rgba(247,248,250,1);transform:translateY(-3px)}
.tool-icon:hover .tool-icon__image{transform:scale(1.04)}
.sidebar-tool-icon{display:block;width:28px;height:28px;object-fit:contain;flex:0 0 28px}
.stat-badge__icon .section-icon-illustration{width:48px;height:48px}


/* V23 — large tool icon strip */
.tools-icon-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(18px,3vw,36px);width:min(1120px,100%);margin-inline:auto}
.tool-icon{width:auto;min-width:0;padding:var(--space-3) var(--space-2);gap:var(--space-3);border:1px solid transparent;border-radius:var(--radius-lg);transition:background var(--transition-base),border-color var(--transition-base),transform var(--transition-base)}
.tool-icon__badge{width:clamp(92px,9vw,128px);height:clamp(92px,9vw,128px);border-radius:50%;background:rgba(47,92,147,.07);border:1px solid rgba(47,92,147,.1)}
.tool-icon__badge .icon-illustration{width:72%;height:72%;object-fit:contain}.tool-icon__label{font-size:clamp(.78rem,.9vw,.95rem);font-weight:700;line-height:1.5}.tool-icon:hover{background:var(--color-card);border-color:var(--color-border);transform:translateY(-3px)}.tool-icon:hover .tool-icon__badge{background:rgba(194,148,58,.12);transform:none}.tool-icon:hover .tool-icon__badge .icon-illustration{filter:none}
@media (max-width:900px){.tools-icon-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.tools-icon-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.tool-icon__badge{width:88px;height:88px}}

/* V24 — minimal, user-friendly footer */
.site-footer{background:#0E1B2A;color:rgba(255,255,255,.76);border-top:1px solid rgba(255,255,255,.08)}
.site-footer::before{height:1px;background:linear-gradient(90deg,transparent,rgba(196,154,74,.55),transparent)}
.footer-shell{display:grid;grid-template-columns:minmax(260px,1.2fr) minmax(0,1.8fr);gap:clamp(40px,7vw,100px);padding-block:clamp(42px,6vw,68px)}
.footer-brand{display:inline-flex;align-items:center;gap:12px;color:#fff}
.footer-brand:hover{color:#fff}
.footer-brand__mark{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;color:var(--color-gold-light)}
.footer-brand strong{display:block;font-family:var(--font-heading);font-size:1.25rem;line-height:1.3}
.footer-brand small{display:block;margin-top:4px;color:rgba(255,255,255,.55);font-size:.72rem}
.footer-brand__description{max-width:38ch;margin:18px 0 0;color:rgba(255,255,255,.62);font-size:.88rem;line-height:2}
.footer-links-block{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.footer-col__title{margin:0 0 16px;color:#fff;font-size:.95rem}
.footer-link-group>a{display:block;width:fit-content;margin-bottom:10px;color:rgba(255,255,255,.68);font-size:.84rem;transition:color var(--transition-fast),transform var(--transition-fast)}
.footer-link-group>a:hover{color:var(--color-gold-light);transform:translateX(-2px)}
.footer-link-group .footer-link-list{margin:0;padding:0;list-style:none}
.footer-link-group .footer-link-list li{margin:0 0 10px}
.footer-link-group .footer-link-list a{color:rgba(255,255,255,.68);font-size:.84rem}
.footer-link-group .footer-link-list a:hover{color:var(--color-gold-light)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08)}
.footer-bottom__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:16px;color:rgba(255,255,255,.48);font-size:.72rem}
.footer-bottom__legal{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.footer-bottom__legal a{color:rgba(255,255,255,.58)}
.footer-bottom__legal a:hover{color:var(--color-gold-light)}
.footer-bottom__copy{margin:0}

/* V24 — center the آموزش / ابزارها section titles on the homepage. */
.education-panel>.panel-intro,.tools-panel>.panel-intro{display:flex;justify-content:center;text-align:center}
.education-panel>.panel-intro .stat-badge,.tools-panel>.panel-intro .stat-badge{justify-content:center}

@media (max-width:860px){
 .footer-shell{grid-template-columns:1fr;gap:34px}
 .footer-links-block{gap:28px}
 .footer-bottom__inner{align-items:flex-start;flex-direction:column}
}
@media (max-width:560px){.footer-links-block{grid-template-columns:1fr}.footer-bottom__legal{gap:7px}}

/* v25 — Hero image fades from left into a clean white reading area on the right. */
.hero-split.hero-split--overlay {
	background: #fff;
}

.hero-split--overlay .hero-split__overlay {
	background: linear-gradient(90deg,
		rgba(255,255,255,0) 0%,
		rgba(255,255,255,.06) 28%,
		rgba(255,255,255,.42) 53%,
		rgba(255,255,255,.82) 70%,
		rgba(255,255,255,.98) 84%,
		#fff 100%);
}

.hero-split--overlay .hero-split__identity {
	color: var(--color-primary);
	text-shadow: none;
}

.hero-split--overlay .hero-split__identity-name {
	color: var(--color-primary);
}

.hero-split--overlay .hero-split__identity-tagline {
	color: var(--color-text-muted);
}

.hero-split--overlay .hero-split__title {
	color: var(--color-primary);
	text-shadow: none;
}

.hero-split--overlay .hero-split__subtitle {
	color: var(--color-text-muted);
	text-shadow: none;
}

@media (max-width: 760px) {
	.hero-split--overlay .hero-split__overlay {
		background: linear-gradient(180deg,
			rgba(255,255,255,.02) 0%,
			rgba(255,255,255,.34) 38%,
			rgba(255,255,255,.84) 68%,
			#fff 88%);
	}
}


/* V31: softer, earlier hero fade into the light content area */
.hero::after,.front-hero::after,.hero-section::after{
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.03) 18%, rgba(255,255,255,.16) 34%, rgba(255,255,255,.42) 50%, rgba(255,255,255,.72) 66%, rgba(255,255,255,.92) 82%, rgba(255,255,255,1) 100%) !important;
}
@media (max-width:760px){
  .hero::after,.front-hero::after,.hero-section::after{background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.18) 38%,rgba(255,255,255,.68) 72%,rgba(255,255,255,.96) 100%) !important}
}