/**
 * Maid 2 Clean - accessibility, readability and responsive layer.
 *
 * Loaded LAST (see twentyfourteen_scripts() in functions.php) so it wins the cascade
 * without needing !important on every rule. Keep site-wide corrections here rather than
 * scattering them through css/style.css, which is organised by page section.
 *
 * Sections
 *   1.  Focus visibility
 *   2.  Skip link
 *   3.  Motion
 *   4.  Typography and readability
 *   5.  Headings converted from <div> (margin normalisation)
 *   6.  Links in body copy
 *   7.  Touch targets
 *   8.  Contrast top-ups
 *   9.  Mobile layout fixes
 *   10. Forms
 *   11. Media and overflow
 *   12. Back to top
 *   13. Print
 */

/* -------------------------------------------------------------------------- *
 * 1. Focus visibility (WCAG 2.4.7 / 2.4.11)
 *
 * The old CSS removed outlines from links, buttons and the menu toggle, which left
 * keyboard users with no idea where they were on the page. This restores a ring that
 * stays visible on both the white page body and the near-black header/footer.
 * -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid #ffd400;
	outline-offset: 2px;
	box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.65);
	border-radius: 2px;
}

/* Browsers without :focus-visible still get a ring. */
@supports not selector(:focus-visible) {
	a:focus,
	button:focus,
	input:focus,
	select:focus,
	textarea:focus {
		outline: 3px solid #ffd400;
		outline-offset: 2px;
	}
}

/* Programmatic focus (skip link target, back-to-top) must not flash a ring. */
#main:focus:not(:focus-visible),
#main:focus {
	outline: none;
	box-shadow: none;
}

/* -------------------------------------------------------------------------- *
 * 2. Skip link - must sit above the fixed header (z-index: 99999).
 * -------------------------------------------------------------------------- */

.skip-link.screen-reader-text:focus {
	z-index: 100000;
	background-color: #fff;
	color: #07671e;
	font-size: 16px;
	outline: 3px solid #ffd400;
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------- *
 * 3. Motion (WCAG 2.3.3)
 * -------------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

/* Anchor targets are not swallowed by the fixed header. */
:target,
#main,
[id] {
	scroll-margin-top: 120px;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------------------------------- *
 * 4. Typography and readability
 * -------------------------------------------------------------------------- */

body,
button,
input,
select,
textarea {
	line-height: 1.65; /* was 1.5 - denser than comfortable at 18px */
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Long unbroken strings (URLs, suburb names in narrow columns) must not overflow. */
body {
	overflow-wrap: break-word;
}

/* Big display headings scale with the viewport instead of jumping between
   the old fixed-width breakpoints. */
.banner_heading {
	font-size: clamp(1.5rem, 5.2vw, 55px);
	line-height: 1.15;
}

.banner_sub_heading {
	font-size: clamp(1.05rem, 3.4vw, 38px);
	line-height: 1.25;
}

.page .entry-title,
.blog_page_title,
.error404 .entry-title {
	font-size: clamp(1.5rem, 4.6vw, 50px);
	line-height: 1.15;
}

.home_how_work_section_heading,
.home_wedo_section_heading,
.home_testimonial_section_heading,
.home_contact_section_heading,
.home_book_section_heading,
.home_best_cleaning_strip {
	line-height: 1.25;
}

/* Comfortable measure for the long prose blocks. */
.home_about_text,
.about_bottom_text {
	max-width: 68ch;
	margin-left: auto;
	margin-right: auto;
}

.service_page_text,
.entry-content > p,
.entry-content > ul,
.entry-content > ol {
	max-width: 72ch;
}

/* -------------------------------------------------------------------------- *
 * 5. Headings converted from <div>
 *
 * These used to be <div>s so screen readers and search engines saw no structure.
 * Now they are real h1/h2/h3, which brings default browser margins with them -
 * reset so the visual rhythm is unchanged.
 * -------------------------------------------------------------------------- */

.home_how_work_section_heading,
.home_how_work_block_heading,
.home_wedo_section_heading,
.home_wedo_block_heading,
.home_choose_block_heading,
.home_book_section_heading,
.home_testimonial_section_heading,
.home_contact_section_heading,
.home_cotact_block_heading,
.footer_top_heading,
.blog_page_title,
.page .entry-title,
.booking_form_box_heading {
	margin: 0;
	padding: 0;
}

.home_how_work_block_heading {
	margin-top: 15px;
}

.home_wedo_block_heading {
	margin-top: 20px;
}

.home_choose_block_heading,
.home_book_section_heading {
	margin-top: 15px;
}

.home_book_section_heading {
	margin-top: 25px;
}

.home_how_work_block_text,
.home_wedo_block_text,
.home_choose_block_text,
.home_about_text,
.home_book_section_text,
.home_cotact_block_text,
.home_best_cleaning_strip p {
	margin-bottom: 0;
}

/* The strip is now a <p>; keep it flush like the <div> it replaced. */
p.container.home_best_cleaning_strip,
.home_best_cleaning_strip > p {
	margin: 0 auto;
}

/* -------------------------------------------------------------------------- *
 * 6. Links in body copy (WCAG 1.4.1 - colour is not the only cue)
 * -------------------------------------------------------------------------- */

.entry-content a:not([class]),
.service_page_text a,
.terms_page_list a,
.home_cotact_block_text a,
.footer_email a,
.comment-content a:not([class]) {
	text-decoration: underline !important;
	text-underline-offset: 0.15em;
}

.entry-content a:not([class]):hover,
.entry-content a:not([class]):focus-visible {
	text-decoration-thickness: 2px;
}

/* Buttons and menus stay underline-free. */
.header_btn,
.home_about_btn,
.home_book_btn,
.book_page_btn,
.more-link,
.nav-menu a,
.footer_menu a,
.mob_res a {
	text-decoration: none !important;
}

/* -------------------------------------------------------------------------- *
 * 7. Touch targets (WCAG 2.5.8 - 24px minimum, 44px recommended)
 * -------------------------------------------------------------------------- */

.footer_menu ul li a,
.footer_email a,
.footer_phone a,
.home_cotact_block_text a {
	display: inline-block;
	min-height: 24px;
	padding-top: 3px;
	padding-bottom: 3px;
}

.footer_social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

.menu-toggle {
	min-width: 48px;
	min-height: 48px;
}

.header_btn,
.book_page_btn,
.home_book_btn,
.home_about_btn {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* -------------------------------------------------------------------------- *
 * 8. Contrast top-ups
 * -------------------------------------------------------------------------- */

/* Service-area suburbs are plain text now (they had no destinations), so they need
   the colour the <a> used to give them. */
.footer_suburb ul li {
	color: #eee;
	padding-top: 3px;
	padding-bottom: 3px;
}

/* Editor-driven blocks sitting on the dark brand green. */
.how_work_page_block_inner,
.how_work_page_block_inner p,
.how_work_page_block_inner h1,
.how_work_page_block_inner h2,
.how_work_page_block_inner h3,
.service_bottom_section,
.service_bottom_section p,
.service_bottom_section li {
	color: #fff;
}

.about_mid_section,
.about_mid_section p,
.about_mid_section li {
	color: #fff;
}

/* Muted greys that fell below 4.5:1 on white. */
.gift_voucher_tab label {
	color: #545454;
}

.gift_voucher_input,
.gift_voucher_select,
.gift_voucher_hour_select,
.hour_select_div,
.gift_voucher_right_text2,
.gift_voucher_right_text3,
.faq_page_block_body,
.contact_input,
.contact_textarea {
	color: #444;
}

/* 15px fields make iOS Safari zoom in on focus; 16px is the threshold. */
.gift_voucher_input,
.gift_voucher_select,
.gift_voucher_hour_select,
.contact_input,
.contact_textarea {
	font-size: 16px;
}

/* -------------------------------------------------------------------------- *
 * 9. Mobile layout fixes
 * -------------------------------------------------------------------------- */

/* The fixed "Call Us / Book Now" bar sat on top of the last ~60px of every page.
   Reserve room for it instead of only padding the footer on two narrow breakpoints. */
@media (max-width: 991.98px) {
	body {
		padding-bottom: 64px;
	}

	#back-to-top {
		bottom: 74px;
	}

	/* Two narrow breakpoints already padded the footer to clear the fixed bar;
	   the body padding above now does that job for every width. */
	.footer_bottom {
		padding-bottom: 20px;
	}
}

/* Cards were forced to a fixed height, which clipped or stretched longer copy. */
@media (max-width: 991.98px) {
	.home_wedo_block_text,
	.home_choose_block_text {
		min-height: 0;
	}
}

/* Between the tablet and desktop breakpoints the header ran out of room. */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.header_menu ul li {
		margin-right: 10px;
	}

	.header_menu ul li a {
		font-size: 15px;
	}

	.header_phone {
		font-size: 18px;
	}
}

/* Two suburbs per row is very tight on small screens. */
@media (max-width: 575.98px) {
	.footer_suburb ul li {
		width: 100%;
	}

	.banner_list ul li {
		width: 46%;
	}
}

/* -------------------------------------------------------------------------- *
 * 10. Forms
 * -------------------------------------------------------------------------- */

/* iOS zooms the page in when a focused field is under 16px. */
input,
select,
textarea {
	font-size: max(16px, 1rem);
}

label {
	cursor: pointer;
}

/* Required fields should say so, not just rely on a coloured asterisk. */
.gift_voucher_tab label .required,
.booking_form label .required {
	color: #a4000f;
	font-weight: 700;
}

::placeholder {
	color: #6a6a6a;
	opacity: 1;
}

/* -------------------------------------------------------------------------- *
 * 11. Media and overflow
 * -------------------------------------------------------------------------- */

img,
video {
	max-width: 100%;
	height: auto;
}

iframe,
embed,
object {
	max-width: 100%;
}

/* Wide tables scroll inside themselves rather than pushing the page sideways. */
.entry-content table,
.gift_voucher_tab .table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* -------------------------------------------------------------------------- *
 * 12. Back to top
 *
 * Was an <a href="javascript:viod(0);"> (sic) with an unlabelled image, permanently
 * in the tab order even while invisible. Now a real button that leaves the tab order
 * until it is actually on screen.
 * -------------------------------------------------------------------------- */

#back-to-top {
	appearance: none;
	border: 0;
	line-height: 0;
	visibility: hidden;
	transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
}

#back-to-top.show {
	visibility: visible;
}

#back-to-top img {
	pointer-events: none;
}

/* -------------------------------------------------------------------------- *
 * 13. Print
 * -------------------------------------------------------------------------- */

@media print {
	.header,
	.mob_res,
	#back-to-top,
	.footer_social,
	.home_book_section,
	.skip-link {
		display: none !important;
	}

	body {
		padding-bottom: 0;
		color: #000;
		background: #fff;
	}

	.entry-content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
	}
}