/* ==========================================================================
   Server Locations Showcase
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section
   -------------------------------------------------------------------------- */
.server-locations {
	text-align: center;
}

.server-locations__heading {
	font-family: var(--boltpress-typography-font-heading);
	font-size: var(--boltpress-typography-size-3xl);
	font-weight: var(--boltpress-typography-weight-bold);
	line-height: var(--boltpress-typography-leading-tight);
	margin: 0 0 var(--boltpress-spacing-2xl) 0;
}

.server-locations__gradient {
	background: linear-gradient(135deg, var(--boltpress-colors-accent), var(--boltpress-colors-accent-gradient-end));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* --------------------------------------------------------------------------
   Flag Cards
   -------------------------------------------------------------------------- */
.server-locations__flags {
	display: flex;
	justify-content: center;
	gap: var(--boltpress-spacing-xl);
	margin-bottom: var(--boltpress-spacing-2xl);
}

.server-locations__flag-card {
	cursor: pointer;
	text-align: center;
	padding: var(--boltpress-spacing-base) var(--boltpress-spacing-xl);
	border-radius: var(--boltpress-border-radius-lg);
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.03);
	transition: border-color var(--boltpress-transitions-base),
	            background var(--boltpress-transitions-base),
	            transform var(--boltpress-transitions-base);
}

.server-locations__flag-card:hover {
	border-color: rgba(255, 220, 0, 0.25);
	background: rgba(255, 220, 0, 0.04);
	transform: translateY(-2px);
}

.server-locations__flag-card.is-active {
	border-color: rgba(255, 220, 0, 0.35);
	background: rgba(255, 220, 0, 0.06);
}

.server-locations__flag-img {
	width: 64px;
	height: 44px;
	object-fit: cover;
	border-radius: var(--boltpress-border-radius-sm);
	margin: 0 auto var(--boltpress-spacing-sm);
}

.server-locations__flag-label {
	font-family: var(--boltpress-typography-font-heading);
	font-size: var(--boltpress-typography-size-md);
	font-weight: var(--boltpress-typography-weight-semibold);
	color: var(--boltpress-colors-dark-text-muted);
}

/* --------------------------------------------------------------------------
   Dot Matrix Map
   -------------------------------------------------------------------------- */
.server-locations__map-wrap {
	max-width: 800px;
	margin: 0 auto var(--boltpress-spacing-sm);
	position: relative;
}

.server-locations__map {
	width: 100%;
	height: auto;
	display: block;
}

/* Map dot default */
.server-locations__map .map-dot {
	fill: rgba(255, 255, 255, 0.15);
	transition: fill var(--boltpress-transitions-base);
}

/* Server marker elements */
.server-locations__map .marker-glow {
	opacity: 0.5;
	transition: opacity var(--boltpress-transitions-base);
}

.server-locations__map .marker-ring {
	opacity: 0;
	transform-origin: center;
	transition: opacity var(--boltpress-transitions-base);
}

.server-locations__map .marker-dot {
	transition: r var(--boltpress-transitions-base);
}

.server-locations__map .marker-label {
	opacity: 0;
	transition: opacity var(--boltpress-transitions-base);
	font-family: var(--boltpress-typography-font-body);
}

/* Highlighted state — applied via JS */
.server-locations__map .marker-group.is-highlighted .marker-glow {
	opacity: 1;
}

.server-locations__map .marker-group.is-highlighted .marker-ring {
	opacity: 1;
	animation: server-pulse 2s ease-in-out infinite;
}

.server-locations__map .marker-group.is-highlighted .marker-label {
	opacity: 1;
}

/* Dimmed state — the OTHER marker when one is highlighted */
.server-locations__map .marker-group.is-dimmed .marker-glow {
	opacity: 0.15;
}

.server-locations__map .marker-group.is-dimmed .marker-dot {
	fill: rgba(255, 220, 0, 0.4);
}

/* When a location is highlighted, brighten nearby dots */
.server-locations__map.highlight-us .map-dot-na {
	fill: rgba(255, 220, 0, 0.35);
}

.server-locations__map.highlight-eu .map-dot-eu {
	fill: rgba(255, 220, 0, 0.35);
}

@keyframes server-pulse {
	0%   { r: 8;  opacity: 0.6; }
	50%  { r: 14; opacity: 0; }
	100% { r: 8;  opacity: 0.6; }
}

/* --------------------------------------------------------------------------
   Bottom Text
   -------------------------------------------------------------------------- */
.server-locations__footer-text {
	font-size: var(--boltpress-typography-size-sm);
	color: var(--boltpress-colors-dark-text-subtle);
	letter-spacing: 0.5px;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Dark Variant (default)
   -------------------------------------------------------------------------- */
.section--server-dark,
.section--server-light {
	padding: var(--boltpress-spacing-2xl) 0 var(--boltpress-spacing-xl);
}

.section--server-dark {
	background-color: var(--boltpress-colors-dark-bg);
}

.section--server-dark .server-locations__heading {
	color: #fff;
}

/* --------------------------------------------------------------------------
   Light Variant
   -------------------------------------------------------------------------- */
.section--server-light {
	background-color: var(--boltpress-colors-background);
}

.section--server-light .server-locations__heading {
	color: var(--boltpress-colors-primary);
}

.section--server-light .server-locations__flag-card {
	border-color: rgba(0, 31, 63, 0.1);
	background: rgba(0, 31, 63, 0.02);
}

.section--server-light .server-locations__flag-card:hover {
	border-color: rgba(255, 220, 0, 0.4);
	background: rgba(255, 220, 0, 0.06);
}

.section--server-light .server-locations__flag-card.is-active {
	border-color: rgba(255, 220, 0, 0.5);
	background: rgba(255, 220, 0, 0.08);
}

.section--server-light .server-locations__flag-label {
	color: var(--boltpress-colors-text-muted);
}

.section--server-light .map-dot {
	fill: rgba(0, 31, 63, 0.12) !important;
}

.section--server-light .marker-label {
	fill: var(--boltpress-colors-text-muted) !important;
}

.section--server-light .server-locations__footer-text {
	color: var(--boltpress-colors-text-muted);
}

.section--server-light .server-locations__map.highlight-us .map-dot-na {
	fill: rgba(255, 220, 0, 0.5) !important;
}

.section--server-light .server-locations__map.highlight-eu .map-dot-eu {
	fill: rgba(255, 220, 0, 0.5) !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.server-locations__heading {
		font-size: var(--boltpress-typography-size-2xl);
	}

	.server-locations__flags {
		gap: var(--boltpress-spacing-base);
	}

	.server-locations__flag-card {
		padding: var(--boltpress-spacing-sm) var(--boltpress-spacing-base);
	}

	.server-locations__flag-img {
		width: 48px;
		height: 33px;
	}

	.server-locations__flag-label {
		font-size: var(--boltpress-typography-size-sm);
	}

	/* On mobile, always show both markers */
	.server-locations__map .marker-group .marker-glow {
		opacity: 0.8;
	}

	.server-locations__map .marker-group .marker-label {
		opacity: 1;
	}

	.server-locations__map .marker-group .marker-ring {
		opacity: 1;
		animation: server-pulse 2s ease-in-out infinite;
	}
}