/*
 * «سقف» looks: the visual tokens a demo (or a buyer, through Site Editor → Styles) picks.
 * Tokens live in settings.custom.sqf.look (→ --wp--custom--sqf--look--*) and become body
 * classes (functions.php): sqfl-texture-*, sqfl-card-*, sqfl-bands-*, sqfl-header-tone-*,
 * sqfl-type-scale-*. Every colour is a palette token. Never letter-spacing on Persian; no
 * tabular-nums (it widens «٬»). Prices and numbers stay in the body font (plugin CSS).
 */

body {
	--sqfl-o-base: var(--wp--preset--color--base);
	--sqfl-o-surface: var(--wp--preset--color--surface);
	--sqfl-o-contrast: var(--wp--preset--color--contrast);
	--sqfl-o-muted: var(--wp--preset--color--muted);
	--sqfl-o-accent: var(--wp--preset--color--accent);
	--sqfl-o-accent-ink: var(--wp--preset--color--accent-ink);
	--sqfl-o-accent-soft: var(--wp--preset--color--accent-soft);
	--sqfl-o-secondary: var(--wp--preset--color--secondary);
	--sqfl-display: var(--wp--custom--sqf--display, clamp(2.375rem, 1.2rem + 3.6vw, 4.25rem));
	--sqfl-display-weight: 800;
	--sqfl-header-h: 4.5rem;
	letter-spacing: 0;
}

/* ------------------------------------------------------------------ sticky header
   position: sticky keeps the header in the flow, so it never sits over the first lines of
   the page (a fixed bar would); anchors scroll below it; the admin bar is respected. */
html {
	scroll-padding-top: calc(var(--sqfl-header-h) + 1rem);
}

.sqfl-header {
	position: sticky;
	inset-block-start: var(--wp-admin--admin-bar--height, 0px);
	z-index: 30;
	background-color: var(--wp--preset--color--base);
	border-block-end: 1px solid var(--wp--preset--color--line);
}

@media (max-width: 600px) {
	/* The admin bar is not sticky on phones. */
	.admin-bar .sqfl-header {
		inset-block-start: 0;
	}
}

.sqfl-header .wp-block-site-title a {
	color: inherit;
}

.sqfl-header .wp-element-button {
	padding: 0.6rem 1.15rem;
	font-size: 0.95rem;
}

@media (max-width: 599px) {
	.sqfl-header .sqfl-header__cta {
		display: none;
	}
}

/* ------------------------------------------------------------------ bands */
.wp-block-group.is-style-sqfl-band-accent,
body.sqfl-bands-accent .sqfl-section:nth-child(3n+2 of .sqfl-section):not([class*="is-style-sqfl-band"]),
body.sqfl-bands-alternating .sqfl-section:nth-child(4n+2 of .sqfl-section):not([class*="is-style-sqfl-band"]),
body.sqfl-header-tone-accent .sqfl-header {
	--wp--preset--color--base: var(--sqfl-o-accent);
	--wp--preset--color--surface: var(--sqfl-o-accent);
	--wp--preset--color--surface-2: color-mix(in srgb, var(--sqfl-o-accent-ink) 10%, var(--sqfl-o-accent));
	--wp--preset--color--contrast: var(--sqfl-o-accent-ink);
	--wp--preset--color--muted: var(--sqfl-o-accent-ink);
	--wp--preset--color--line: color-mix(in srgb, var(--sqfl-o-accent-ink) 35%, var(--sqfl-o-accent));
	--wp--preset--color--accent: var(--sqfl-o-accent-ink);
	--wp--preset--color--accent-ink: var(--sqfl-o-accent);
	--wp--preset--color--accent-soft: color-mix(in srgb, var(--sqfl-o-accent-ink) 14%, var(--sqfl-o-accent));
	--wp--preset--color--secondary: var(--sqfl-o-accent-ink);
	background-color: var(--sqfl-o-accent) !important;
	color: var(--sqfl-o-accent-ink) !important;
}

.wp-block-group.is-style-sqfl-band-dark,
body.sqfl-bands-dark .sqfl-section:nth-child(3n+2 of .sqfl-section):not([class*="is-style-sqfl-band"]),
body.sqfl-bands-alternating .sqfl-section:nth-child(4n of .sqfl-section):not([class*="is-style-sqfl-band"]),
body.sqfl-header-tone-dark .sqfl-header {
	--wp--preset--color--base: var(--sqfl-o-contrast);
	--wp--preset--color--surface: color-mix(in srgb, var(--sqfl-o-contrast) 90%, var(--sqfl-o-base));
	--wp--preset--color--surface-2: color-mix(in srgb, var(--sqfl-o-contrast) 82%, var(--sqfl-o-base));
	--wp--preset--color--contrast: var(--sqfl-o-base);
	--wp--preset--color--muted: color-mix(in srgb, var(--sqfl-o-base) 80%, var(--sqfl-o-contrast));
	--wp--preset--color--line: color-mix(in srgb, var(--sqfl-o-base) 26%, var(--sqfl-o-contrast));
	--wp--preset--color--accent: var(--sqfl-o-accent-soft);
	--wp--preset--color--accent-ink: var(--sqfl-o-contrast);
	--wp--preset--color--accent-soft: color-mix(in srgb, var(--sqfl-o-accent-soft) 24%, var(--sqfl-o-contrast));
	--wp--preset--color--secondary: var(--sqfl-o-accent-soft);
	background-color: var(--sqfl-o-contrast) !important;
	color: var(--sqfl-o-base) !important;
}

:is(.is-style-sqfl-band-accent, .is-style-sqfl-band-dark) .wp-block-button.is-style-outline > .wp-element-button {
	color: var(--wp--preset--color--contrast);
	border-color: currentColor;
}

/* ------------------------------------------------------------------ textures */
body.sqfl-texture-dots { --sqfl-tex: radial-gradient(circle, #000 1.4px, transparent 1.9px); --sqfl-tex-size: 22px 22px; --sqfl-tex-strength: 14%; }
body.sqfl-texture-grid { --sqfl-tex: linear-gradient(#000 1px, transparent 1px), linear-gradient(90deg, #000 1px, transparent 1px); --sqfl-tex-size: 32px 32px; --sqfl-tex-strength: 8%; }
body.sqfl-texture-diagonal { --sqfl-tex: repeating-linear-gradient(-45deg, #000 0 1.5px, transparent 1.5px 14px); --sqfl-tex-size: auto; --sqfl-tex-strength: 8%; }
body.sqfl-texture-waves {
	--sqfl-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='22'%3E%3Cpath d='M0 11q7-8 14 0t14 0 14 0 14 0' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");
	--sqfl-tex-size: 56px 22px;
	--sqfl-tex-strength: 12%;
}
body.sqfl-texture-grain {
	--sqfl-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.2 -1'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url%28%23n%29'/%3E%3C/svg%3E");
	--sqfl-tex-size: 180px 180px;
	--sqfl-tex-strength: 14%;
}
body.sqfl-texture-terrazzo {
	--sqfl-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cpath d='M18 16l11-4 4 9-10 5zM98 28l14 2-3 11-12-4zM132 92l9 7-7 8-7-7zM28 122l13-1 2 9-14 2zM76 110l7-7 7 7-7 5zM60 64l9-2 1 8-9 1z'/%3E%3Ccircle cx='146' cy='24' r='3'/%3E%3Ccircle cx='12' cy='78' r='2.5'/%3E%3Ccircle cx='112' cy='140' r='3.5'/%3E%3C/svg%3E");
	--sqfl-tex-size: 170px 170px;
	--sqfl-tex-strength: 18%;
}

body[class*="sqfl-texture-"]:not(.sqfl-texture-none) :is(.sqfl-hero, .sqfl-section, .sqfl-cta, .sqfl-footer) {
	position: relative;
	isolation: isolate;
}

body[class*="sqfl-texture-"]:not(.sqfl-texture-none) :is(.sqfl-hero, .sqfl-section, .sqfl-cta, .sqfl-footer)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-color: color-mix(in srgb, currentColor var(--sqfl-tex-strength, 12%), transparent);
	-webkit-mask-image: var(--sqfl-tex);
	mask-image: var(--sqfl-tex);
	-webkit-mask-size: var(--sqfl-tex-size);
	mask-size: var(--sqfl-tex-size);
}

/* ------------------------------------------------------------------ display type */
.sqfl-hero .wp-block-column {
	container-type: inline-size;
}

.sqfl-display {
	font-size: min(var(--sqfl-display), 12.5cqi) !important;
	font-weight: var(--sqfl-display-weight);
	line-height: 1.32;
	overflow-wrap: break-word;
	text-wrap: balance;
}

body.sqfl-type-scale-bold { --sqfl-display-weight: 900; }
body.sqfl-type-scale-poster { --sqfl-display-weight: 400; }
body.sqfl-type-scale-poster .sqfl-display { line-height: 1.25; }

.sqfl-eyebrow {
	inline-size: fit-content;
	max-inline-size: 100%;
	margin-block-end: 0;
	padding: 0.3rem 0.95rem;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.sqfl-lead { max-inline-size: 40rem; }

/* ------------------------------------------------------------------ hero and art */
.sqfl-hero {
	position: relative;
	overflow: clip;
}

.sqfl-hero .sqf-search--hero {
	margin-block-start: var(--wp--preset--spacing--50);
}

.sqfl-art svg {
	display: block;
	inline-size: 100%;
	block-size: auto;
	max-block-size: 520px;
}

.sqfl-art--1 svg, .sqfl-art--2 svg, .sqfl-art--3 svg, .sqfl-art--4 svg, .sqfl-art--5 svg {
	max-block-size: 220px;
}

.sqfl-hero--overlay {
	display: grid;
}

.sqfl-hero--overlay > * {
	grid-area: 1 / 1;
}

.sqfl-hero--overlay > .sqfl-art {
	opacity: 0.32;
	align-self: end;
}

/* ------------------------------------------------------------------ sections */
.sqfl-section, .sqfl-cta {
	padding-block: var(--wp--preset--spacing--70);
}

.sqfl-section > .wp-block-heading:first-child {
	margin-block-start: 0;
}

.sqfl-stats {
	gap: 0.75rem;
}

.sqfl-stat {
	padding: 1rem 1.25rem;
	border-radius: var(--wp--custom--sqf--radius, 14px);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
}

.sqfl-stat p { margin: 0; }
.sqfl-stat strong { color: var(--wp--preset--color--accent); font-family: var(--wp--preset--font-family--body); font-size: 1.6em; }

/* Neighbourhood tiles */
.sqfl-hoods {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
	gap: var(--wp--preset--spacing--40);
}

.sqfl-hood {
	padding: 1.25rem;
	border-radius: var(--wp--custom--sqf--radius, 14px);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
}

.sqfl-hood h3 { margin: 0 0 0.25rem; font-size: var(--wp--preset--font-size--large); }
.sqfl-hood p { margin: 0; color: var(--wp--preset--color--muted); }

/* Steps / story */
.sqfl-steps {
	counter-reset: sqfl-step;
}

.sqfl-step {
	position: relative;
	padding-inline-start: 3.5rem;
}

.sqfl-step::before {
	counter-increment: sqfl-step;
	content: counter(sqfl-step, persian);
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	display: grid;
	place-items: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
}

/* Testimonials */
.sqfl-quote {
	margin: 0;
	padding: 1.5rem;
	border-radius: var(--wp--custom--sqf--radius, 14px);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
}

.sqfl-quote cite { color: var(--wp--preset--color--muted); font-style: normal; }

/* Project progress */
.sqfl-progress {
	block-size: 0.9rem;
	border-radius: 999px;
	background: var(--wp--preset--color--surface-2);
	overflow: hidden;
}

.sqfl-progress > span {
	display: block;
	block-size: 100%;
	border-radius: inherit;
	background: var(--wp--preset--color--accent);
}

.sqfl-units table {
	inline-size: 100%;
	border-collapse: collapse;
	font-family: var(--wp--preset--font-family--body);
}

.sqfl-units :is(th, td) {
	padding: 0.6rem;
	border-block-end: 1px solid var(--wp--preset--color--line);
	text-align: start;
}

/* ------------------------------------------------------------------ card cuts
   Shapes for the plugin's listing cards (.sqf-card) and the theme's own boxes. */
body.sqfl-card-arch .sqf-card__media,
body.sqfl-card-arch .sqfl-hood {
	border-start-start-radius: 999px 60%;
	border-start-end-radius: 999px 60%;
	overflow: hidden;
}

body.sqfl-card-ticket .sqf-card,
body.sqfl-card-ticket .sqfl-hood {
	-webkit-mask: radial-gradient(circle 12px at 0 62%, transparent 98%, #000) , radial-gradient(circle 12px at 100% 62%, transparent 98%, #000);
	-webkit-mask-composite: source-in;
	mask: radial-gradient(circle 12px at 0 62%, transparent 98%, #000) intersect, radial-gradient(circle 12px at 100% 62%, transparent 98%, #000);
}

body.sqfl-card-ticket .sqf-card__body {
	border-block-start: 2px dashed var(--wp--preset--color--line);
}

body.sqfl-card-polaroid .sqf-card {
	padding: 0.6rem 0.6rem 0;
	border-radius: 4px;
	box-shadow: 0 6px 18px rgb(0 0 0 / 0.12);
}

@media (prefers-reduced-motion: no-preference) {
	body.sqfl-card-polaroid .sqf-cards--grid > .sqf-card:nth-child(odd) { rotate: -0.6deg; }
	body.sqfl-card-polaroid .sqf-cards--grid > .sqf-card:nth-child(even) { rotate: 0.6deg; }
	body.sqfl-card-polaroid .sqf-cards--grid > .sqf-card:hover { rotate: 0deg; }
}

body.sqfl-card-tile .sqf-card,
body.sqfl-card-tile .sqfl-hood {
	border-radius: 0;
	border-width: 0 0 4px;
	border-color: var(--wp--preset--color--accent);
}

body.sqfl-card-blob .sqf-card__media {
	border-radius: 42% 58% 55% 45% / 38% 40% 60% 62%;
	margin: 0.6rem;
	overflow: hidden;
}

body.sqfl-card-blob .sqfl-hood {
	border-radius: 2rem 0.75rem 2rem 0.75rem;
}

/* Tag: the price hangs from the photo like a wooden agency sign. */
body.sqfl-card-tag .sqf-card__price {
	position: relative;
	align-self: flex-start;
	margin-block-start: -1.6rem;
	padding: 0.35rem 1rem 0.35rem 1.4rem;
	border-radius: 0.4rem;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	box-shadow: 0 3px 0 color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent);
	z-index: 1;
}

body.sqfl-card-tag .sqf-card__price::after {
	content: "";
	position: absolute;
	inset-inline-end: 0.5rem;
	inset-block-start: 50%;
	inline-size: 0.45rem;
	block-size: 0.45rem;
	margin-block-start: -0.225rem;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
}

/* Frame: double rule inset, gallery-like. */
body.sqfl-card-frame .sqf-card,
body.sqfl-card-frame .sqfl-hood {
	border-radius: 0;
	outline: 1px solid var(--wp--preset--color--line);
	outline-offset: -8px;
	padding: 8px;
}

body.sqfl-card-frame .sqf-card__media {
	aspect-ratio: 3 / 2;
}

/* ------------------------------------------------------------------ footer */
.sqfl-footer {
	padding-block: var(--wp--preset--spacing--60);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.sqfl-footer .wp-block-navigation {
	gap: 0.5rem 1.5rem;
}

/* ------------------------------------------------------------------ phone menu */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
	padding: clamp(1rem, 5vw, 1.75rem) !important;
	border-block-start: 0.4rem solid var(--wp--preset--color--accent);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-block-start: 3.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	inline-size: 100%;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 16%, transparent);
	font-size: clamp(1.15rem, 1rem + 2vw, 1.5rem);
	font-weight: 700;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	inline-size: 100%;
	padding-block: 0.8rem !important;
}

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	min-inline-size: 44px;
	min-block-size: 44px;
	justify-content: center;
}

/* ------------------------------------------------------------------ hero types (CTO review)
   bar / split / map / float / type: the demo's scene carries >= 40 % of the hero at 1440
   and the search form stays usable at 390 (no overlap, 44 px targets). */
.sqfl-hero--bar, .sqfl-hero--float, .sqfl-hero--type { padding-inline: 0; }
.sqfl-hero--bar > .wp-block-group, .sqfl-hero--type > .wp-block-group { max-inline-size: 100%; }

/* bar: heading above, full-width scene, horizontal search bar riding its lower edge */
.sqfl-hero--bar { display: flex; flex-direction: column; }
.sqfl-hero--bar .sqfl-hero__text { order: -1; text-align: center; padding-inline: var(--wp--preset--spacing--40, 1rem); }
.sqfl-hero--bar .sqfl-hero__text .sqfl-eyebrow, .sqfl-hero--bar .sqfl-hero__text .sqfl-lead { margin-inline: auto; }
.sqfl-hero--bar > .sqfl-art svg { inline-size: 100%; block-size: auto; max-block-size: none; }
.sqfl-hero--bar .sqfl-hero__bar { position: relative; z-index: 2; margin-block-start: clamp(-5rem, -6vw, -1.5rem); padding-inline: var(--wp--preset--spacing--40, 1rem); }
.sqfl-hero--bar .sqfl-hero__bar .sqf-form { box-shadow: 0 18px 50px rgb(0 0 0 / 0.18); }

/* split: text + form | big scene (centre of the panorama, cropped to the column) */
.sqfl-hero--split .sqfl-art svg, .sqfl-hero--map .sqfl-art svg { inline-size: 100%; max-block-size: none; }
.sqfl-hero--split .sqfl-art svg { block-size: clamp(300px, 36vw, 540px); border-radius: var(--wp--custom--sqf--radius, 12px); }

/* float: full-bleed scene, a card with heading + form over it */
.sqfl-hero--float .sqfl-hero__stage { position: relative; }
.sqfl-hero--float .sqfl-hero__stage > .sqfl-art svg { inline-size: 100%; block-size: clamp(460px, 44vw, 660px); max-block-size: none; }
.sqfl-hero--float .sqfl-hero__card { position: absolute; inset-block-start: 50%; inset-inline-start: max(1rem, calc((100% - 1200px) / 2)); transform: translateY(-50%);
	inline-size: min(560px, calc(100% - 2rem)); padding: clamp(1.25rem, 2.5vw, 2.25rem); border-radius: var(--wp--custom--sqf--radius, 12px);
	background: var(--wp--preset--color--surface); box-shadow: 0 24px 60px rgb(0 0 0 / 0.22); }
@media (max-width: 781px) {
	.sqfl-hero--float .sqfl-hero__stage > .sqfl-art svg { block-size: 260px; }
	.sqfl-hero--float .sqfl-hero__card { position: relative; inset: auto; transform: none; margin: -3rem auto 0; }
}

/* type: big headline, the scene as a wide band right under it, the form on its lower edge */
.sqfl-hero--type { padding-block-start: var(--wp--preset--spacing--50, 2rem); }
.sqfl-hero--type .sqfl-hero__huge .sqfl-display { font-size: clamp(2.4rem, 5.4vw, 5rem) !important; line-height: 1.12; margin-block: 0.3em 0; }
.sqfl-hero--type > .wp-block-group:not(.sqfl-art) { padding-inline: var(--wp--preset--spacing--40, 1rem); }
.sqfl-hero--type > .sqfl-art { margin-block-start: var(--wp--preset--spacing--40, 1.25rem); }
.sqfl-hero--type > .sqfl-art svg { inline-size: 100%; block-size: clamp(230px, 27vw, 400px); max-block-size: none; }
.sqfl-hero--type .sqfl-hero__bar { position: relative; z-index: 2; margin-block-start: clamp(-4.5rem, -5vw, -1.25rem); }
.sqfl-hero--type .sqfl-hero__bar .sqf-form { box-shadow: 0 18px 50px rgb(0 0 0 / 0.18); }

/* map: the place large, its neighbourhood map as an inset */
.sqfl-hero__mapstage { position: relative; }
.sqfl-hero__mapstage > .sqfl-art--band svg { inline-size: 100%; block-size: clamp(320px, 36vw, 540px); max-block-size: none; border-radius: var(--wp--custom--sqf--radius, 12px); }
.sqfl-hero__mapstage > .sqfl-art--map { position: absolute; inset-block-end: -1.25rem; inset-inline-start: -1.25rem; inline-size: min(42%, 320px); margin: 0 !important; }
.sqfl-hero__mapstage > .sqfl-art--map svg { inline-size: 100%; block-size: auto; border: 4px solid var(--wp--preset--color--surface); border-radius: var(--wp--custom--sqf--radius-sm, 8px); box-shadow: 0 12px 30px rgb(0 0 0 / 0.22); }
@media (max-width: 781px) {
	.sqfl-hero__mapstage > .sqfl-art--map { inline-size: 46%; inset-inline-start: 0.5rem; inset-block-end: -0.75rem; }
}

/* Hero scenes ignore the constrained layout's max-width (WordPress caps children of a
   constrained group at its contentSize, which shrank bar/float scenes to ~300px). */
.sqfl-hero .sqfl-art--hero { max-inline-size: none !important; inline-size: 100%; }
.sqfl-hero .sqfl-art--hero > svg { max-inline-size: none !important; inline-size: 100%; block-size: auto; }
.sqfl-hero--bar .sqfl-art--hero > svg { max-block-size: clamp(220px, 26vw, 380px); }