/*
 * WCAG 2.1 AA 1.4.10 Reflow layer.
 *
 * Below 1080px (equivalently: desktop at 400% zoom, or any mobile
 * viewport) the fixed 1040px layout linearizes into one column so no
 * two-dimensional scrolling is needed. Desktop rendering above 1080px
 * is untouched. Data tables keep their columns and scroll within their
 * own container (permitted by the 1.4.10 exception for tabular data).
 */

/* Narrow-only logo banner: hidden at desktop widths */
.reflow-logo {
	display: none;
}

@media (max-width: 1080px) {

	/* ---- containers: release every fixed width ---- */
	#Wrapper,
	#ContainerBG,
	#ContainerBrdr,
	#ContainerBtm,
	#Container,
	#HmContainer,
	#IContainer,
	#ContentWindowTop,
	#ContentWindow,
	#Content,
	#Footer,
	#MainContent,
	.MainSearch,
	.SearchHolder {
		width: auto !important;
		min-width: 0 !important;
		max-width: 100%;
	}

	body {
		overflow-x: hidden;
		overflow-wrap: break-word;
	}

	/* ---- media scales down, never forces overflow ---- */
	img,
	iframe,
	video {
		max-width: 100%;
		height: auto;
	}

	/* ---- layout tables linearize ---- */
	table[role="presentation"],
	table[role="presentation"] > tbody,
	table[role="presentation"] > tbody > tr,
	table[role="presentation"] > tbody > tr > td,
	table[role="presentation"] > tr,
	table[role="presentation"] > tr > td {
		display: block;
		width: auto !important;
		height: auto !important;
	}

	/* ---- data tables keep columns, scroll inside themselves ---- */
	.LightStripeTable,
	.datatable,
	.subDashboard {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}

	/* ---- fixed-width floated content blocks stack ---- */
	.floatrt,
	.floatlft,
	div[style*="float:left"],
	div[style*="float:right"],
	div[style*="float: left"],
	div[style*="float: right"] {
		float: none !important;
		width: auto !important;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	/* ---- top menus: flow instead of absolute 1040px overlay.
	        row-reverse mirrors the desktop float:right stacking, so the
	        buttons read My Structures | Quick Links | Sign Out ---- */
	.nav,
	#HmContainer .nav,
	#IContainer .nav {
		position: static;
		width: auto;
		padding: 5px;
		display: flex;
		flex-direction: row-reverse;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 4px;
	}
	.nav ul {
		float: none;
		height: auto;
		display: inline-block;
		text-align: right;
	}
	.nav li.visible {
		display: inline-block;
	}
	/* open dropdown panels: full-width sheet fixed under the button row
	   (the sprite li is overflow:hidden, so in-flow panels get clipped
	   and absolute ones anchor to a far-away ancestor) ---- */
	.nav ul li ul,
	.nav ul.hover ul,
	.nav ul ul.hover {
		position: fixed !important;
		left: 4vw !important;
		right: auto;
		top: auto;
		width: 92vw !important;
		min-width: 0;
		max-width: none;
		max-height: 65vh;
		overflow-y: auto;
		text-align: left;
		z-index: 2000;
		background: #ffffff !important;
		box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
	}

	/* ---- compact brand header replaces the 1040px art collage ---- */
	#HmContainer,
	#IContainer {
		background-image: none;
	}
	td.TdHeader {
		height: auto !important;
		background: linear-gradient(180deg, #C4006F 0%, #6A1B5E 100%);
		padding: 0 0 10px;
	}
	.reflow-logo {
		display: block;
		width: 100%;
		height: auto;
		margin: 0 0 4px;
	}

	/* ---- primary tab bars become wrapping text pills ---- */
	#HmContainer #HmNav,
	#IContainer #INav {
		position: static;
		width: auto;
		height: auto;
		padding-left: 0;
		background-image: none;
		text-align: center;
	}
	#HmContainer #HmNav ul,
	#IContainer #INav ul {
		width: auto;
		height: auto;
		padding: 0;
		margin: 0;
		background-image: none;
	}
	#HmContainer #HmNav li,
	#IContainer #INav li {
		float: none !important;
		display: inline-block !important;
		width: auto !important;
		height: auto !important;
		margin: 4px 2px !important;
		background-image: none !important;
		text-indent: 0;
	}
	#HmContainer #HmNav li a,
	#IContainer #INav li a {
		display: inline-block;
		width: auto;
		height: auto;
		text-indent: 0;
		background: rgba(30, 6, 40, .85);
		color: #fff;
		font-weight: bold;
		font-size: 14px;
		padding: 8px 14px;
		border-radius: 16px;
		text-decoration: none;
	}
	#HmContainer #HmNav li.active a,
	#IContainer #INav li.active a,
	#HmContainer #HmNav li a[aria-current="page"],
	#IContainer #INav li a[aria-current="page"] {
		background: #fff;
		color: #6A1B5E;
	}

	/* ---- search row (home template) ---- */
	#HmContainer #HmNav li.search {
		float: none;
		display: block;
		width: auto !important;
		height: auto !important;
		margin: 8px 10px 0 !important;
		background-image: none !important;
	}
	#HmContainer #HmNav li.search {
		display: block !important;
	}
	#HmContainer #HmNav li.search form {
		display: flex;
		width: 100%;
		gap: 6px;
		align-items: center;
	}
	#HmContainer #HmNav #fpSearchHint {
		position: static;
		display: block;
		flex: 1;
		width: auto;
		min-width: 0;
		top: 0;
		left: 0;
		margin: 0;
		font-size: 16px;
		padding: 6px;
		border-radius: 4px;
		border: 1px solid #6A1B5E;
	}
	#HmNav .fpSearchButton {
		text-indent: 0;
		width: auto;
		height: auto;
		margin: 0;
		padding: 7px 14px;
		background: #1e0628;
		background-image: none;
		color: #fff;
		font-weight: bold;
		border-radius: 4px;
		border: 0;
		cursor: pointer;
	}

	/* ---- structure-template chrome: kill the striped body art and
	        let the teal container own the background ---- */
	body {
		background-image: none;
		background-color: #565656;
	}
	#Container {
		background-image: none;
	}
	#ContainerBG {
		background-color: #00a3b2;
	}
	#HmContainer,
	#IContainer {
		background-color: #fff;
	}

	/* ---- structure side nav stacks above content, centered ---- */
	#SideNav {
		float: none;
		display: block;
		left: 0;
		top: 0;
		margin: 10px auto 15px;
	}

	/* ---- structure content header: solid card instead of the scaled
	        781px sprite art, which misaligns at narrow widths ---- */
	#ContentWindowTop,
	#ContentWindow,
	#ContentWindow-Grey {
		float: none !important;
		left: 0 !important;
	}
	#ContentWindowTop {
		height: auto !important;
		background-image: none !important;
		background-color: #582A87;
		border-radius: 14px 14px 0 0;
		margin: 0 4px;
		padding: 10px 6px 6px;
	}
	#ContentWindowTop h1.structName,
	#ContentWindowTop h2.pageName {
		height: auto !important;
		width: auto !important;
		margin: 4px auto;
	}
	#ContentWindowTop h1 img,
	#ContentWindowTop h2 img {
		display: block;
		margin: 0 auto;
	}
	#ContentWindow {
		background-image: none !important;
		background-color: #fff;
		margin: 0 4px;
		border-radius: 0 0 14px 14px;
		padding: 8px;
	}
	div.CWindow-B,
	h3.CWindow-B {
		display: none;
	}

	/* ---- gallery controls: centered row instead of floats ---- */
	.GalleryControls {
		float: none;
		position: static;
		display: flex;
		justify-content: center;
		gap: 6px;
		margin: 8px auto;
	}
	/* the 3-state rollover sprites must keep natural size; the 210px li
	   clips them to one state */
	#SideNav img {
		max-width: none;
		height: auto;
	}

	/* content window overlapped the banner by design in the 1040px
	   layout; stacked layout needs no offset */
	#ContentWindowTop,
	#ContentWindow {
		top: 0 !important;
	}

	/* ---- decorative chrome that only exists to be 1040px wide ---- */
	#Container .topImg,
	#moveTd .topImg {
		display: none;
	}
	div.CWindow-B,
	h3.CWindow-B {
		width: auto !important;
		background-size: 100% 100%;
	}
	#ContentWindowTop,
	#ContentWindow {
		background-size: 100% auto;
	}
	.bigDisplay {
		width: auto !important;
		max-width: 100%;
	}

	/* ---- header art cells: let height follow content ---- */
	td.TdHeader {
		height: auto !important;
	}

	/* ---- administrator portal (admin.css loads after this sheet via
	        $data['head'], so these need !important) ---- */
	.adminNavRow > ul {
		display: block !important;
		width: auto !important;
		margin-bottom: 12px;
	}
	.adminNavRow > ul > li {
		display: inline-block !important;
		white-space: normal !important;
		margin: 3px 2px;
	}
	.adminNavRow > ul a {
		width: auto !important;
		padding: 10px 14px !important;
	}
	p.bgbldserif.narrow {
		width: auto !important;
		max-width: 100%;
	}
	.historyRow input.big,
	.historyRow select.big {
		width: 92% !important;
		max-width: 100%;
		box-sizing: border-box;
	}
	.adminSubRow,
	.adminUsersRow,
	.historyRow,
	.row-fluid,
	.span4,
	.span6,
	.span8,
	.span12,
	.two-by,
	.analysisGraph {
		width: auto !important;
		max-width: 100%;
		min-width: 0 !important;
		float: none !important;
		margin-left: 0 !important;
	}

	/* ---- footers ---- */
	#Footer p[align="right"] {
		text-align: center !important;
		padding-right: 0 !important;
	}

	/* ---- modal dialogs fit the viewport ---- */
	.modal {
		width: 92vw !important;
		left: 4vw !important;
		right: auto;
		margin-left: 0 !important;
	}

	/* ---- video blocks ---- */
	#Content .VidSect,
	.VidSect {
		width: auto !important;
	}
	a.box1,
	.box1,
	.box2 {
		width: auto !important;
		max-width: 100%;
		height: auto !important;
		float: none;
	}
	/* play button + duration draw over the image; as relative boxes
	   they'd still reserve flow space below it (the desktop layout
	   absorbed that inside .box1's fixed 180px height) */
	a.box1 {
		position: relative;
		display: block;
	}
	.box1 .playbutton {
		position: absolute;
		left: 10px;
		bottom: 12px;
		margin: 0;
	}
	.box1 .duration {
		position: absolute;
		left: auto;
		right: 10px;
		bottom: 18px;
		margin: 0;
	}

	/* ---- page-title images: hardcoded left margins centered the 1040px
	        layout; center them properly instead ---- */
	h1 img,
	#MainContent > img,
	#Content > img,
	.Tour img {
		display: block;
		margin-left: auto !important;
		margin-right: auto !important;
		float: none;
	}

	/* ---- colored panel boxes sized inline for the fixed layout ---- */
	.panel-lblue,
	.panel-yellow,
	.teal,
	.blue,
	.mgnta,
	.purp,
	.yellow {
		width: auto !important;
		max-width: 100%;
		margin-left: auto !important;
		margin-right: auto !important;
		float: none !important;
	}
}