/*
 * BeddyByes Locations — front end.
 *
 * The band itself (paper background, padding, pill size, logo sizing) is styled
 * by the theme via .bb-country / .bb-select / .bb-partner-logos. Only what is
 * specific to the switcher lives here.
 */

.bbl-locations > * + * {
	margin-block-start: 26px;
}

/* Switcher ------------------------------------------------------------ */

.bbl-switch {
	display: flex;
	justify-content: center;
}

.bbl-switch__details {
	width: 100%;
	position: relative;
}

.bbl-switch__summary {
	cursor: pointer;
	list-style: none;
	width: 100%;
}

.bbl-switch__summary::-webkit-details-marker {
	display: none;
}

.bbl-switch__details[open] .bbl-switch__summary::after {
	transform: translateY(-50%) rotate(180deg);
}

.bbl-switch__summary::after {
	transition: transform .2s ease;
}

.bbl-switch__menu {
	position: absolute;
	z-index: 20;
	inset-inline: 0;
	top: calc(100% + 8px);
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--wp--preset--color--white, #fff);
	border-radius: 16px;
	box-shadow: var(--wp--preset--shadow--lift, 0 14px 28px rgba(67, 47, 0, .28));
	text-align: start;
}

.bbl-switch__menu li {
	list-style: none;
	margin: 0;
}

.bbl-switch__menu a {
	display: block;
	padding: 12px 18px;
	border-radius: 12px;
	color: var(--wp--preset--color--midnight, #344693);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	text-decoration: none;
}

.bbl-switch__menu a[aria-current] {
	background: var(--wp--preset--color--cloud, #e3e0e4);
}

.bbl-switch.is-static .wp-block-button__link {
	cursor: default;
}

.bbl-switch.is-static .wp-block-button__link::after {
	display: none;
}

/* Panels: one per country, the browser reveals the visitor's ------------- */

.bbl-panel[hidden] {
	display: none !important;
}

.bbl-unavailable {
	max-width: 36em;
	margin-inline: auto;
	font-size: var(--wp--preset--font-size--medium);
}

/* While the visitor's country is being looked up the band keeps its height,
   so nothing jumps when the logos arrive. */
.bbl-locations.is-locating::after {
	content: "";
	display: block;
	min-height: 116px;
}

/* Logos --------------------------------------------------------------- */

.bbl-locations .bbl-logos {
	grid-template-columns: repeat(var(--bbl-cols, 3), minmax(0, 1fr));
}

/* A pair sits together in the middle of the band instead of one logo centred in
   each half: the left logo hugs the right edge of its column and the right logo
   the left edge of its own, so the gap between them is just the column gap.
   The artwork is pushed the same way inside its box, since a narrow logo would
   otherwise float in the middle of it. (Side-by-side layouts only.) */
@media (min-width: 782px) {
	.bbl-locations .bbl-logos--count-2 {
		column-gap: 72px;
	}

	.bbl-locations .bbl-logos--count-2 > :first-child {
		justify-self: end;
	}

	.bbl-locations .bbl-logos--count-2 > :last-child {
		justify-self: start;
	}

	.bbl-locations .bbl-logos--count-2 > :first-child img {
		object-position: right center;
	}

	.bbl-locations .bbl-logos--count-2 > :last-child img {
		object-position: left center;
	}
}

.bbl-logos__text {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	color: currentColor;
}

.bbl-empty {
	padding: 16px;
	border: 1px dashed currentColor;
	border-radius: 12px;
	text-align: center;
}

@media (hover: hover) and (pointer: fine) {
	.bbl-switch__menu a:hover {
		background: var(--wp--preset--color--cloud, #e3e0e4);
	}
}

@media (max-width: 781px) {
	.bbl-locations .bbl-logos {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bbl-switch__summary::after {
		transition: none;
	}
}