/* ==========================================================================
   Mobile design pass
   --------------------------------------------------------------------------
   Every rule in this file lives inside a max-width media query, and the file
   is loaded last, so it can only affect phones and small tablets. The desktop
   layout is untouched by design: if a rule here ever needs to change desktop,
   it belongs in that page's own stylesheet instead.

   The site was built desktop-first with fixed pixel headings (84px, and 112px
   on installers). Most pages step those down at 769px or 600px, but several
   do not, so a heading like "Our solution" on /residential stayed at 84px on a
   390px screen and was clipped by the body's overflow-x. Rather than add more
   one-off breakpoints, headings here scale fluidly with the viewport, which
   removes that whole class of bug at any width.
   ========================================================================== */

/* The bar lives in the shared footer, so it is hidden by default and only
   switched on inside the mobile query below. Desktop never renders it. */
.quote_bar,
.mobile_disclosure {
	display: none;
}

@media only screen and (max-width: 860px) {

	/* ----------------------------------------------------------------------
	   Headings: fluid, so nothing can clip at any screen width
	   ---------------------------------------------------------------------- */

	/* Display / hero */
	h1,
	.hero h1,
	.installers_hero_heading,
	.commercial_hero_heading,
	.contact_hero_heading,
	.projects_hero_heading,
	.residential_hero_heading,
	.home .get_that_glow_heading,
	.article_page_title {
		font-size: clamp(32px, 10.5vw, 56px);
		line-height: 1.12;
	}

	/* Section headings */
	h2,
	.communities_heading,
	.installers_benefits_heading,
	.installers_steps_heading,
	.projects_slider_heading,
	.app_download_heading,
	.project_suburb,
	.home .sun_shining h2,
	.home .be_sunscriber h2,
	.all_you_need h2,
	.select_your_power h2,
	.bright_choice_heading,
	.package_slider .package_contents h2 {
		font-size: clamp(26px, 8vw, 42px);
		line-height: 1.2;
	}

	h3 {
		font-size: clamp(19px, 5vw, 26px);
		line-height: 1.3;
	}

	/* A long unbroken word should wrap rather than run off the screen. */
	h1, h2, h3, h4, p, li, a {
		overflow-wrap: break-word;
	}

	/* ----------------------------------------------------------------------
	   Readability: 16px is the floor for anything you are meant to read
	   ---------------------------------------------------------------------- */
	body,
	p,
	li,
	.widget_links a {
		font-size: max(16px, 1em);
	}

	/* ----------------------------------------------------------------------
	   Touch targets
	   Apple asks for 44px, Google for 48. Anything tappable gets at least 44,
	   reached with padding so the visual size barely changes.
	   ---------------------------------------------------------------------- */
	.widget_links a,
	.copyright a {
		display: inline-block;
		min-height: 44px;
		line-height: 1.5;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	/* The header logo links home, but its artwork is only 22px tall here. */
	.header_wrapper .col-4 > a,
	.social a,
	.footer_social a,
	.app_download_button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		min-width: 44px;
	}

	.button,
	button.button,
	a.button {
		min-height: 48px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* ----------------------------------------------------------------------
	   Vertical rhythm
	   The desktop spacing scale (80px and 100px bands) leaves a phone screen
	   mostly empty, so the reader scrolls past nothing. Tighten it.
	   ---------------------------------------------------------------------- */
	.pad_top_120  { padding-top: 56px; }
	.pad_top_100  { padding-top: 52px; }
	.pad_top_80   { padding-top: 44px; }
	.pad_top_60   { padding-top: 36px; }
	.pad_top_50   { padding-top: 32px; }
	.pad_top_40   { padding-top: 26px; }

	.pad_bottom_120 { padding-bottom: 56px; }
	.pad_bottom_100 { padding-bottom: 52px; }
	.pad_bottom_80  { padding-bottom: 44px; }
	.pad_bottom_60  { padding-bottom: 36px; }
	.pad_bottom_50  { padding-bottom: 32px; }
	.pad_bottom_40  { padding-bottom: 26px; }

	/* ----------------------------------------------------------------------
	   Viewport height
	   100vh is measured as though the browser address bar were hidden, so a
	   full-height drawer runs under it and its last item cannot be reached.
	   dvh tracks the bar.
	   ---------------------------------------------------------------------- */
	.side_menu {
		height: 100vh;
		height: 100dvh;
	}
	.commercial_hero {
		min-height: auto;
	}
	/* ----------------------------------------------------------------------
	   Mobile quote bar
	   The primary action otherwise sits thousands of pixels down the page. It
	   appears once the reader is past the hero, so it never covers the first
	   screen, and sits in the thumb zone at the bottom.
	   ---------------------------------------------------------------------- */
	.quote_bar {
		display: flex;
		align-items: center;
		gap: 10px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9998;
		/* max() rather than a bare env(): Safari reports 0 for the bottom inset
		   whenever its toolbar is collapsed, which would leave no padding at
		   all. The left and right insets matter in landscape on a notched
		   phone, where the cutout moves to the side. */
		padding-top: 10px;
		padding-bottom: max(10px, env(safe-area-inset-bottom));
		padding-left: max(16px, env(safe-area-inset-left));
		padding-right: max(16px, env(safe-area-inset-right));
		background-color: rgba(255, 255, 255, 0.94);
		backdrop-filter: blur(10px);
		border-top: 1px solid var(--brand-gray-divider);
		/* A fixed distance comfortably larger than the bar, including its
		   safe-area padding, so it parks fully off-screen whatever the
		   device inset turns out to be. */
		transform: translateY(140px);
		transition: transform 0.28s ease;
	}
	.quote_bar.is_visible {
		transform: translateY(0);
	}
	.quote_bar_action {
		flex: 1 1 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 52px;
		border-radius: 30px;
		background-color: var(--brand-accent);
		color: var(--brand-dark-background);
		font-size: 17px;
		font-weight: 600;
		text-decoration: none;
	}
	.quote_bar_action:active {
		background-color: var(--brand-accent-3);
	}

	/* No floating circle on a phone at all. A 60px disc pinned to the corner
	   sits on top of whatever happens to be behind it, which is how it came
	   to cover "Maintenance included" on the home page and the fourth proof
	   point on commercial. There is nowhere safe to put it on a narrow
	   screen, so WhatsApp moves into the bar below, and it is still in the
	   menu and the footer. */
	.whatsapp_float {
		display: none;
	}
	.quote_bar_whatsapp {
		flex: none;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 52px;
		height: 52px;
		border-radius: 50%;
		background-color: #25D366;
		text-decoration: none;
	}


	/* The last section needs room to clear the bar. */
	footer {
		padding-bottom: 84px;
	}

	/* ----------------------------------------------------------------------
	   Touch polish
	   ---------------------------------------------------------------------- */
	/* A grey flash on every tap looks broken; tint it with the brand instead. */
	a, button, .button, input, select, textarea {
		-webkit-tap-highlight-color: rgba(255, 210, 0, 0.28);
	}

	/* Comfortable measure. Full-width prose on a phone is fine, but a line
	   should not run past what the eye tracks well. */
	p {
		max-width: 62ch;
	}

	/* Form fields at 16px or larger, or iOS zooms the page when they focus. */
	input, select, textarea {
		font-size: max(16px, 1em);
	}

@media (prefers-reduced-motion: reduce) {
		.quote_bar,
		.whatsapp_float {
			transition: none;
		}
	}

	/* ----------------------------------------------------------------------
	   Progressive disclosure
	   A long marketing page reads very differently on a phone: the decision
	   content (what it costs, what you get) has to stay in front of you, while
	   reference detail like the full hardware spec and the ten process steps
	   turns into a tunnel you scroll through to reach anything else. Those
	   sections collapse behind a labelled row. Nothing is removed, and the
	   attribute is only honoured here, so the desktop page is unchanged.
	   ---------------------------------------------------------------------- */
	[data-mobile-collapse] {
		/* Enough top room for the decorative arrow the section above points
		   down into this one, which otherwise clips the label. */
		padding-top: 22px;
		padding-bottom: 0;
	}

	/* The "free solar assessment" pill is absolutely positioned and depends on
	   the previous section's 120px bottom padding to sit in. On a phone that
	   overlap is fragile and it collided with the disclosure row once the
	   collapsed section stopped reserving the space. Let it take its own
	   place in the flow instead, which is what a narrow screen wants anyway. */
	/* style_residential.css sets this with `body.residential .subscribe
	   .cta_box`, so the override has to carry the same weight. */
	body.residential .subscribe .cta_box,
	.subscribe .cta_box {
		position: static;
		/* It also carries translateY(-50%), which together with top:100% let it
		   straddle the boundary between two sections. In the flow that just
		   drags it up over whatever sits above. */
		transform: none;
		margin: 0 auto;
	}
	.subscribe {
		padding-top: 32px;
		padding-bottom: 8px;
	}
	[data-mobile-collapse] > .full_width_inner {
		display: none;
		padding-bottom: 32px;
	}
	[data-mobile-collapse].is_open > .full_width_inner {
		display: block;
	}
	.mobile_disclosure {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		width: 100%;
		min-height: 60px;
		padding: 14px 4px;
		border: none;
		border-top: 1px solid var(--brand-gray-divider);
		background: none;
		cursor: pointer;
		font-family: inherit;
		font-size: 18px;
		font-weight: 600;
		line-height: 1.3;
		text-align: left;
		color: var(--brand-dark-background);
	}
	.mobile_disclosure_icon {
		flex: none;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background-color: var(--brand-accent);
		position: relative;
		transition: transform 0.2s ease;
	}
	/* A plus that becomes a minus, drawn rather than iconified so it inherits
	   the brand colours without another asset. */
	.mobile_disclosure_icon::before,
	.mobile_disclosure_icon::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 12px;
		height: 2px;
		background-color: var(--brand-dark-background);
		transform: translate(-50%, -50%);
	}
	.mobile_disclosure_icon::after {
		transform: translate(-50%, -50%) rotate(90deg);
		transition: opacity 0.2s ease;
	}
	.mobile_disclosure[aria-expanded="true"] .mobile_disclosure_icon::after {
		opacity: 0;
	}

	/* ----------------------------------------------------------------------
	   Footer
	   Five stacked lists of package links ran to two full screens. Two columns
	   halves that without shrinking a single tap target.
	   ---------------------------------------------------------------------- */
	.widget_links {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 14px;
	}
	.footer_widget_col {
		margin-bottom: 4px;
	}

	/* "Our solution" leads with a large illustration per point; at phone size
	   the picture can give up room to the words. */
	/* Same trap as the benefit icons: with a width clamp already in play, a
	   max-height simply squashes. Constrain one dimension only. */
	.installers_step img,
	.installers_step svg {
		max-width: 120px;
		height: auto;
	}

	/* ----------------------------------------------------------------------
	   Subscription benefits (home)
	   Eight points, each a 180px illustration above a single line like
	   "24/7 on-call support". Stacked at full width that is three and a half
	   screens to read eight short sentences. Two per row, with the picture
	   giving up space to the words, says the same thing in a quarter of it.
	   ---------------------------------------------------------------------- */
	.benefits .row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px 14px;
	}
	.benefits .row > .col-12 {
		grid-column: 1 / -1;
	}
	.benefits .col-3 {
		width: auto;
		padding: 0;
	}
	/* style.css sets a global `img { width: 100% }`. Capping max-height while
	   that stands gives the image a definite width and a clamped height, so it
	   squashes instead of scaling: these icons are 250x260 and were rendering
	   about 160x78. Constrain the width instead and let the height follow. */
	.benefits .benefit_icon {
		width: auto;
		max-width: 92px;
		height: auto;
		margin-bottom: 6px;
	}
	.benefits .benefit_description {
		font-size: 15px;
		line-height: 1.4;
	}

	/* The commercial hero's four proof points stack to 688px before you reach
	   anything else: a 40px icon and 20px of padding around one short line
	   each. Two per row, tightened, says the same in a third of the space. */
	.commercial_hero_icons {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px 12px;
	}
	.commercial_hero_icons .gosolr.col-3 {
		flex: none;
		width: auto;
	}
	.commercial_hero_icons .gosolr.col-3 div {
		padding: 10px 4px;
	}
	.commercial_hero_icons i {
		font-size: 28px;
	}
	.commercial_hero_icons p {
		font-size: 15px;
		line-height: 1.35;
		margin-top: 6px;
	}

}