/* ===== World Clock Styles ===== */

/* The hero on this page is wider than the typical centered tool, so override
   the default 15vh padding-top to leave room for the fixed header but stretch
   the inner blocks edge to edge. */
.hero {
  padding-top: 96px;
  padding-bottom: 60px;
  align-items: center;
  width: 100%;
}

/* ===== Layout width =====
   Header has fixed icon buttons at 35px-from-edge (hamburger left,
   theme/lang right). The map and cards both honor a shared max width that
   leaves ~50px of clear space on each side so those buttons never visually
   overlap the map when the user scrolls. */
:root {
  --wc-width: min(calc(100vw - 200px), 1400px);
}

/* ===== Map ===== */
.wc-map-wrap {
  position: relative;
  width: var(--wc-width);
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  background: #0e1b2c;
}

.wc-map {
  width: 100%;
  aspect-ratio: 2 / 1;
  display: block;
  user-select: none;
  -webkit-user-select: none;
}

.wc-map svg {
  display: block;
  width: 100%;
  height: 100%;
}

.wc-map .wc-country {
  fill: #90c5f9;
  stroke: none;
  transition: fill 0.3s;
}

/* Default ocean gradient (dark theme): deep navy at the top, midnight in
   the middle, near-black at the bottom. Stop colors are CSS-driven (set via
   class on the SVG <stop> nodes) so each theme can re-tint the ocean to
   match its accent - see the per-theme overrides at the bottom of the file.
   Default uses an interpolated middle so the gradient stays linear. */
.wc-map .wc-ocean-stop-top    { stop-color: #1e3a5f; }
.wc-map .wc-ocean-stop-middle { stop-color: #172c48; }
.wc-map .wc-ocean-stop-bottom { stop-color: #0f1e30; }

/* Light theme - bright sky-blue ocean and pale icy-blue land. The map reads
   as a clean daylit globe (rather than the contained dark-navy panel that
   default/dark uses), so it sits comfortably on the light page bg. */
[data-theme="light"] .wc-map .wc-ocean-stop-top    { stop-color: #76a8d7; }
[data-theme="light"] .wc-map .wc-ocean-stop-middle { stop-color: #2c68b8; }
[data-theme="light"] .wc-map .wc-ocean-stop-bottom { stop-color: #4e88c0; }
[data-theme="light"] .wc-map .wc-country           { fill: #cfe1f3; }
[data-theme="light"] .wc-map-wrap                  { background: #2c68b8; }

/* Single deduplicated border layer: each unique edge across all country
   polygons renders exactly once, so adjacent countries don't draw overlapping
   strokes on top of each other. Includes coastlines too - keeping all edges
   guarantees the line stays continuous even where adjacent polygons have
   slightly mismatched vertices. */
.wc-map .wc-border {
  fill: none;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

/* Ocean uses a subtle vertical gradient defined in JS via <linearGradient>;
   the rect that fills the map background reads from #wc-ocean-gradient. */

/* Night terminator: 35% black tint over the night side. */
.wc-map .wc-night {
  fill: rgba(0, 0, 0, 0.32);
  pointer-events: none;
}

/* Pin styles ===== */
.wc-pin {
  pointer-events: all;
}

.wc-pin-dot {
  fill: #ff5b3e;
  stroke: #ffffff;
  stroke-width: 1;
  transition: r 0.18s ease, opacity 0.18s ease;
}

.wc-pin-halo {
  fill: #ff5b3e;
  opacity: 0;
  transition: opacity 0.2s ease, r 0.2s ease;
}

.wc-pin.hover .wc-pin-halo,
.wc-pin.active .wc-pin-halo {
  opacity: 0.35;
}

.wc-pin.hover .wc-pin-dot,
.wc-pin.active .wc-pin-dot {
  r: 3.6;
}

/* Tooltip ===== */
.wc-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(20, 20, 20, 0.95);
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  transform: translate(-50%, calc(-100% - 12px));
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  line-height: 1.35;
}

.wc-tooltip.visible {
  opacity: 1;
}

.wc-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: rgba(20, 20, 20, 0.95);
}

/* Flip below the pin when the default position would clip the top edge of
   the map's rounded mask. JS toggles `.below` whenever it detects clipping. */
.wc-tooltip.below {
  transform: translate(-50%, 12px);
}

.wc-tooltip.below::after {
  bottom: auto;
  top: -4px;
}

.wc-tooltip-name {
  font-weight: 600;
}

.wc-tooltip-meta {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 2px;
}

/* ===== Search box ===== */
.wc-search {
  position: relative;
  z-index: 4;
}

.wc-search-desktop {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 236px;
}

.wc-search-mobile {
  display: none;
  width: 100%;
  max-width: 480px;
  margin: 16px auto 0;
  padding: 0 20px;
}

.wc-search-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.wc-search-input {
  flex: 1;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  color: #111;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  outline: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: box-shadow 0.2s, background-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
}

.wc-search-input::placeholder {
  color: #888;
}

.wc-search-input:focus {
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 2px rgba(255, 255, 255, 0.45);
}

/* Visual style mirrors the alarm-clock sound dropdown:
   #2a2a2a flat surface with subtle row dividers, swapped to a translucent
   light bg in light mode, and a blurred dark overlay on color themes. */
.wc-search-results {
  margin-top: 4px;
  background-color: #2a2a2a;
  color: #ffffff;
  border-radius: 4px;
  overflow-y: auto;
  max-height: 220px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  padding: 4px 0;
  display: none;
}

[data-theme="light"] .wc-search-results {
  background-color: #f0f0f0;
  color: #000000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="red"] .wc-search-results,
[data-theme="teal"] .wc-search-results,
[data-theme="blue"] .wc-search-results,
[data-theme="purple"] .wc-search-results,
[data-theme="green"] .wc-search-results,
[data-theme="slate"] .wc-search-results {
  background-color: rgba(0, 0, 0, 0.22);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.wc-search-results.visible {
  display: block;
}

.wc-search-result {
  display: flex;
  width: 100%;
  padding: 6px 13px;
  color: #ffffff;
  font-size: 12px;
  background: none;
  border: none;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
  text-align: left;
  cursor: pointer;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  transition: background-color 0.1s;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.wc-search-result:last-child {
  border-bottom: none;
}

[data-theme="light"] .wc-search-result {
  color: #000000;
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-theme="red"] .wc-search-result,
[data-theme="teal"] .wc-search-result,
[data-theme="blue"] .wc-search-result,
[data-theme="purple"] .wc-search-result,
[data-theme="green"] .wc-search-result,
[data-theme="slate"] .wc-search-result {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.wc-search-result.active,
.wc-search-result:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .wc-search-result.active,
[data-theme="light"] .wc-search-result:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.wc-search-result-name {
  font-weight: 500;
}

.wc-search-result-country {
  font-size: 11px;
  opacity: 0.6;
}

.wc-search-result-empty {
  padding: 10px 13px;
  font-size: 12px;
  opacity: 0.7;
  text-align: center;
}

.wc-search-results::-webkit-scrollbar { width: 4px; }
.wc-search-results::-webkit-scrollbar-track { background: transparent; }
.wc-search-results::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

[data-theme="light"] .wc-search-results::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
}

/* ===== Cards ===== */
.wc-cards-wrap {
  width: var(--wc-width);
  margin: 28px auto 0;
  padding: 0;
}

.wc-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  width: 100%;
}

/* The card grid drops to 4 / 3 / 2 / 1 columns as viewport tightens. */
@media (max-width: 1280px) {
  .wc-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1024px) {
  .wc-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 820px) {
  .wc-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.wc-card {
  position: relative;
  border-radius: 14px;
  /* Extra top padding leaves room for the top-left X corner so it never
     overlaps the city name on hover. */
  padding: 38px 24px 20px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* Plain default cursor - drag-and-drop is still available, but the card
     itself isn't a button so we don't need the pointer/grab affordance. */
  cursor: default;
  transition: background-color 0.4s ease, color 0.4s ease,
              opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  min-height: 120px;
}

/* Day card: light surface, dark text. Night card: dark surface, light text. */
.wc-card.day {
  background: #f3f3f3;
  color: #111;
}

.wc-card.night {
  background: #111111;
  color: #ffffff;
}

/* Light theme cards pick up a blue tint from the map's ocean palette so the
   row of cards under the bright sky-blue map doesn't look like a stark
   black/white grid stamped on top. Day = very pale icy blue; night = deep
   navy that echoes the ocean middle stop. */
[data-theme="light"] .wc-card.day {
  background: #eef3fa;
  border: 1px solid #d8e3ef;
}

[data-theme="light"] .wc-card.night {
  background: #1d3a5c;
}

/* Color themes: stark white/black cards clash with the accent-colored hero,
   so swap to translucent white-glass (day) and translucent black (night).
   Both keep white text - same as the rest of the hero on color themes -
   while still preserving the day-vs-night visual contrast. */
[data-theme="red"] .wc-card.day,
[data-theme="teal"] .wc-card.day,
[data-theme="blue"] .wc-card.day,
[data-theme="purple"] .wc-card.day,
[data-theme="green"] .wc-card.day,
[data-theme="slate"] .wc-card.day {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

[data-theme="red"] .wc-card.night,
[data-theme="teal"] .wc-card.night,
[data-theme="blue"] .wc-card.night,
[data-theme="purple"] .wc-card.night,
[data-theme="green"] .wc-card.night,
[data-theme="slate"] .wc-card.night {
  background: rgba(0, 0, 0, 0.32);
  color: #ffffff;
}


/* Selected (clicked) card: subtle glow so the user knows the map pin
   is locked to it. */
.wc-card.selected {
  outline: 2px solid rgba(255, 91, 62, 0.6);
  outline-offset: -2px;
}

.wc-card-name {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2px;
  opacity: 0.85;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wc-card-time {
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -1.2px;
  line-height: 1;
  margin-top: 12px;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 6px;
  pointer-events: none;
}

.wc-card-ampm {
  font-size: 16px;
  font-weight: 500;
  opacity: 0.75;
  letter-spacing: 0.5px;
}

.wc-card-date {
  font-size: 14px;
  margin-top: 14px;
  opacity: 0.75;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* Remove button - top-left corner. The card has extra top padding so the
   X never overlaps the city name. Hidden until hover on desktop, always
   visible on mobile. Day and night variants pair a high-contrast circle
   with a white glyph so the button reads clearly on either surface. */
.wc-card-remove {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease, background-color 0.15s ease, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  z-index: 2;
  /* Default (night card / dark surface): light circle, white glyph. */
  background: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

.wc-card-remove:hover {
  background: rgba(255, 255, 255, 0.5);
}

.wc-card-remove svg {
  width: 12px;
  height: 12px;
}

/* Day card: dark filled circle with white glyph stands out cleanly on the
   light surface (the previous low-opacity dark-on-light glyph blended in). */
.wc-card.day .wc-card-remove {
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
}

.wc-card.day .wc-card-remove:hover {
  background: rgba(0, 0, 0, 0.75);
}

.wc-card:hover .wc-card-remove {
  opacity: 1;
}

.wc-card-remove:active {
  transform: scale(0.92);
}

/* Drag-reorder visuals - translucent "glass" lift, but tone-specific so a
   night card stays dark and a day card stays light while dragging. The
   backdrop blur softens whatever the card is hovering over, giving a clear
   above-the-page feel without changing the card's day/night identity. */
.wc-card.dragging {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  transform: scale(1.03) rotate(1deg);
  z-index: 1000;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Default (dark) theme: opaque day/night surfaces become translucent. */
.wc-card.day.dragging {
  background-color: rgba(243, 243, 243, 0.7);
}

.wc-card.night.dragging {
  background-color: rgba(17, 17, 17, 0.7);
}

[data-theme="light"] .wc-card.day.dragging {
  background-color: rgba(238, 243, 250, 0.75);
}

[data-theme="light"] .wc-card.night.dragging {
  background-color: rgba(29, 58, 92, 0.75);
}

/* Color themes already paint day/night with translucent surfaces, so the
   shadow + backdrop-blur from .dragging are enough - no bg override needed.
   The existing rgba day/night rules continue to apply. */

/* Hide the X while dragging - it would steal the visual focus from the card. */
.wc-card.dragging .wc-card-remove {
  opacity: 0 !important;
}

.wc-drag-placeholder {
  border-radius: 14px;
  background: transparent;
}

.wc-card.removing {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.96);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .hero {
    padding-top: 80px;
    padding-bottom: 40px;
  }

  .wc-map-wrap {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
  }

  /* On mobile the map is read-only - drop the cursor pointer, hide the
     desktop-anchored search box, and let the mobile-search row take over. */
  .wc-map {
    pointer-events: none;
  }

  .wc-search-desktop {
    display: none;
  }

  .wc-search-mobile {
    display: block;
  }

  .wc-cards-wrap {
    /* Override the desktop --wc-width (which subtracts 200px for header
       buttons) - on mobile the buttons sit above the hero, so cards can
       use the full width minus a small horizontal gutter. */
    width: 100%;
    padding: 0 16px;
    margin-top: 18px;
  }

  .wc-cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Mobile card: grid layout - name + date on the left column, time on the right. */
  .wc-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name time"
      "date time";
    align-items: center;
    column-gap: 16px;
    row-gap: 4px;
    padding: 14px 18px 14px 44px;
    min-height: 0;
    border-radius: 12px;
    cursor: default;
  }

  .wc-card-name {
    grid-area: name;
    font-size: 14px;
    margin-top: 0;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .wc-card-date {
    grid-area: date;
    font-size: 12px;
    margin-top: 0;
    opacity: 0.7;
  }

  .wc-card-time {
    grid-area: time;
    font-size: 28px;
    margin-top: 0;
    letter-spacing: -0.5px;
    flex-shrink: 0;
  }

  .wc-card-ampm {
    font-size: 12px;
  }

  .wc-card-remove {
    opacity: 1;
    width: 22px;
    height: 22px;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
  }

  .wc-card-remove:active {
    transform: translateY(-50%) scale(0.92);
  }

  /* Disable drag visuals on mobile (we don't enable it there, but defensive). */
  .wc-card.dragging,
  .wc-card.drop-target {
    transform: none;
    opacity: 1;
  }

  .wc-tooltip {
    font-size: 11px;
    padding: 5px 8px;
  }
}

/* ===== Color theme support =====
   The hero on a colored theme paints the page in the accent color, so a
   stark navy ocean (the default) clashes against the warmer/cooler accent.
   Each colored theme retints the map to harmonize with its accent: a darker
   shade of the accent for the ocean (top → bottom gradient), a lighter
   complementary shade for the land, and a matching solid fallback bg on the
   map wrapper (used during the brief moment before the SVG paints).
   Cards still use day/night colors (light vs dark) to communicate
   time-of-day - that's the whole point of the tool - so those rules above
   are unchanged. */

/* Red - warm burgundy ocean, peach land. */
[data-theme="red"] .wc-map .wc-ocean-stop-top    { stop-color: #6b2a2a; }
[data-theme="red"] .wc-map .wc-ocean-stop-middle { stop-color: #52201f; }
[data-theme="red"] .wc-map .wc-ocean-stop-bottom { stop-color: #3a1414; }
[data-theme="red"] .wc-map .wc-country           { fill: #f4cabc; }
[data-theme="red"] .wc-map-wrap                  { background: #3a1414; }

/* Teal - deep teal ocean, pale cyan land. */
[data-theme="teal"] .wc-map .wc-ocean-stop-top    { stop-color: #1a4448; }
[data-theme="teal"] .wc-map .wc-ocean-stop-middle { stop-color: #143437; }
[data-theme="teal"] .wc-map .wc-ocean-stop-bottom { stop-color: #0d2426; }
[data-theme="teal"] .wc-map .wc-country           { fill: #b8dcde; }
[data-theme="teal"] .wc-map-wrap                  { background: #0d2426; }

/* Blue - close to default but pulled toward the page accent. */
[data-theme="blue"] .wc-map .wc-ocean-stop-top    { stop-color: #1f4060; }
[data-theme="blue"] .wc-map .wc-ocean-stop-middle { stop-color: #17314b; }
[data-theme="blue"] .wc-map .wc-ocean-stop-bottom { stop-color: #102236; }
[data-theme="blue"] .wc-map .wc-country           { fill: #b6d4ec; }
[data-theme="blue"] .wc-map-wrap                  { background: #102236; }

/* Purple - deep aubergine ocean, lavender land. */
[data-theme="purple"] .wc-map .wc-ocean-stop-top    { stop-color: #3f2d52; }
[data-theme="purple"] .wc-map .wc-ocean-stop-middle { stop-color: #2f2141; }
[data-theme="purple"] .wc-map .wc-ocean-stop-bottom { stop-color: #1f1530; }
[data-theme="purple"] .wc-map .wc-country           { fill: #d6c4e6; }
[data-theme="purple"] .wc-map-wrap                  { background: #1f1530; }

/* Green - forest ocean, sage land. */
[data-theme="green"] .wc-map .wc-ocean-stop-top    { stop-color: #2a4830; }
[data-theme="green"] .wc-map .wc-ocean-stop-middle { stop-color: #1f3625; }
[data-theme="green"] .wc-map .wc-ocean-stop-bottom { stop-color: #14241a; }
[data-theme="green"] .wc-map .wc-country           { fill: #c5e0c8; }
[data-theme="green"] .wc-map-wrap                  { background: #14241a; }

/* Slate - deep slate ocean, light slate-gray land. */
[data-theme="slate"] .wc-map .wc-ocean-stop-top    { stop-color: #2d404a; }
[data-theme="slate"] .wc-map .wc-ocean-stop-middle { stop-color: #21303a; }
[data-theme="slate"] .wc-map .wc-ocean-stop-bottom { stop-color: #15202a; }
[data-theme="slate"] .wc-map .wc-country           { fill: #c2d2da; }
[data-theme="slate"] .wc-map-wrap                  { background: #15202a; }

[data-theme="red"] .wc-map-wrap,
[data-theme="teal"] .wc-map-wrap,
[data-theme="blue"] .wc-map-wrap,
[data-theme="purple"] .wc-map-wrap,
[data-theme="green"] .wc-map-wrap,
[data-theme="slate"] .wc-map-wrap {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}