/*
Theme Name: Amin Ebrahimi
Theme URI: https://aminebrahimi.com
Author: Amin Ebrahimi
Description: A minimal, warm, and scholarly portfolio theme for systems designer and gamification strategist Amin Ebrahimi. Bilingual Persian/English support with a living-system aesthetic grounded in linen, Persian blue, and terracotta.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: amin-ebrahimi
Tags: full-site-editing, block-patterns, wide-blocks, custom-colors, custom-fonts, editor-style, translation-ready, portfolio, one-column
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
*/

/* ----------------------------------------------------------------
   0. Foundations
   ---------------------------------------------------------------- */

:root,
body,
.wp-site-blocks {
	overflow: visible;
}

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

/* Smooth scroll for anchor links (respects motion preference) */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ----------------------------------------------------------------
   1. Typography polish
   ---------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-weight: 420;
}

/* Fraunces optical sizing for display headings */
h1, h2, h3,
.wp-block-post-title,
.wp-block-query-title {
	font-optical-sizing: auto;
	text-wrap: balance;
}

/* Generous paragraph spacing inside prose */
.wp-block-post-content p + p {
	margin-block-start: 1.35em;
}

/* Small-caps treatment for H5 / H6 labels */
h5, h6 {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
}

/* Ensure Vazirmatn is used when the page is in Farsi */
[dir="rtl"],
[lang="fa"],
.has-persian-font-family {
	font-family: var(--wp--preset--font-family--persian);
	line-height: 1.8;
}

/* ----------------------------------------------------------------
   2. Link styles
   ---------------------------------------------------------------- */

a {
	transition: color 0.25s ease;
}

/* Underline offset for body links — gives them room to breathe */
.wp-block-post-content a,
.entry-content a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	text-decoration-color: var(--wp--preset--color--accent);
}

.wp-block-post-content a:hover,
.entry-content a:hover {
	text-decoration-color: var(--wp--preset--color--accent-hover);
}

/* Navigation link dot-hover effect (from the picked design) */
.wp-block-navigation a {
	position: relative;
	transition: color 0.3s ease;
}

.wp-block-navigation a::after {
	content: "";
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.wp-block-navigation a:hover::after,
.wp-block-navigation a:focus::after,
.wp-block-navigation a[aria-current="page"]::after {
	opacity: 1;
}

/* ----------------------------------------------------------------
   3. Button refinements
   ---------------------------------------------------------------- */

.wp-block-button .wp-block-button__link {
	transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.wp-block-button .wp-block-button__link:hover {
	box-shadow: 0 2px 8px rgba(196, 85, 42, 0.25);
}

/* Outline button variant */
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	background-color: transparent;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--button-text);
	border-color: var(--wp--preset--color--accent);
}

/* Ghost / text-only button for tertiary actions */
.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--accent);
	padding-inline: 0;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	color: var(--wp--preset--color--accent-hover);
	box-shadow: none;
}

/* ----------------------------------------------------------------
   4. Image treatments
   ---------------------------------------------------------------- */

.wp-block-image img {
	border-radius: 2px;
	transition: filter 0.4s ease;
}

/* Warm scholarly treatment — slight sepia tone on images */
.wp-block-image img {
	filter: contrast(1.04) sepia(0.06);
}

.wp-block-image:hover img {
	filter: contrast(1.08) sepia(0);
}

/* Circular portrait crop — used for hero/about images */
.is-style-rounded img {
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--ghost);
}

/* Cover block image overlay with warm tint */
.wp-block-cover::after {
	mix-blend-mode: multiply;
}

/* ----------------------------------------------------------------
   5. Separator / Horizontal rule
   ---------------------------------------------------------------- */

.wp-block-separator {
	border-color: var(--wp--preset--color--border) !important;
	opacity: 1;
}

.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
	width: 80px;
}

.wp-block-separator.is-style-dots::before {
	color: var(--wp--preset--color--accent);
}

/* Terracotta accent rule for section dividers */
.wp-block-separator.has-accent-color {
	border-color: var(--wp--preset--color--accent) !important;
}

/* ----------------------------------------------------------------
   6. Quote & pullquote
   ---------------------------------------------------------------- */

.wp-block-quote {
	quotes: none;
}

.wp-block-quote cite,
.wp-block-pullquote cite {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	display: block;
	margin-block-start: 1rem;
}

.wp-block-pullquote {
	padding-block: var(--wp--preset--spacing--40);
}

/* ----------------------------------------------------------------
   7. Card surfaces (service cards, case study cards)
   ---------------------------------------------------------------- */

.has-surface-background-color {
	border: 1px solid var(--wp--preset--color--border);
}

/* Subtle lift on surface cards */
@media (prefers-reduced-motion: no-preference) {
	.has-surface-background-color {
		transition: box-shadow 0.3s ease, transform 0.3s ease;
	}

	.has-surface-background-color:hover {
		box-shadow: 0 4px 20px rgba(27, 58, 107, 0.08);
		transform: translateY(-2px);
	}
}

/* ----------------------------------------------------------------
   8. Sticky header
   ---------------------------------------------------------------- */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Pseudo-element for scrolled-state background so we never create
   a containing block that traps the mobile nav overlay */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

.wp-site-blocks > header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	transition: background 0.4s ease;
}

body.is-scrolled .wp-site-blocks > header.wp-block-template-part::before {
	background: var(--wp--preset--color--background);
	box-shadow: 0 1px 0 var(--wp--preset--color--border);
}

/* ----------------------------------------------------------------
   9. Mobile hamburger overlay
   ---------------------------------------------------------------- */

.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--background);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--40);
	align-items: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--text);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
}

/* Hamburger icon color */
.wp-block-navigation__responsive-container-open svg {
	fill: var(--wp--preset--color--text);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
	fill: var(--wp--preset--color--text);
}

/* ----------------------------------------------------------------
   9a. Header controls — always visible beside nav
   ---------------------------------------------------------------- */

/* Ensure the header-controls block never collapses or gets clipped */
.site-header .wp-block-amin-header-controls {
	flex-shrink: 0;
	min-width: max-content;
}

/* On narrow viewports, reduce nav gap so controls have room */
@media (max-width: 960px) {
	.site-header > .wp-block-group {
		gap: var(--wp--preset--spacing--20);
	}
}

/* ----------------------------------------------------------------
   10. Hero bilingual name — show the right name based on lang
   ---------------------------------------------------------------- */

/* By default (EN), show English name, hide Persian */
.hero-name-fa {
	display: none;
}

.hero-name-en {
	display: block;
}

/* When Persian is active, swap */
body.is-lang-fa .hero-name-fa {
	display: block;
}

body.is-lang-fa .hero-name-en {
	display: none;
}

/* ----------------------------------------------------------------
   14. Post / Case study cards
   ---------------------------------------------------------------- */

.wp-block-post-template .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--text);
	transition: color 0.25s ease;
}

.wp-block-post-template .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent);
}

.wp-block-post-featured-image img {
	border-radius: 2px;
	filter: contrast(1.04) sepia(0.06);
	transition: filter 0.4s ease, transform 0.4s ease;
}

.wp-block-post-featured-image:hover img {
	filter: contrast(1.08) sepia(0);
	transform: scale(1.02);
}

.wp-block-post-featured-image {
	overflow: hidden;
	border-radius: 2px;
}

/* ----------------------------------------------------------------
   15. Tables
   ---------------------------------------------------------------- */

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-table td,
.wp-block-table th {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-align: left;
}

.wp-block-table th {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* ----------------------------------------------------------------
   16. Details / Accordion
   ---------------------------------------------------------------- */

.wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-block: var(--wp--preset--spacing--30);
}

.wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--text);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	font-size: 1.25rem;
	color: var(--wp--preset--color--accent);
	transition: transform 0.25s ease;
}

.wp-block-details[open] summary::after {
	content: "−";
}

/* ----------------------------------------------------------------
   17. Form elements (Contact forms)
   ---------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
textarea,
select {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--text);
	background-color: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 2px;
	padding: 0.75rem 1rem;
	width: 100%;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px rgba(196, 85, 42, 0.15);
}

textarea {
	min-height: 160px;
	resize: vertical;
}

label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--muted);
	display: block;
	margin-block-end: 0.5rem;
}

/* ----------------------------------------------------------------
   18. Footer credit
   ---------------------------------------------------------------- */

.wp-block-template-part[data-area="footer"] {
	border-top: 1px solid var(--wp--preset--color--border);
}

/* ----------------------------------------------------------------
   19. Selection color
   ---------------------------------------------------------------- */

::selection {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--button-text);
}

::-moz-selection {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--button-text);
}

/* ----------------------------------------------------------------
   19a. Comments styling
   ---------------------------------------------------------------- */

.wp-block-comments {
	font-family: var(--wp--preset--font-family--body);
}

.wp-block-comment-template {
	list-style: none;
	padding: 0;
	margin: 0;
}

.wp-block-comment-template li {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.wp-block-comment-template li:last-child {
	border-bottom: none;
}

.comment-respond {
	margin-top: var(--wp--preset--spacing--30);
}

.comment-respond label {
	display: block;
	margin-bottom: 0.25rem;
}

.comment-respond .comment-form-comment textarea {
	min-height: 120px;
}

.comment-respond .form-submit .submit {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--button-text);
	background-color: var(--wp--preset--color--accent);
	border: none;
	border-radius: 2px;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.comment-respond .form-submit .submit:hover {
	background-color: var(--wp--preset--color--accent-hover);
}

.wp-block-comment-author-name {
	font-weight: 600;
}

.comment-reply-link {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.comment-reply-link:hover {
	color: var(--wp--preset--color--accent-hover);
}

/* ----------------------------------------------------------------
   20. Focus visible — accessibility
   ---------------------------------------------------------------- */

:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Remove default focus ring on buttons that already have hover states */
.wp-block-button__link:focus-visible {
	outline-offset: 4px;
}

/* ----------------------------------------------------------------
   21. RTL adjustments for bilingual support
   ---------------------------------------------------------------- */

[dir="rtl"] .wp-block-quote {
	border-left: none;
	border-right: 3px solid var(--wp--preset--color--accent);
	padding-left: 0;
	padding-right: var(--wp--preset--spacing--40);
}

[dir="rtl"] .descriptor-line {
	margin-inline-start: 0;
	margin-inline-end: 0;
}

/* ----------------------------------------------------------------
   22. Subtle paper texture feel (optional CSS grain)
   ---------------------------------------------------------------- */

body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.03;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-repeat: repeat;
}

/* ----------------------------------------------------------------
   22a-2. Hero network canvas — generative systems visualization
   ---------------------------------------------------------------- */

.hero-network-canvas {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	max-width: 520px;
	margin-inline: auto;
	overflow: visible;
}

.hero-network-canvas svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* On mobile, hide the network visual and let the text take full width */
@media (max-width: 782px) {
	.hero-visual-col {
		display: none;
	}
}

/* ----------------------------------------------------------------
   22b. Systems grid — ambient geometric background
   ---------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.systems-grid {
		position: relative;
		overflow: hidden;
	}

	.systems-grid::before {
		content: "";
		position: absolute;
		inset: -50% -50%;
		width: 200%;
		height: 200%;
		pointer-events: none;
		z-index: 0;
		opacity: 0.04;
		background-image:
			linear-gradient(var(--wp--preset--color--text) 1px, transparent 1px),
			linear-gradient(90deg, var(--wp--preset--color--text) 1px, transparent 1px);
		background-size: 80px 80px;
		animation: grid-drift 30s linear infinite;
	}

	@keyframes grid-drift {
		from { transform: translate(0, 0) rotate(0deg); }
		to   { transform: translate(40px, 40px) rotate(1deg); }
	}

	.systems-grid > * {
		position: relative;
		z-index: 1;
	}
}

/* ----------------------------------------------------------------
   22c. Node pulse — decorative pulsing dots
   ---------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.node-pulse {
		position: relative;
	}

	.node-pulse::after {
		content: "";
		position: absolute;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: var(--wp--preset--color--accent);
		opacity: 0.5;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		animation: pulse-glow 3s ease-in-out infinite;
	}

	@keyframes pulse-glow {
		0%, 100% { opacity: 0.3; transform: translateY(-50%) scale(1); }
		50% { opacity: 0.7; transform: translateY(-50%) scale(1.5); }
	}
}

/* ----------------------------------------------------------------
   22d. Connection line — animated dashed connector
   ---------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.connection-line {
		position: relative;
		overflow: visible;
	}

	.connection-line::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 100%;
		height: 0;
		border-top: 1px dashed var(--wp--preset--color--border);
		animation: dash-flow 8s linear infinite;
		background: linear-gradient(90deg,
			transparent 0%,
			var(--wp--preset--color--accent) 50%,
			transparent 100%
		);
		background-size: 60px 1px;
		background-repeat: repeat-x;
		opacity: 0.3;
	}

	@keyframes dash-flow {
		from { background-position: 0 0; }
		to   { background-position: 60px 0; }
	}
}

/* ----------------------------------------------------------------
   22e. Descriptor line with animated underline trace
   ---------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.descriptor-animated {
		position: relative;
		display: inline-block;
	}

	.descriptor-animated::after {
		content: "";
		position: absolute;
		bottom: -4px;
		left: 0;
		width: 100%;
		height: 2px;
		background: var(--wp--preset--color--accent);
		transform: scaleX(0);
		transform-origin: left center;
		animation: trace-line 2s ease-out 1s forwards;
	}

	@keyframes trace-line {
		from { transform: scaleX(0); }
		to   { transform: scaleX(1); }
	}
}



/* ----------------------------------------------------------------
   22g. Invert-on-scroll header variant
   ---------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.wp-site-blocks > header.wp-block-template-part > .wp-block-group {
		transition: background-color 0.4s ease, color 0.4s ease, backdrop-filter 0.4s ease;
	}

	body.is-scrolled .wp-site-blocks > header.wp-block-template-part > .wp-block-group {
		backdrop-filter: blur(12px);
	}
}

/* ----------------------------------------------------------------
   23. Cover block inner alignment
   ---------------------------------------------------------------- */

.wp-block-cover .wp-block-cover__inner-container {
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
}

/* ----------------------------------------------------------------
   24. Columns responsive behavior
   ---------------------------------------------------------------- */

@media (max-width: 782px) {
	.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ----------------------------------------------------------------
   25. Site title refinement
   ---------------------------------------------------------------- */

.wp-block-site-title a {
	transition: color 0.25s ease;
}

/* ----------------------------------------------------------------
   Loop layout utilities
   ---------------------------------------------------------------- */

/* Horizontal scrollable rail */
.wp-block-query.is-style-loop-rail .wp-block-post-template {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	padding-bottom: var(--wp--preset--spacing--20);
}

.wp-block-query.is-style-loop-rail .wp-block-post-template > * {
	flex: 0 0 320px;
	scroll-snap-align: start;
}

/* Compact list with hairline row dividers */
.wp-block-query.is-style-loop-list .wp-block-post-template > * {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-block: var(--wp--preset--spacing--30);
}

.wp-block-query.is-style-loop-list .wp-block-post-template > *:last-child {
	border-bottom: 0;
}

/* Zigzag — flip columns on every even entry */
.wp-block-query.is-style-loop-zigzag .wp-block-post-template > *:nth-child(even) .wp-block-columns {
	flex-direction: row-reverse;
}

/* Timeline — vertical line with node markers */
.wp-block-query.is-style-loop-timeline .wp-block-post-template {
	position: relative;
	padding-inline-start: 2.5rem;
}

.wp-block-query.is-style-loop-timeline .wp-block-post-template::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0.5rem;
	width: 2px;
	background: var(--wp--preset--color--border);
	opacity: 0.4;
}

.wp-block-query.is-style-loop-timeline .wp-block-post-template > * {
	position: relative;
}

.wp-block-query.is-style-loop-timeline .wp-block-post-template > *::before {
	content: "";
	position: absolute;
	inset-inline-start: -2.25rem;
	inset-block-start: 0.6rem;
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--wp--preset--color--accent);
	border-radius: 50%;
	background: var(--wp--preset--color--background);
}

/* Magazine — first child spans 2 grid columns */
.wp-block-query.is-style-loop-magazine .wp-block-post-template > *:first-child {
	grid-column: span 2;
}

@media (max-width: 600px) {
	.wp-block-query.is-style-loop-magazine .wp-block-post-template > *:first-child {
		grid-column: auto;
	}
}