/*
 * App styles layered on top of Bulma. Loaded last — see the explicit
 * stylesheet_link_tag ordering in layouts/application.html.erb.
 */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main.section {
  flex: 1 0 auto;
}

/* --- Map ------------------------------------------------------------------ */

.map-canvas {
  height: min(72vh, 720px);
  width: 100%;
  border-radius: 6px;
  /* No tile layer, so the map has no imagery of its own to sit on. */
  background: #eef3f8;
}

.map-canvas .leaflet-container {
  background: #eef3f8;
}

.map-shell {
  position: relative;
}

.map-overlay {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 500;
  max-width: 20rem;
}

.map-legend {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  z-index: 500;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 4px;
  padding: 0.6rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1.5;
}

.map-legend .swatch {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  margin-right: 0.4rem;
  vertical-align: -1px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

/* --- Photos --------------------------------------------------------------- */

.photo-card figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px 4px 0 0;
}

.photo-card.is-best {
  outline: 2px solid var(--bulma-primary, #00d1b2);
  outline-offset: 2px;
}

.photo-detail img {
  max-height: 78vh;
  width: auto;
  margin: 0 auto;
  display: block;
}

/* --- Voting --------------------------------------------------------------- */

.vote-widget form {
  display: inline;
}

.vote-widget .button {
  border-radius: 0;
}

.vote-widget .control:first-child .button {
  border-radius: 4px 0 0 4px;
}

.vote-widget .control:last-child .button {
  border-radius: 0 4px 4px 0;
}

.rank-score {
  font-variant-numeric: tabular-nums;
}