/**
 * Pejvak hero + customer-logo orbit (Elementor widget "pejvak-hero-orbit").
 * Every selector is scoped to .pejvak-hero. Colours, radii, logo size and
 * rotation duration are CSS custom properties: the Elementor controls write
 * them (responsively) and assets/js/pejvak-hero-orbit.js reads them back, so
 * the values below are only fall-backs for a widget with no saved settings.
 */

.pejvak-hero {
	/* Brand colours (official palette). */
	--hero-bg: #233a7a;
	--hero-cyan: #29aae1;
	--hero-logo: #e8f4fc; /* customer logos: uniform pale blue-white */
	--hero-text: #f8f9fa;

	/* Layout. Gutters / vertical spacing are modest and fluid. */
	--hero-max: 1080px;
	--hero-art-max: 1050px;
	--hero-copy-max: 760px;
	--hero-gutter: clamp(16px, 4vw, 32px);
	/* --hero-pad-y (Elementor "Vertical padding") overrides both paddings when set. */
	--hero-gap: clamp(10px, 2.4vw, 12px); /* + ~14px of blank pixels inside the artwork = ~16-24px to the visible peak / reflection */
	--hero-clear: 0px; /* extra top clearance, measured by JS only if a header overlays the page */

	/* Orbit, all relative to the DISPLAYED IMAGE box (not viewport / section). */
	--orbit-cx: 50; /* % of image width  */
	--orbit-cy: 62.8; /* % of image height */
	--orbit-rx: 29; /* % of image width  */
	--orbit-ry: 16;  /* % of image height */
	--orbit-duration: 26; /* seconds per revolution */
	--logo-size: 11.5; /* logo frame width, % of image width (~120px at the 1050px artwork) */
	--logo-ratio: 1.6; /* frame width / height (kept in sync with JS) */
	--art-ar: 2.3154; /* image width / height, set inline from the real file */

	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding: calc(var(--hero-pad-y, clamp(14px, 2vw, 24px)) + var(--hero-clear)) var(--hero-gutter) var(--hero-pad-y, clamp(18px, 2.4vw, 28px));
	background-color: var(--hero-bg);
	color: var(--hero-text);
	text-align: center;
	word-spacing: normal; /* parent theme sets p { word-spacing: 1px } */
	letter-spacing: normal;
	overflow-x: clip;
}

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

.pejvak-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--hero-gap);
	width: 100%;
	max-width: var(--hero-max);
	margin-inline: auto;
}

/* ---- Title + slogan: normal flow, above the artwork --------------------- */

.pejvak-hero__head {
	width: 100%;
}

.pejvak-hero .pejvak-hero__title {
	margin: 0;
	padding: 0;
	color: var(--hero-text);
	font-size: clamp(1.625rem, 1.1rem + 2vw, 2.75rem); /* 26px phone -> 44px desktop */
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.pejvak-hero .pejvak-hero__slogan {
	margin: 4px 0 0; /* + title/slogan line-height leading = ~8-10px visual gap */
	word-spacing: normal;
	text-wrap: balance;
	color: var(--hero-text);
	font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); /* 18-20px */
	font-weight: 700;
	line-height: 1.5;
}

/* ---- Artwork stage ------------------------------------------------------ */

.pejvak-hero__art {
	position: relative;
	width: 100%;
	max-width: var(--hero-art-max);
}

/* The stage is exactly the displayed image box: the <img> is in normal flow
   at width:100% / height:auto, so the whole picture is always shown,
   proportionally, never cropped (the "contain" behaviour). Orbit layers are
   absolutely positioned inside it, so percentages = image percentages. */
.pejvak-hero__stage {
	position: relative;
	isolation: isolate;
	width: 100%;
}

.pejvak-hero__img,
.pejvak-hero__fg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	user-select: none;
	-webkit-user-drag: none;
}

/* Soft edge so no rectangular boundary or colour band is ever visible, even
   if the chosen picture's own background differs slightly from the brand
   colour. Both gradients are intersected. */
.pejvak-hero__img {
	position: relative;
	z-index: 0;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
		linear-gradient(to bottom, transparent 0, #000 2%, #000 98%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
		linear-gradient(to bottom, transparent 0, #000 2%, #000 98%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

/* Foreground occlusion layer: the SAME artwork, pixel-aligned over the
   background, visible only inside a feathered silhouette of the mountain +
   reflection (--occlusion-mask is an SVG data URI built from the widget's
   polygon). Rear logos (z 1) are hidden by it; front logos (z 3) sit above. */
.pejvak-hero__fg {
	position: absolute;
	inset: 0;
	z-index: 30;
	height: 100%;
	pointer-events: none;
	-webkit-mask-image: var(--occlusion-mask);
	mask-image: var(--occlusion-mask);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* ---- Orbit -------------------------------------------------------------- */

/* The parent theme sets `ul > li { list-style: outside none square }` on the <li> itself, which beats the
   list-style:none inherited from our <ul>s and drew a small square marker beside every orbit logo (white,
   because the item text colour is white). Set it on our own items, and only these. */
.pejvak-hero__logo,
.pejvak-hero__item {
	list-style: none;
}
.pejvak-hero__logo::marker,
.pejvak-hero__item::marker {
	content: none;
}

/* No z-index / transform here on purpose: the list must NOT create a stacking
   context, otherwise the per-logo z-index could not interleave with .fg. */
.pejvak-hero__orbit {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: none;
}

.pejvak-hero__logo {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: var(--frame-w, 0px);
	aspect-ratio: var(--logo-ratio);
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
	transform-origin: 50% 50%;
	will-change: transform, opacity, filter;
}

.pejvak-hero.is-ready .pejvak-hero__logo.is-interactive {
	pointer-events: auto;
}

.pejvak-hero__logo-frame {
	position: absolute;
	inset: 0;
	display: block;
	border-radius: 6px;
	color: inherit;
	text-decoration: none;
	outline: none;
}

/* Keyboard focus is on the static list; the matching orbit logo shows the ring. */
.pejvak-hero__logo.is-focused .pejvak-hero__logo-frame {
	outline: 2px solid var(--hero-cyan);
	outline-offset: 4px;
}

.pejvak-hero__logo-mark {
	position: absolute;
	inset: 0;
	display: block;
	overflow: visible;
}

/* The silhouette: a flat brand-colour fill masked by the logo's own alpha,
   so every logo is the same colour with its transparency and proportions
   preserved. JS replaces the fallback box with the logo's measured content
   box so logos of very different padding get a similar perceived size. */
.pejvak-hero__logo-glyph {
	position: absolute;
	inset: 0;
	display: block;
	background-color: var(--hero-logo);
	-webkit-mask-image: var(--logo-url);
	mask-image: var(--logo-url);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.pejvak-hero__logo-glyph.is-fitted {
	inset: auto;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

/* ---- Static list of every logo ------------------------------------------
   Visually hidden while the orbit runs (it is the accessible, focusable list
   for assistive technology, and holds logos outside the visible window).
   Shown as a plain wrapped row for reduced motion and without JavaScript. */

.pejvak-hero__list {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	list-style: none;
}

.pejvak-hero__item-name {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.pejvak-hero.is-reduced .pejvak-hero__orbit {
	display: none;
}

.pejvak-hero.is-reduced .pejvak-hero__list {
	position: static;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 20px;
	width: auto;
	height: auto;
	margin: calc(var(--hero-gap) * 0.75) 0 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
}

.pejvak-hero.is-reduced .pejvak-hero__item-link {
	position: relative;
	display: block;
	width: clamp(84px, 20vw, 120px);
	aspect-ratio: var(--logo-ratio);
	border-radius: 6px;
	color: inherit;
	text-decoration: none;
}

.pejvak-hero.is-reduced .pejvak-hero__item-link:focus-visible {
	outline: 2px solid var(--hero-cyan);
	outline-offset: 4px;
}

/* ---- Pause / play ------------------------------------------------------- */

.pejvak-hero__controls {
	position: absolute;
	inset-inline: 0;
	bottom: 4px;
	z-index: 5;
	display: flex;
	justify-content: center;
	pointer-events: none;
}

/* Visually hidden, but still a real, keyboard-reachable button. It appears as
   a small chip only while it has keyboard focus. */
.pejvak-hero__pause {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	background: transparent;
	color: var(--hero-text);
	font: inherit;
	pointer-events: auto;
}

.pejvak-hero__pause:focus-visible {
	position: static;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.35em 0.9em;
	overflow: visible;
	clip: auto;
	clip-path: none;
	border: 1px solid var(--hero-cyan);
	border-radius: 999px;
	background: rgba(35, 58, 122, 0.92);
	font-size: 0.8125rem;
	line-height: 1.3;
	outline: 2px solid var(--hero-cyan);
	outline-offset: 2px;
}

.pejvak-hero__pause svg {
	width: 1em;
	height: 1em;
	fill: var(--hero-cyan);
	flex: none;
}

.pejvak-hero__pause .is-play {
	display: none;
}

.pejvak-hero__pause[aria-pressed="true"] .is-play {
	display: inline-block;
}

.pejvak-hero__pause[aria-pressed="true"] .is-pause {
	display: none;
}

/* ---- Intro copy: below the artwork ------------------------------------- */

.pejvak-hero__copy {
	width: 100%;
	max-width: var(--hero-copy-max); /* one measure for the paragraphs AND the statement */
}

/* Multi-line paragraphs: natural right-aligned RTL text by default (no stretched
   word gaps on phones/tablets, where long Persian words leave the justifier
   little room); proper RTL justification with the final line to the right from
   856px up, where the 760px measure was checked against the real Pinar VF
   glyph widths (2 lines each, last lines 72-81% full, gap stretch ~12%). */
.pejvak-hero .pejvak-hero__para {
	margin: 0 0 14px;
	color: var(--hero-text);
	direction: rtl;
	text-align: right;
	text-align-last: right;
	word-spacing: normal;
	letter-spacing: normal;
	hyphens: manual;
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.8;
	text-wrap: pretty; /* avoids a lone last word where supported; harmless elsewhere */
}

.pejvak-hero .pejvak-hero__para--lead {
	font-weight: 500;
}

@media (min-width: 856px) {
	.pejvak-hero .pejvak-hero__para {
		text-align: justify;
		text-align-last: right;
		text-justify: inter-word;
	}
}

/* The bold statement sits in the same measure and the same right edge as the
   paragraphs. It is NOT justified: it is only about 12% longer than one line,
   so any wrap leaves a short second line, and justifying balanced lines would
   stretch their word gaps. text-wrap: balance (with pretty as the fallback)
   splits it into even lines, so the final verb is never left alone; where
   neither is supported it simply wraps naturally. Right-aligned at all widths. */
.pejvak-hero .pejvak-hero__statement {
	margin: 0 0 14px;
	color: var(--hero-text);
	direction: rtl;
	text-align: right;
	text-align-last: right;
	word-spacing: normal;
	letter-spacing: normal;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.8;
	text-wrap: balance;
}

.pejvak-hero .pejvak-hero__copy > :last-child {
	margin-bottom: 0;
}

.pejvak-hero__cta {
	display: inline-block;
	margin-top: 4px; /* the last paragraph's 14px margin supplies the rest */
	padding: 0.55em 1.8em;
	border: 1px solid #e6ecf3;
	border-radius: 30px;
	color: var(--hero-text);
	font-size: 0.875rem;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.pejvak-hero__cta:hover,
.pejvak-hero__cta:focus-visible {
	border-color: transparent;
	background-color: #162653;
	color: #fff;
}

.pejvak-hero__cta:focus-visible {
	outline: 2px solid var(--hero-cyan);
	outline-offset: 3px;
}

/* ---- Responsive --------------------------------------------------------- */

/* Short landscape screens (phones turned sideways): cap the artwork by the
   viewport height so the whole mountain + title stay reachable. */
@media (max-height: 520px) and (orientation: landscape) {
	.pejvak-hero__art {
		max-width: min(var(--hero-art-max), calc(72svh * var(--art-ar)));
	}
}

@media (max-width: 767px) {
	.pejvak-hero__logo-link:focus-visible {
		outline-offset: 2px;
	}
}

/* Reduced motion: no continuous movement is started automatically (JS also
   enforces this); only the fade of the hover reveal is shortened. */
@media (prefers-reduced-motion: reduce) {
	.pejvak-hero__pause,
	.pejvak-hero__cta {
		transition: none;
	}
}

/* Editor placeholder shown when no artwork is selected. */
.pejvak-hero__notice {
	padding: 2rem 1rem;
	border: 1px dashed var(--hero-cyan);
	border-radius: 8px;
	color: var(--hero-text);
}