/*
 * STS Mobile Header Fix v1.2
 * Covers mobile, tablet and narrow desktop/hamburger widths.
 * No external font is loaded.
 */

@media (max-width: 1180px) {

	html,
	body {
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: clip !important;
	}

	#sts-main-content,
	.sts-main-content {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		transform: none !important;
	}

	/* HEADER WRAPPER */
	#sts-site-header.sts-site-header {
		position: relative !important;
		left: 0 !important;
		right: 0 !important;

		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;

		margin: 0 !important;
		padding: 0 !important;

		background: #ffffff !important;

		transform: none !important;
		overflow: visible !important;

		z-index: 9990 !important;
	}

	/* HEADER ROW */
	#sts-site-header .sts-header-inner {
		position: relative !important;

		display: grid !important;
		grid-template-columns: minmax(0, 1fr) 46px !important;
		align-items: center !important;

		width: 100% !important;
		max-width: 1180px !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;

		margin: 0 auto !important;
		padding: 14px clamp(16px, 4vw, 42px) !important;

		column-gap: 16px !important;

		transform: none !important;
		overflow: visible !important;
	}

	/* BRAND AREA
	   .sts-brand-meta is nested inside .sts-brand, so the brand itself
	   needs to wrap into multiple rows. */
	#sts-site-header .sts-brand {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;

		grid-column: 1 !important;

		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		min-height: 0 !important;

		margin: 0 !important;
		padding: 0 !important;

		gap: 8px 14px !important;

		overflow: visible !important;
		text-decoration: none !important;
	}

	/* Allow all logo/image children to shrink instead of forcing overflow */
	#sts-site-header .sts-brand > *:not(.sts-brand-meta) {
		min-width: 0 !important;
		max-width: 100% !important;
		flex-shrink: 1 !important;
	}

	#sts-site-header .sts-brand img,
	#sts-site-header .sts-brand picture,
	#sts-site-header .sts-brand svg {
		display: block !important;

		width: auto !important;
		max-width: 100% !important;
		height: auto !important;
		max-height: 72px !important;

		margin: 0 !important;

		object-fit: contain !important;
		object-position: left center !important;
	}

	/* DATE + VENUE: force onto their own row */
	#sts-site-header .sts-brand-meta {
		display: flex !important;
		flex: 0 0 100% !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: baseline !important;

		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;

		margin: 2px 0 0 !important;
		padding: 0 !important;

		gap: 2px 10px !important;

		overflow: visible !important;
		white-space: normal !important;

		font-family: inherit !important;
		text-align: left !important;
	}

	#sts-site-header .sts-brand-meta strong {
		display: block !important;

		margin: 0 !important;

		color: #111111 !important;

		font-family: inherit !important;
		font-size: 13px !important;
		font-weight: 750 !important;
		line-height: 1.3 !important;

		white-space: nowrap !important;
	}

	#sts-site-header .sts-brand-meta small {
		display: block !important;

		margin: 0 !important;

		color: #555555 !important;

		font-family: inherit !important;
		font-size: 11px !important;
		font-weight: 500 !important;
		line-height: 1.35 !important;

		white-space: normal !important;
	}

	/* HAMBURGER */
	#sts-site-header .sts-menu-toggle {
		position: relative !important;

		grid-column: 2 !important;
		justify-self: end !important;
		align-self: center !important;

		display: flex !important;
		align-items: center !important;
		justify-content: center !important;

		width: 46px !important;
		height: 46px !important;
		min-width: 46px !important;
		min-height: 46px !important;

		margin: 0 !important;
		padding: 9px !important;

		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;

		cursor: pointer !important;
		z-index: 100001 !important;
	}

	#sts-site-header .sts-menu-toggle-lines {
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;

		width: 27px !important;
		height: 22px !important;

		gap: 5px !important;
	}

	#sts-site-header .sts-menu-toggle-lines i {
		display: block !important;

		width: 27px !important;
		height: 2px !important;

		margin: 0 !important;
		padding: 0 !important;

		background: #141414 !important;
		border: 0 !important;

		transform-origin: center !important;

		transition:
			transform 0.18s ease,
			opacity 0.18s ease !important;
	}

	#sts-site-header
	.sts-menu-toggle[aria-expanded="true"]
	.sts-menu-toggle-lines i:nth-child(1) {
		transform: translateY(7px) rotate(45deg) !important;
	}

	#sts-site-header
	.sts-menu-toggle[aria-expanded="true"]
	.sts-menu-toggle-lines i:nth-child(2) {
		opacity: 0 !important;
	}

	#sts-site-header
	.sts-menu-toggle[aria-expanded="true"]
	.sts-menu-toggle-lines i:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg) !important;
	}

	/* MENU DRAWER */
	#sts-site-header #sts-primary-navigation.sts-primary-nav {
		position: fixed !important;

		top: var(--sts-mobile-nav-top, 110px) !important;
		right: 16px !important;
		left: auto !important;
		bottom: auto !important;

		width: min(88vw, 390px) !important;
		max-width: calc(100vw - 32px) !important;

		height: auto !important;
		min-height: 0 !important;
		max-height: calc(100dvh - var(--sts-mobile-nav-top, 110px) - 16px) !important;

		margin: 0 !important;
		padding: 14px 18px 18px !important;

		overflow-x: hidden !important;
		overflow-y: auto !important;
		overscroll-behavior: contain !important;

		background: #09090b !important;

		border: 1px solid #303036 !important;
		border-radius: 12px !important;

		box-shadow: 0 24px 60px rgba(0,0,0,.42) !important;

		transform: none !important;

		z-index: 100000 !important;
	}

	#sts-site-header
	.sts-menu-toggle[aria-expanded="false"]
	+ #sts-primary-navigation {
		display: none !important;
	}

	#sts-site-header
	.sts-menu-toggle[aria-expanded="true"]
	+ #sts-primary-navigation {
		display: block !important;
	}

	/* MENU RESET */
	#sts-site-header #sts-primary-navigation > ul.sts-menu {
		position: static !important;

		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;

		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;

		margin: 0 !important;
		padding: 0 !important;

		gap: 0 !important;

		overflow: visible !important;
		white-space: normal !important;

		list-style: none !important;
		transform: none !important;
	}

	#sts-site-header #sts-primary-navigation > ul.sts-menu > li {
		position: relative !important;

		display: block !important;
		float: none !important;

		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;

		margin: 0 !important;
		padding: 0 !important;

		border-bottom: 1px solid #29292e !important;
	}

	#sts-site-header #sts-primary-navigation > ul.sts-menu > li:last-child {
		border-bottom: 0 !important;
	}

	#sts-site-header #sts-primary-navigation > ul.sts-menu > li > a {
		display: block !important;

		width: 100% !important;
		height: auto !important;

		margin: 0 !important;
		padding: 14px 5px !important;

		color: #ffffff !important;
		background: transparent !important;

		font-family: inherit !important;
		font-size: 15px !important;
		font-weight: 650 !important;
		line-height: 1.35 !important;

		text-align: left !important;
		text-decoration: none !important;
		white-space: normal !important;
	}

	#sts-site-header #sts-primary-navigation > ul.sts-menu > li > a:hover,
	#sts-site-header #sts-primary-navigation > ul.sts-menu > li.current-menu-item > a,
	#sts-site-header #sts-primary-navigation > ul.sts-menu > li.current_page_item > a {
		color: #ff293b !important;
	}

	/* SUBMENU */
	#sts-site-header #sts-primary-navigation ul.sts-menu li.menu-item-has-children > .sub-menu {
		position: static !important;

		display: block !important;

		width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		max-height: none !important;

		margin: 0 !important;
		padding: 0 0 10px 18px !important;

		overflow: visible !important;

		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;

		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;

		list-style: none !important;
	}

	#sts-site-header #sts-primary-navigation ul.sts-menu .sub-menu li {
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
	}

	#sts-site-header #sts-primary-navigation ul.sts-menu .sub-menu a {
		display: block !important;
		width: 100% !important;

		margin: 0 !important;
		padding: 9px 4px !important;

		color: #aaaab3 !important;
		background: transparent !important;

		font-family: inherit !important;
		font-size: 13px !important;
		font-weight: 500 !important;
		line-height: 1.4 !important;

		text-decoration: none !important;
		white-space: normal !important;
	}

	/* CTA MENU ITEMS */
	#sts-site-header #sts-primary-navigation .sts-delegate-btn {
		margin-top: 13px !important;
		border-bottom: 0 !important;
	}

	#sts-site-header #sts-primary-navigation .sts-delegate-btn > a {
		padding: 13px 15px !important;
		color: #ffffff !important;
		background: #1677b7 !important;
		border: 1px solid #1677b7 !important;
		border-radius: 4px !important;
		font-weight: 750 !important;
	}

	#sts-site-header #sts-primary-navigation .sts-exhibition-btn {
		margin-top: 8px !important;
		border-bottom: 0 !important;
	}

	#sts-site-header #sts-primary-navigation .sts-exhibition-btn > a {
		padding: 13px 15px !important;
		color: #ffffff !important;
		background: #ed0718 !important;
		border: 1px solid #ed0718 !important;
		border-radius: 4px !important;
		font-weight: 750 !important;
	}
}

/* Tablet */
@media (max-width: 900px) {

	#sts-site-header .sts-header-inner {
		padding: 12px 18px !important;
	}

	#sts-site-header .sts-brand img,
	#sts-site-header .sts-brand picture,
	#sts-site-header .sts-brand svg {
		max-height: 68px !important;
	}

	#sts-site-header .sts-brand-meta {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 2px !important;
	}
}

/* Phone */
@media (max-width: 640px) {

	#sts-site-header .sts-header-inner {
		grid-template-columns: minmax(0, 1fr) 42px !important;
		padding: 10px 12px !important;
		column-gap: 8px !important;
	}

	#sts-site-header .sts-brand {
		gap: 6px 10px !important;
	}

	#sts-site-header .sts-brand img,
	#sts-site-header .sts-brand picture,
	#sts-site-header .sts-brand svg {
		max-height: 60px !important;
	}

	#sts-site-header .sts-brand-meta strong {
		font-size: 12px !important;
	}

	#sts-site-header .sts-brand-meta small {
		font-size: 10px !important;
	}

	#sts-site-header .sts-menu-toggle {
		width: 42px !important;
		height: 42px !important;
		min-width: 42px !important;
		min-height: 42px !important;
		padding: 7px !important;
	}
}

/* Very narrow phones */
@media (max-width: 430px) {

	#sts-site-header .sts-header-inner {
		padding: 9px 10px !important;
	}

	#sts-site-header .sts-brand img,
	#sts-site-header .sts-brand picture,
	#sts-site-header .sts-brand svg {
		max-height: 55px !important;
	}

	#sts-site-header .sts-brand-meta strong {
		font-size: 11px !important;
	}

	#sts-site-header .sts-brand-meta small {
		font-size: 9.5px !important;
		line-height: 1.3 !important;
	}
}