/* Mobile layout corrections. Loaded last so it wins over the legacy sheets.
   Desktop rules stay untouched: everything sizing-related is inside the
   max-width:768px breakpoint used by responsive.css and custom_phase3.css. */

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

/* these blocks set a pixel width and then add side padding on top of it, which
   overflows the page at every viewport size */
.related-services-block,
#div-blogPost_container {
	box-sizing: border-box;
	max-width: 100%;
}

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

	/* ---------- media containment ---------- */
	img,
	svg,
	video,
	canvas,
	iframe,
	embed,
	object {
		max-width: 100%;
	}

	img,
	svg,
	video,
	canvas {
		height: auto;
	}

	/* several content images carry padding/borders, so max-width must include them */
	img {
		box-sizing: border-box;
	}

	/* ---------- typography ---------- */
	body {
		font-size: 16px;
		line-height: 1.55;
	}

	p,
	li,
	td,
	th,
	label,
	dd,
	dt {
		font-size: 1em;
	}

	/* long words, URLs and email addresses must not push the page wide */
	body,
	p,
	li,
	dd,
	dt,
	td,
	th,
	h1, h2, h3, h4, h5, h6,
	a {
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	/* ---------- iOS zoom-on-focus ---------- */
	input,
	select,
	textarea,
	button,
	.button,
	a.button {
		font-size: 16px !important;
	}

	/* ---------- tap targets ---------- */
	input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
	select,
	textarea,
	button,
	.button,
	a.button,
	input[type="submit"],
	input[type="button"] {
		min-height: 44px;
	}

	/* min-height has no effect on inline elements */
	a.button,
	a.button.btn_viewmore {
		display: inline-block;
	}

	input[type="checkbox"],
	input[type="radio"] {
		width: 22px;
		height: 22px;
	}

	/* full-width primary actions */
	form input[type="submit"],
	form button[type="submit"],
	form input.button[type="submit"] {
		width: 100%;
		box-sizing: border-box;
		margin-left: 0;
		margin-right: 0;
	}

	/* legacy buttons carry negative or oversized side margins */
	a.button.btn_viewmore,
	button.button,
	input.button {
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}

	/* the blog search field and its button sit side by side with a negative
	   margin, which does not fit a phone */
	.blog-search-wrapper input {
		width: 100% !important;
		margin: 0 0 8px !important;
		box-sizing: border-box;
	}

	/* ---------- stacked form rows ---------- */
	form ul,
	form ol {
		padding-left: 0;
		list-style: none;
		max-width: 100%;
	}

	form ul > li,
	form ol > li {
		width: auto;
		max-width: 100%;
		box-sizing: border-box;
	}

	form ul > li > label,
	form ol > li > label {
		display: block;
		float: none;
		width: auto;
		margin: 0 0 4px;
		text-align: left;
	}

	/* text inputs should fill the column rather than sit at a fixed pixel width */
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	input[type="date"],
	input[type="file"],
	select,
	textarea {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* side-by-side field pairs have no room to sit side by side */
	dl.halfwidth {
		display: block;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* helper text that sits beside a field on desktop drops below it here */
	span.note,
	.note {
		display: block;
		width: auto;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* order/enquiry/price-match forms size their fields in em, so raising the
	   base font to 16px would otherwise push them past the viewport */
	#order_form li input[type="text"],
	#order_form li input[type="email"],
	#order_form li input[type="tel"],
	#order_form li input[type="number"],
	#order_form li textarea,
	#order_form .note,
	#order_form label {
		min-width: 0;
		max-width: 100%;
	}

	/* the legacy sheets pin the document to 480px at some widths */
	html,
	body {
		min-width: 0;
	}

	/* ---------- generic containment ---------- */
	section,
	article,
	.container,
	.content,
	.content_left,
	.content_right {
		max-width: 100%;
		box-sizing: border-box;
	}

	/* ---------- mobile navigation ---------- */
	/* the menu links are 100% wide and then add 20px of side padding */
	nav#menu a {
		box-sizing: border-box;
	}

	/* ---------- call CTA ---------- */
	/* it floated as a pill over mid-page content; the cookie banner and chat
	   widget already reserve the bottom 70px for it */
	#mobile-call-now {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		min-height: 56px;
		padding: 14px 16px;
		padding-bottom: calc(14px + env(safe-area-inset-bottom));
		border: 0;
		border-radius: 0;
		box-sizing: border-box;
		box-shadow: 0 -2px 12px rgba(0, 0, 0, .2);
		font-size: 16px;
		/* the chat widget paints at 1000003 */
		z-index: 1000004;
	}

	#mobile-call-now:hover,
	#mobile-call-now:focus {
		transform: none;
		box-shadow: 0 -2px 12px rgba(0, 0, 0, .2);
	}

	/* the body box is collapsed on most pages, so the reserve has to sit on the
	   last in-flow element instead */
	footer {
		padding-bottom: 70px;
	}

	body.menu-open #mobile-call-now {
		display: none !important;
	}

	/* grows the hit area to 44px without moving the bars */
	#hamburger-toggle {
		padding: 10px;
		margin: -10px;
		box-sizing: content-box;
	}

	/* ---------- homepage carousels (slick) ---------- */
	.slick-slider,
	.slick-list,
	#banner_slide {
		max-width: 100%;
		overflow: hidden;
	}

	.slick-prev {
		left: 4px;
		z-index: 2;
	}

	.slick-next {
		right: 4px;
		left: auto;
		z-index: 2;
	}

	/* ---------- floated content images ---------- */
	img.img_block.fleft,
	img.img_block.fright,
	.fleft > img,
	.fright > img {
		float: none;
		display: block;
		width: auto;
		max-width: 100%;
		height: auto;
		margin: 0 0 15px;
	}

	/* ---------- coverage maps ---------- */
	/* suburb pages render a Google map into #coverage_map */
	#coverage_map {
		width: 100% !important;
		max-width: 100%;
		overflow: hidden;
	}

	/* the run map keeps its 979x786 coordinate space and is scaled down by
	   scripts/coverage.js so the <area> regions and run overlays stay aligned */
	#coverage_map_wrap {
		max-width: 100%;
		overflow: hidden;
	}

	#coverage_map_wrap > #coverage_map {
		width: 979px !important;
		height: 786px !important;
		max-width: none;
		margin-bottom: 0 !important;
		transform-origin: top left;
	}

	#coverage_map_wrap > #coverage_map > img {
		max-width: none;
	}

	.coverage_t01 {
		padding-right: 0;
	}

	/* ---------- service fee tables ---------- */
	/* scripts/mobile-tables.js replaces these with stacked cards */
	table.services_table.services_table_hidden {
		display: none;
	}

	table.services_table {
		width: 100%;
		max-width: 100%;
	}

	.services_table_cards_title {
		margin: 1em 0 .5em;
		font-size: 1.1em;
	}

	.services_table_card {
		margin: 0 0 1em;
		padding: .5em .75em;
		border: 1px solid #e8e8e8;
		border-radius: 8px;
		background: #fff;
		overflow: hidden;
	}

	.services_table_card dt {
		float: left;
		clear: left;
		width: 55%;
		padding: .35em 0;
		font-weight: bold;
	}

	.services_table_card dd {
		float: left;
		width: 45%;
		margin: 0;
		padding: .35em 0;
		text-align: right;
	}

	/* the contact h-card indents its content past the available width */
	ul.h-card {
		padding-left: 0;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* CKEditor sizes its chrome in pixels and then adds a 1px border */
	.cke_chrome,
	.cke_inner,
	.cke_contents {
		max-width: 100%;
		box-sizing: border-box;
	}

	/* fixed-width third-party widgets need the full column width */
	.cf-turnstile,
	.g-recaptcha {
		max-width: 100%;
	}

	.contactus_t01,
	.contactus_t02,
	.contactus_t03,
	.contactus_t04 {
		width: 100%;
	}

	#wheelie-bin-hire {
		width: 100% !important;
	}

	button#invoice_add.button {
		margin-left: 0;
	}

	/* the enquiry sidebar box reserves a fixed 200px plus a wide right gutter */
	#box_location {
		min-width: 0;
		max-width: 100%;
		padding-right: 0;
		box-sizing: border-box;
	}

	/* ---------- related services block ---------- */
	.related-services-block {
		width: auto !important;
		max-width: 100%;
		box-sizing: border-box;
		overflow: hidden;
	}

	.related-services-block .content_left,
	.related-services-block ul,
	.related-services-block li {
		float: none;
		width: auto !important;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* ---------- embedded video ---------- */
	/* the chat widget's own iframes are fixed-size and positioned by tawk */
	iframe:not([src="about:blank"]) {
		width: 100% !important;
		max-width: 100%;
	}

	/* ---------- forms that carry a fixed pixel width ---------- */
	form {
		max-width: 100%;
		box-sizing: border-box;
	}

	/* ---------- product listing tiles ---------- */
	/* decorative shadow pseudo-elements hang 19px outside the tile */
	.products_list > li::before,
	.products_list > li::after {
		content: none !important;
	}

	.products_list > li {
		max-width: 100%;
		box-sizing: border-box;
	}

	/* ---------- cookie consent banner ---------- */
	#cookie-banner {
		left: 10px;
		right: 10px;
		/* clears the call bar and the chat bubble lifted above it */
		bottom: 120px;
		max-width: none;
		width: auto;
		min-width: 0;
		box-sizing: border-box;
	}

	/* the banner covered a third of the screen because the buttons wrapped into a
	   column beside the text */
	/* no !important on display: the banner is dismissed with an inline
	   display:none, which an important declaration would outrank */
	#cookie-banner {
		flex-direction: column !important;
		padding: 12px;
		font-size: 14px;
	}

	#cookie-banner-button-block {
		flex-wrap: nowrap;
		align-items: center;
		gap: 8px;
	}

	#cookie-banner button {
		flex: 1 1 0;
		margin-right: 0;
		min-width: 0;
		min-height: 40px;
		white-space: nowrap;
	}
}

/* Safari applies its own sizing to a focused control, so the 16px floor that
   stops zoom-on-focus has to be restated for the focused state. */
@supports (-webkit-touch-callout: none) {
	@media screen and (max-width: 768px) {
		input:focus,
		select:focus,
		textarea:focus,
		button:focus {
			font-size: 16px !important;
		}
	}
}

/* Turnstile renders a fixed 300px widget, so the legacy 32px page gutter has to
   give way on the narrowest phones for it to fit. */
@media screen and (max-width: 400px) {
	.container.innerpage {
		margin-left: 8px;
		margin-right: 8px;
	}
}

/* Service and product tiles are 50% floats from a page-level <style> block that
   loads after responsive.css, so they stay side by side on phones and the
   headings wrap a character at a time. */
@media screen and (max-width: 768px) {
	.services_t02 .content_left,
	.services_t02 .content_right {
		float: none !important;
		width: 100% !important;
		border-right: 0 !important;
	}

	.services_t02 .content_right {
		border-top: 1px solid #e8e8e8;
		padding-top: 15px;
	}

	.services_t02 .services_icon {
		float: left;
		width: 64px;
		height: auto;
		margin: 0 12px 8px 0;
	}

	.services_t02 .text_container {
		margin-left: 0 !important;
		overflow: hidden;
	}

	.services_t02 h3 {
		font-size: 20px;
	}

	.services_t02 .btn_viewmore {
		margin-left: 0 !important;
	}

	/* The cart count is absolutely positioned for the desktop nav, which drops it
	   on top of the cart icon on phones. */
	#menu ul.container li#nav_cart {
		position: relative;
	}

	#menu ul.container li#nav_cart a.simpleCart_checkout .simpleCart_quantity {
		position: absolute !important;
		top: 4px !important;
		right: 4px !important;
		left: auto !important;
		width: auto !important;
		min-width: 20px;
		height: 20px;
		padding: 0 5px !important;
		border-radius: 10px !important;
		border: 2px solid #fff;
		box-sizing: content-box;
		font-size: 12px !important;
		line-height: 20px;
		text-align: center;
	}

	#menu ul.container li#nav_cart a.simpleCart_checkout .simpleCart_quantity.cart-empty {
		display: none !important;
	}
}

/* An empty cart painted a "0" badge on desktop as well. */
#menu .simpleCart_quantity.cart-empty {
	display: none !important;
}

/* The cart and checkout item tables are four or five columns wide, which on a
   phone squeezes "Remove" and the column headings down to one letter per line.
   Each row becomes a stacked card instead, labelled from the cell data-label. */
@media screen and (max-width: 768px) {
	#order-detail-content thead {
		display: none;
	}

	#order-detail-content,
	#order-detail-content tbody,
	#order-detail-content tr,
	#order-detail-content td {
		display: block;
		width: auto;
	}

	#order-detail-content tr {
		position: relative;
		padding: 12px 0 12px 0;
		border-bottom: 1px solid #e8e8e8;
	}

	#order-detail-content td {
		padding: 3px 0;
		border: 0;
		text-align: left;
		white-space: normal;
	}

	#order-detail-content td[data-label]::before {
		content: attr(data-label) ": ";
		font-weight: bold;
	}

	#order-detail-content td.cell-title {
		padding-right: 90px;
		font-size: 16px;
	}

	#order-detail-content td.cell-remove {
		position: absolute;
		top: 12px;
		right: 0;
		padding: 0;
	}

	#order-detail-content td.cell-remove a.btn-remove {
		display: inline-block;
		min-height: 32px;
		padding: 0 12px;
		line-height: 32px;
		white-space: nowrap;
	}

	#order-detail-content td .qty {
		display: inline-block;
		width: 70px;
		min-height: 40px;
	}

	/* the totals table keeps its two columns, it just has to stop overflowing:
	   the label column is right-aligned by default, which starves the column
	   holding the postcode field and the shipping selector */
	#order-detail-price {
		width: 100%;
		table-layout: fixed;
	}

	#order-detail-price td {
		white-space: normal;
		word-break: normal;
		overflow-wrap: anywhere;
	}

	/* 80/20 leaves the postcode field and shipping selectors about 70px wide */
	#order-detail-price td:first-child {
		width: 45%;
	}

	#order-detail-price td:last-child {
		width: 55%;
		text-align: left;
	}

	#order-detail-price td:last-child .inputbox,
	#order-detail-price td:last-child select {
		width: 100%;
		min-height: 44px;
		margin-bottom: 6px;
	}
}