/**
 * responsive.css — additional responsive fixes, 2026-09-11
 *
 * Loaded AFTER custom.css (see wp_enqueue_style() in functions.php).
 * custom.css is the tester-logged fix batch from 2026-09-10 — do not change a
 * single line of it. Every rule below only touches a selector/property that
 * custom.css does NOT already set, so removing this file reverts the site to
 * its exact post-2026-09-10 state.
 *
 * style.css is also NOT to be edited: it must stay byte-identical with the
 * prod web root (public_html_2) so the evidence-comparison scripts stay valid.
 *
 * Each section below documents: the observed symptom + the style.css line
 * causing it + the affected scope.
 */


/* ---------------------------------------------------------------------------
 * R2 — Mobile menu (slicknav) tap targets too small
 *
 * style.css:6980  .slicknav_nav a { padding: 5px 10px; font-size: 16px }
 * => tap target height ~26px, below the 44px touch-target threshold.
 * custom.css (2026-09-10) only sets `text-align: center` on this selector —
 * this only adds vertical padding, does not touch text-align.
 * ------------------------------------------------------------------------- */
@media all and (max-width: 800px) {
	.slicknav_nav a,
	.slicknav_nav .slicknav_row {
		padding-top: 11px;
		padding-bottom: 11px;
	}
	/* .slicknav_item a / .slicknav_parent-link a have padding:0 (style.css:7000,7004):
	 * at the parent menu item, the wrapping element (.slicknav_row / .slicknav_item)
	 * is the actual tap target. */
	.slicknav_nav .slicknav_item,
	.slicknav_nav .slicknav_parent-link {
		padding-top: 11px;
		padding-bottom: 11px;
	}
	.slicknav_nav .slicknav_item a,
	.slicknav_nav .slicknav_parent-link a {
		padding-top: 0;
		padding-bottom: 0;
	}
}


/* ---------------------------------------------------------------------------
 * R3 — Contact page: icon row squeezed into 3 columns down to 320px
 *
 * style.css:6733  .page-template-page_contact-php .icons div div { width: 33% }
 *                 (set inside @media max-width:800px, never reset again)
 * style.css:6820  ... a { font-size: 12px }  (inside @media max-width:600px)
 * => at 320px each column is only ~105px wide: the address
 *    "45 Slater Parade, Keilor East 3033, VIC" wraps to 3 lines at 12px,
 *    with all three columns crammed together with no gap.
 * Stack to 1 column from 480px down and restore 16px font size since there's
 * now enough horizontal room.
 * ------------------------------------------------------------------------- */
@media all and (max-width: 480px) {
	.page-template-page_contact-php .icons div div {
		width: 100%;
		margin-bottom: 28px;
	}
	.page-template-page_contact-php .icons div div:last-child {
		margin-bottom: 0;
	}
	.page-template-page_contact-php .icons div div a {
		font-size: 16px;
		line-height: 170%;
	}
	.page-template-page_contact-php .icons div div img {
		width: 64px;
	}
}


/* ---------------------------------------------------------------------------
 * R4 — Tap target for links in the Contact page icon row
 *
 * Measured: the phone/email links under #contact .icons are 15px tall.
 * Each link is on its own line, so adding vertical padding is safe.
 *
 * Does NOT touch the #footer links (Quicklinks, 18px tall): bumping those to
 * 44px would add ~150px to the mobile footer height, undoing the footer
 * compaction from the 2026-09-10 tester-logged fix batch. Project owner has
 * decided: leave the footer as is. Noted in the report, not fixed via CSS.
 * ------------------------------------------------------------------------- */
@media all and (max-width: 820px) {
	.page-template-page_contact-php .icons div div a {
		display: inline-block;
		padding-top: 6px;
		padding-bottom: 6px;
	}
}


/* ---------------------------------------------------------------------------
 * R5 — (reverted 2026-09-11) Gallery caption-on-touch + hide empty tiles.
 * Project owner has since added featured images directly on the prod DB for
 * the `images` posts that were missing one, so the workaround is no longer
 * needed. The companion JS file (gallery-empty-tiles.js) and its enqueue line
 * in functions.php have been removed.
 * ------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
 * R6 — Footer "Get in touch" form: ~40px gap left between fields on mobile
 *
 * Same bug the tester logged for the Careers form, but the 2026-09-10 fix
 * batch only applied it to `#contact.careers`. The footer form
 * (#contact without .careers, footer.php:21) still has it: every .gr-* has
 * padding:20px on all sides (style.css:6593), so one field's bottom padding
 * plus the next field's top padding add up to ~40px of dead space when
 * stacked.
 * Use :not(.careers) to stay strictly outside yesterday's fix scope.
 * ------------------------------------------------------------------------- */
@media all and (max-width: 768px) {
	#contact:not(.careers) .gr-4,
	#contact:not(.careers) .gr-6,
	#contact:not(.careers) .gr-8,
	#contact:not(.careers) .gr-12 {
		padding-top: 4px;
		padding-bottom: 4px;
	}
	#contact:not(.careers) label {
		line-height: 120%;
		margin-bottom: 4px;
	}
}