/**
 * ipv-reflow.css
 *
 * SC 1.4.10 Reflow (AA) and SC 1.4.4 Resize Text (AA)
 * ===================================================
 *
 * This file exists for ONE rule, and it is the only rule in the whole plugin
 * that changes what a mouse user sees. It therefore ships separately and can be
 * switched off on its own:
 *
 *     define( 'IPV_A11Y_DISABLE_REFLOW', true );        // wp-config.php
 *     add_filter( 'ipv_a11y_enable_reflow', '__return_false' );
 *
 * WHAT IT FIXES
 * -------------
 * 39 of the external audit's 42 remaining findings - 22 under SC 1.4.10 across
 * 20 pages, and 17 under SC 1.4.4 across 17 pages - are all the same two
 * elements, counted once per page:
 *
 *     a.become_member                    "Become a Member"
 *     a.povecome_accredited_investor     "Become an Accredited Investor"
 *
 * WHAT WAS ACTUALLY MEASURED
 * --------------------------
 * The auditor's description ("content ... becomes cut-off") did not match what
 * I found, so this is what a real 320px viewport actually shows:
 *
 *   - There is NO two-dimensional scrolling. Document scroll width at 320px is
 *     305px. So SC 1.4.10 read literally is not failing.
 *   - The tabs are position:fixed, 54px wide, at z-index 999999, spanning
 *     roughly 570px of vertical height. On a 320px screen that is 17% of the
 *     width, permanently.
 *   - 11 interactive controls sit underneath that strip on /contact/ alone -
 *     including the form's own Phone Number, Current Designation, Organisation
 *     and Location fields. A user on a narrow screen cannot see or reliably tap
 *     the right-hand end of those fields.
 *   - Under the WCAG text-spacing values the tabs grow from 52px to 72px and do
 *     NOT clip, and no horizontal scrollbar appears. So the clipping the audit
 *     describes did not reproduce either.
 *
 * The obscuring is the real defect, and it is worth fixing on its own merits
 * regardless of which success criterion it is filed under.
 *
 * WHAT THIS RULE DOES
 * -------------------
 * Moves both tabs to a horizontal bar along the bottom edge on narrow screens.
 * They stay visible and operable; they simply stop lying on top of the page.
 *
 * An earlier version hid them instead. The auditor rejected that on manual
 * testing and was right to: removing a call to action is not the same as making
 * the page reflow, and the argument that the mobile header already offers the
 * same paths does not survive contact with the actual labels.
 *
 * The breakpoint is 782px, which is WordPress's own mobile breakpoint and below
 * the 1024px at which this theme collapses to its mobile navigation - so the
 * tabs survive on tablets in landscape and disappear only where they do harm.
 */

@media (max-width: 782px) {

	/*
	 * Not display:none. That was v1.9.0's approach and the auditor rejected it,
	 * correctly: hiding a call to action removes functionality rather than
	 * making it reachable, and my justification for it - that "Get Started" and
	 * "Member Login" in the mobile header cover the same ground - does not hold
	 * up. "Become an Accredited Investor" is not the same offer as
	 * "Get Started", and a visitor cannot choose an option they cannot see.
	 *
	 * Instead the two tabs are un-rotated and laid along the bottom edge as
	 * equal halves. Both stay visible and tappable, nothing is covered, and the
	 * 44px minimum target size for SC 2.5.8 is comfortably met at 150x52.
	 *
	 * Measured at 320px after this rule: both tabs visible at 150x52, zero
	 * interactive controls covered, document scroll width 299px, no horizontal
	 * scrolling.
	 */
	.become_member,
	.povecome_accredited_investor {
		transform: none !important;
		position: fixed !important;
		bottom: 0 !important;
		top: auto !important;
		right: auto !important;
		width: 50% !important;
		height: 52px !important;
		min-height: 0 !important;
		max-height: 52px !important;
		margin: 0 !important;
		padding: 4px 6px !important;
		box-sizing: border-box !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
		font-size: 11.5px !important;
		line-height: 1.2 !important;
		color: #ffffff !important;
		text-decoration: none !important;
	}

	/* The rotation lived on a child span in some builds - undo it there too. */
	.become_member span,
	.povecome_accredited_investor span {
		display: block !important;
		transform: none !important;
	}

	/*
	 * Explicit fills, because the accredited tab's own background is transparent
	 * and its colour came from geometry that no longer exists once un-rotated.
	 * White on #0074b9 is 5.00:1; white on #00436e is 10.4:1.
	 */
	.become_member {
		left: 0 !important;
		background-color: #0074b9 !important;
	}

	.povecome_accredited_investor {
		left: 50% !important;
		background-color: #00436e !important;
	}

	/* So the bar never sits on top of the end of the page. */
	body {
		padding-bottom: 56px !important;
	}
}