/* ==========================================================================
   Vienna Process: bilingual typography and vertical rhythm
   English sets in Inter; Persian in IRANSansX (theme.json "persian" family).
   Persian rules are scoped to :lang(fa) so English pages are never touched.

   Many sizes and weights live as inline styles in block markup and in the
   slider block, so some overrides below need !important to win over them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared (both languages)
   -------------------------------------------------------------------------- */

/* Headings inherited the 1.8 body leading, which split two-line titles apart. */
:where(h1, h2, h3, h4, h5, h6) {
	line-height: 1.25;
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* The theme zeroes the top margin of every block in flow layouts, so consecutive
   paragraphs ran together. Restore paragraph spacing on the bottom edge instead. */
:is(.wp-block-post-content, .archive-main) :is(p, ul, ol):has(+ :is(p, ul, ol)) {
	margin-block-end: 1em;
}

/* In long-form content a heading needs more space above it than below, so it
   groups with the text it introduces. The theme rule above zeroes it, hence !important. */
.single .wp-block-post-content.is-layout-flow > :is(p, ul, ol) + :is(h2, h3, h4) {
	margin-block-start: 1.75em !important;
}

/* Section titles: a small label above the heading. These groups use flex layout,
   so browser default margins stacked on top of the 24px gap (60–80px apart). */
.wp-block-group.is-vertical:has(> p:first-child + :is(h1, h2, h3)) {
	row-gap: 8px;
}

.wp-block-group.is-vertical > p:first-child:has(+ :is(h1, h2, h3)),
.wp-block-group.is-vertical > p:first-child + :is(h1, h2, h3) {
	margin-block: 0;
}

/* Same label + heading pair inside the green band columns (flow layout, margins zeroed by the theme). */
.wp-block-column > p:first-child + :is(h1, h2, h3) {
	margin-block-start: 8px !important;
}

/* Homepage welcome section (Welcome message / Our commitment).
   The gold rule under each title rendered 0px wide, leaving an empty 40px gap
   that detached the title from its text. It is now a short accent bar. */
.vp-welcome .wp-block-group.is-vertical {
	row-gap: 0;
}

.vp-welcome h3 {
	margin: 0;
}

.vp-welcome h3 + hr.wp-block-separator {
	width: 40px;
	height: 2px;
	margin: 14px 0 22px !important;
	border: 0;
}

.vp-welcome p {
	margin: 0 0 1em;
	text-align: justify;
	hyphens: auto;
}

.vp-welcome p:last-child {
	margin-bottom: 0;
}

/* English body copy was 14px; 16px reads comfortably at this column width. */
html:not(:lang(fa)) .vp-welcome p[style*="font-size:14px"] {
	font-size: 16px !important;
	line-height: 1.75 !important;
}

/* Email under the welcome message (both languages). */
.vp-email {
	color: var(--wp--preset--color--green);
	font-weight: 600;
	text-decoration: none;
	unicode-bidi: isolate;
}

.vp-email:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Long-form text sections on wide pages (Mission "Our commitment", Organizers "Funding and support"):
   a centred reading column instead of 1240px lines (~120 characters). */
.vp-prose > * {
	max-width: 760px;
	margin-inline: auto !important;
}

.vp-prose > h2.wp-block-heading {
	margin-bottom: 20px !important;
}

/* English stays left-aligned: browsers on Windows don't hyphenate, so justified English
   opens wide gaps between words. Persian justifies cleanly. */
.vp-prose > p {
	margin-bottom: 1em !important;
	text-align: start !important;
}

html:lang(fa) body .vp-prose > p {
	text-align: justify !important;
}

.vp-prose > p:last-child {
	margin-bottom: 0 !important;
}

/* Single posts: section headings sat directly on their first paragraph. */
.single .wp-block-post-content h2.wp-block-heading {
	margin-bottom: 0.6em !important;
	font-size: 22px;
	line-height: 1.35;
}

html:lang(fa) body.single .wp-block-post-content h2.wp-block-heading {
	line-height: 1.6;
}

.single .wp-block-post-content :is(ul, ol) {
	margin-block: 0 1.2em;
}

/* Phones: the theme forced post titles to 20px and every h2 to 24px, so section headings
   outranked the page title. Title 26px, sections 20px. */
@media (max-width: 768px) {
	body.single h1.wp-block-post-title {
		font-size: 26px !important;
		line-height: 1.3 !important;
	}

	html:lang(fa) body.single h1.wp-block-post-title {
		line-height: 1.6 !important;
	}

	body.single .wp-block-post-content h2.wp-block-heading,
	html:lang(fa) body.single .wp-block-post-content h2.wp-block-heading {
		font-size: 20px !important;
	}
}

/* Contact: "Email:" label and address on one baseline, heading spaced from its intro. */
.vp-contact-email {
	align-items: baseline !important;
	gap: 8px 12px !important;
}

.vp-contact-email p {
	margin: 0 !important;
}

.vp-contact-email p:last-child {
	font-size: 17px !important;
	unicode-bidi: isolate;
}

.wp-block-post-content .is-layout-flow > h2.wp-block-heading:has(+ p) {
	margin-bottom: 12px !important;
}

/* Archive pagination: page numbers had no space between them. */
.wp-block-query-pagination {
	gap: 8px 24px;
	margin-top: 32px;
	font-size: 15px;
}

.wp-block-query-pagination-numbers {
	display: inline-flex;
	gap: 4px;
}

.wp-block-query-pagination-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	border-radius: 4px;
	text-decoration: none;
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--white);
}

.wp-block-query-pagination-numbers a.page-numbers:hover {
	background: var(--wp--preset--color--mint);
}

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

/* Legal pages (Imprint, Privacy, Accessibility): one readable column of titled sections. */
.vp-legal-intro {
	max-width: 56ch;
	margin-inline: auto !important;
	margin-top: 12px !important;
}

.vp-legal-section + .vp-legal-section {
	margin-top: 48px !important;
	padding-top: 40px;
	border-top: 1px solid var(--wp--preset--color--line);
}

.vp-legal-section h2 {
	margin: 0 0 16px !important;
	font-size: 22px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.vp-legal-section p,
.vp-legal-section li {
	font-size: 17px;
	line-height: 1.75;
}

.vp-legal-section p {
	margin: 0 0 1em !important;
}

.vp-legal-section p:last-child {
	margin-bottom: 0 !important;
}

.vp-legal-section ul {
	margin: 0;
	padding-inline-start: 1.25em;
}

.vp-legal-section li + li {
	margin-top: 6px;
}

.vp-legal-section li::marker {
	color: var(--wp--preset--color--gold);
}

.vp-legal-section a:not(.vp-email) {
	color: var(--wp--preset--color--green);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vp-legal-section code {
	font-size: 0.9em;
	padding: 1px 6px;
	border-radius: 3px;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	unicode-bidi: isolate;
	direction: ltr;
}

html:lang(fa) body .vp-legal-section h2 {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.55;
}

html:lang(fa) body .vp-legal-section :is(p, li) {
	font-size: 17px !important;
	line-height: 2 !important;
}

@media (max-width: 768px) {
	/* Pages that open with the grey title band (Contact, legal pages): the theme's mobile
	   padding on full-width groups left a white strip between header and band. */
	main.wp-block-group.alignfull:has(> .wp-block-post-content > .archive-header-group:first-child) {
		padding-top: 0 !important;
	}

	.vp-legal-section + .vp-legal-section {
		margin-top: 32px !important;
		padding-top: 28px;
	}

	.vp-legal-section h2.wp-block-heading,
	html:lang(fa) body .vp-legal-section h2.wp-block-heading {
		font-size: 19px !important;
	}

	.vp-legal-section :is(p, li),
	html:lang(fa) body .vp-legal-section :is(p, li) {
		font-size: 16px !important;
	}
}

/* Buttons under a paragraph need breathing room. The theme zeroes block top margins, hence !important. */
.wp-block-post-content p + .wp-block-buttons {
	margin-block-start: 24px !important;
}

/* Homepage welcome section: image stack stays in view while the text scrolls past. */
.vp-sticky-media {
	position: sticky;
	top: 120px;
}

.vp-sticky-media > figure.wp-block-image {
	width: 100%;
	margin: 0;
}

.vp-sticky-media > figure.wp-block-image img {
	width: 100%;
	height: auto;
}

/* Homepage archive band: the photo fills the full height of the text column beside it. */
.vp-fill-media {
	display: flex;
	align-self: stretch;
}

.vp-fill-media > figure.wp-block-image {
	flex: 1;
	height: 100%;
	margin: 0;
}

.vp-fill-media > figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 768px) {
	.vp-sticky-media {
		position: static;
	}

	.vp-fill-media > figure.wp-block-image img {
		height: 250px;
	}
}

/* Contact Form 7 wraps fields in <p>; the form spaces them with its own gap. */
.wpcf7-form p {
	margin-block: 0 !important;
}

/* Footer bottom row (muted links, copyright inheriting the muted paragraph colour) was grey on near-black (2.7:1). */
footer.wp-block-template-part :is(.has-muted-color, p:not(.has-text-color)) {
	color: rgb(255 255 255 / 0.72) !important;
}

/* Header tagline was 9px on phones. */
@media (max-width: 768px) {
	header .wp-block-image + .wp-block-group > p.has-muted-color {
		font-size: 10px !important;
	}
}

/* Contact form layout (moved out of inline styles in the form markup). */
.custom-contact-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.custom-contact-form .form-row {
	display: flex;
	gap: 20px;
}

.custom-contact-form .form-group {
	flex: 1;
}

.custom-contact-form label {
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--green);
}

.wpcf7-form :is(input[type="text"], input[type="email"], textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--green);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--green) !important;
}

@media (max-width: 768px) {
	.custom-contact-form .form-row {
		flex-direction: column;
		gap: 16px;
	}
}

/* --------------------------------------------------------------------------
   Persian (fa)

   Weight scale: 400 text · 500 navigation and meta · 600 labels and buttons
   · 700 headings. Nothing heavier: IRANSansX at 800 fills the counters and
   blackens the dots, especially at small sizes.

   Size floor: IRANSansX has a smaller x-height than Inter, so the Latin 11–13px
   label sizes are unreadable in Persian. Labels start at 13–14px.
   -------------------------------------------------------------------------- */

:lang(fa) body,
:lang(fa) :is(input, textarea, select, button) {
	font-family: var(--wp--preset--font-family--persian);
}

/* Persian letters join, so tracking breaks the joins, and there is no uppercase. */
html:lang(fa) body * {
	letter-spacing: 0 !important;
	text-transform: none !important;
}

/* Body text */
:lang(fa) :is(.wp-block-post-content, .archive-main) p:not([style*="font-size"]) {
	font-size: 1.125rem;
	line-height: 2;
}

html:lang(fa) body p[style*="font-size:14px"] {
	font-size: 15px !important;
	line-height: 1.9 !important;
}

/* Latin leading (1.5–1.6) set on blocks collides Persian dots and descenders between lines. */
html:lang(fa) body .wp-block-post-content p[style*="line-height:1.5"],
html:lang(fa) body .wp-block-post-content p[style*="line-height:1.6"] {
	line-height: 1.9 !important;
}

:lang(fa) :is(.wp-block-post-content, .archive-main) :is(p, ul, ol):has(+ :is(p, ul, ol)) {
	margin-block-end: 0.9em;
}

/* Excerpts were forced to 14px in English sizing. */
html:lang(fa) body .wp-block-post-excerpt {
	font-size: 16px !important;
	line-height: 1.9;
}

/* Headings: Persian needs more leading than Latin for dots and descenders. */
:lang(fa) :where(h1, h2, h3, h4, h5, h6) {
	line-height: 1.55;
}

html:lang(fa) body :is(h2, h3, h4)[style*="line-height"] {
	line-height: 1.55 !important;
}

/* Labels set at Latin caption sizes (11–12px, tracked caps in English). */
html:lang(fa) body :is(p, div, span, a)[style*="font-size:11px"],
html:lang(fa) body :is(p, div, span, a)[style*="font-size:12px"] {
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.7 !important;
}

/* Post dates are metadata, not labels (equal specificity to the rule above; wins on order). */
html:lang(fa) body div.wp-block-post-date {
	font-size: 13px !important;
	font-weight: 500 !important;
}

/* Buttons */
html:lang(fa) body .wp-block-button__link {
	font-size: 14px !important;
	font-weight: 600 !important;
}

/* Header */
html:lang(fa) body header .wp-block-navigation :is(.wp-block-navigation-item__content, .wp-block-navigation-item__label) {
	font-size: 15px;
	font-weight: 500 !important;
}

html:lang(fa) body header .wp-block-image + .wp-block-group > p.has-muted-color {
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
}

html:lang(fa) body .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 14px !important;
}

/* Footer: see assets/css/footer.css. */

/* Hero slider (inline styles come from the slider block's render.php). */
html:lang(fa) body .vienna-slider h1 {
	font-weight: 700 !important;
	line-height: 1.35 !important;
}

html:lang(fa) body .vienna-slider p.has-gold-color {
	font-size: 16px !important;
	font-weight: 600 !important;
	margin-bottom: 14px !important;
}

html:lang(fa) body .vienna-slider p.has-mint-color {
	font-size: 20px !important;
	line-height: 1.9 !important;
}

/* At the slide's full 800px the description read as one long line (~69 chars);
   680px with balanced wrapping gives two even lines. */
@media (min-width: 769px) {
	html:lang(fa) body .vienna-slider p.has-mint-color {
		max-width: 680px;
		text-wrap: balance;
	}
}

html:lang(fa) body .vienna-slider .wp-block-button__link,
html:lang(fa) body .vienna-slider a[style*="font-weight: 800"] {
	font-size: 15px !important;
	font-weight: 600 !important;
}

/* Contact form */
:lang(fa) .wpcf7-form :is(input, textarea) {
	direction: rtl;
}

:lang(fa) .wpcf7-form input[type="email"] {
	direction: ltr;
	text-align: right;
}

html:lang(fa) body .wpcf7-form input[type="submit"] {
	font-size: 15px !important;
	font-weight: 600 !important;
}

@media (max-width: 768px) {
	html:lang(fa) body .vienna-slider h1 {
		font-size: 30px !important;
	}

	html:lang(fa) body .vienna-slider p.has-gold-color {
		font-size: 14px !important;
	}

	html:lang(fa) body .vienna-slider p.has-mint-color {
		font-size: 16px !important;
	}

	html:lang(fa) body header .wp-block-image + .wp-block-group > p.has-muted-color {
		font-size: 11px !important;
	}

	html:lang(fa) body .wp-block-post-content h2.wp-block-heading {
		font-size: 24px !important;
	}
}