/**
 * Toyad Homes — the small-screen layer.
 *
 * Everything here is inside a max-width or coarse-pointer query, so the
 * desktop and large-screen design this sits on top of is left exactly as it
 * was. Nothing in this file can apply above 1180px, and almost nothing above
 * 820px. Delete the file and the site returns to its previous state.
 *
 * The aim is not a shrunken desktop. It is the same site — same colours, same
 * typefaces, same voice — laid out for a thumb: fewer things per row, larger
 * targets, less scrolling before the first property, and no text a person has
 * to squint at.
 *
 * Written against real measurements taken at 320, 375, 390 and 430 CSS pixels.
 */

/* ==========================================================================
 * 1. The mobile menu was invisible
 *
 * The drawer paints itself ink, and a later rule for pages with a hero set
 * every nav link to ink as well, so on the home page — the page most people
 * land on — the menu opened onto twelve unreadable rows. This restores the
 * cream, scoped inside the same breakpoint the drawer lives in so desktop
 * cannot be touched.
 * ====================================================================== */

@media (max-width: 1180px) {
	body.tw-has-hero .tw-header .tw-nav > ul > li > a,
	body.tw-has-hero .tw-header.is-stuck .tw-nav > ul > li > a,
	.tw-nav > ul > li > a {
		color: var(--tw-bone);
	}

	body.tw-has-hero .tw-header .tw-nav .sub-menu a,
	.tw-nav .sub-menu a {
		color: #b9c8c1;
	}

	/* The drawer is its own surface, so the type can breathe. */
	.tw-nav > ul > li > a {
		font-size: 1.22rem;
		padding: 0.95rem 0;
		min-height: 52px;
		display: flex;
		align-items: center;
	}

	.tw-nav .sub-menu a { min-height: 44px; display: flex; align-items: center; }

	/* A drawer that scrolls under the notch or the home indicator loses its
	   last item on exactly the phones most people carry. */
	.tw-nav {
		padding-bottom: calc(var(--tw-6) + env(safe-area-inset-bottom));
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	/* The current page should be obvious once the list is legible. */
	.tw-nav .current-menu-item > a,
	.tw-nav .current_page_item > a { color: var(--tw-brass); }
}

/* ==========================================================================
 * 2. Touch targets
 *
 * Measured: buttons 38px, inline links 25px, selects 26px, gallery thumbs 3px.
 * A finger pad is about 9mm — roughly 44 CSS pixels — so anything under that
 * is a guess rather than a tap. Applied by pointer type as well as width, so a
 * touchscreen laptop benefits and a mouse-driven desktop does not change.
 * ====================================================================== */

@media (hover: none) and (pointer: coarse), (max-width: 820px) {
	.tw-btn {
		min-height: 48px;
		padding-block: 0.9em;
		font-size: max(0.9rem, var(--tw-t--1));
	}

	.tw-btn--sm { min-height: 42px; }

	.tw-nav a,
	.tw-link,
	.tw-footer a,
	.tw-topbar a {
		/* A larger hit area without moving anything on screen. */
		position: relative;
	}

	.tw-link::after,
	.tw-footer__col a::after,
	.tw-topbar a::after {
		content: "";
		position: absolute;
		inset: -12px -6px;
	}

	/* Selects and inputs at 26px are the hardest thing on the page to hit. */
	.tw-field input,
	.tw-field select,
	.tw-field textarea,
	.tw-search select,
	.tw-search input {
		min-height: 50px;
	}

	.tw-search__cell select { padding-block: 0.85rem; }

	.tw-card__save { width: 44px; height: 44px; }

	/* The gallery strip measured three pixels tall. */
	.tw-gallery__thumb { min-height: 64px; }

	/* Stop the grey flash and the 300ms wait on tap. */
	a, button, [role="button"], input, select, textarea, summary {
		-webkit-tap-highlight-color: rgba(194, 161, 90, 0.18);
		touch-action: manipulation;
	}
}

/* ==========================================================================
 * 3. Form fields, and the iOS zoom trap
 *
 * Safari on iOS zooms the whole page when a field smaller than 16px takes
 * focus, and does not zoom back out. Measured 13.3px on text inputs and 15.3px
 * on selects, so every form on the site did this. The fix is simply to meet
 * the threshold on touch devices.
 * ====================================================================== */

@media (hover: none) and (pointer: coarse), (max-width: 820px) {
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="number"],
	input[type="search"],
	input[type="password"],
	select,
	textarea {
		font-size: 16px;
	}

	/* Roomier fields read as easier to fill in, and they are. */
	.tw-field input,
	.tw-field select,
	.tw-field textarea {
		padding: 0.85rem 0.9rem;
		border-radius: 8px;
	}

	.tw-field label { font-size: 0.78rem; margin-bottom: 0.35rem; }
}

/* ==========================================================================
 * 4. The hero, and getting to a property sooner
 *
 * Measured on a 390px phone: the search block alone was 486px tall — most of
 * a screen — and the first property card did not appear until 1502px down,
 * two and a half screens of scrolling. Someone arriving from a phone should
 * see property, not a form.
 *
 * Two columns for the short fields, tighter rows, and a hero that stops
 * trying to fill the viewport. Nothing is removed; it is folded.
 * ====================================================================== */

@media (max-width: 820px) {
	.tw-hero { min-height: 0; padding-bottom: var(--tw-5); }

	.tw-hero__title { font-size: clamp(2.1rem, 1.35rem + 3.6vw, 3rem); line-height: 1.06; }
	.tw-hero__lead  { font-size: var(--tw-t-0); line-height: 1.6; max-width: 40ch; }

	/* Buy / Rent / Commercial stays one row — three words fit at any width. */
	.tw-search__tabs { display: grid; grid-template-columns: repeat(3, 1fr); }
	.tw-search__tabs button,
	.tw-search__tabs a { min-height: 48px; font-size: 0.82rem; }

	/* Location gets its own row; the three short answers pair up. */
	.tw-search__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
	.tw-search__cell { margin: 0; border-right: 1px solid var(--tw-line); }
	.tw-search__cell:first-child { grid-column: 1 / -1; border-right: 0; }
	.tw-search__cell:nth-child(odd) { border-right: 0; }
	.tw-search__submit { grid-column: 1 / -1; }
	.tw-search__submit .tw-btn { width: 100%; min-height: 54px; }
}

@media (max-width: 480px) {
	/* Below this the two-column pairing starts to clip long option text. */
	.tw-search__row { grid-template-columns: 1fr; }
	.tw-search__cell { border-right: 0; }
}

/* --- The folded state, applied by main.js only on phones ---------------- */

@media (max-width: 820px) {
	.tw-search.is-folded .tw-search__row {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0;
	}

	.tw-search.is-folded .tw-search__cell { border-right: 0; }

	.tw-search__more {
		display: grid;
		grid-template-columns: 1fr 1fr;
		border-top: 1px solid var(--tw-line);
	}

	.tw-search__more .tw-search__cell:nth-child(odd) { border-right: 1px solid var(--tw-line); }
	.tw-search__more[hidden] { display: none; }

	.tw-search__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: .5rem;
		width: 100%;
		min-height: 48px;
		padding: 0 1rem;
		border: 0;
		border-top: 1px solid var(--tw-line);
		background: transparent;
		font-family: var(--tw-sans);
		font-size: .8rem;
		font-weight: 700;
		letter-spacing: .04em;
		color: var(--tw-brass-d);
		cursor: pointer;
	}

	/* A chevron that turns, so the control says which way it goes. */
	.tw-search__toggle::after {
		content: "";
		width: 8px;
		height: 8px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translateY(-2px);
		transition: transform .2s var(--tw-ease);
	}

	.tw-search__toggle.is-open::after { transform: rotate(-135deg) translateY(-2px); }

	@media (max-width: 420px) {
		.tw-search__more { grid-template-columns: 1fr; }
		.tw-search__more .tw-search__cell:nth-child(odd) { border-right: 0; }
	}
}

/* ==========================================================================
 * 5. Rhythm
 *
 * Desktop section padding is generous because there is room for it. On a
 * phone the same spacing reads as dead air and adds screens of scrolling to
 * a page that was already 23,000 pixels long.
 * ====================================================================== */

@media (max-width: 820px) {
	.tw-section { padding-block: clamp(2.4rem, 1.6rem + 4vw, 3.6rem); }

	.tw-head {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--tw-2);
		margin-bottom: var(--tw-4);
	}

	.tw-head__aside { max-width: 46ch; }

	.tw-head h2 { font-size: clamp(1.6rem, 1.15rem + 2.2vw, 2.2rem); line-height: 1.12; }

	/* One card at a time, but taller images so each still feels considered
	   rather than like a row in a list. */
	.tw-grid { gap: var(--tw-4); }
	.tw-card .tw-media { aspect-ratio: 3 / 2; }
	.tw-card__price { font-size: 1.35rem; }
	.tw-card__title { font-size: 1rem; line-height: 1.35; }
}

/* ==========================================================================
 * 6. Areas — a swipeable rail rather than a tall stack
 *
 * Six neighbourhood tiles stacked vertically is 2,000 pixels of scrolling to
 * pass something most visitors only glance at. As a rail it takes one screen
 * and invites a swipe, which is the natural gesture on a phone.
 * ====================================================================== */

@media (max-width: 720px) {
	.tw-areas {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 74%;
		grid-template-columns: none;
		gap: var(--tw-3);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		/* Bleed to the screen edge so the next tile peeks in and the rail
		   reads as scrollable without a hint or an arrow. */
		margin-inline: calc(var(--tw-gutter) * -1);
		padding-inline: var(--tw-gutter);
		padding-bottom: var(--tw-2);
	}

	.tw-areas::-webkit-scrollbar { display: none; }
	.tw-areas > * { scroll-snap-align: start; }
	.tw-area { min-height: 200px; }
}

/* ==========================================================================
 * 7. The contact band
 *
 * Two columns become one, and the channel cards grow into proper targets.
 * The order matters more than the arrangement here: identity, then the
 * assistant, then the people.
 * ====================================================================== */

@media (max-width: 900px) {
	.tw-cb__mark { width: 64px; height: 64px; margin-bottom: var(--tw-3); }
	.tw-cb__title { font-size: clamp(1.7rem, 1.2rem + 2.6vw, 2.4rem); }
	.tw-cb__facts li { font-size: 0.82rem; }

	.tw-way { padding: 1rem; gap: 0.85rem; min-height: 72px; }
	.tw-way__ico { width: 46px; height: 46px; }
	.tw-way__text strong { font-size: 1.02rem; }
	.tw-way__text small { font-size: 0.66rem; }

	.tw-cb__social a { width: 44px; height: 44px; }
}

/* ==========================================================================
 * 8. Footer
 * ====================================================================== */

@media (max-width: 600px) {
	.tw-footer__col a { display: inline-flex; align-items: center; min-height: 40px; }
	.tw-footer__grid { gap: var(--tw-5); }
	.tw-footer { padding-bottom: calc(var(--tw-5) + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
 * 9. Type floor
 *
 * Measured: the logo subtitle at 8px, eyebrows and step labels at 10.5–11.2px.
 * Those sizes are set for a screen held at arm's length on a desk, not one
 * held in a hand on a matatu. Letter-spacing comes down with the size rise so
 * the words still fit their rows.
 * ====================================================================== */

@media (max-width: 820px) {
	.tw-eyebrow { font-size: 0.72rem; letter-spacing: 0.16em; }
	.tw-logo__sub { font-size: 0.58rem; letter-spacing: 0.16em; }
	.tw-cb__step { font-size: 0.7rem; letter-spacing: 0.14em; }
	.tw-way__text small { font-size: 0.7rem; letter-spacing: 0.08em; }
	.tw-card__meta,
	.tw-facts__k { font-size: 0.76rem; }
	.tw-topbar__portal { font-size: 0.72rem; }
}

/* ==========================================================================
 * 10. Notches, home indicators and rounded corners
 *
 * A phone's usable area is not its screen. Anything pinned to an edge needs
 * to know where the safe area actually stops, or it sits under the camera
 * housing or behind the home bar.
 * ====================================================================== */

@media (max-width: 820px) {
	.tw-topbar,
	.tw-header__inner,
	.tw-wrap {
		padding-left: max(var(--tw-gutter), env(safe-area-inset-left));
		padding-right: max(var(--tw-gutter), env(safe-area-inset-right));
	}

	body { overscroll-behavior-y: none; }
}

/* ==========================================================================
 * 11. Landscape on a phone
 *
 * A phone turned sideways has around 380 pixels of height. A hero sized for
 * a portrait screen leaves no room for anything else, and a fixed header eats
 * a fifth of what is left.
 * ====================================================================== */

@media (max-height: 460px) and (orientation: landscape) and (pointer: coarse) {
	.tw-hero { min-height: 0; padding-block: var(--tw-4); }
	.tw-hero__title { font-size: 1.9rem; }
	.tw-hero__lead { display: none; }
	.tw-topbar { display: none; }
	.tw-nav { max-height: calc(100dvh - var(--tw-header-h)); }
	.tw-section { padding-block: var(--tw-4); }
}

/* ==========================================================================
 * 12. Wide content must scroll itself, never the page
 *
 * One table or one long price is enough to give the whole document a
 * horizontal scrollbar, and a page that slides sideways under the thumb feels
 * broken even when everything else is right.
 * ====================================================================== */

@media (max-width: 820px) {
	.tw-prose table,
	.tw-table,
	.tw-facts--wide {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.tw-prose pre { overflow-x: auto; }

	/* Long unbroken strings — a reference, an email, a URL — should wrap
	   rather than push the layout out. */
	.tw-card__title,
	.tw-way__text strong,
	.tw-prose a { overflow-wrap: anywhere; }
}

/* ==========================================================================
 * 13. Motion
 *
 * Parallax and long reveals are pleasant on a desktop and jittery on a mid
 * range phone, where they also cost battery. The content still arrives; it
 * simply stops sliding.
 * ====================================================================== */

@media (max-width: 820px) {
	[data-tw-reveal] { transition-duration: 0.34s; }
	.tw-media img { transition: none; }
	.tw-card:hover .tw-media img,
	a:hover > .tw-media img { transform: none; }
}

/* ==========================================================================
 * 14. Second pass — the things the first pass missed
 *
 * Everything below was found by measuring the real markup rather than the
 * markup the first pass assumed. Same contract as the rest of the file:
 * every rule is inside a max-width or coarse-pointer query.
 * ====================================================================== */

/* --- The drawer was opening on top of the button that opened it ---------
 *
 * .tw-nav was pinned at var(--tw-header-h) — 84px — but the header only
 * reaches the top of the screen once the contact bar has scrolled away.
 * At rest it starts 40px down, so the drawer covered the bottom half of the
 * header, the burger included: tapping it again did nothing because the tap
 * landed on the drawer. main.js now measures the header and publishes
 * --tw-nav-top; the old value stays as the fallback for a scripted-off page.
 */

@media (max-width: 1180px) {
	.tw-nav {
		top: var(--tw-nav-top, var(--tw-header-h));
		max-height: calc(100dvh - var(--tw-nav-top, var(--tw-header-h)));
	}
}

/* --- Buy / Rent / Commercial were never actually enlarged ---------------
 *
 * Section 2 sized `.tw-search__tabs button, .tw-search__tabs a`. The tabs are
 * a radio and a label — neither selector has ever matched anything, so the
 * three most-tapped controls on the site stayed at 38px.
 */

@media (hover: none) and (pointer: coarse), (max-width: 820px) {
	.tw-search__tabs label {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 50px;
		padding-block: 0.55em;
	}
}

/* --- The hero dots were a three-pixel target ---------------------------- */

@media (hover: none) and (pointer: coarse), (max-width: 820px) {
	.tw-hero__dots { gap: 10px; }
	.tw-hero__dots button { position: relative; width: 30px; }
	.tw-hero__dots button::after { content: ""; position: absolute; inset: -18px -5px; }
}

/* --- The map held the page hostage -------------------------------------
 *
 * .tw-map__canvas sets touch-action: none so a drag pans the map. On a phone
 * that also means a thumb landing anywhere on 420 pixels of map cannot scroll
 * the page — it just drags Nairobi around. pan-y gives the vertical gesture
 * back to the page and keeps the horizontal one for the map, which is the
 * behaviour every native map on a phone has.
 */

@media (hover: none) and (pointer: coarse) {
	.tw-map__canvas { touch-action: pan-y; }
	.tw-map__zoom button { width: 44px; height: 44px; font-size: 20px; }
	.tw-map__zoom { right: 10px; top: 10px; gap: 6px; }
}

@media (max-width: 820px) {
	.tw-map { height: min(58vh, 320px); }
}

/* --- A sticky sidebar in a single column just jitters ------------------- */

@media (max-width: 1100px) {
	.tw-aside { position: static; top: auto; }
}

/* --- The contact bar's icon-only row ------------------------------------
 *
 * Below 720px the labels are hidden and the icons carry the meaning, so each
 * pill wants to be square rather than a wide capsule around a 14px glyph.
 */

@media (max-width: 720px) {
	.tw-topbar__links { gap: 0.35rem; }
	.tw-topbar__links a { padding: 0.45rem 0.6rem; }
	.tw-topbar__portal { padding-inline: 0.75rem; }
}