/* WP_WorldMap — frontend styles.
 * Every visual token is a CSS variable (--wm-*) so the admin "Appearance" tab
 * can drive it. Defaults below are only fallbacks; the real values are emitted
 * as a :root inline block by class-mtworldmap-frontend.php from saved options.
 * All selectors are scoped under .mtwm-wrap and prefixed .mtwm-* so the plugin
 * never collides with the active theme's styles.
 */

.mtwm-wrap {
  --wm-page-bg: #000000;
  --wm-font: 'Rajdhani', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --wm-map-overlay: rgba(0, 0, 0, 0.35);
  --wm-map-offset-x: 0px;
  --wm-name-color: #9fbcda;
  --wm-time-color: #c8dae8;
  --wm-time-glow: rgba(90, 154, 200, 0.3);
  --wm-headline-color: #d3e2f2;
  --wm-date-color: #7f9bbb;
  --wm-leader-color: rgba(90, 122, 154, 0.5);
  --wm-anchor-color: #ffffff;
  --wm-pill-text: #7fa8d8;
  --wm-pill-border: #4a6a8a;
  --wm-pill-hover-text: #c8dae8;
  --wm-pill-active-bg: #7fa8d8;
  --wm-pill-active-text: #0a0a0a;
  --wm-map-image: none;

  box-sizing: border-box;
  width: 100%;
  background: var(--wm-page-bg);
  color: #e8e8e8;
  font-family: var(--wm-font);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mtwm-wrap *, .mtwm-wrap *::before, .mtwm-wrap *::after { box-sizing: border-box; }

/* Full width when injected into a constrained (block-theme) content column.
   The .alignfull class (added on the wrapper) opts out of the theme's layout;
   max-width:none defeats its content-size cap so the map fills the content width. */
.mtwm-home {
  width: 100%;
  max-width: none !important;
  overflow: hidden;
}

/* Subtle text toggle below the map (no pill / no border) so it blends with the
   host page. Colours are the --wm-pill-* tokens, repurposed as plain text. */
.mtwm-toggle {
  display: block;
  margin: 10px auto 4px;
  background: none;
  border: none;
  padding: 4px 8px;
  font-family: var(--wm-font);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--wm-pill-text);
  opacity: 0.55;
  cursor: pointer;
  transition: color 0.2s, opacity 0.2s;
}
.mtwm-toggle:hover { color: var(--wm-pill-hover-text); opacity: 1; }
.mtwm-toggle.active { color: var(--wm-pill-hover-text); opacity: 1; }

/* Headlines: hidden until NEWS mode is on, then they replace the time. */
.mtwm-headline {
  display: none;
  font-family: var(--wm-font);
  font-weight: 500;
  max-width: 160px;
  margin: 0 auto 3px;
  line-height: 1.22;
  color: var(--wm-headline-color);
  text-shadow: 0 0 3px #000, 0 0 6px #000, 0 1px 2px rgba(0, 0, 0, 0.95);
}
/* Post-backed (clickable) headlines get a discoverable affordance. */
a.mtwm-headline { text-decoration: none; cursor: pointer; }
a.mtwm-headline:hover { filter: brightness(1.25); text-decoration: underline; }

.mtwm-wrap.news-mode .mtwm-time { display: none; }
.mtwm-wrap.news-mode .mtwm-headline { display: block; }

/* Locked aspect-ratio box: scales with the window but never distorts, so label
 * positions stay glued to their geographic spots. */
.mtwm-map {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 3800 / 2217;
  background: var(--wm-map-image) 0 0 / 100% 100% no-repeat var(--wm-page-bg);
  overflow: visible;
  container-type: size;
  transform: translateX(var(--wm-map-offset-x));
}
.mtwm-map::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--wm-map-overlay);
  pointer-events: none;
  z-index: 0;
}

.mtwm-country {
  position: absolute;
  text-align: center;
  width: max-content;
  transform: translate(-50%, -50%);
  transition: filter 0.3s, z-index 0s;
  cursor: grab;
  user-select: none;
  z-index: 1;
}
.mtwm-country:hover { filter: brightness(1.4); z-index: 500; }
.mtwm-country.dragging { cursor: grabbing; z-index: 999; transition: none; }

.mtwm-time {
  font-family: var(--wm-font);
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--wm-time-color);
  text-shadow: 0 0 12px var(--wm-time-glow);
  animation: mtwm-glow 4s ease-in-out infinite;
}

.mtwm-country-name {
  font-family: var(--wm-font);
  font-weight: 500;
  letter-spacing: 3px;
  color: var(--wm-name-color);
  margin-top: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 3px #000, 0 0 6px #000, 0 1px 2px rgba(0, 0, 0, 0.95);
}

.mtwm-date-line {
  color: var(--wm-date-color);
  margin-top: 1px;
  letter-spacing: 1px;
  text-shadow: 0 0 3px #000, 0 0 6px #000, 0 1px 2px rgba(0, 0, 0, 0.95);
}

@keyframes mtwm-glow {
  0%, 100% { text-shadow: 0 0 3px #000, 0 0 8px var(--wm-time-glow); }
  50%      { text-shadow: 0 0 3px #000, 0 0 20px var(--wm-time-glow); }
}

.mtwm-blink { animation: mtwm-blink 1s steps(1, start) infinite; }
@keyframes mtwm-blink { 50% { opacity: 0; } }

.mtwm-leaders {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.mtwm-leaders line {
  stroke: var(--wm-leader-color);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.mtwm-anchor-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--wm-anchor-color);
  box-shadow: 0 0 6px var(--wm-anchor-color);
  z-index: 0;
  pointer-events: none;
}

.mtwm-lights {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* --- Mobile: scale the map labels down and drop the desktop horizontal nudge,
   so the whole map fits a narrow screen with nothing spilling off (no scrollbar).
   Font sizes override the inline max(..cqw) the JS sets, so they stay small on a
   tiny map instead of hitting the desktop pixel floors. --- */
@media (max-width: 700px) {
  .mtwm-wrap { --wm-map-offset-x: 0px !important; }
  .mtwm-time { font-size: 9px !important; letter-spacing: 1px; }
  .mtwm-country-name { font-size: 7px !important; letter-spacing: 1.2px; }
  .mtwm-date-line { font-size: 6px !important; letter-spacing: 0.5px; }
  .mtwm-headline { font-size: 8px !important; max-width: 32cqw !important; line-height: 1.16; margin-bottom: 2px; }
  .mtwm-toggle { font-size: 0.6rem; letter-spacing: 2px; margin-top: 6px; }
}

@media (max-width: 430px) {
  .mtwm-time { font-size: 7.5px !important; }
  .mtwm-country-name { font-size: 6px !important; letter-spacing: 0.8px; }
  .mtwm-date-line { font-size: 5.5px !important; }
  .mtwm-headline { font-size: 6.5px !important; max-width: 34cqw !important; }
}