/* mobile.css - responsive overrides for the YenTiming coach portal.
   Loaded via <link> AFTER style.css on every page, so for any selector
   here that has the same specificity as one in style.css, this file wins
   on matching screens purely by being declared later - no !important
   needed except where noted. */

@media (max-width: 600px) {

	/* style.css sets .wrapper to width:90% but min-width:810px, which is
	   what actually forces horizontal scrolling on a phone - the 90% never
	   gets a chance to apply below 810px. .login_wrapper has no min-width
	   but is included here for consistent side padding. */
	.wrapper,
	.login_wrapper {
		width: 100%;
		min-width: 0;
		padding: 12px;
		box-sizing: border-box;
	}

	/* Header: style.css lays out the title (float left), nav (absolutely
	   centered), and user info (float right) all on one fixed 50px-tall
	   row. That only works at desktop widths - stack them instead. */
	#header {
		height: auto;
		line-height: normal;
		padding: 10px 0;
	}
	#header h1 {
		float: none;
		margin: 0 0 10px 0;
		text-align: center;
	}
	#header #nav_wrapper {
		position: static;
		width: 100%;
	}
	#header #nav {
		min-width: 0;
		padding-left: 0;
		padding-right: 0;
		height: auto;
		display: block;
	}
	#header #nav li {
		float: none;
		display: block;
		height: auto;
		line-height: 36px;
		padding: 0;
		background: none;
		border-bottom: 1px solid rgba(255,255,255,0.15);
	}
	#header #nav a,
	#header #nav span {
		float: none;
		height: auto;
		padding: 8px 0;
	}
	#header .user {
		float: none;
		text-align: center;
		margin-top: 10px;
	}

	/* Login / register blocks: style.css gives these hard pixel widths
	   (470px and 670px respectively), which overflow a phone screen no
	   matter how the surrounding .login_wrapper is sized. */
	.block.small.center.login,
	.block.small.center.register {
		width: 100%;
		margin-top: 20px;
		margin-bottom: 40px;
		box-sizing: border-box;
	}
	#register_form input,
	#login_form input[type="text"],
	#login_form input[type="password"] {
		width: 100%;
		box-sizing: border-box;
		font-size: 16px; /* prevents iOS Safari from auto-zooming on focus */
	}
	.fleft,
	.fright,
	.left_col,
	.right_col {
		float: none;
		width: 100%;
		box-sizing: border-box;
	}
	.register_btn,
	.loginLinks {
		float: none;
		text-align: center;
	}

	/* Footer: style.css floats these two halves left/right. */
	#footer .left,
	#footer .right {
		float: none;
		text-align: center;
		width: 100%;
	}

	/* Dashboard welcome-block logo: floats next to the text on desktop
	   (see dashboard.php's .dash-logo class), stacks above it here. */
	.dash-logo {
		float: none;
		text-align: center;
		margin: 0 auto 12px auto;
	}
	.dash-logo img {
		width: 120px;
		max-width: 100%;
		height: auto;
	}

	/* Content blocks: style.css sets a 400px/200px min-height meant to
	   keep desktop columns visually balanced - just wastes space on a
	   phone where everything is a single column anyway. */
	.block .block_content {
		min-height: 0;
	}
}

/* #loading's width is set here (not inline in the markup) so the media
   query above can override it. Keep this base rule in sync with the
   non-width properties if they ever change in the markup. */
#loading {
	text-align: center;
	z-index: 1000;
	position: absolute;
	width: 960px;
	padding-top: 8px;
	color: #000;
	display: none;
}

@media (max-width: 600px) {
	#loading {
		width: 90%;
		max-width: 300px;
		left: 5%;
	}
}