/*
 * Responsive rules for the cpolv2 checkout / payment templates.
 *
 * Loaded from headerCheckout.php (always) and headerConfirm.php (checkout
 * templates only -- signup.php / signupRequest.php are deliberately excluded).
 *
 * Two template families are covered:
 *   A. headerCheckout.php  - Braintree hosted fields + PayPal SDK pages.
 *                            Content sits in a max-width:700px div, form
 *                            fields are Bootstrap 4 .form-control elements.
 *   B. headerConfirm.php   - older Stripe pages inside #container.checkout_page,
 *                            laid out with a two-column <table> form and
 *                            absolutely positioned badge images.
 *
 * Many of the offending sizes are inline style attributes in the templates, so
 * !important is used where an inline declaration has to be beaten. max-width
 * already outranks an inline width, so those rules stay unflagged.
 */


/* ---------------------------------------------------------------- shared -- */

/* No image may push the page wider than its column. */
#content img,
#header_banner img {
	max-width: 100%;
	height: auto;
}

/* The country <select> holds options like "Saint Kitts (Saint Christopher and
   Nevis)"; left to size itself it overflows a phone viewport outright. */
#content select,
#content .address_country {
	max-width: 100%;
	box-sizing: border-box;
}


/* -------------------------------------------------- family B: desktop-ish -- */

/* style.css pins six elements to width:1000px in one shared rule
   ("#access .menu-header, div.menu, #colophon, #branding, #main, #wrapper"),
   so every one of them on the page has to be released -- releasing #wrapper
   alone still leaves #main and the #colophon footer holding the page open.
   Above this breakpoint the computed width is unchanged. */
@media (max-width: 1040px) {
	#wrapper,
	#main,
	#colophon,
	#branding {
		width: auto;
		max-width: 1000px;
	}
}

/* The banner is a 1000x130 background image on a fixed-height <a>. Scale it
   proportionally instead of cropping. 13% of 1000px is exactly 130px, so the
   desktop rendering is unchanged. */
#header_banner h1 a {
	background-size: 100% auto;
	background-repeat: no-repeat;
	height: 0;
	padding-bottom: 13%;
}


/* ------------------------------------------------------ phones / tablets -- */

@media (max-width: 767px) {

	/* -- family B: release the fixed-width content column --------------- */

	/* #container carries the two-column float trick (float:left plus a
	   -240px right margin to make room for the sidebar). The checkout
	   templates have no sidebar, so drop it and let #container be a plain
	   full-width block. */
	#container.checkout_page {
		float: none;
		width: 100%;
		margin-right: 0;
	}

	/* .checkout_page #content is hard-coded to 700px in style.css. */
	#container.checkout_page #content {
		width: auto;
		max-width: 700px;
		padding-left: 12px;
		padding-right: 12px;
	}

	/* addCreditCard.php hard-codes a 60px left margin on #container. */
	#container[style*="margin-left"] {
		float: none;
		width: 100%;
		margin-left: 0 !important;
		margin-right: 0;
	}

	/* -- family A: guarantee badge ------------------------------------- */

	/* Inline float:right on the badge wrapper; centre it above the heading
	   rather than letting a 185px image eat half a phone-width column. */
	#content > div[style*="float:right"] {
		float: none !important;
		text-align: center;
		margin: 0 auto 10px;
	}

	#content > div[style*="float:right"] img {
		max-width: 140px;
	}

	/* -- family B: absolutely positioned badges ------------------------ */

	/* style.css pins these at left:550px / top:43px etc., which is off-screen
	   on a phone. Return them to normal flow. */
	.guaran_image img,
	.guaran_imagepp img,
	.guaran_imagespecial img,
	.guaran_imagespecialpp img,
	.ssl_image img,
	.ssl_imagepp img,
	.ssl_imagespecial img,
	.ssl_imagespecialpp img {
		position: static !important;
		left: auto !important;
		top: auto !important;
		display: block;
		margin: 10px auto;
	}

	.guaran_image img,
	.guaran_imagepp img,
	.guaran_imagespecial img,
	.guaran_imagespecialpp img {
		max-width: 140px;
	}

	/* -- tables: stack the label/value columns ------------------------- */

	#content table,
	#content tbody,
	#content tr,
	#content td,
	#content th {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	#content td,
	#content th {
		text-align: left;
	}

	/* Order summary rows read as "label" then "price" once stacked; drop the
	   gap that the table cell padding used to provide. */
	#content td {
		padding-bottom: 2px;
	}

	/* -- form fields --------------------------------------------------- */

	/* size="32" / size="20" attributes still drive width in a stacked cell. */
	#content input[type="text"],
	#content input[type="email"],
	#content input[type="tel"],
	#content select,
	#content .form-control {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		/* Under 16px iOS zooms the viewport on focus and never zooms back. */
		font-size: 16px;
	}

	/* Fields that never got Bootstrap's .form-control (the whole family B form,
	   plus the country <select> on the family A pages) render ~23px tall.
	   Give them a usable touch target. */
	#content select:not(.form-control),
	#content input[type="text"]:not(.form-control),
	#content input[type="email"]:not(.form-control) {
		min-height: 44px;
		padding: 6px 8px;
		border: 1px solid #ccc;
		border-radius: 4px;
		background-color: #fff;
	}

	/* ...but the short expiry/CVV fields keep their own widths. */
	#content input.card-expiry-month,
	#content input.card-expiry-year,
	#content input.card-cvc {
		padding: 6px 4px;
	}

	/* Expiry month / year and CVV share one cell and must stay short. */
	#content input.card-expiry-month {
		width: 4em;
		display: inline-block;
	}

	#content input.card-expiry-year {
		width: 6em;
		display: inline-block;
	}

	#content input.card-cvc {
		width: 7em;
	}

	/* -- buttons ------------------------------------------------------- */

	/* Inline width:70% (family A) and width:320px (family B). */
	#content #paymentbutton,
	#content button.submit-button.order,
	#content button[type="submit"] {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	#content button.submit-button.order {
		height: auto !important;
		min-height: 60px;
		font-size: 22px;
		white-space: normal;
		/* style.css gives it margin:20px all round; at width:100% the side
		   margins push it 40px past the column. */
		margin: 20px 0;
	}

	/* The PayPal link image carries an inline width:40%, which is a ~110px
	   tap target on a phone. */
	#content a > img[src*="PayPalButton"] {
		width: 85% !important;
		max-width: 300px;
	}

	/* -- headings and spacing ------------------------------------------ */

	#content {
		padding-top: 20px;
	}

	#content h1 {
		font-size: 28px;
		line-height: 1.2;
		clear: both;
	}

	#content h2.entry-title {
		font-size: 16px !important;
		line-height: 1.35;
	}
}


/* ------------------------------------------------------- narrow phones --- */

@media (max-width: 400px) {
	#content h1 {
		font-size: 24px;
	}

	#content > div[style*="float:right"] img,
	.guaran_image img,
	.guaran_imagepp img,
	.guaran_imagespecial img,
	.guaran_imagespecialpp img {
		max-width: 120px;
	}
}