/*responsive.css*/
/*
 * Phone and tablet fixes for the legacy pages. Every rule sits inside a
 * max-width query below 992px, the width where the navbar collapses, so the
 * desktop layout is untouched. Loaded after main.css and homepage.css.
 */

@media (max-width: 991.98px) {

	/* ---------- Header ---------- */

	header {
		position: relative;
	}

	/* The page's spacing utilities are !important, so these name them. */
	header.mb-5 {
		margin-bottom: 1.5rem !important;
	}

	header > .container {
		position: relative;
	}

	header .row.pt-5 {
		padding-top: 1rem !important;
	}

	/* Logo and the three quick links each get a full row; the menu button
	   sits to the right of the logo. */
	header .row.pt-5 > .col-md-4,
	header .row.pt-5 > .upper-nav {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.wpma-logo {
		margin: 0;
		padding-right: 64px;
	}

	.wpma-logo img {
		width: 100%;
		max-width: 210px;
		height: auto;
	}

	.upper-nav ul {
		justify-content: space-between !important;
		margin: 1rem 0 0;
		padding: 0;
	}

	.upper-nav ul li {
		margin: 0 !important;
		flex: 1 1 0;
	}

	.upper-nav ul li a {
		font-size: .85rem;
		line-height: 1.2;
		text-align: center;
	}

	.upper-nav ul li i {
		font-size: 1.35rem !important;
		margin-bottom: .25rem;
	}

	header h2.py-5 {
		text-wrap: wrap;
		font-size: 1.5rem;
		padding-top: 1.5rem !important;
		padding-bottom: .75rem !important;
	}

	header h4.fs-5 {
		font-size: 1.05rem !important;
		line-height: 1.5;
	}

	.wpma-ads-header {
		min-height: 0;
		width: 100%;
		max-width: 728px;
		aspect-ratio: 728 / 90;
	}

	.wpma-ads-header li,
	.wpma-ads li {
		width: 100%;
	}

	.wpma-ads-header img,
	.wpma-ads img {
		width: 100%;
		height: auto;
	}

	/* The state map is drawn at a fixed 400 x 422 with each circle placed in
	   pixels, so it is scaled as a whole rather than rearranged. */
	.map {
		margin-left: auto;
		margin-right: auto;
		zoom: .68;
	}

	/* ---------- Navigation ---------- */

	/* The bar becomes a menu button at the top right of the header. The
	   strip it sits in lets taps through to the logo underneath. */
	header .navbar {
		position: absolute;
		top: 1rem;
		left: 12px;
		right: 12px;
		padding: 0 !important;
		background: transparent;
		filter: none;
		border-radius: 0 !important;
		pointer-events: none;
	}

	header .navbar > .container-fluid {
		justify-content: flex-end;
		padding: 0;
	}

	header .navbar-toggler,
	header .navbar-collapse {
		pointer-events: auto;
	}

	header .navbar-toggler {
		background-color: #c3d5d0;
		border: 0;
		border-radius: .5rem;
		padding: .45rem .6rem;
		box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
	}

	header .navbar-toggler:focus {
		box-shadow: 0 0 0 .2rem rgba(8, 89, 66, .35);
	}

	header .navbar-collapse.show,
	header .navbar-collapse.collapsing {
		margin-top: .5rem;
		background-color: #c3d5d0;
		border-radius: .5rem;
		box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
	}

	/* Long menus scroll inside the panel instead of running off the screen. */
	header .navbar-collapse.show {
		max-height: calc(100vh - 6rem);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Bootstrap 3, also on the page, pulls this list 15px past each side. */
	header .navbar-nav {
		margin: 0 !important;
		padding: .35rem 0;
	}

	header .navbar-nav > .nav-item + .nav-item {
		border-top: 1px solid rgba(8, 89, 66, .12);
	}

	header .navbar.navbar-expand-lg .navbar-nav > li > a {
		text-align: left;
		padding: .8rem 1rem;
		font-size: 1rem;
	}

	header .navbar-nav .dropdown-toggle::after {
		float: right;
		margin-top: .55em;
	}

	header .navbar-nav .dropdown-menu {
		position: static;
		float: none;
		width: auto;
		margin: 0 .75rem .75rem !important;
		padding: .25rem 0;
		border: 0;
		border-radius: .375rem;
		box-shadow: none;
	}

	header .navbar-nav .dropdown-item {
		padding: .65rem 1rem;
		white-space: normal;
	}

	/* Second-level menus (a state's pages, the partner programs) open in
	   place, indented under their parent. */
	header .navbar-nav .submenu {
		margin: 0 0 .25rem .75rem !important;
		background-color: #f3f6f5;
	}

	/* The arrow opens the second level; the name still goes to the page. A
	   wide tap area keeps the two from being hit by mistake. */
	header .navbar-nav .dropdown-item > .fa-angle-right {
		float: right;
		padding: .65rem 1rem;
		margin: -.65rem -1rem -.65rem 0;
		font-size: 1.15rem;
		line-height: 1;
		transition: transform .2s;
	}

	header .navbar-nav .dropdown-item.submenu-open > .fa-angle-right {
		transform: rotate(90deg);
	}

	/* ---------- Home page body ---------- */

	.wpma-ads {
		width: 100% !important;
		max-width: 728px;
		height: auto;
		aspect-ratio: 728 / 90;
	}

	/* The top banner rotation is 970 wide, set inline on the page. */
	.wpma-ads[style*="970"] {
		max-width: 970px;
		aspect-ratio: 970 / 90;
	}

	/* The convention box is a fixed 350px tall; on a narrow screen its text
	   wraps past that and was cut off at the top. Let it grow instead. */
	.video-container.dark-gradient-box {
		height: auto;
	}

	.dark-gradient-box .overlay {
		position: relative;
		padding: 1.5rem 1rem;
	}

	.dark-gradient-box .overlay h5 {
		font-size: 1rem;
		line-height: 1.45;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-bottom: 1rem !important;
	}

	.dark-gradient-box .overlay img {
		max-width: 100%;
		height: auto;
	}

	/* Stacked under the convention, the calendar needs its own space and
	   shows in full rather than in a box that scrolls inside the page. */
	.col-lg-4 > .overflow-auto {
		max-height: none !important;
	}

	.col-lg-8 + .col-lg-4 {
		margin-top: 2rem;
	}

	/* ---------- Footer ---------- */

	#bar-contents img {
		max-width: 100%;
		height: auto;
	}

	#bar-contents > [class*="col-"] + [class*="col-"] {
		margin-top: .75rem;
	}

	.multiview_ad_728 {
		max-width: 100%;
		overflow: hidden;
		margin: 0 auto;
	}

	.multiview_ad_728 img {
		max-width: 100%;
		height: auto;
	}

	footer .bottom-bar {
		flex-direction: column;
		gap: .75rem;
		text-align: center;
		padding: 1.5rem 0;
		font-size: .9rem;
	}

	footer .bottom-bar ul {
		flex-wrap: wrap;
		justify-content: center;
		gap: .25rem 1.25rem;
	}
}

@media (max-width: 767.98px) {

	.map {
		zoom: .85;
	}

	/* Oil price and the supply guide stack; centre both. */
	#oil-price {
		float: none !important;
		margin: 0 auto !important;
	}

	.col-md-6 > div[style*="width:200px"] {
		margin: 1rem auto 0;
	}

	footer {
		padding-top: 60px;
	}

	footer iframe {
		max-width: 100%;
	}
}

@media (max-width: 400px) {
	.map {
		zoom: .74;
	}
}

@media (max-width: 350px) {
	.map {
		zoom: .66;
	}
}