/*
 * About and contact pages.
 *
 * A file of its own rather than more of app.css: these styles are only needed
 * on two pages, and the render callbacks enqueue it, so every other page is
 * unaffected.
 *
 * Tokens only — no literal colours, sizes or spacing. Logical properties
 * throughout for RTL. No letter-spacing anywhere: Persian is a connected
 * script and tracking severs the joins between letters.
 */

/* ---------- Shared section rhythm ---------- */
.oo-info,
.oo-formsec,
.oo-story {
	margin-block: var(--wp--preset--spacing--70);
}

.oo-map {
	margin-block: var(--wp--preset--spacing--70) 0;
}

/* Section headings are start-aligned with a muted standfirst beneath,
   matching the home page sections. */
.oo-story__heading,
.oo-values__heading,
.oo-formsec__heading {
	margin-block: 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--2xl);
	line-height: 1.45;
	font-weight: 600;
	text-align: start;
}

.oo-values__sub,
.oo-formsec__intro {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	text-align: start;
}

/* ---------- Contact: details ---------- */
.oo-info__intro {
	margin-block: 0 var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.75;
	max-inline-size: 48ch;
}

.oo-info__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--wp--preset--spacing--40);
}

/* The card idiom used across the theme: white on the surface background,
   large radius, the small shadow. */
.oo-info__card {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--sm);
}

.oo-info__label {
	margin-block: 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

.oo-info__value {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.85;
}

.oo-info__value a {
	text-decoration: none;
	border-block-end: 1px solid transparent;
	transition: border-color var(--wp--custom--transition--fast) var(--wp--custom--transition--ease);
}

.oo-info__value a:hover {
	border-block-end-color: currentColor;
}

.oo-info__social {
	margin-block-start: var(--wp--preset--spacing--50);
}

.oo-info__social .wp-block-social-links {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* ---------- Contact: the form ---------- */
.oo-formsec__form {
	margin-block-start: var(--wp--preset--spacing--50);
	max-inline-size: 42rem;
}

/* ---------- Contact: the map ---------- */
.oo-map {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--surface-alt);
	/* A map embed paints into its own compositing layer, and a composited
	   child is not reliably clipped by an ancestor's rounded overflow — the
	   corners are round until the tiles load, then go square. Isolating the
	   figure forces the clip to be applied as part of this stacking context. */
	isolation: isolate;
}

.oo-map iframe {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	display: block;
	/* The real fix: round the replaced element itself, so there is nothing
	   square left to escape the clip. It overlays the figure exactly, so
	   inheriting the radius keeps the two in step if the token changes. */
	border-radius: inherit;
}

@media (max-width: 600px) {
	.oo-map { aspect-ratio: 4 / 3; }
}

/* ---------- Contact: form and map side by side ----------
 * The form is capped at a readable measure, which left half the wide column
 * empty beside it. The map goes there. Columns rather than a bespoke grid so
 * the pair stays editable, and because core already stacks them on mobile.
 */
.oo-contact-split {
	margin-block: var(--wp--preset--spacing--70);
}

/* Each column becomes a column-flex box so its single child can be told to
   fill the shared height the flex row has already worked out. */
.oo-contact-split > .wp-block-column {
	display: flex;
	flex-direction: column;
}

/* The columns own the vertical rhythm now; the sections must not add theirs
   on top, or the map starts lower than the heading beside it. */
.oo-contact-split .oo-formsec,
.oo-contact-split .oo-map {
	margin-block: 0;
}

/* The column is the measure now, so the form's own cap would only narrow it
   twice. */
.oo-contact-split .oo-formsec__form {
	max-inline-size: none;
}

/* Fill the column instead of holding a 16:9 box: beside a tall form, a wide
   short map leaves an obvious gap beneath it. At this width the large radius
   finally reads as a radius, which it never did across the full 1240px. */
.oo-contact-split .oo-map {
	flex: 1 1 auto;
	aspect-ratio: auto;
	min-block-size: 22rem;
}

/* alignwide is inert inside a column, but belt and braces — the column is
   the only thing that should be setting this width. */
.oo-contact-split .oo-formsec,
.oo-contact-split .oo-map {
	max-inline-size: none;
}

/* Stacked below 782px, where core breaks the columns: with no form beside it
   the map has nothing to match, so give it its own proportions back. */
@media (max-width: 781px) {
	.oo-contact-split .oo-map {
		flex: 0 0 auto;
		aspect-ratio: 4 / 3;
		min-block-size: 0;
	}
	.oo-contact-split .oo-formsec {
		margin-block-end: var(--wp--preset--spacing--60);
	}
}

/* ---------- About: the story ---------- */
.oo-story__lead {
	margin-block: 0 var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.7;
	font-weight: 500;
	max-inline-size: 52ch;
}

.oo-story__split {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

/* Grid tracks follow the writing direction, so the text column lands on the
   right in RTL without a single physical property. */
@media (min-width: 782px) {
	.oo-story__split {
		grid-template-columns: 1.05fr 0.95fr;
		gap: var(--wp--preset--spacing--60);
	}
}

.oo-story__text > p {
	margin-block: 0 var(--wp--preset--spacing--30);
}

.oo-story__text > p:last-child {
	margin-block-end: 0;
}

.oo-story__media {
	margin: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--md);
}

.oo-story__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ---------- About: the values band ---------- */
.oo-values {
	margin-block: var(--wp--preset--spacing--70) 0;
	padding-block: var(--wp--preset--spacing--70);
	padding-inline: var(--wp--custom--container--gutter);
	background: var(--wp--preset--color--surface);
}

.oo-values__inner {
	box-sizing: border-box;
	max-inline-size: var(--wp--style--global--wide-size, 1240px);
	margin-inline: auto;
}

.oo-values__head {
	margin-block-end: var(--wp--preset--spacing--60);
}

.oo-values__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--wp--preset--spacing--40);
}

.oo-values__card {
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--sm);
}

/* A numeral rather than an icon: no icon set to ship, and a number reads the
   same in both scripts. number_format_i18n() renders it in Persian digits. */
.oo-values__num {
	margin-block: 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--primary);
}

.oo-values__title {
	margin-block: 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	line-height: 1.45;
}

.oo-values__text {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.85;
	color: var(--wp--preset--color--muted);
}

/* ---------- About: the closing band ---------- */
.oo-cta {
	margin-block-start: 0;
	padding-block: var(--wp--preset--spacing--70);
	padding-inline: var(--wp--custom--container--gutter);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	text-align: center;
}

.oo-cta__inner {
	box-sizing: border-box;
	max-inline-size: 56ch;
	margin-inline: auto;
}

.oo-cta__heading {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--2xl);
	line-height: 1.45;
	font-weight: 600;
	color: inherit;
}

.oo-cta__text {
	margin-block: var(--wp--preset--spacing--30) 0;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.85;
	color: inherit;
}

/* Scoped through .oo-cta deliberately. theme.json emits
   `:root :where(.wp-element-button, .wp-block-button__link)` for the global
   button style, which scores 0,1,0 — :root counts, :where() does not — so a
   bare .oo-cta__button ties with it and loses on source order, because the
   global-styles block is printed after this file. The result was a green
   button on a green band. The extra class breaks the tie without !important. */
.oo-cta .oo-cta__button {
	display: inline-block;
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block: 0.85rem;
	padding-inline: 2rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 550;
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--md);
	text-decoration: none;
	transition: transform var(--wp--custom--transition--base) var(--wp--custom--transition--ease);
}

/* The global style's :hover is 0,2,0, so the hover state needs the same
   treatment or the button turns dark green under the cursor. */
@media (hover: hover) {
	.oo-cta .oo-cta__button:hover {
		background: var(--wp--preset--color--base);
		color: var(--wp--preset--color--primary-dark);
		transform: translateY(-2px);
	}
}

/* ---------- Editor and admin hints ---------- */
/* Only ever rendered for a user who can reach Store Settings. */
.oo-block-hint {
	padding: var(--wp--preset--spacing--40);
	margin-block: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--sm);
	background: var(--wp--preset--color--surface-alt);
	border-inline-start: 3px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--md);
}

.oo-block-hint p {
	margin-block: 0;
}

.oo-block-hint p + p {
	margin-block-start: var(--wp--preset--spacing--20);
}

@media (prefers-reduced-motion: reduce) {
	.oo-info__value a,
	.oo-cta .oo-cta__button {
		transition: none;
	}
	.oo-cta .oo-cta__button:hover {
		transform: none;
	}
}