/*
	careers/ mobile additions (MOBILE_PLAN.md 4C.2).
	DOUBLE-GATED: the <link> in _header.php carries
	media="(pointer: coarse) and (max-width: 768px)" AND this whole file
	is wrapped in the identical @media block, so no fine-pointer desktop
	window (including the 850px alpha iframe interior) can ever match.
	All assets same-origin — the CSP in careers/.htaccess blocks CDNs.
*/

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

	/* Fixed-width page containers (screen.css:109-114 #wrapper 800px,
	   screen.css:124-128 #header div.inner 800px): let them shrink to
	   the viewport, with modest horizontal padding so text does not
	   touch the screen edges. */
	#wrapper{
		max-width:800px;
		width:auto;
		padding-left:12px;
		padding-right:12px;
	}

	#header div.inner{
		max-width:800px;
		width:auto;
		padding-left:12px;
		padding-right:12px;
	}

	/* Form controls: cap the fixed desktop widths at the viewport
	   (screen.css:507-515 750px, 554-557 752px, 559-562 720px,
	   572-576 340px, 145-157 header search) and keep the font at
	   16px or more so iOS Safari does not zoom on focus. */
	input,
	textarea,
	select{
		max-width:100%;
		box-sizing:border-box;
		font-size:16px;
	}

	/* Login, register and password pages: the narrow form's fixed width and left
	   margin (screen.css:367-378) push it off a phone screen. */
	h2.narrow,
	p.narrow,
	form.narrow{
		width:auto;
		margin-left:0;
	}

	/* The logo and menu fill the header's first row on a phone, so the search box
	   takes a full-width row of its own. The bar grows to hold it instead of
	   keeping its fixed 40px (screen.css:117-122), and the 16px text above needs
	   a taller box, matched by the button (screen.css:145-182). */
	#header{
		height:auto;
		padding-bottom:6px;
	}

	#header form{
		display:flex;
		float:none;
		clear:both;
		padding:4px 0 0 0;
	}

	/* .clear-fix's hidden "." would take up width as a flex item. */
	#header form:after{
		display:none;
	}

	#header form div.field-keywords{
		flex:1;
	}

	#header form input.input-text{
		width:100%;
		height:32px;
	}

	#header form div.form-field-submit input{
		width:36px;
		height:32px;
		padding:0;
	}

}