/*
Theme Name: پورتفولیو احسان‌فر
Description: قالب اختصاصی پورتفولیو احسان‌فر.
Version: 0.3.2
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: ehsanfar-portfolio
*/

:root {
	--neutral-950: #101714;
	--neutral-900: #18211d;
	--neutral-700: #45534c;
	--neutral-500: #6d7a73;
	--neutral-300: #bdc7c1;
	--neutral-200: #dce2de;
	--neutral-100: #edf0ee;
	--neutral-050: #f7f8f5;
	--surface: #ffffff;
	--accent-700: #075943;
	--accent-600: #087458;
	--accent-100: #dcefe7;
	--focus: #c94f18;
	--text-xs: clamp(0.78rem, 0.75rem + 0.12vw, 0.86rem);
	--text-sm: clamp(0.9rem, 0.86rem + 0.16vw, 1rem);
	--text-base: clamp(1rem, 0.95rem + 0.22vw, 1.13rem);
	--text-lg: clamp(1.25rem, 1.08rem + 0.7vw, 1.7rem);
	--text-xl: clamp(1.8rem, 1.35rem + 1.8vw, 3rem);
	--text-display: clamp(3rem, 1.9rem + 5vw, 6.8rem);
	--space-1: 0.4rem;
	--space-2: 0.75rem;
	--space-3: 1.25rem;
	--space-4: 2rem;
	--space-5: clamp(3rem, 6vw, 6rem);
	--space-6: clamp(5rem, 10vw, 9rem);
	--content-width: 78rem;
	--readable-width: 65ch;
	--header-height: 5rem;
	--header-top-offset: var(--wp-admin--admin-bar--height, 0px);
	--section-viewport-offset: calc(var(--header-height) + var(--wp-admin--admin-bar--height, 0px));
	--hero-viewport-offset: var(--section-viewport-offset);
	--scroll-padding-offset: var(--section-viewport-offset);
	--radius-sm: 0.35rem;
	--radius: 0.75rem;
	--radius-lg: 1.5rem;
	--border: 1px solid var(--neutral-200);
	--shadow: 0 1.5rem 4rem rgb(16 23 20 / 9%);
	--duration: 180ms;
	--ease: cubic-bezier(0.2, 0.75, 0.25, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.portfolio-front-page { scroll-padding-block-start: var(--scroll-padding-offset); scroll-snap-type: y mandatory; }
body {
	margin: 0;
	color: var(--neutral-950);
	background: var(--neutral-050);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: var(--text-base);
	line-height: 1.7;
	overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.22em; }
:focus-visible { outline: 0.2rem solid var(--focus); outline-offset: 0.22rem; }
.skip-link {
	position: fixed; z-index: 100; inset-block-start: var(--space-2); inset-inline-start: var(--space-2);
	padding: var(--space-2) var(--space-3); color: #fff; background: #000; transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.site-header {
	position: sticky; z-index: 50; inset-block-start: var(--header-top-offset); min-height: var(--header-height);
	border-block-end: var(--border); background: rgb(247 248 245 / 94%); backdrop-filter: blur(0.65rem);
}
.header-inner {
	display: flex; align-items: center; gap: clamp(0.7rem, 2vw, 1.75rem);
	width: min(calc(100% - 2 * var(--space-3)), var(--content-width)); min-height: var(--header-height); margin-inline: auto;
}
.site-branding { font-weight: 850; letter-spacing: -0.025em; text-decoration: none; white-space: nowrap; }
.primary-navigation { margin-inline-start: auto; }
.primary-navigation ul { display: flex; align-items: center; gap: clamp(0.6rem, 1.7vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
.primary-navigation a {
	display: block; padding-block: 0.45rem; border-block-end: 2px solid transparent;
	color: var(--neutral-700); font-size: var(--text-sm); font-weight: 700; text-decoration: none;
	transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.primary-navigation a:hover, .primary-navigation a[aria-current] { color: var(--accent-700); border-color: currentColor; }
.language-switcher { display: flex; align-items: center; gap: 0.35rem; white-space: nowrap; font-size: var(--text-xs); }
.language-switcher a { padding: 0.25rem; }
.language-switcher a[aria-current="page"] { color: var(--accent-700); font-weight: 850; }
.menu-toggle {
	display: none; margin-inline-start: auto; padding: 0.55rem 0.7rem; border: var(--border); border-radius: var(--radius-sm);
	color: inherit; background: var(--surface); font: inherit;
}
.menu-toggle-icon, .menu-toggle-icon::before, .menu-toggle-icon::after { display: block; width: 1.2rem; height: 2px; background: currentColor; }
.menu-toggle-icon { position: relative; margin-inline-start: 0.5rem; }
.menu-toggle-icon::before, .menu-toggle-icon::after { content: ""; position: absolute; inset-inline-start: 0; }
.menu-toggle-icon::before { inset-block-start: -0.38rem; }
.menu-toggle-icon::after { inset-block-start: 0.38rem; }

.site-main { width: min(calc(100% - 2 * var(--space-3)), var(--content-width)); margin-inline: auto; padding-block: var(--space-6); }
.home-main { width: 100%; max-width: none; padding: 0; }
.home-section {
	display: grid;
	align-items: center;
	min-height: calc(100svh - var(--section-viewport-offset));
	padding-block: var(--space-6);
	border-block-end: var(--border);
	scroll-margin-block-start: 0;
	scroll-snap-align: start;
}
.section-inner { width: min(calc(100% - 2 * var(--space-3)), var(--content-width)); margin-inline: auto; }
h1, h2, h3 { margin-block: 0 0.65em; line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
h1 { max-width: 16ch; font-size: var(--text-display); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p { max-width: var(--readable-width); }
.eyebrow { color: var(--accent-700); font-size: var(--text-xs); font-weight: 850; letter-spacing: 0.14em; text-transform: uppercase; }
[dir="rtl"] .eyebrow { letter-spacing: 0; }

.hero-section { position: relative; min-height: calc(100svh - var(--hero-viewport-offset)); overflow: clip; background: var(--neutral-950); color: var(--neutral-050); }
.hero-section::before {
	content: ""; position: absolute; inset-block: 0; inset-inline-end: max(2rem, calc((100vw - var(--content-width)) / 2)); width: 22vw;
	border-inline: 1px solid rgb(255 255 255 / 8%); background: repeating-linear-gradient(0deg, transparent 0 3.9rem, rgb(255 255 255 / 5%) 4rem);
}
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.65fr); align-items: center; gap: var(--space-5); }
.hero-content { position: relative; z-index: 1; }
.hero-content h1 { color: #fff; }
.hero-title { margin-block: 0 var(--space-3); color: #8fd9bd; font-size: var(--text-lg); font-weight: 750; }
.hero-introduction { color: #c0cbc5; font-size: var(--text-base); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-4); }
.button {
	display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.65rem 1.2rem;
	border: 1px solid var(--accent-600); border-radius: var(--radius-sm); font-weight: 800; text-decoration: none;
	transition: color var(--duration) var(--ease), background var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: var(--accent-600); }
.button-primary:hover { background: var(--accent-700); }
.button-secondary { color: var(--accent-700); background: transparent; }
.hero-section .button-secondary { color: #fff; border-color: #66736d; }
.hero-section .button-secondary:hover { border-color: #fff; }
.hero-portrait {
	position: relative; width: min(100%, 27rem); aspect-ratio: 4 / 5; margin-inline: auto; isolation: isolate;
	box-shadow: 1.25rem 1.25rem 0 #24332c; background: #23322b;
}
.hero-portrait::before { content: ""; position: absolute; z-index: 1; inset: 0.8rem; border: 1px solid rgb(255 255 255 / 30%); pointer-events: none; }
.portrait-image { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.75) contrast(1.04); }
.portrait-fallback { min-height: 22rem; background: repeating-linear-gradient(135deg, #1b2822 0 1px, transparent 1px 1.2rem); }
.portrait-fallback::after { content: "</>"; position: absolute; inset: 0; display: grid; place-items: center; color: #80c9ad; font-size: var(--text-xl); font-weight: 850; }

.expertise-grid { display: grid; grid-template-columns: repeat(12, 1fr); border-block-start: 2px solid var(--neutral-950); }
.expertise-card {
	grid-column: span 4; min-width: 0; padding: var(--space-4) clamp(1rem, 3vw, 2.5rem); border-block-end: var(--border); border-inline-end: var(--border);
	transition: background var(--duration) var(--ease);
}
.expertise-card:nth-child(3n) { border-inline-end: 0; }
.expertise-card:hover, .expertise-card:focus-within { background: var(--surface); }
.expertise-icon { display: inline-grid; min-width: 2.8rem; height: 2.8rem; margin-block-end: var(--space-4); place-items: center; border-block: 2px solid var(--accent-600); color: var(--accent-700); font-family: ui-monospace, monospace; font-weight: 850; }
.expertise-card p { color: var(--neutral-700); }
.expertise-card ul { display: flex; flex-wrap: wrap; gap: 0.45rem 1rem; margin-block-start: var(--space-3); padding: 0; color: var(--neutral-700); font-size: var(--text-sm); list-style: none; }
.expertise-card li::before { content: "/"; margin-inline-end: 0.4rem; color: var(--accent-600); font-weight: 900; }

.projects-section { background: var(--neutral-100); }
.project-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-4); margin: var(--space-4) 0; padding: 0; list-style: none; }
.project-grid > li { grid-column: span 6; min-width: 0; }
.project-card { display: grid; height: 100%; border-block-start: 3px solid var(--neutral-950); }
.project-card-image { aspect-ratio: 16 / 9; overflow: hidden; background: var(--neutral-200); }
.project-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration) var(--ease); }
.project-card:hover .project-card-image img, .project-card:focus-within .project-card-image img { transform: scale(1.02); }
.project-card-content { display: flex; flex-direction: column; padding-block: var(--space-3); }
.project-card-content h3 { margin-block-end: var(--space-2); }
.project-card-content h3 a { text-decoration: none; }
.project-card-content h3 a:hover { color: var(--accent-700); }
.project-card-content > p { margin-block: 0 var(--space-3); color: var(--neutral-700); }
.project-year { order: -1; color: var(--neutral-500) !important; font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.project-tags, .technology-list, .project-external-links { display: flex; flex-wrap: wrap; gap: 0.45rem 0.75rem; margin-block: var(--space-2); padding: 0; list-style: none; }
.project-tags { order: -2; }
.project-tags li { color: var(--accent-700); font-size: var(--text-xs); font-weight: 800; }
.project-tags a { text-decoration: none; }
.technology-list li { padding: 0.15rem 0.55rem; border: var(--border); border-radius: 999px; background: var(--neutral-050); font-size: var(--text-xs); }
.project-card-action { align-self: flex-start; margin-block-start: auto; padding-block-start: var(--space-3); color: var(--accent-700); font-weight: 850; }
.project-card-action::after { content: " →"; }
[dir="rtl"] .project-card-action::after { content: " ←"; }
.archive-action { margin-block-start: var(--space-4); }

.section-muted { background: var(--surface); }
.experience-list { border-block-start: 2px solid var(--neutral-950); }
.experience-item { display: grid; grid-template-columns: minmax(10rem, 0.35fr) minmax(0, 1fr); column-gap: var(--space-5); padding-block: var(--space-4); border-block-end: var(--border); }
.experience-item h3, .experience-item p { grid-column: 2; }
.experience-dates { grid-row: 1 / span 3; display: flex; flex-wrap: wrap; gap: 0.4rem; color: var(--neutral-500); font-size: var(--text-sm); }
.experience-company { margin-block-start: -0.6rem; color: var(--accent-700); font-weight: 750; }
.contact-section {
	position: relative;
	isolation: isolate;
	color: var(--neutral-050);
	background: var(--neutral-950);
	overflow: clip;
}
.contact-section::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block: 0;
	inset-inline-end: clamp(1rem, 7vw, 7rem);
	width: min(24rem, 34vw);
	border-inline: 1px solid rgb(255 255 255 / 8%);
	background: repeating-linear-gradient(0deg, transparent 0 3.95rem, rgb(255 255 255 / 5%) 4rem);
}
.contact-inner {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(25rem, 1.2fr);
	align-items: start;
	gap: var(--space-6);
}
.contact-heading { position: sticky; inset-block-start: calc(var(--scroll-padding-offset) + var(--space-4)); }
.contact-heading h2 { max-width: 10ch; color: #fff; }
.contact-description { color: #c0cbc5; font-size: var(--text-lg); }
.contact-links { margin: 0; padding: 0; border-block-start: 1px solid #516058; list-style: none; }
.contact-action {
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-3);
	min-height: 7rem;
	padding: var(--space-3);
	border-block-end: 1px solid #516058;
	text-decoration: none;
	transition: color var(--duration) var(--ease), background var(--duration) var(--ease), padding-inline var(--duration) var(--ease);
}
.contact-action:hover, .contact-action:focus-visible { color: #9fe3c9; background: rgb(255 255 255 / 5%); padding-inline: var(--space-4); }
.contact-icon { display: grid; width: 3.25rem; height: 3.25rem; place-items: center; border: 1px solid #5b6b63; border-radius: 50%; color: #8fd9bd; }
.contact-icon svg { width: 1.45rem; height: 1.45rem; fill: currentColor; }
.contact-action-copy { display: flex; min-width: 0; flex-direction: column; gap: 0.15rem; }
.contact-action-label { color: #a9b7b0; font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
[dir="rtl"] .contact-action-label { letter-spacing: 0; }
.contact-action-value { color: currentColor; font-size: var(--text-lg); font-weight: 750; overflow-wrap: anywhere; }
.contact-direction { color: #8fd9bd; font-size: 1.5rem; }
[dir="rtl"] .contact-direction { transform: scaleX(-1); }
.site-footer { padding: var(--space-3); color: var(--neutral-700); text-align: center; font-size: var(--text-sm); }
.site-footer p { margin-inline: auto; }
html.portfolio-front-page .site-footer { scroll-snap-align: end; }

.archive-header { max-width: 55rem; margin-block-end: var(--space-5); padding-block-end: var(--space-4); border-block-end: 3px solid var(--neutral-950); }
.archive-header p { color: var(--neutral-700); font-size: var(--text-lg); }
.navigation.pagination { margin-block-start: var(--space-5); }
.nav-links { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.page-numbers { display: inline-grid; min-width: 2.75rem; min-height: 2.75rem; padding: 0.35rem; place-items: center; border: var(--border); border-radius: var(--radius-sm); text-decoration: none; }
.page-numbers.current { color: #fff; border-color: var(--accent-700); background: var(--accent-700); }
.single-project article { max-width: 68rem; margin-inline: auto; }
.project-header { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(12rem, 0.5fr); gap: var(--space-4); margin-block-end: var(--space-5); padding-block-end: var(--space-4); border-block-end: 3px solid var(--neutral-950); }
.project-header h1 { grid-column: 1; }
.project-lead { grid-column: 1; color: var(--neutral-700); font-size: var(--text-lg); }
.project-header .project-tags { grid-column: 2; grid-row: 1 / span 2; align-content: start; justify-content: flex-end; }
.project-featured { margin: 0 0 var(--space-6); }
.project-featured img { display: block; width: 100%; border-radius: var(--radius-sm); }
.single-project section { max-width: var(--readable-width); margin-block: var(--space-6); }
.single-project section:nth-of-type(even) { margin-inline-start: auto; }
.single-project section p { color: var(--neutral-700); }
.project-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block: var(--space-4); border-block-start: var(--border); }
.project-details div { padding: var(--space-2); border-block-end: var(--border); }
.project-details dt { color: var(--neutral-500); font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; }
.project-details dd { margin: 0; font-weight: 750; }
.project-external-links a { color: var(--accent-700); font-weight: 800; }
.project-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.project-gallery a, .project-gallery img { display: block; width: 100%; }
.project-gallery img { border-radius: var(--radius-sm); }
.project-cta { margin-block: var(--space-6); }

@media (max-width: 64rem) {
	.expertise-card { grid-column: span 6; }
	.expertise-card:nth-child(3n) { border-inline-end: var(--border); }
	.expertise-card:nth-child(2n) { border-inline-end: 0; }
}
@media (max-width: 48rem) {
	:root { --header-height: 4.5rem; }
	html.portfolio-front-page { scroll-snap-type: y proximity; }
	.hero-grid { grid-template-columns: 1fr; }
	.hero-content { padding-block: var(--space-4); }
	.hero-portrait { width: min(75vw, 21rem); }
	.project-grid > li { grid-column: 1 / -1; }
	.contact-inner { grid-template-columns: 1fr; gap: var(--space-4); }
	.contact-heading { position: static; }
	.project-header { grid-template-columns: 1fr; }
	.project-header .project-tags { grid-column: 1; grid-row: auto; justify-content: flex-start; }
	.is-menu-ready .menu-toggle { display: inline-flex; align-items: center; }
	.is-menu-ready .primary-navigation { display: none; position: absolute; inset-block-start: 100%; inset-inline: 0; margin: 0; padding: var(--space-2) var(--space-3); border-block-end: var(--border); background: var(--neutral-050); box-shadow: var(--shadow); }
	.is-menu-ready .primary-navigation.is-open { display: block; }
	.primary-navigation ul { justify-content: center; }
}
@media (max-width: 600px) {
	:root {
		--header-top-offset: 0px;
		--section-viewport-offset: var(--header-height);
		--scroll-padding-offset: var(--header-height);
	}
	body.admin-bar { --hero-viewport-offset: calc(var(--header-height) + var(--wp-admin--admin-bar--height, 0px)); }
}
@media (max-width: 36rem) {
	.header-inner { gap: 0.5rem; }
	.site-branding { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }
	.primary-navigation ul { align-items: stretch; flex-direction: column; gap: 0; }
	.primary-navigation a { padding-block: 0.7rem; }
	.expertise-card { grid-column: 1 / -1; border-inline-end: 0 !important; }
	.experience-item { display: block; }
	.experience-dates { margin-block-end: var(--space-2); }
	.experience-item h3, .experience-item p { grid-column: auto; }
	.project-details, .project-gallery { grid-template-columns: 1fr; }
	.contact-action { grid-template-columns: 3rem minmax(0, 1fr) auto; min-height: 6rem; padding-inline: 0; }
	.contact-action:hover, .contact-action:focus-visible { padding-inline: var(--space-2); }
}
@media (max-height: 42rem) {
	html.portfolio-front-page { scroll-snap-type: y proximity; }
}
@supports (height: 100dvh) {
	.home-section { min-height: calc(100dvh - var(--section-viewport-offset)); }
	.hero-section { min-height: calc(100dvh - var(--hero-viewport-offset)); }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	html.portfolio-front-page { scroll-snap-type: y proximity; }
	*, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* Branded application error states. */
.error-page { width: 100%; max-width: none; padding: 0; background: var(--neutral-950); color: var(--neutral-050); }
.error-state {
	position: relative; display: grid; min-height: clamp(34rem, calc(100svh - var(--header-height)), 58rem);
	align-items: center; overflow: hidden; isolation: isolate; padding: var(--space-6) max(var(--space-3), calc((100vw - var(--content-width)) / 2));
	background: var(--neutral-950); color: var(--neutral-050);
}
.error-state__grid {
	position: absolute; z-index: -1; inset: 0; opacity: 0.55;
	background-image: linear-gradient(rgb(143 217 189 / 8%) 1px, transparent 1px), linear-gradient(90deg, rgb(143 217 189 / 8%) 1px, transparent 1px);
	background-size: clamp(2.5rem, 7vw, 5rem) clamp(2.5rem, 7vw, 5rem);
}
.error-state__content { position: relative; max-width: 48rem; padding-inline-start: clamp(1rem, 4vw, 4rem); border-inline-start: 2px solid #8fd9bd; }
.error-state__content::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: -0.45rem; width: 0.8rem; height: 0.8rem; background: #8fd9bd; }
.error-state__code { margin: 0 0 var(--space-3); color: #8fd9bd; font-family: ui-monospace, monospace; font-size: clamp(4.5rem, 18vw, 12rem); font-weight: 900; line-height: 0.75; letter-spacing: -0.08em; }
.error-state--empty { min-height: 24rem; margin-block-start: var(--space-4); }
.error-state--empty .error-state__code { font-size: var(--text-sm); letter-spacing: 0.12em; text-transform: uppercase; }
[dir="rtl"] .error-state__code { letter-spacing: 0; }
.error-state h1, .error-state h2 { max-width: 15ch; color: #fff; font-size: var(--text-xl); }
.error-state__description { color: #c0cbc5; font-size: var(--text-lg); }
.error-state__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-4); }
.error-state .button-secondary { color: #fff; border-color: #66736d; }
.error-state .button-secondary:hover { border-color: #fff; }
.error-page__contact { display: block; width: fit-content; margin: calc(-1 * var(--space-5)) auto var(--space-5); color: #9fe3c9; font-weight: 800; }
@media (max-width: 36rem) {
	.error-state { min-height: calc(100svh - var(--header-height)); padding-block: var(--space-5); }
	.error-state__content { padding-inline-start: var(--space-3); }
	.error-state__actions { align-items: stretch; flex-direction: column; }
	.error-state__actions .button { width: 100%; }
}
.error-state__grid { mask-image: linear-gradient(to right, #000, transparent 78%); }
[dir="rtl"] .error-state__grid { mask-image: linear-gradient(to left, #000, transparent 78%); }