/* Christmas Ball Ornament Styling for Maps */
/* Subtle decoration that keeps maps legible */

/* Wrapper for ornament decorations */
.map-ornament {
  position: relative;
  display: inline-block;
  padding-top: 30px; /* Space for cap and hook */
  
  /* Swing from the hanging point (top center where the hook is) */
  transform-origin: top center;
  
  /* Ensure proper flex alignment */
  align-self: flex-start;
  margin-top: 0;
}

/* Fix home-info layout to accommodate ornament padding */
#home-info {
  align-items: flex-start !important;
  margin-top: 15px !important;
}

/* Ensure home-data text is visible and properly styled */
#home-data {
  margin-top: 20px; /* Align with ornaments */
}

#home-data h1,
#home-data h2,
#home-data h3,
#home-data td,
#home-details h2 {
  color: #333 !important;
}

#address {
  color: #222 !important;
}

#home-number {
  color: #c41e3a !important; /* Christmas red */
}

/* Swinging animation for the whole ornament */
@keyframes ornament-swing {
  0%, 100% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(4deg);
  }
}

/* Apply swing to wrappers - different timing for variety */
.map-ornament:first-child {
  animation: ornament-swing 3.5s ease-in-out infinite;
}

.map-ornament:last-child {
  animation: ornament-swing 4s ease-in-out infinite;
  animation-delay: -1.5s; /* Offset so they don't swing in sync */
}

/* Override the original map rotation - the whole ornament swings now */
#map-national,
#map-local {
  animation: none !important;
}

/* Ornament cap (the gold metal top piece) */
.map-ornament::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 45px;
  height: 24px;
  background: linear-gradient(
    to bottom,
    #f4e4a6 0%,
    #c9a227 25%,
    #8b6914 50%,
    #c9a227 75%,
    #f4e4a6 100%
  );
  border-radius: 12px 12px 4px 4px;
  z-index: 10;
  box-shadow: 
    0 3px 6px rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.6),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}

/* Hanging ring/hook at top of cap */
.map-ornament::after {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 16px;
  border: 4px solid #c9a227;
  border-bottom: none;
  border-radius: 50% 50% 0 0;
  z-index: 11;
  box-shadow: 
    0 -2px 4px rgba(0, 0, 0, 0.3),
    inset 0 2px 2px rgba(255, 255, 255, 0.4);
  background: transparent;
}

/* Festive border glow - red for national, green for local */
#map-national {
  box-shadow: 
    0 0 0 4px #c9a227,
    0 0 20px rgba(220, 40, 40, 0.5),
    0 0 40px rgba(220, 40, 40, 0.3),
    0 8px 16px rgba(0, 0, 0, 0.3),
    inset 60px -60px 60px rgba(255, 255, 255, 0.06);
  border: none !important;
}

#map-local {
  box-shadow: 
    0 0 0 4px #c9a227,
    0 0 20px rgba(40, 160, 60, 0.5),
    0 0 40px rgba(40, 160, 60, 0.3),
    0 8px 16px rgba(0, 0, 0, 0.3),
    inset 60px -60px 60px rgba(255, 255, 255, 0.06);
  border: none !important;
}

/* Hover effect - gentle glow increase */
#map-national:hover {
  box-shadow: 
    0 0 0 4px #d4af37,
    0 0 30px rgba(220, 40, 40, 0.7),
    0 0 60px rgba(220, 40, 40, 0.4),
    0 10px 20px rgba(0, 0, 0, 0.4),
    inset 60px -60px 60px rgba(255, 255, 255, 0.08);
}

#map-local:hover {
  box-shadow: 
    0 0 0 4px #d4af37,
    0 0 30px rgba(40, 160, 60, 0.7),
    0 0 60px rgba(40, 160, 60, 0.4),
    0 10px 20px rgba(0, 0, 0, 0.4),
    inset 60px -60px 60px rgba(255, 255, 255, 0.08);
}

.map {
  transition: box-shadow 0.3s ease;
}