/* mobile.css */
/* vim: set ft=css: */

/* Bad workaround */
/*
html {
	overflow-x: hidden;
}
*/

/* For debugging: see element boundaries */
/*
* {
    background: #000 !important;
    color: #0f0 !important;
    outline: solid #f00 1px !important;
}
*/


/**
 **  Moved from elearning.js
 **/

/* "Make logo scale nicely" */
/* Also, has an effect on mobile page width */
#masthead {
	overflow: hidden;
}

/* "Make logo scale nicely" */
#footer_nav {
	clear: both;
}

/* not needed? */
/*
#logo img {
	width: auto;
	height: 100%;
}
*/

/* not split up the menu titles when wrapping */
#top_nav li a, #subnav li a, #footer_nav li a {
	white-space: nowrap;
}

/* not needed here; already set in common.css */
/*
#top_nav li, #subnav li, #footer_nav li {
	line-height: 1em;
}
*/

/* not needed here; already set in common.css */
/*
#body {
	padding: 0;
}
*/

/**
 **  Additional
 **/

* {
	/* safari use font-sizes we specify */
	-webkit-text-size-adjust: 100%;
}

.mob-line {
	display: inline-block;
	/* for eg buttons keep their underline */
	text-decoration: inherit;
}

/* normally, not break up long mob-lines */
.mob-line-long {
	display: block;
}

@media only screen and (max-width: 1045px) {
	/* nav menus bigger */
	#top_nav li, #subnav li, #footer_nav li {
		/* line-height: 2em; */
	}
	/* right-nav Course menu move with window size */
	#page {
		width: 100%;
	}
	/* vs default padding-left 35px */
	#top_nav {
		/* padding-left: 20px; */
		padding-left: 0;
	}
	/* hide QC icon in lower right */
	#qc_promo {
		display: none;
	}
	/* size content_column width with window width */
	#content_column {
		/* slimmer side margins */
		margin-left: 10px;
		margin-right: 10px;
		/* there ought to be a cleaner way to do this */
		width: -webkit-calc(100% - var(--right-column-width) - 35px);
		width: -moz-calc(100% - var(--right-column-width) - 35px);
		width: calc(100% - var(--right-column-width) - 35px);
	}
	/* rightnav smaller right margin */
	#right_column {
		margin-right: 5px;
	}
	/* fit in width, vs 1025px in common.css */
	#copyright {
		width: 100%;
		padding: 10px 0;
	}
	/* size iframe with window width */
	/* is responsive up to the current std page width */
	#content_column iframe, #content_column embed {
		width: 100%;
		/* height: 53vw; */
		aspect-ratio: 16 / 9;
		max-height: 450px;
	}
	/* better fit */
	.green_bar_boxes {
		width: 90%;
	}
	/* vs 0 40px, better adapt to changing page width */
	.testimonial {
		margin: 0;
	}
	/* better fit */
	div.audioPlayers {
		column-gap: 20px;
		margin-left: 10px;
	}
	/* allow filenames to be wrapped */
	.filename {
		word-break: break-word;
	}
	/* allow links, eg full-urls, to be wrapped */
	a {
		word-break: break-word;
	}
	.pkgtable table {
		width: 525px;
		margin: 15px;
	}
	.videoSnippet .green_gold_box_outer {
		/* scale with width, override inline 800px */
		width: 95% !important;
	}
}

@media only screen and (max-width: 900px) {
	/* boxes vertical */
	.green_bar_left, .green_bar_right {
		float: none;
	}
	/* center horizontal */
	.green_gold_box_outer {
		margin: 20px auto;
	}
	/* from 3 cols to 2 */
	div.audioPlayers {
		column-count: 2;
		margin-left: 10px;
	}
	/* use margin on .testimonial instead */
	#testimonial_bar {
		padding: 0;
	}
	/* fixed-width now */
	.testimonial {
		margin: 25px auto;
		width: unset;
		overflow: auto;
	}
	/* single column */
	.testimonial_left, .testimonial_right {
		float: none;
	}
	.testimonial_button {
		clear: both;
	}
}

/* @media only screen and (max-width: 780px) {*/
@media only screen and (max-width: 860px) {
	/* not needed? */
	/*
	#logo img {
		position: absolute;
		bottom: 0;
	}
	*/
	/* hide topnav bar - why? */
	/* also: top-subnav bar still shown */
	#top_nav {
		display: none;
	}
	/* hide "Call to Register" line */
	#utility_nav .call_to_register {
		/* display: none; */
	}
	#utility_nav {
		/* closer to right side vs 20 */
		right: 15px;
	}
	/* with right-nav moved to bottom, content_column now full-width */
	#content_column {
		margin: 0 0 10px 0;
		width: 100%;
	}
	/* simpler to zero-out column margin and use body padding */
	#body {
		padding: 4px;
	}
	/* move rightnav to bottom */
	#right_column {
		margin: 0;
		width: 100%;
		clear: both;
	}
	/* allow copyright to naturally sit at bottom (vs abolute) */
	#copyright {
		position: inherit;
		bottom: inherit;
	}
	/* better fit */
	div.audioPlayers {
		margin-left: 10px;
	}
	#footer_nav,#footer_nav_column {
		display: none;
	}
}

@media only screen and (max-width: 820px) {
	#footer_nav_column1 {
		left: 0;
	}
}

@media only screen and (max-width: 567px) {
	#logo img {
		margin: 3px 7px;
	}
	/* allow breaking longer mob-lines */
	.mob-line-long {
		display: inline-block;
	}
	/* vs 90%, fit better in small width */
	.green_bar_boxes {
		width: 100%;
	}
	/* fit into smaller column */
	.men_women_box_inner {
		padding: 20px 0;
	}
	/* fit img into column */
	.green_gold_box_inner #signup_header {
		width: 100%;
	}
	/* don't indent left smaller width */
	.green_gold_box_inner .signupform {
		padding-left: 0;
	}
	/* don't indent right smaller width */
	.green_gold_box_inner .signup_form_field {
		margin-right: 0;
	}
	/* fit into width */
	.men_women_box_column {
		width: 100%;
		margin-left: 0;
	}
	.men_women_box_column img {
		/* center img in column */
		margin: 0 auto;
		/* to balance shadow on right */
		padding-left: 13px;
	}
	/* fit table into screen width */
	.green_gold_box_inner .formoutertable {
		table-layout: fixed;
	}
	div.audioPlayers {
		/* single column */
		column-count: 1;
		margin: 40px 0 0 0;
	}
	.audioPlayers .item {
		/* single column */
		display: block;
		/* width:min-content not work on safari */
		/* width: min-content; */
		width: 280px;
		/* center column */
		margin-left: auto;
		margin-right: auto;
	}
	.pkgtable table {
		/* width: 100%; */
		/* table needs a little more definition; give it right/left gutter */
		width: 90%;
		margin: auto;
	}
	.pkgtable td {
		padding: 10px;
	}
	div.audioSnippet audio.audioSnippet {
		width: 100%;
	}
}

@media only screen and (max-width: 600px) {
	#pax_logo {
		/* text-align: right; */
	}
	div#footer_social_icons {
		/* text-align: right; */
	}
}

@media only screen and (max-width: 450px) {
	div#utility_nav {
		/* width: 95%; */
	}
	div#banner_cart_call {
		display: inline-block;
	}
	div#banner_social_icons {
		float: left;
		margin-right: 25px;
		margin-top: 12px;
	}
	div#banner_social_icons img {
		margin-left: 5px;
		width: 24px;
	}
	#utilityLeft {
		/* display: block; */
	}
	#utilityRight {
		display: block;
	}
	#utilityRight {
		float: none;
	}
	#utility_nav div.more-desktop {
		display: none;
	}
	#utility_nav div.more-mobile {
		display: inline-block;
		font-size: 16px;
		margin-top: 10px;
	}
	#utility_nav div#mobileNav {
		display: inline-block;
	}
	#masthead {
		height: 117px;
	}
}

@media only screen and (max-width: 415px) {
	/* fit into width instead of having horiz scrollbars */
	.green_gold_box_outer {
		/* width: 365px; */
		width: 95%;
	}
	/* align gender box with above width */
	.green_gold_box_inner .formfield input[type=text] {
		width: 195px;
	}
	table.specialoffer table.formoutertable {
		/* vs width=400 */
		width: 100%;
	}
}

@media only screen and (max-width: 399px) {
	/* vs 200px, fit on iphone/se */
	.signup_form_field input[type=text] {
		width: 165px;
	}
	/* align gender box with above width */
	/* on iphone, doesn't actually align */
	.green_gold_box_inner .signup_gender_submit_row {
		width: 170px;
	}
	/* to manage diff differences of ios vs chrome */
	.green_gold_box_inner table {
		width: 270px;
	}
	/* better fit on iphone/se */
	.green_gold_box_inner .formlabel {
		/* vs 100px */
		width: 90px;
	}
	/* better fit on iphone/se */
	.green_gold_box_inner .formfield input[type=text] {
		/* vs 195 */
		width: 150px;
	}
	p.undTitle {
		/* vs 40, better fit in width */
		font-size: 34pt;
	}
	p.womenTitle, p.menTitle,
	span.womenTitle, span.menTitle {
		/* vs 30, better fit in width */
		font-size: 28pt;
	}
	p.ampTitle, span.ampTitle {
		/* vs 24 */
		font-size: 22pt;
	}
	#footer_nav_column1 {
		position: static;
		text-align: center;
		margin-top: 25px;
		margin-left: -15px; /* it seems to have 15px on the left somehow */
	}
	#pax_logo {
		text-align: center;
		margin-left: 15px;
	}
	div#footer_social_icons {
		text-align: center;
		margin-right: 0;
		margin-bottom: 10px;
		margin-right: 10px;
	}
	#copyright {
		/* margin-top: 10px; */
		text-align: center;
	}
}

/** schedule table **/

.schedule table tr td {
	/* override "white-space: nowrap" */
	white-space: normal !important;
}
/* modeling after: https://codepen.io/AllThingsSmitty/pen/MyqmdM */
/* uses "data-label" attrs added by mobilePrepSchedule() in mobile.js */
@media only screen and (max-width: 550px) {
	div.schedule table {
		/* only as wide as necessary, vs 99% */
		width: unset;
		/* but provide a max, for eg long Location strings ("LA and
		 * surrounding southern california" etc) */
		max-width: 90%;
		/* center horizontally */
		margin: auto;
	}
	div.schedule tr.cols {
		/* hide header row */
		display: none;
	}
	div.schedule table th {
		/* hide existing border; causes tiny white line */
		border-bottom: none;
		/* esp eg for reg button in Live schedule headings */
		display: block;
	}
	div.schedule table tr {
		/* single-column; tr are now record-blocks */
		display: block;
	}
	div.schedule table tr.city {
		/* allow city-header row to remain centered */
		display: table-row;
		/* existing border was creating an extra line along the right */
		border: none;
	}
	div.schedule table tr.alt, div.schedule table tr.none {
		/* border around data-blocks (but not around the empty/colspan tr's) */
		border: 2px black solid;
		/* avoid double-width border betwen blocks */
		border-top: none;
		/* provide padding around row-entry-block */
		padding: 6px 10px;
	}
	div.schedule table tr.none {
		/* not use row striping, and prefer alt's lighter background */
		background: #F1F1F1;
	}
	div.schedule table td {
		/* single-column; td now rows */
		display: block;
		/* decide NOT to wrap long block row; ..truncate instead */
		/* white-space: normal; */
		/* truncate block row when too long, instead of scrollbar */
		overflow: hidden;
		/* more subtle, vs solid */
		border-style: dotted;
		/* space between "rows" of entry */
		padding: 2px 0;
		/* right justify */
		text-align: right;
	}
	div.schedule table td::before {
		/* use "data-label" attribute for block row label */
		content: attr(data-label);
		/* make label bold */
		font-weight: bold;
		/* field headers left-justified */
		float: left;
		text-align: left;
		/* more space between headers and value */
		margin-right: 30px;
		/* uppercase field labels */
		text-transform: uppercase;
		/* avoid field labels pushing too far into field data */
		max-width: 40%;
	}
	div.schedule table td[data-label^="Register"] {
		/* no border line between register buttons */
		border-style: none;
	}
	div.schedule table td[data-label^="Product"]::before {
		/* display: none; */
	}
	div.schedule table td[data-label^="Product"] {
		/* text-align: left; */
	}
	div.schedule table td div.button {
		/* otherwise not display properly with td text-align right */
		display: inline-block;
	}
	div.schedule table th div.button {
		/* eg register button in Live schedule table */
		/* float right instead of sitting left */
		float: right;
		margin: 0 6px 6px;
	}
}