/* The public site on jannati.app: static, no JavaScript, same palette and face
   as the app (css/general.css, css/variables.css). The app itself lives on
   app.jannati.app; every call to action links there. */

@font-face {
	font-family: "Tajawal";
	src: url("fonts/Tajawal-Regular.woff2") format("woff2");
	font-weight: 400;
	size-adjust: 110%;
	ascent-override: 77%;
	descent-override: 23%;
	line-gap-override: 0%;
	font-display: swap;
}

@font-face {
	font-family: "Tajawal";
	src: url("fonts/Tajawal-Bold.woff2") format("woff2");
	font-weight: 700;
	size-adjust: 110%;
	ascent-override: 77%;
	descent-override: 23%;
	line-gap-override: 0%;
	font-display: swap;
}

:root {
	--bg:          #faf7f2;
	--surface:     #ffffff;
	--surface-3:   #f1ebe1;
	--text:        #1b1a17;
	--text-dim:    #6a635a;
	--border:      #e9e2d6;
	--accent-ink:  #ab5902;
	--accent-grad: linear-gradient(135deg, #ff9843 0%, #e77b02 100%);
	--on-accent:   #ffffff;
	--gutter:      16px;
	--measure:     1080px;
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg:          #14120f;
		--surface:     #1b1814;
		--surface-3:   #2f2a22;
		--text:        #f6f3ee;
		--text-dim:    #a9a196;
		--border:      #322c24;
		--accent-ink:  #ffb784;
		--accent-grad: linear-gradient(135deg, #ff9c4e 0%, #ffb784 100%);
		--on-accent:   #241706;
	}
}

* { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;

	/* "How it works" is an in-page link; glide to it, unless the visitor has
	   asked their system for less motion. */
	@media (prefers-reduced-motion: no-preference) { scroll-behavior: smooth; }
}

/* Land a little below the top edge rather than flush against it. */
[id] { scroll-margin-top: 16px; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 400 17px/1.55 "Tajawal", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	display: grid;
	grid-template-rows: auto 1fr auto;
	min-height: 100dvh;
}

h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 700; }
p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent-ink); }

/* One centred column for every band; each band is its own grid. */
.wrap {
	width: min(100% - 2 * var(--gutter), var(--measure));
	margin-inline: auto;
}

.btn {
	display: inline-grid;
	place-items: center;
	min-height: 48px;
	padding: 0 24px;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	background: var(--accent-grad);
	color: var(--on-accent);

	&.btn--quiet {
		background: var(--surface);
		color: var(--text);
		border: 1px solid var(--border);
	}

	&.btn--sm { min-height: 40px; padding: 0 18px; font-size: 15px; }
}

/* ---- Header ---- */
.site-head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 12px;
	padding-block: 12px;

	.logo img { height: 40px; width: auto; }

	.lang {
		grid-column: 3;
		color: var(--text);
		text-decoration: none;
		font-weight: 700;
		padding: 8px;
	}
}

/* ---- Hero: the copy sits on the illustration's empty side ---- */
.hero {
	display: grid;
	grid-template-areas: "stack";
	border-radius: 24px;
	overflow: hidden;
	background: var(--surface-3);

	> * { grid-area: stack; }

	.hero-art img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: right center;
	}

	.hero-copy {
		position: relative;   /* the flipped art (Arabic) is transformed, and would paint over it */
		display: grid;
		align-content: center;
		justify-items: start;
		gap: 16px;
		padding: 40px;
		max-width: 520px;
	}

	h1 { font-size: clamp(30px, 4.6vw, 46px); }
	.lede { color: var(--text-dim); font-size: 18px; }

	.actions {
		display: grid;
		grid-auto-flow: column;
		gap: 12px;
	}
}

/* The art's empty wall is on the left; in Arabic the copy starts on the right. */
[dir="rtl"] .hero .hero-art img {
	transform: scaleX(-1);
}

@media (max-width: 720px) {
	.hero {
		grid-template-areas: "copy" "art";

		.hero-copy { grid-area: copy; padding: 28px 20px 8px; max-width: none; }
		.hero-art { grid-area: art; }
		.hero-art img { aspect-ratio: 2 / 1; object-position: 75% center; }
		.actions { grid-auto-flow: row; justify-items: start; }
	}
	[dir="rtl"] .hero .hero-art img { object-position: 25% center; }
}

/* ---- Bands ---- */
main {
	display: grid;
	gap: 64px;
	padding-block: 8px 64px;
}

.band {
	display: grid;
	gap: 24px;

	> header { display: grid; gap: 8px; }
	h2 { font-size: clamp(24px, 3.2vw, 32px); }
	.sub { color: var(--text-dim); }
}

.services {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));   /* all seven on one row on desktop */
	gap: 16px;
	padding: 0;
	margin: 0;
	list-style: none;

	/* The card is the <li> for a coming-soon service, and the link inside it
	   for a bookable one, so the whole card is the tap target. */
	.soon, .live a {
		display: grid;
		grid-template-rows: auto auto minmax(0, 1fr);
		justify-items: center;
		gap: 8px;
		height: 100%;
		padding: 20px 12px;
		text-align: center;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 20px;
	}

	img { width: 72px; height: 72px; }
	h3 { font-size: 18px; }
	.state { font-size: 14px; color: var(--text-dim); }

	.live a {
		color: inherit;
		text-decoration: none;
		border-color: var(--accent-ink);
		.state { color: var(--accent-ink); font-weight: 700; }
		&:hover h3 { text-decoration: underline; }
	}

	.soon img { opacity: 0.6; }
}

/* ---- A service's page ---- */
.svc-top { display: grid; gap: 16px; }

.crumbs {
	display: grid;
	grid-auto-flow: column;
	justify-content: start;
	gap: 8px;
	font-size: 15px;
	color: var(--text-dim);

	a { color: var(--text-dim); }
	a::after { content: "›"; margin-inline-start: 8px; }
	[dir="rtl"] & a::after { content: "‹"; }
}

.svc-hero {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 16px 32px;
	padding: 32px;
	border-radius: 24px;
	background: var(--surface-3);

	> img { width: 144px; height: 144px; }
	.svc-copy { display: grid; justify-items: start; gap: 12px; }
	h1 { font-size: clamp(30px, 4.6vw, 44px); }
	.lede { color: var(--text-dim); font-size: 18px; }
	.price { font-size: 22px; font-weight: 700; color: var(--accent-ink); }
	.area { color: var(--text-dim); font-size: 15px; }

	@media (max-width: 720px) {
		grid-template-columns: minmax(0, 1fr);
		padding: 24px 20px;
		> img { width: 112px; height: 112px; }
	}
}

/* Name on one side, amount on the other: the rooms or jobs, and each option's
   choices. */
.rows {
	display: grid;
	padding: 0;
	margin: 0;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 20px;

	li {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 16px;
		padding: 14px 20px;

		& + li { border-top: 1px solid var(--border); }
	}

	small { display: block; color: var(--text-dim); font-size: 14px; }
	.amount { font-weight: 700; white-space: nowrap; }
	.unit { font-weight: 400; color: var(--text-dim); font-size: 14px; }
}

/* An hourly service's rooms: names only (the hours carry the price), so a
   compact grid rather than rows with an empty amount column. */
.names {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 8px;
	padding: 0;
	margin: 0;
	list-style: none;

	li {
		padding: 12px 16px;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 14px;
	}
}

.option {
	display: grid;
	gap: 12px;
	h3 { font-size: 18px; }
}

/* A service's questions: each one a row in the same card as .rows, the
   answer under its question. */
.faq {
	display: grid;
	margin: 0;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 20px;

	> div {
		display: grid;
		gap: 6px;
		padding: 16px 20px;

		& + div { border-top: 1px solid var(--border); }
	}

	dt { font-weight: 700; }
	dd { margin: 0; color: var(--text-dim); }
}

.steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	padding: 0;
	margin: 0;
	list-style: none;
	counter-reset: step;

	li {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas: "num title" "num text";
		align-content: start;   /* a shorter card's rows must not stretch to the tallest one */
		column-gap: 14px;
		row-gap: 4px;
		padding: 20px;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 20px;
		counter-increment: step;

		&::before {
			grid-area: num;
			content: counter(step);
			display: grid;
			place-items: center;
			width: 36px;
			height: 36px;
			border-radius: 50%;
			background: var(--accent-grad);
			color: var(--on-accent);
			font-weight: 700;
		}
	}

	h3 { grid-area: title; font-size: 18px; }
	p { grid-area: text; color: var(--text-dim); }
}

.pros {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px 24px;
	padding: 28px;
	border-radius: 24px;
	background: var(--surface-3);

	.actions {
		display: grid;
		grid-auto-flow: column;
		gap: 12px;
	}

	@media (max-width: 720px) {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;

		.actions { grid-auto-flow: row; justify-items: start; }
	}
}

/* ---- Footer ---- */
.site-foot {
	border-top: 1px solid var(--border);
	padding-block: 24px;
	color: var(--text-dim);
	font-size: 15px;

	/* The © line takes the room; WhatsApp (when set) and the legal links sit
	   after it in content-sized columns, one under the other on a phone. */
	.wrap {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		grid-auto-columns: auto;
		gap: 12px 24px;

		@media (max-width: 720px) { grid-auto-flow: row; }
	}

	nav {
		display: grid;
		grid-auto-flow: column;
		gap: 20px;
		justify-content: start;
	}

	a { color: var(--text-dim); }
}