/*
Theme Name: Soroush
Theme URI: https://example.com
Author: Soroush
Description: A quiet Swiss-style block theme on cobalt. Helvetica Neue, white type, signal yellow, and a subtle EEG trace under the menu that turns into buildings where you hover. Includes a one-by-one photo slider for blog posts and a footer that shows a random quote. A "Paper" style variation gives a white background instead. Pairs with the "Soroush Site" plugin (publications, work and the private area).
Version: 2.9.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: soroush
*/

/* ---------- Base ---------- */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--ink); }

:where(a, button, input, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--yellow);
	outline-offset: 3px;
}

a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

.ss-eyebrow,
.ss-meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.ss-meta a,
.ss-eyebrow a { color: inherit; }

/* ---------- Header ---------- */

.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }

.ss-header {
	background: color-mix(in srgb, var(--wp--preset--color--base) 90%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.ss-header .wp-block-site-title a {
	display: inline-block;
	background: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--ink);
	padding: 0.18em 0.5em 0.2em;
	line-height: 1.2;
	transition: background 0.25s ease;
}
.ss-header .wp-block-site-title a:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--ink); }

.ss-header .wp-block-navigation-item__content { position: relative; padding-block: 0.25em; }
/* menu: the chosen item turns yellow and a small yellow dot glides under it
   (the same dot as under the name's languages) */
.ss-header .wp-block-navigation-item__content { transition: color 0.3s ease; }
/* menu: larger text, more air between items */
.ss-header .wp-block-navigation,
.ss-header .wp-block-navigation .wp-block-navigation-item__content { font-size: 1.0625rem; }
.ss-header .wp-block-navigation .wp-block-navigation__container { gap: 0.5rem 2.4rem; }
.ss-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 0.9375rem; }
.ss-header .wp-block-navigation-item__content:hover,
.ss-header .wp-block-navigation-item__content:focus-visible,
.ss-header .current-menu-item > .wp-block-navigation-item__content,
.ss-header [aria-current="page"],
.ss-header .is-dot-target > .wp-block-navigation-item__content { color: var(--wp--preset--color--yellow); }
.ss-header .wp-block-navigation__container { position: relative; }
.ss-nav-dot {
	position: absolute;
	left: 0;
	top: 0;
	width: 6px;
	height: 6px;
	margin-left: -3px;
	border-radius: 50%;
	background: var(--wp--preset--color--yellow);
	transform: translate(var(--dot-x, 0px), var(--dot-y, 0px));
	opacity: 0;
	transition: transform 0.55s cubic-bezier(.5,0,.15,1), opacity 0.3s ease;
	pointer-events: none;
}
.ss-nav-dot.is-on { opacity: 1; }
.ss-nav-dot.is-moving { animation: ss-dot-hop 0.55s cubic-bezier(.5,0,.15,1); }
.ss-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); }

.ss-nav-private .wp-block-navigation-item__label::before {
	content: "";
	display: inline-block;
	width: 0.8em; height: 0.9em;
	margin-right: 0.35em;
	vertical-align: -0.08em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='2' y='8' width='12' height='9'/%3E%3Cpath d='M5 8V5a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='2' y='8' width='12' height='9'/%3E%3Cpath d='M5 8V5a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Signal (EEG trace that becomes buildings) ---------- */

.is-style-signal,
.has-signal { position: relative; isolation: isolate; }
.ss-signal-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
	display: block;
	max-width: none !important;
	margin: 0 !important;
}
.ss-signal-rule { height: 46px; overflow: hidden; margin-top: -10px; }

/* ---------- Hero ----------
   A language switch centred at the top changes only the name. The description
   is always in English. Persian and Arabic names: name top right, text left.
   English, Turkish and Azerbaijani names: name top left, text right.
   "(...more)" turns the whole hero into the full text. */

.ss-hero { padding-top: clamp(2.5rem, 8vw, 6rem) !important; }

.ss-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	column-gap: clamp(2rem, 6vw, 6rem);
	row-gap: 1.25rem;
	align-items: end;
}
.ss-hero-grid > * { margin: 0 !important; }
/* the same layout for every language: description left, name right */
.ss-hero-grid .ss-names { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; display: grid; justify-items: end; text-align: right; }
.ss-hero-grid .ss-set-text { grid-column: 1; grid-row: 1; justify-self: start; max-width: 42ch; }

/* names, in yellow; only the chosen one shows */
.ss-names > * { grid-area: 1 / 1; margin: 0 !important; }
.ss-name-v {
	/* sized so the full name fits on one line in its column */
	font-size: clamp(1.5rem, 5vw, 4.75rem);
	font-weight: 500;
	letter-spacing: -0.05em;
	line-height: 0.95;
	color: var(--wp--preset--color--yellow);
	white-space: nowrap;
}
.ss-name-v.is-rtl {
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.6;
	white-space: nowrap;
	direction: rtl;
	unicode-bidi: isolate;
	text-align: right;
	margin-top: -0.3em !important;
}
.ss-name-v.lang-fa { font-family: var(--wp--preset--font-family--nastaliq); font-size: clamp(2.4rem, 5.2vw, 5.4rem); }
.ss-name-v.lang-ar { font-family: var(--wp--preset--font-family--ruqaa); font-size: clamp(2.6rem, 5.8vw, 6rem); line-height: 1.35; margin-top: -0.1em !important; }
.wp-site-blocks .ss-hero.has-lang .ss-name-v:not(.is-active),
.wp-site-blocks .ss-hero:not(.has-lang) .ss-name-v:not(.lang-fa) { display: none; }

/* the description, always in English */
.ss-set-text p { margin: 0; font-size: var(--wp--preset--font-size--medium); line-height: 1.55; }
.ss-set-text strong { font-weight: 500; color: var(--wp--preset--color--yellow); }
.ss-more {
	color: var(--wp--preset--color--yellow) !important;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	font-weight: 500;
}
.ss-more:hover { text-decoration: underline; }
.wp-site-blocks .ss-set-full { display: none; }

/* "(...more)": the whole hero becomes the full text */
.wp-site-blocks .ss-hero.is-full .ss-names,
.wp-site-blocks .ss-hero.is-full .ss-set-short { display: none; }
.wp-site-blocks .ss-hero.is-full .ss-set-text { grid-column: 1 / -1; justify-self: stretch; max-width: none; }
.wp-site-blocks .ss-hero.is-full .ss-set-full {
	display: block;
	columns: 2 22rem;
	column-gap: clamp(2rem, 5vw, 5rem);
	animation: ss-write-en 0.9s cubic-bezier(.55,0,.2,1) both;
}
.ss-set-full p { font-size: var(--wp--preset--font-size--large) !important; line-height: 1.5 !important; margin: 0 0 1em !important; break-inside: avoid; }

/* names write in: right to left for Persian and Arabic, left to right for the rest */
.wp-site-blocks .ss-name-v.is-active { animation: ss-write-en 1.1s cubic-bezier(.55,0,.2,1) both; }
.wp-site-blocks .ss-name-v.is-active.is-rtl { animation: ss-write 1.6s cubic-bezier(.55,0,.2,1) .1s both; }
@keyframes ss-write {
	from { clip-path: inset(-30% 0 -30% 100%); }
	to   { clip-path: inset(-30% 0 -30% 0); }
}
@keyframes ss-write-en {
	from { clip-path: inset(-20% 100% -20% 0); }
	to   { clip-path: inset(-20% 0 -20% 0); }
}

@media (max-width: 781px) {
	.ss-hero-grid { grid-template-columns: minmax(0, 1fr); }
	.ss-hero-grid .ss-names { grid-column: 1; grid-row: 1; justify-self: end; }
	.ss-hero-grid .ss-set-text { grid-column: 1; grid-row: 2; justify-self: stretch; max-width: none; }
	.ss-name-v:not(.is-rtl) { font-size: calc((100vw - 3rem) / 11); }
	.ss-name-v.is-rtl { white-space: normal; }
}

/* ---------- Ruler divider (same scale as the slider's base) ---------- */

.ss-ruler {
	height: 14px;
	margin-block: 0 var(--wp--preset--spacing--40) !important;
	--r: var(--wp--preset--color--contrast);
	--m: var(--wp--preset--color--muted);
	background:
		linear-gradient(var(--r), var(--r)) left top / 100% 1px repeat-x,
		repeating-linear-gradient(90deg, var(--m) 0 1px, transparent 1px 12px) left top / 100% 6px repeat-x,
		repeating-linear-gradient(90deg, var(--r) 0 1px, transparent 1px 120px) left top / 100% 13px repeat-x;
	background-size: 100% 1px, 12px 6px, 120px 13px;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

/* ---------- Photo slider: drawing sheets on a scale bar ---------- */

.ss-slider { position: relative; }
.ss-slider-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.25rem; }
.ss-slider-nav { display: flex; gap: 0; }
.ss-slider-nav button {
	width: 2.75rem; height: 2.25rem;
	display: grid; place-items: center;
	border: 1px solid var(--wp--preset--color--contrast);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	font: inherit;
	font-size: 1rem;
	line-height: 1;
	border-radius: 0;
	transition: background .2s, color .2s;
}
.ss-slider-nav button + button { border-left: 0; }
.ss-slider-nav button:hover { background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--ink); }

.is-style-slider.wp-block-post-template {
	display: flex !important;
	flex-wrap: nowrap;
	gap: clamp(0.5rem, 1.5vw, 1.5rem);
	--card: clamp(270px, 44vw, 640px);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	list-style: none;
	margin: 0 !important;
	padding-top: 0.25rem;
	padding-bottom: 30px;
	padding-inline: calc(50% - var(--card) / 2);
	cursor: grab;
	/* the scale bar the sheets sit on: fine ticks every 12px, long ticks every 120px */
	background:
		linear-gradient(var(--wp--preset--color--contrast), var(--wp--preset--color--contrast)) left bottom 12px / 100% 1px repeat-x local,
		repeating-linear-gradient(90deg, var(--wp--preset--color--muted) 0 1px, transparent 1px 12px) left bottom 6px / 100% 6px repeat-x local,
		repeating-linear-gradient(90deg, var(--wp--preset--color--contrast) 0 1px, transparent 1px 120px) left bottom / 100% 12px repeat-x local;
	background-size: 100% 1px, 12px 6px, 120px 12px;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.is-style-slider.wp-block-post-template::-webkit-scrollbar { display: none; }
.is-style-slider.wp-block-post-template.is-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.is-style-slider.wp-block-post-template > li {
	flex: 0 0 var(--card);
	margin: 0 !important;
	min-width: 0;
	scroll-snap-align: center;
	/* --f is 1 for the card in focus, 0 for cards to the side (set by site.js) */
	transform: scale(calc(0.8 + 0.2 * var(--f, 1)));
	opacity: calc(0.32 + 0.68 * var(--f, 1));
	transition: transform 0.12s linear, opacity 0.12s linear;
}
.is-style-slider.wp-block-post-template > li:not(.is-current) .ss-titleblock { pointer-events: none; }

/* sheet number above a dimension line */
.is-style-slider > li::before {
	content: attr(data-sheet);
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--muted);
	text-align: center;
	padding-bottom: 7px;
	margin-bottom: 14px;
	background:
		linear-gradient(var(--wp--preset--color--muted), var(--wp--preset--color--muted)) left bottom 3px / 100% 1px no-repeat,
		linear-gradient(var(--wp--preset--color--muted), var(--wp--preset--color--muted)) left bottom / 1px 7px no-repeat,
		linear-gradient(var(--wp--preset--color--muted), var(--wp--preset--color--muted)) right bottom / 1px 7px no-repeat;
}

.ss-sheet { position: relative; }
.ss-sheet .wp-block-post-featured-image { position: relative; margin: 0; overflow: visible; }
.ss-sheet .wp-block-post-featured-image a,
.ss-sheet .wp-block-post-featured-image > img { display: block; overflow: hidden; height: 100%; }
.ss-sheet .wp-block-post-featured-image a { position: relative; background: var(--wp--preset--color--surface); }
.ss-sheet .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translateX(var(--ss-px, 0px)) scale(1.14);
	filter: grayscale(calc(1 - var(--f, 1))) contrast(1.04);
	-webkit-user-drag: none;
}
/* blueprint tint, lifted on hover */
.ss-sheet .wp-block-post-featured-image a::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--cobalt);
	mix-blend-mode: color;
	opacity: calc(0.85 * (1 - var(--f, 1)));
	pointer-events: none;
}
/* crop marks at the four corners */
.ss-sheet .wp-block-post-featured-image::before {
	content: "";
	position: absolute;
	inset: -7px;
	pointer-events: none;
	z-index: 1;
	--c: var(--wp--preset--color--contrast);
	background:
		linear-gradient(var(--c), var(--c)) left top / 12px 1px no-repeat,
		linear-gradient(var(--c), var(--c)) left top / 1px 12px no-repeat,
		linear-gradient(var(--c), var(--c)) right top / 12px 1px no-repeat,
		linear-gradient(var(--c), var(--c)) right top / 1px 12px no-repeat,
		linear-gradient(var(--c), var(--c)) left bottom / 12px 1px no-repeat,
		linear-gradient(var(--c), var(--c)) left bottom / 1px 12px no-repeat,
		linear-gradient(var(--c), var(--c)) right bottom / 12px 1px no-repeat,
		linear-gradient(var(--c), var(--c)) right bottom / 1px 12px no-repeat;
	opacity: 0.7;
	transition: inset 0.4s ease, opacity 0.4s ease;
}
.ss-sheet:hover .wp-block-post-featured-image::before { inset: -11px; opacity: 1; }

/* title block, like the corner of a drawing sheet */
.ss-titleblock {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 1rem;
	margin-top: 1.1rem !important;
	padding-top: 0.7rem;
	border-top: 1px solid var(--wp--preset--color--contrast);
}
.ss-titleblock > * { margin: 0 !important; }
.ss-titleblock .wp-block-post-title { grid-column: 1; grid-row: 1; font-size: var(--wp--preset--font-size--large); font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; }
.ss-titleblock .wp-block-post-title a { text-decoration: none; }
.ss-titleblock .wp-block-post-title a:hover { color: var(--wp--preset--color--yellow); }
.ss-titleblock .ss-sheet-date { grid-column: 2; grid-row: 1; font-family: var(--wp--preset--font-family--mono); font-size: 0.6875rem; letter-spacing: 0.05em; color: var(--wp--preset--color--muted); padding-top: 0.3em; }
.ss-titleblock .wp-block-post-excerpt { grid-column: 1 / -1; margin-top: 0.4rem !important; }
.ss-titleblock .wp-block-post-excerpt__excerpt {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
}

/* ---------- Cards and rows (Work, Blog) ---------- */

.ss-card { position: relative; }
.ss-card .wp-block-post-featured-image { margin: 0; overflow: hidden; background: var(--wp--preset--color--surface); }
.ss-card .wp-block-post-featured-image img { transition: transform 0.6s cubic-bezier(.2,.7,.2,1); }
.ss-card:hover .wp-block-post-featured-image img { transform: scale(1.025); }
.ss-card .wp-block-post-title { font-size: var(--wp--preset--font-size--medium); font-weight: 500; letter-spacing: -0.01em; margin-top: 0.6rem; }
.ss-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.ss-card:hover .wp-block-post-title a { color: var(--wp--preset--color--accent); }

.ss-project-row { border-top: 1px solid var(--wp--preset--color--line); padding-top: 1.25rem; }

.ss-chips a {
	display: inline-block;
	border: 1px solid var(--wp--preset--color--line);
	padding: 0.15em 0.6em;
	margin: 0 0.25em 0.25em 0;
	font-size: var(--wp--preset--font-size--x-small);
	text-decoration: none;
}
.ss-chips a:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
.ss-chips .wp-block-post-terms__separator { display: none; }

/* ---------- Numbered index list (thesis contributions etc.) ---------- */

.is-style-index { list-style: none; padding: 0; margin: 0; counter-reset: ss-index; border-top: 1px solid var(--wp--preset--color--contrast); }
.is-style-index > li {
	counter-increment: ss-index;
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	align-items: baseline;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--x-large);
	letter-spacing: -0.025em;
	line-height: 1.1;
	transition: padding 0.3s ease;
}
.is-style-index > li::before {
	content: counter(ss-index, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
}
.is-style-index > li a { text-decoration: none; }
.is-style-index > li a::after { content: " \2192"; display: inline-block; opacity: 0; transform: translateX(-0.3em); transition: opacity .25s ease, transform .25s ease; color: var(--wp--preset--color--accent); }
.is-style-index > li:hover a { color: var(--wp--preset--color--accent); }
.is-style-index > li:hover a::after { opacity: 1; transform: none; }
.is-style-index > li em { display: block; grid-column: 2; font-style: normal; font-size: var(--wp--preset--font-size--small); letter-spacing: 0; color: var(--wp--preset--color--muted); margin-top: 0.35rem; }

/* ---------- Marker heading ---------- */

.is-style-marker { width: fit-content; box-shadow: inset 0 -0.3em 0 var(--wp--preset--color--yellow); padding: 0 0.08em; }

/* ---------- Buttons ---------- */

.wp-block-button.is-style-outline > .wp-block-button__link { border: 1px solid currentColor; background: transparent; color: inherit; }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--yellow); }

/* ---------- Thesis facts ---------- */

.ss-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.5rem; margin: 0; }
.ss-facts dt { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); text-transform: uppercase; letter-spacing: 0.04em; color: var(--wp--preset--color--muted); padding-top: 0.2em; }
.ss-facts dd { margin: 0; }

/* ---------- Footer: black, with contact and one quiet quote ---------- */

.ss-footer {
	background: var(--wp--preset--color--ink);
	color: #F2F2EE;
	--ss-fmuted: #8E8E95;
}
.ss-footer a { text-decoration: none; color: #F2F2EE; }
.ss-footer a:hover { color: var(--wp--preset--color--yellow); }
.ss-footer .ss-meta { color: var(--ss-fmuted); }
.ss-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem 1.6rem; font-size: var(--wp--preset--font-size--small); }
@media (max-width: 700px) { .ss-contact { justify-content: flex-start; } .ss-footer .is-vertical { align-items: flex-start !important; } }
.ss-contact li { margin: 0; color: #F2F2EE; }
.wp-site-blocks .ss-quotes { display: none; } /* the list you edit; one item is shown at random */
.ss-quote { margin: 0; max-width: 60ch; font-size: var(--wp--preset--font-size--small); line-height: 1.5; color: var(--ss-fmuted, var(--wp--preset--color--muted)); }
.ss-quote q { quotes: "\201C" "\201D"; }
.ss-quote cite { display: block; margin-top: 0.35rem; font-style: normal; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.05em; text-transform: uppercase; }
.ss-quote cite::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; background: var(--wp--preset--color--yellow); margin-right: 0.6em; vertical-align: 0.05em; }

/* ---------- Art tiles ---------- */

.ss-tile { position: relative; border-top: 1px solid var(--wp--preset--color--contrast); padding-top: 1rem; }
.ss-tile h3 a { text-decoration: none; }
.ss-tile h3 a::after { content: ""; position: absolute; inset: 0; }
.ss-tile:hover h3 { color: var(--wp--preset--color--yellow); }
.ss-tile:hover { border-top-color: var(--wp--preset--color--yellow); }

/* ---------- Pagination ---------- */

.wp-block-query-pagination a { text-decoration: none; }

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}


/* ---------- Small screens: menu always fully visible ---------- */

.ss-header .wp-block-navigation { flex-wrap: wrap; justify-content: center; }

@media (max-width: 900px) {
	.ss-header .wp-block-navigation .wp-block-navigation__container { gap: 0.5rem 1.6rem !important; }
}
@media (max-width: 600px) {
	.ss-header .wp-block-navigation,
	.ss-header .wp-block-navigation .wp-block-navigation-item__content { font-size: 0.875rem !important; }
	.ss-header .wp-block-navigation .wp-block-navigation__container { justify-content: center; gap: 0.4rem 1.1rem !important; }
	.ss-nav-private .wp-block-navigation-item__label::before { margin-right: 0.2em; }
	.ss-header .wp-block-navigation-submenu__toggle { margin-left: 0.1em; }
}
@media (max-width: 480px) {
	.ss-header .wp-block-navigation,
	.ss-header .wp-block-navigation .wp-block-navigation-item__content { font-size: 0.8125rem !important; }
	.ss-header .wp-block-navigation .wp-block-navigation__container { gap: 0.4rem 0.85rem !important; }
}
@media (max-width: 390px) {
	.ss-header .wp-block-navigation,
	.ss-header .wp-block-navigation .wp-block-navigation-item__content { font-size: 0.75rem !important; }
	.ss-header .wp-block-navigation .wp-block-navigation__container { gap: 0.4rem 0.6rem !important; }
	.ss-header .wp-block-navigation-submenu__toggle { width: 0.6em; }
}

/* keep the footer at the bottom on short pages */
.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > footer { margin-top: auto; }
.wp-site-blocks > footer > .ss-footer { margin-top: var(--wp--preset--spacing--50); }
/* empty slider message lines up with the page */
.ss-slider .wp-block-query > p,
.ss-slider .wp-block-query-no-results { padding-inline: var(--wp--style--root--padding-left, 1rem); }

/* ---------- Name languages ----------
   The languages sit as a quiet row directly under the name. The chosen one is
   larger and yellow, and a small yellow dot (the same dot that travels along
   the signal line in the header) glides under it. */

.ss-langswitch { display: none; } /* the editable list of labels; the script builds the row from it */

.wp-site-blocks .ss-names > .ss-lang {
	grid-area: 2 / 1;
	justify-self: end;
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: 0 clamp(0.8rem, 1.6vw, 1.4rem);
	margin: clamp(0.9rem, 1.6vw, 1.2rem) 0 0 !important;
	padding-bottom: 0.85rem;
	position: relative;
	white-space: nowrap;
}

.ss-names > .ss-lang button {
	appearance: none;
	background: none;
	border: 0;
	margin: 0;
	padding: 0.2rem 0;
	cursor: pointer;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.3;
	opacity: 0.7;
	transition: color 0.3s ease, font-size 0.35s cubic-bezier(.3,.7,.2,1), opacity 0.3s ease;
}
.ss-names > .ss-lang button[lang="fa"],
.ss-names > .ss-lang button[lang="ar"] { font-family: var(--wp--preset--font-family--persian); font-size: 0.8rem; letter-spacing: 0; text-transform: none; }
.ss-names > .ss-lang button:hover { color: var(--wp--preset--color--contrast); opacity: 1; }
.ss-names > .ss-lang button[aria-pressed="true"] { color: var(--wp--preset--color--yellow); opacity: 1; font-size: 0.8125rem; }
.ss-names > .ss-lang button[lang="fa"][aria-pressed="true"],
.ss-names > .ss-lang button[lang="ar"][aria-pressed="true"] { font-size: 1.05rem; }

/* the gliding dot */
.ss-lang-dot {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 6px;
	height: 6px;
	margin-left: -3px;
	border-radius: 50%;
	background: var(--wp--preset--color--yellow);
	transform: translateX(var(--dot-x, 0px));
	transition: transform 0.55s cubic-bezier(.5,0,.15,1);
	pointer-events: none;
}
.ss-lang-dot.is-moving { animation: ss-dot-hop 0.55s cubic-bezier(.5,0,.15,1); }
@keyframes ss-dot-hop {
	0%, 100% { width: 6px; margin-left: -3px; border-radius: 50%; }
	50% { width: 18px; margin-left: -9px; border-radius: 3px; }
}

@media (max-width: 600px) {
	.wp-site-blocks .ss-names > .ss-lang { gap: 0 0.65rem; }
	.ss-names > .ss-lang button { font-size: 0.5625rem; letter-spacing: 0.03em; }
	.ss-names > .ss-lang button[lang="fa"],
	.ss-names > .ss-lang button[lang="ar"] { font-size: 0.72rem; }
	.ss-names > .ss-lang button[aria-pressed="true"] { font-size: 0.6875rem; }
	.ss-names > .ss-lang button[lang="fa"][aria-pressed="true"],
	.ss-names > .ss-lang button[lang="ar"][aria-pressed="true"] { font-size: 0.875rem; }
}
@media (max-width: 360px) {
	.wp-site-blocks .ss-names > .ss-lang { gap: 0 0.45rem; }
	.ss-names > .ss-lang button { font-size: 0.5rem; letter-spacing: 0.01em; }
}

/* ---------- Page transition (to and from the homepage) ---------- */

.ss-loader {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: var(--wp--preset--color--base);
	opacity: 0;
	transition: opacity 0.18s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
}
.ss-loader.is-on { opacity: 1; }
.ss-loader canvas { display: block; }
.ss-loader-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* dropdowns (Research, Art): cobalt panel, hairline edge, yellow on hover */
.ss-header .wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
	border: 1px solid var(--wp--preset--color--line) !important;
	min-width: 12rem !important;
	padding: 0.4rem 0 !important;
	top: calc(100% + 14px) !important;
	left: -1rem !important;
}
.ss-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.45rem 1rem !important;
	color: var(--wp--preset--color--contrast);
}
.ss-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.ss-header .wp-block-navigation .wp-block-navigation__submenu-container [aria-current="page"] { color: var(--wp--preset--color--yellow); }
/* a small gap bridge so the menu stays open while moving down to it */
.ss-header .wp-block-navigation .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: -15px;
	height: 15px;
}
/* dropdowns on the right-hand half of the menu open towards the left, so they never run off the screen */
.ss-header .wp-block-navigation__container > li:nth-child(n+4) > .wp-block-navigation__submenu-container { left: auto !important; right: -1rem !important; }
@media (max-width: 600px) {
	.ss-header .wp-block-navigation .wp-block-navigation__submenu-container { min-width: 10rem !important; }
	.ss-header .wp-block-navigation__container > li:nth-child(n+4) > .wp-block-navigation__submenu-container { right: -0.25rem !important; }
}

/* ---------- Keep the name and language row still when switching ----------
   Every name stays in the layout (just invisible when not chosen), so the name
   box is always as tall and wide as the largest name. Each name sits on the
   bottom of that box, and the language row has a fixed height, so nothing
   moves when the language changes. */
.wp-site-blocks .ss-hero.has-lang .ss-name-v:not(.is-active),
.wp-site-blocks .ss-hero:not(.has-lang) .ss-name-v:not(.lang-fa) {
	display: block;
	visibility: hidden;
	pointer-events: none;
}
.wp-site-blocks .ss-names > .ss-name-v { align-self: end; }
.wp-site-blocks .ss-names > .ss-lang {
	height: 2.6rem;
	align-items: center;
	padding-bottom: 0.85rem;
	box-sizing: border-box;
	align-self: start;
}
@media (max-width: 600px) {
	.wp-site-blocks .ss-names > .ss-lang { height: 2.2rem; }
}
.wp-site-blocks .ss-names > .ss-lang { margin-top: clamp(1.1rem, 1.8vw, 1.4rem) !important; }
@media (max-width: 600px) {
	.wp-site-blocks .ss-names > .ss-lang { margin-top: 1.35rem !important; }
}

/* ---------- Language labels on one centre line ----------
   Persian and Arabic letters sit lower in their line than Latin capitals, so
   every label gets the same box, centred, and the Persian/Arabic ones are
   lifted to share the Latin labels' middle line. */
.wp-site-blocks .ss-names > .ss-lang { align-items: center; }
.ss-names > .ss-lang button {
	display: inline-flex;
	align-items: center;
	height: 1.6rem;
	line-height: 1;
	padding-top: 0;
	padding-bottom: 0;
}
.ss-names > .ss-lang button[lang="fa"],
.ss-names > .ss-lang button[lang="ar"] { position: relative; top: -0.12em; }

/* ---------- Thin yellow line along the top of the site ---------- */
.ss-header { border-top: 2px solid var(--wp--preset--color--yellow); }

/* ---------- Language labels: all written in Latin letters, lower case ---------- */
.ss-names > .ss-lang button,
.ss-names > .ss-lang button[lang="fa"],
.ss-names > .ss-lang button[lang="ar"] {
	font-family: var(--wp--preset--font-family--mono);
	text-transform: none;
	letter-spacing: 0.04em;
	font-size: 0.6875rem;
	top: 0;
}
.ss-names > .ss-lang button[aria-pressed="true"],
.ss-names > .ss-lang button[lang="fa"][aria-pressed="true"],
.ss-names > .ss-lang button[lang="ar"][aria-pressed="true"] { font-size: 0.875rem; }
@media (max-width: 600px) {
	.ss-names > .ss-lang button,
	.ss-names > .ss-lang button[lang="fa"],
	.ss-names > .ss-lang button[lang="ar"] { font-size: 0.625rem; letter-spacing: 0.02em; }
	.ss-names > .ss-lang button[aria-pressed="true"],
	.ss-names > .ss-lang button[lang="fa"][aria-pressed="true"],
	.ss-names > .ss-lang button[lang="ar"][aria-pressed="true"] { font-size: 0.75rem; }
}
@media (max-width: 360px) {
	.ss-names > .ss-lang button,
	.ss-names > .ss-lang button[lang="fa"],
	.ss-names > .ss-lang button[lang="ar"] { font-size: 0.5625rem; letter-spacing: 0; }
}

/* the chosen language keeps the same size as the others; only its colour and the dot mark it */
.ss-names > .ss-lang button[aria-pressed="true"],
.ss-names > .ss-lang button[lang="fa"][aria-pressed="true"],
.ss-names > .ss-lang button[lang="ar"][aria-pressed="true"] { font-size: 0.6875rem; }
@media (max-width: 600px) {
	.ss-names > .ss-lang button[aria-pressed="true"],
	.ss-names > .ss-lang button[lang="fa"][aria-pressed="true"],
	.ss-names > .ss-lang button[lang="ar"][aria-pressed="true"] { font-size: 0.625rem; }
}
@media (max-width: 360px) {
	.ss-names > .ss-lang button[aria-pressed="true"],
	.ss-names > .ss-lang button[lang="fa"][aria-pressed="true"],
	.ss-names > .ss-lang button[lang="ar"][aria-pressed="true"] { font-size: 0.5625rem; }
}

/* ---------- Sub-menus opened by a tap (phones and tablets) ---------- */
.ss-header .wp-block-navigation .has-child.is-ss-open > .wp-block-navigation__submenu-container {
	visibility: visible !important;
	opacity: 1 !important;
	width: auto !important;
	height: auto !important;
	overflow: visible !important;
	min-width: 10rem !important;
}
.ss-header .wp-block-navigation .has-child.is-ss-open > .wp-block-navigation-submenu__toggle svg { transform: rotate(180deg); }