/*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 or sub.css.
 */

@media (max-width: 991.98px) {

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

	header {
		position: relative;
	}

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

	header > .container {
		position: relative;
	}

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

	/* Inside pages have nothing under the logo once the quick links move
	   into the menu, so the header needs its own bottom edge. */
	header .row.pt-4 {
		padding-bottom: 1rem;
	}

	/* The logo gets the full row; the menu button sits to its right. The
	   three quick links move into the menu (.nav-quick below). */
	header .row.pt-5 > .col-md-4,
	header .row.pt-4 > .col-md-4 {
		flex: 0 0 100%;
		max-width: 100%;
	}

	header .upper-nav {
		display: none !important;
	}

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

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

	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. Opening
	   it (js/mobile-nav.js sets html.nav-open) fills the screen with the
	   header's green and turns the logo white. */
	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;
	}

	/* Three thin lines in the logo's green, no box. */
	header .navbar-toggler {
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 44px;
		height: 44px;
		margin-top: 1px;
		padding: 0 2px 0 0;
		border: 0;
		border-radius: 10px;
		background: transparent;
		box-shadow: none;
	}

	header .navbar-toggler:focus {
		box-shadow: none;
	}

	/* Mouse and touch show no ring; the keyboard gets a soft one. */
	header .navbar-toggler:focus,
	header .navbar-toggler:focus:not(:focus-visible) {
		outline: 0;
	}

	header .navbar-toggler:focus-visible {
		outline: 2px solid rgba(15, 74, 55, .5);
		outline-offset: 2px;
	}

	html.nav-open header .navbar-toggler:focus-visible {
		outline-color: rgba(255, 255, 255, .55);
	}

	/* The outer lines move by transform alone, so the morph stays smooth. */
	header .navbar-toggler-icon,
	header .navbar-toggler-icon::before,
	header .navbar-toggler-icon::after {
		display: block;
		height: 2px;
		border-radius: 2px;
		background: #0f4a37;
		transition: transform .4s cubic-bezier(.65, 0, .35, 1), opacity .25s ease, background-color .3s;
	}

	header .navbar-toggler-icon {
		position: relative;
		width: 28px;
	}

	/* ::before and ::after are the outer lines. */
	header .navbar-toggler-icon::before,
	header .navbar-toggler-icon::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 28px;
	}

	header .navbar-toggler-icon::before { transform: translateY(-8px); }
	header .navbar-toggler-icon::after { transform: translateY(8px); }

	/* The shorter middle line is the icon's own background, so it can
	   shrink away without moving the outer two (its children). It paints
	   a 20 x 2 px strip, nothing more. */
	header .navbar-toggler .navbar-toggler-icon {
		background: linear-gradient(#0f4a37, #0f4a37) right center / 20px 2px no-repeat;
		transition: background-size .3s ease;
	}

	html.nav-open header .navbar-toggler .navbar-toggler-icon {
		background-size: 0 2px;
	}

	html.nav-open header .navbar-toggler-icon::before,
	html.nav-open header .navbar-toggler-icon::after {
		background: #fff;
	}

	html.nav-open header .navbar-toggler-icon::before { transform: rotate(45deg); }
	html.nav-open header .navbar-toggler-icon::after { transform: rotate(-45deg); }

	/* The menu: a full-screen panel in the header's greens that fades in. */
	header .navbar-collapse {
		position: fixed;
		inset: 0;
		z-index: 1;
		display: block !important;
		height: auto !important;
		padding: 96px 24px calc(2rem + env(safe-area-inset-bottom));
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		background:
			radial-gradient(120% 60% at 100% 0%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 60%),
			linear-gradient(165deg, rgba(79, 138, 119, .58) 0%, rgba(42, 103, 83, .66) 45%, rgba(15, 74, 55, .78) 100%);
		/* The page shows through, softened so the text stays clear. */
		-webkit-backdrop-filter: blur(9px) saturate(160%);
		backdrop-filter: blur(9px) saturate(160%);
		opacity: 0;
		visibility: hidden;
		contain: layout paint;
		will-change: opacity;
		transition: opacity .35s ease, visibility 0s linear .35s;
	}

	/* Browsers without the blur get a more solid panel instead. */
	@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		header .navbar-collapse {
			background:
				radial-gradient(120% 60% at 100% 0%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 60%),
				linear-gradient(165deg, rgba(79, 138, 119, .96) 0%, rgba(42, 103, 83, .97) 40%, rgba(15, 74, 55, .98) 100%);
		}
	}

	html.nav-open header .navbar-collapse {
		opacity: 1;
		visibility: visible;
		transition: opacity .35s ease, visibility 0s;
	}

	html.nav-open,
	html.nav-open body {
		overflow: hidden;
	}

	html.nav-open header {
		z-index: 1050;
	}

	/* The logo stays, in white, above the open menu. */
	header .wpma-logo img {
		transition: filter .3s ease;
	}

	html.nav-open header .wpma-logo {
		position: relative;
		z-index: 1001;
	}

	html.nav-open header .wpma-logo img {
		filter: brightness(0) invert(1);
	}

	/* Bootstrap 3, also on the page, pulls this list 15px past each side.
	   Rows take the full width; the quick links share the last row. */
	header .navbar-nav {
		margin: 0 !important;
		padding: 0;
		flex-direction: row;
		flex-wrap: wrap;
	}

	/* Line the menu up with the logo, which sits in the page's container. */
	@media (min-width: 576px) {
		header .navbar-nav {
			max-width: 516px;
			margin: 0 auto !important;
		}
	}

	@media (min-width: 768px) {
		header .navbar-nav {
			max-width: 696px;
		}
	}

	/* The items carry Bootstrap's .flex-fill, which is !important. */
	header .navbar-nav > .nav-item {
		flex: 0 0 100% !important;
		opacity: 0;
		transform: translateY(14px);
		transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
	}

	/* Rows slide in one after another. */
	html.nav-open header .navbar-nav > .nav-item {
		opacity: 1;
		transform: none;
	}

	html.nav-open header .navbar-nav > .nav-item:nth-child(1) { transition-delay: .06s; }
	html.nav-open header .navbar-nav > .nav-item:nth-child(2) { transition-delay: .1s; }
	html.nav-open header .navbar-nav > .nav-item:nth-child(3) { transition-delay: .14s; }
	html.nav-open header .navbar-nav > .nav-item:nth-child(4) { transition-delay: .18s; }
	html.nav-open header .navbar-nav > .nav-item:nth-child(5) { transition-delay: .22s; }
	html.nav-open header .navbar-nav > .nav-item:nth-child(6) { transition-delay: .26s; }
	html.nav-open header .navbar-nav > .nav-item:nth-child(n+7) { transition-delay: .32s; }

	header .navbar-nav > .nav-item:not(.nav-quick) {
		border-bottom: 1px solid rgba(255, 255, 255, .14);
	}

	header .navbar.navbar-expand-lg .navbar-nav > li > a {
		display: block;
		text-align: left;
		padding: 1.05rem .25rem;
		color: #fff;
		font-size: 1.3rem;
		font-weight: 400;
		text-shadow: 0 1px 2px rgba(5, 30, 22, .25);
		letter-spacing: .01em;
		line-height: 1.25;
		text-transform: none !important;
		transition: color .2s;
	}

	header .navbar.navbar-expand-lg .navbar-nav > li > a:active,
	header .navbar.navbar-expand-lg .navbar-nav > li > a.show {
		background: transparent;
		color: #d9f0e5;
	}

	/* Chevron in place of Bootstrap's caret; it turns as the list opens. */
	header .navbar-nav .dropdown-toggle::after {
		float: right;
		width: 9px;
		height: 9px;
		margin: .45rem .35rem 0 0;
		border: 0;
		border-right: 1.5px solid rgba(255, 255, 255, .75);
		border-bottom: 1.5px solid rgba(255, 255, 255, .75);
		transform: rotate(45deg);
		transition: transform .3s ease, margin .3s ease;
	}

	header .navbar-nav .dropdown-toggle.show::after {
		transform: rotate(-135deg);
		margin-top: .7rem;
	}

	header .navbar-nav .dropdown-menu {
		position: static;
		float: none;
		width: auto;
		margin: -.25rem 0 1rem .6rem !important;
		padding: 0 0 0 .9rem;
		border: 0;
		border-left: 1px solid rgba(255, 255, 255, .25);
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

	header .navbar-nav .dropdown-menu.show {
		animation: nav-drop .35s cubic-bezier(.2, .7, .2, 1);
	}

	@keyframes nav-drop {
		from { opacity: 0; transform: translateY(-8px); }
	}

	header .navbar-nav .dropdown-item {
		padding: .55rem .5rem;
		border-radius: 8px;
		color: rgba(255, 255, 255, .82);
		font-size: 1.02rem;
		white-space: normal;
		transition: background-color .15s, color .15s;
	}

	header .navbar-nav .dropdown-item:hover,
	header .navbar-nav .dropdown-item:focus,
	header .navbar-nav .dropdown-item:active {
		background: rgba(255, 255, 255, .1);
		color: #fff;
	}

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

	/* 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: .55rem .75rem;
		margin: -.55rem -.5rem -.55rem 0;
		font-size: 1.15rem;
		line-height: 1;
		color: rgba(255, 255, 255, .7);
		transition: transform .25s;
	}

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

	/* Advertising, Industry Resources and Become A Member: three glass
	   tiles along the bottom. */
	header .navbar-nav > .nav-item.nav-quick {
		flex: 1 1 0 !important;
		margin-top: 1.75rem;
	}

	header .navbar-nav > .nav-quick + .nav-quick {
		margin-left: .6rem;
	}

	header .navbar.navbar-expand-lg .navbar-nav > .nav-quick > a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: .45rem;
		height: 100%;
		padding: 1rem .35rem .9rem;
		border: 1px solid rgba(255, 255, 255, .22);
		border-radius: 14px;
		background: rgba(255, 255, 255, .1);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
		color: #fff;
		font-size: .8rem;
		font-weight: 500;
		line-height: 1.2;
		text-align: center;
		transition: background-color .2s, border-color .2s;
	}

	header .navbar.navbar-expand-lg .navbar-nav > .nav-quick > a:active {
		background: rgba(255, 255, 255, .16);
		border-color: rgba(255, 255, 255, .28);
	}

	header .navbar-nav > .nav-quick i {
		font-size: 1.35rem;
		color: #cfe8dc;
	}

	@media (prefers-reduced-motion: reduce) {
		header .navbar-collapse,
		header .navbar-nav > .nav-item,
		header .navbar-toggler-icon,
		header .navbar-toggler-icon::before,
		header .navbar-toggler-icon::after {
			transition: none !important;
		}

		header .navbar-nav .dropdown-menu.show {
			animation: none;
		}
	}

	/* ---------- 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;
	}

	#mast-footer .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;
	}
}