/* ==========================================================================
   Mobile and tablet corrections

   Everything here sits inside a media query or a pointer query, so the desktop
   design is untouched. Each block records what was actually wrong rather than
   restyling anything for taste.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Header collapse below 560px

   The header holds the logo, a "Book Appointment" button and the burger. Those
   three need about 460px plus gutters, so under roughly 520px the button
   overlapped the logo and pushed the burger off the right edge. Verified by
   rendering: fine at 560px, broken at 460px.

   The button is not dropped — it moves into the burger menu, full width, so
   the primary call to action is still one tap away.
   -------------------------------------------------------------------------- */

.nav-menu-cta { display: none; }

@media (max-width: 560px) {
	.nav-cta > .btn-gold { display: none; }

	.nav-links.show .nav-menu-cta {
		display: inline-flex;
		justify-content: center;
		width: 100%;
		margin-top: 6px;
	}

	/* Keep a long logo from claiming the whole bar. */
	.logo img { max-width: 170px; }

	.nav { gap: 14px; }
}


/* --------------------------------------------------------------------------
   2. iOS zoom on form focus

   Safari on iPhone and iPad zooms the whole page when a field smaller than
   16px receives focus, which leaves the layout scrolled sideways and is very
   hard to recover from one-handed. The fields were set at 13.5–15px.

   Scoped to coarse pointers so desktop keeps the designed 14px.
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {
	.field input,
	.field select,
	.field textarea,
	.contact-form input,
	.contact-form select,
	.contact-form textarea,
	.newsletter-form input,
	.pkg-sort select,
	.pkg-filters select,
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	select,
	textarea {
		font-size: 16px;
	}
}


/* --------------------------------------------------------------------------
   3. Tap targets

   The burger was about 28px tall and the open menu's links about 20px, both
   well under the 44px that is comfortable to hit. Padding only — nothing moves
   on desktop, and the menu's own gap is reduced so the panel does not grow.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.burger {
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
	}

	.nav-links.show {
		gap: 4px;
		padding-top: 12px;
		padding-bottom: 18px;
	}

	.nav-links.show a {
		padding: 12px 0;
		font-size: 16px;
	}

	.nav-links.show .nav-menu-cta {
		padding: 14px 22px;
	}
}


/* --------------------------------------------------------------------------
   4. Small phones

   The design's smallest breakpoint is 680px, which covers every phone in one
   step. These are the few places that need a little more room at 380px and
   below — the Customizer's mobile preview is 320px, narrower than any current
   handset, so it is worth being correct down there.
   -------------------------------------------------------------------------- */

@media (max-width: 380px) {
	.wrap { padding: 0 16px; }

	.btn {
		font-size: 14px;
		padding-left: 18px;
		padding-right: 18px;
	}

	/* Stat rows and chip rows wrap rather than squeeze. */
	.stats,
	.pkg-meta,
	.hero-cta { flex-wrap: wrap; }
}


/* --------------------------------------------------------------------------
   5. Landscape phones

   A hero sized for portrait fills the whole screen when the phone is turned,
   so the content below it is never discovered.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
	.hero { padding: 40px 0 56px; }
	.hero-bg { transform: none !important; }
}


/* --------------------------------------------------------------------------
   6. Motion

   The parallax hero, the count-up statistics and the carousel all animate.
   Respect a visitor who has asked their device to stop moving things.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.hero-bg { transform: none !important; }
}


/* --------------------------------------------------------------------------
   7. Collapsed side gutters

   `.wrap` carries the site's side gutter — 32px, dropping to 20px on phones.
   Three containers reuse `.wrap` but then set their own vertical padding with
   the shorthand:

       .hero-single { padding: 100px 0 80px; }
       .hero-two    { padding: 130px 0 90px; }

   The `0` in that shorthand also zeroes the left and right padding, so the
   gutter disappears. Above 1200px it goes unnoticed, because `.wrap` is capped
   at 1200px and centred, leaving space either side. Below that the wrap fills
   the viewport and the content runs hard against both screen edges.

   Measured with Chromium: the hero heading sits at x=0 at every width from
   768px down, on First Home Buyers, Investors, Resources, About and Contact.
   On Contact it also pushes the enquiry card edge to edge, cutting off its
   rounded corners and shadow — the "form overflows" symptom.

   Restoring the gutter these containers should have inherited. The values are
   the design's own, so nothing new is introduced. Sections whose max-width
   already centres them are unaffected: at 1024px the About hero still starts
   at 62px, exactly as before.
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
	.hero-single,
	.hero-two,
	.trust-inner {
		padding-left: 32px;
		padding-right: 32px;
	}
}

@media (max-width: 680px) {
	.hero-single,
	.hero-two,
	.trust-inner {
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media (max-width: 380px) {
	.hero-single,
	.hero-two,
	.trust-inner {
		padding-left: 16px;
		padding-right: 16px;
	}
}


/* --------------------------------------------------------------------------
   8. Full-height heroes on phones

   `.hero-single` is `min-height: 100vh`. On mobile browsers `100vh` is the
   height with the address bar hidden, not the height actually visible, so the
   hero is taller than the screen and the first section below it is pushed out
   of reach. `dvh` measures what the visitor can really see.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	@supports (min-height: 100dvh) {
		.hero-single { min-height: 100dvh; }
	}
}


/* --------------------------------------------------------------------------
   9. Grid tracks that refuse to shrink (320px and below)

   A `1fr` track means `minmax(auto, 1fr)`, and that `auto` floor is the
   content's min-content width — so a track can never get narrower than the
   longest unbreakable thing inside it.

   In the footer that thing is "info@stalagmite.com.au". An email address has
   no break opportunity, so it holds each column at 166px. Two of those plus
   the gap need 364px, and at 320px the footer pushed 33px past the screen,
   which is what a phone reports as a sideways scroll.

   Two fixes: let the grid children shrink, and give long tokens somewhere to
   break. The footer also drops to a single column on the narrowest screens.
   -------------------------------------------------------------------------- */

@media (max-width: 680px) {
	.foot-grid > *,
	.cta-final > *,
	.hero-two > *,
	.contact-row > *,
	.pkg-grid > *,
	.steps > *,
	.offices > * {
		min-width: 0;
	}

	/* Email addresses, long URLs and street addresses. */
	.foot-col p,
	.foot-col a,
	.side-item p,
	.office-card p {
		overflow-wrap: anywhere;
	}
}

@media (max-width: 420px) {
	.foot-grid { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   10. Long button labels on narrow screens

   `.btn` sets `white-space: nowrap`, which is right on desktop — buttons
   should not break into two lines mid-phrase. But "Start your home ownership
   journey now" needs 323px, and a 320px screen only offers 288px between the
   gutters, so the button ran off the edge.

   Allowing a wrap below 420px. Buttons whose labels already fit are unchanged,
   because text only wraps when it has to.
   -------------------------------------------------------------------------- */

@media (max-width: 420px) {
	.btn {
		white-space: normal;
		text-align: center;
	}
}


/* --------------------------------------------------------------------------
   11. The statistics band on phones

   `.trust-item` is a number and a label side by side, centred as a pair:

       .trust-item { display:flex; justify-content:center; gap:14px }

   Across four columns on desktop that reads well. Stacked into one column on a
   phone, each row centres independently, and because the numbers are different
   widths — "1,000+" is 100px, "3" is 19px — nothing lines up. Measured at
   390px the four numbers began at x=58, 99, 88 and 79, and the four labels at
   x=172, 131, 142 and 151. That ragged left edge is what QA picked up.

   Left-aligning the rows and giving the number a fixed column puts every
   number on the gutter and every label at the same x. `.tl` also loses its
   160px cap, which was forcing labels to wrap early with space to spare.
   -------------------------------------------------------------------------- */

@media (max-width: 680px) {
	.trust-inner {
		gap: 16px;
		/* Longhand deliberately: the `padding: 28px 0` shorthand would zero the
		   side gutter restored in section 7 — the original bug, reintroduced. */
		padding-top: 28px;
		padding-bottom: 28px;
	}

	.trust-item {
		justify-content: flex-start;
		gap: 12px;
	}

	.trust-item .tn {
		flex: 0 0 104px;
	}

	.trust-item .tl {
		max-width: none;
	}
}


/* --------------------------------------------------------------------------
   12. Newsletter note sitting flush against the Sign up button

   The design asks for a gap:

       .newsletter-note { margin-top: 24px; }

   but a rule further down the same file is more specific and wins:

       .newsletter p { margin: 0 auto 28px; }

   `.newsletter p` scores a class plus an element; `.newsletter-note` is a
   class alone. So the note's top margin computes to 0 and it sits hard against
   the button — measured at 0px at 1280, 768 and 390.

   This restores the value the stylesheet already declares rather than
   introducing a new one, so it applies at every width, as intended.
   -------------------------------------------------------------------------- */

.newsletter p.newsletter-note {
	margin-top: 24px;
}