/*
 * Header "Global Footprint": countries panel attached to the control.
 * Works with WP menus (`li.mitocon-global-footprint > a`) and Bold Builder widgets
 * (`div.mitocon-global-footprint` wrapping a nested `a.bt_bb_button_link`). Detection is in mitocon-global-footprint.js.
 */

.mitocon-global-footprint {
	position: relative;
}

/* Fixed-position so the panel escapes any header `overflow:hidden` ancestor. JS sets `top`/`left`. */
.mitocon-footprint-dropdown {
	position: fixed;
	top: 0;
	left: 0;
	min-width: 220px;
	max-width: min(320px, calc(100vw - 24px));
	padding: 0.45rem;
	margin: 0;
	list-style: none;
	background: linear-gradient(180deg, #ffffff, #f7fbff);
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.08);
	z-index: 10050;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition:
		opacity 0.18s ease,
		transform 0.18s ease,
		visibility 0.18s;
	pointer-events: none;
}

.mitocon-footprint-dropdown.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.mitocon-footprint-dropdown li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mitocon-footprint-dropdown li + li {
	margin-top: 0.25rem;
}

.mitocon-footprint-dropdown__item {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0.52rem 0.7rem;
	border: 0;
	background: transparent;
	border-radius: 10px;
	text-align: left;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	color: #0f172a;
	cursor: pointer;
	transition:
		background 0.12s ease,
		color 0.12s ease,
		transform 0.12s ease;
}

.mitocon-footprint-dropdown__item-inner {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
}

.mitocon-footprint-dropdown__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 999px;
	font-size: 1rem;
	background: linear-gradient(135deg, rgba(15, 155, 151, 0.2), rgba(37, 99, 235, 0.15));
}

.mitocon-footprint-dropdown__label {
	display: inline-block;
	letter-spacing: 0.01em;
}

.mitocon-footprint-dropdown__item:hover,
.mitocon-footprint-dropdown__item:focus-visible {
	background: rgba(15, 155, 151, 0.13);
	color: #0f172a;
	transform: translateX(2px);
	outline: none;
}

.mitocon-footprint-dropdown__item:focus-visible {
	box-shadow: inset 0 0 0 2px #0f9b97;
}

/* When dropdown is open, prevent the parent green pill anchor from underlining/changing */
.mitocon-global-footprint > a[aria-expanded="true"] {
	cursor: pointer;
}

/* ── Map wrapper: establish stacking context & min-height ─────────────────── */
/*
   Bold Builder sets the map's pixel height from the tallest visible card.
   When we take over card visibility we must guarantee the wrapper is tall
   enough for the map tiles to render.
*/
.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-popup-left,
.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-popup-right,
.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-multi-show {
	position: relative;
	/* Ensure a single location card is fully visible without internal scroll */
	min-height: 640px;
	/* Contain overlay; tall cards scroll inside the column instead of overflowing into the footer */
	overflow: hidden;
	z-index: 1;
}

/* Make the map tile layer fill the whole wrapper */
.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-popup-left .bt_bb_google_maps_map,
.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-popup-right .bt_bb_google_maps_map,
.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-multi-show .bt_bb_google_maps_map {
	position: absolute !important;
	inset: 0 !important;
	height: 100% !important;
	width: 100% !important;
}

/* ── Content column: float over the map ────────────────────────────────────── */
/*
   Bold Builder renders .bt_bb_google_maps_content inside .bt_bb_google_maps.
   We pull it out of normal flow so it overlays the absolutely-positioned map.
*/
.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-popup-left .bt_bb_google_maps_content,
.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-popup-right .bt_bb_google_maps_content,
.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-multi-show .bt_bb_google_maps_content {
	position: absolute !important;
	inset: 0;
	display: flex !important;
	align-items: flex-start;
	pointer-events: none;
	padding: 1.5rem 1em 2rem;
	box-sizing: border-box;
	z-index: 2;
}

/* ── Card column width & positioning ──────────────────────────────────────── */
.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-popup-left .bt_bb_google_maps_content_wrapper,
.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-popup-right .bt_bb_google_maps_content_wrapper,
.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-multi-show .bt_bb_google_maps_content_wrapper {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	/* Default to full card visibility; multi-card mode enables internal scroll below. */
	overflow-x: hidden !important;
	overflow-y: visible !important;
	-webkit-overflow-scrolling: touch;
	width: clamp(240px, 28%, 340px);
	max-height: none;
	min-height: 0;
	pointer-events: all;
	/* remove any Bold Builder margin that shifts the column to center */
	margin: 0 !important;
}

/* Only stacked multi-location mode gets a scrollable card column. */
.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-multi-show .bt_bb_google_maps_content_wrapper {
	overflow-y: auto !important;
	max-height: calc(100% - 3.5rem);
}

/* Right side (USA — western hemisphere) */
.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-popup-right .bt_bb_google_maps_content_wrapper,
.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-multi-show.mitocon-popup-right .bt_bb_google_maps_content_wrapper {
	margin-left: auto !important;
	margin-right: 0 !important;
}

/* Left side (EU / Asia) */
.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-popup-left .bt_bb_google_maps_content_wrapper,
.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-multi-show.mitocon-popup-left .bt_bb_google_maps_content_wrapper {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* ── Individual location cards ─────────────────────────────────────────────── */
/*
   Bold Builder (Amwerk theme) uses position:absolute on all cards except the
   first (which is position:relative). The plugin CSS uses flex order + overflow
   to show one at a time. Both mechanisms conflict with our column layout.
   We reset ALL of that and manually control visibility.
*/

/* Hide all cards by default when any of our classes is active */
.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-popup-left .bt_bb_map_location,
.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-popup-right .bt_bb_map_location,
.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-multi-show .bt_bb_map_location {
	position: relative !important;
	inset: auto !important;
	flex: 0 0 auto !important;
	width: 100% !important;
	order: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
	display: none !important;
	margin-bottom: 0;
	box-sizing: border-box;
}

/* Show only the matched card(s) */
.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-popup-left .bt_bb_map_location_show,
.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-popup-right .bt_bb_map_location_show,
.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-multi-show .bt_bb_map_location_show {
	display: block !important;
	opacity: 1 !important;
	pointer-events: all !important;
	/* Wrapper owns vertical scroll; avoid 100vh-based height extending past the map (covered by footer) */
	overflow: visible;
	max-height: none;
	word-wrap: break-word;
	overflow-wrap: break-word;
	margin-bottom: 0.75em;
}

.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-popup-left .bt_bb_map_location_show:last-child,
.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-popup-right .bt_bb_map_location_show:last-child,
.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-multi-show .bt_bb_map_location_show:last-child {
	margin-bottom: 0;
}

/* Legacy badges (kept hidden after moving icon directly into heading line) */
.mitocon-footprint-loc-country,
.mitocon-footprint-loc-country-inline {
	display: none !important;
}

.mitocon-footprint-heading-title {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.mitocon-footprint-heading-flag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.45rem;
	height: 1.45rem;
	border-radius: 999px;
	font-size: 0.95em;
	background: linear-gradient(135deg, rgba(15, 155, 151, 0.2), rgba(37, 99, 235, 0.16));
	border: 1px solid rgba(15, 155, 151, 0.25);
}

.mitocon-footprint-heading-country {
	display: inline-block;
	padding: 0.18em 0.5em;
	font-size: 0.56em;
	line-height: 1.2;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: 999px;
	color: #0f172a;
	background: linear-gradient(90deg, rgba(15, 155, 151, 0.14), rgba(37, 99, 235, 0.1));
	border: 1px solid rgba(15, 155, 151, 0.2);
}

.mitocon-footprint-company-url {
	display: block;
	margin: 0.55em 0 0;
	line-height: 1.4;
	word-wrap: break-word;
	overflow-wrap: break-word;
	clear: both;
}

.mitocon-footprint-company-url:before,
.mitocon-footprint-company-url:after {
	content: none !important;
}

.mitocon-footprint-company-url a {
	display: inline-block;
	color: #0f172a;
	text-decoration: none;
	font-weight: 600;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.mitocon-footprint-company-url a:hover,
.mitocon-footprint-company-url a:focus-visible {
	color: #0f9b97;
	text-decoration: underline;
}

/* Optional banner element: add data-mitocon-footprint-title to any heading */
[data-mitocon-footprint-title] {
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* ── Small screens ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-popup-left,
	.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-popup-right,
	.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-multi-show {
		min-height: 0;
		overflow: visible;
	}

	.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-popup-left .bt_bb_google_maps_content,
	.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-popup-right .bt_bb_google_maps_content,
	.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-multi-show .bt_bb_google_maps_content {
		position: relative !important;
		inset: auto;
		padding: 0;
	}

	.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-popup-left .bt_bb_google_maps_content_wrapper,
	.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-popup-right .bt_bb_google_maps_content_wrapper,
	.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-multi-show .bt_bb_google_maps_content_wrapper {
		width: 100% !important;
		max-height: none;
		margin: 0 !important;
	}

	.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-popup-left .bt_bb_map_location_show,
	.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-popup-right .bt_bb_map_location_show,
	.bt_bb_google_maps.bt_bb_google_maps_with_content.mitocon-multi-show .bt_bb_map_location_show {
		max-height: none;
	}
}