/* Accessibility: motion + forced colors */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  body {
    forced-color-adjust: none;
    background: Canvas;
    color: CanvasText;
  }
}

body {
  margin: 0;
}

/* Map and layout */
.map {
  width: 90vw;
  margin-bottom: 2rem;
  grid-area: map;
}

.member-map {
  height: 1300px;
  margin-bottom: 2rem;
}

.coord-info {
  background: white;
  padding: 6px 10px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

/* Optimized Pulse Animation */
.leaflet-interactive.pulse-route {
  stroke: #ec1c24;
  stroke-width: 6;
  stroke-opacity: 1;
  animation: pulse-glow 2s infinite ease-in-out;
  transform-box: fill-box;       /* Ensures transform respects the element's box */
  transform-origin: center center; /* Center the scaling */
  filter: drop-shadow(0 0 5px #ec1c24);
}


@keyframes pulse-glow {
  0%, 100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1);
    opacity: 0.8;
  }
}

/* Hide Leaflet attribution */
.leaflet-control-attribution.leaflet-control {
  display: none !important;
}

/* QR Styling */
.qr-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  display: inline-block;
}

.qr-wrapper svg {
  width: 100%;
  height: 100%;
  display: block;
}

.qr-overlay-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

body {
  margin: 0;
}

/* Google font usage for minimal sans-serif(s) */
.roboto-default {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

/* Adobe Caslon Pro font usage resides in application.css, licensed under the terms of the Adobe Fonts service HIT pays annually.
   The font family is used in the application.css file, and font faces and weights are defined there.
   The font-family is used with "!important" declarations to ensure it overrides other styles
   when compiled and precedence is applied.
*/

/* main grid wrapper/container */

/* the cells within the grid */
.item {
  display: grid;
  color: var(--color-hod-blue);
  width: 100%;
  justify-content: center;
  align-items: center;
}

.dogwood-header {
  display: grid;
  grid-area: header;
  justify-content: center;
  color: gold;
}

.map {
  grid-area: map;
}


.legend {
  grid-area: legend;
  display: grid;
}

.key {
  grid-area: key;
  justify-content: start;
  background-color: #ccc;
  padding-left: 1.33rem;
}

.footer {
  grid-area: footer;
  background-color: #000000;
  color: #fff;
  /* background-image: url("...") */
}

/* Clean view mode */
.no-borders * {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.polygon-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  /* height: 20px; */
  font-family: "adobe-caslon-pro", serif !important;
  font-weight: 700;
  font-style: normal;
  font-size: 1.35em;
  color: white;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.76);
  text-align: left;
}

.polygon-arrow {
  animation: fadeInScale 1s ease-out, pulse 1.5s infinite ease-in-out;
  transform-origin: center;
  transform-box: fill-box;
  fill-opacity: 0.6;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    fill-opacity: 0.6;
  }
  50% {
    transform: scale(1.1);
    fill-opacity: 1;
  }
}
.pressed {
  background-color: #c88a12; /* or use Tailwind's @apply if you're using PostCSS */
  transform: scale(0.95);
}

.active {
  border: 1px solid #00ff66; /* Replace with what is the vote-green-glow color */
  border-opacity: 1; /* Has no effect in plain CSS – handled via RGBA or alpha in border color */
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
  transform: scale(1);
  animation: pulse 2s infinite;
  background-color: #b77a2a;
  color: white;
}

.active .office-num, .active .room-num {
  color: #f9d8a0; /* hod-gold-light */
}

.active .indicator {
  background-color: #00ff66; /* vote-green-glow */
  opacity: 1;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 255, 102, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 255, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 255, 102, 0);
  }
}