/**
 * Theme-only additions on top of the design's CSS.
 *
 * assets/css/landing.css is generated from the design canvas and is
 * overwritten whenever the design is rebuilt -- keep edits in this file.
 */

/* The conditional wrapper must be invisible to layout. */
k40-if {
	display: contents;
}

/* A configured unit photo replaces the design's labelled placeholder. */
.u-img.has-img {
	background-image: none;
}

.u-img.has-img .ph-cap {
	display: none;
}

.u-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.u-img.has-img .u-badge {
	z-index: 2;
}

/*
 * The hero artwork is mirrored for left-to-right reading. The design states
 * this inline on the English artboard; expressing it by direction keeps one
 * template serving both languages.
 */
[dir="ltr"] .hero-art {
	transform: scaleX(-1);
}

/*
 * The configured logo is a wordmark, so it runs wide rather than sitting in
 * the design's small square slot. These rules come after landing.css, which
 * is what lets them win over .logo-mark without !important.
 */
/*
 * 40px matches the square mark the design shipped, so the header keeps its
 * height. A quarter of the artwork is transparent margin, which leaves the
 * lettering itself about 30px tall.
 */
.logo-wordmark {
	width: auto;
	height: 40px;
	max-width: 140px;
}

/*
 * One artwork serves both grounds: the footer is dark, so the wordmark is
 * flattened to white there rather than shipping a second file.
 */
.ft .logo-wordmark {
	filter: brightness(0) invert(1);
	opacity: 0.92;
}

@media (max-width: 720px) {
	.logo-wordmark {
		height: 34px;
		max-width: 120px;
	}
}

/*
 * Each unit card carries a link to that type's own page, under the button
 * that picks the unit. Secondary on purpose: the button is the conversion,
 * the link is for a reader who wants to read before asking.
 */
.u-more {
	display: block;
	margin-top: 12px;
	text-align: center;
	font-size: 14px;
	color: var(--muted);
	text-underline-offset: 3px;
}

.u-more:hover {
	color: var(--ink);
}

/* The same idea under the distance lists in the location section. */
.loc-more {
	margin-top: 20px;
	font-size: 15px;
}

.loc-more a {
	color: var(--pine);
	text-underline-offset: 3px;
}

.loc-more a:hover {
	color: var(--ink);
}

/* Optional disclaimer line in the footer (Settings -> Katameya 40). */
.ft-disc {
	color: var(--onDarkMuted);
}

/* ----------------------------------------------------- standalone pages */

/*
 * The design styles named classes, not tags, because every element on the
 * landing page carries one. An inner page comes out of the editor as plain
 * markup, so .page-body gives those tags the same type scale and rhythm.
 */

.crumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--muted);
	margin-bottom: 20px;
}

.crumbs a {
	color: var(--muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.crumbs a:hover {
	color: var(--ink);
	border-bottom-color: var(--bronze);
}

.page-body {
	max-width: 760px;
	margin-top: 28px;
	font-size: 17px;
	line-height: 1.9;
	color: var(--ink);
	text-wrap: pretty;
}

.page-body > :first-child {
	margin-top: 0;
}

.page-body h2 {
	font-family: 'Noto Kufi Arabic', system-ui, sans-serif;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.45;
	margin: 44px 0 12px;
	scroll-margin-top: 96px;
}

.page-body h3 {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
	margin: 32px 0 8px;
	scroll-margin-top: 96px;
}

.page-body p {
	margin: 0 0 18px;
}

.page-body ul,
.page-body ol {
	margin: 0 0 18px;
	padding-inline-start: 24px;
}

.page-body li {
	margin-bottom: 8px;
}

.page-body a {
	color: var(--pine);
	text-underline-offset: 3px;
}

.page-body a:hover {
	color: var(--ink);
}

.page-body strong {
	font-weight: 600;
}

.page-body blockquote {
	margin: 24px 0;
	padding-inline-start: 18px;
	border-inline-start: 3px solid var(--bronze);
	color: var(--muted);
}

/* Price and size tables are the point of most of these pages. */
.page-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 24px 0;
	font-size: 16px;
}

.page-body th,
.page-body td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--line);
	text-align: start;
	vertical-align: top;
}

.page-body thead th {
	background: var(--stone);
	font-weight: 600;
	border-bottom-color: var(--line2);
}

.page-body tbody tr:last-child th,
.page-body tbody tr:last-child td {
	border-bottom: 0;
}

.page-body figure {
	margin: 24px 0;
}

.page-body img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

.page-body figcaption {
	margin-top: 8px;
	font-size: 14px;
	color: var(--muted);
}

/* Two photographs that belong together read better side by side. */
.page-body .page-figs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.page-body .page-figs img {
	width: 100%;
	margin: 0;
}

.page-body .page-figs figcaption {
	grid-column: 1 / -1;
}

@media (max-width: 600px) {
	.page-body .page-figs {
		grid-template-columns: 1fr;
	}
}

.page-body hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 36px 0;
}

@media (max-width: 720px) {
	.page-body {
		font-size: 16px;
	}

	.page-body h2 {
		font-size: 22px;
	}

	/* A wide table on a narrow screen scrolls rather than squeezes. */
	.page-body table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}

/* Respect a reduced-motion preference for the smooth scrolls. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}