/* styles.css - Challenge #3 (Skeleton: Park Map - Positioning) */


/* 0) Base page (font, background, text color, remove default margins) */
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: aliceblue;
  margin: auto;
}

/* 1) Container (center, max-width, padding) */
.container {
  padding: 10px 20px;
  max-width: 920px;
}

/* 2) Map section heading (spacing, readability) */


/* 3) Map wrapper
   - Make this the positioning context for absolute children (hint: relative).
   - Ensure it doesn't overflow horizontally.
*/
.map-wrapper{
  position: relative;
}

/* 4) Map image
   - Keep it responsive inside the container (full width of wrapper, auto height).
*/
.park-map {
  border: 1px solid rgba(224, 224, 224, 0.9);
  border-radius: 10px;
  width: 100%;

}

/* 5) Markers
   - Style as small circular buttons (size, color, border-radius).
   - Absolutely position them using top/left percentages so they sit over the map.
   - Center each marker over its coordinates (hint: translate).
   - Ensure markers appear ABOVE the map (z-index).
*/
.marker {
  position: absolute;

  width: 2px;
  height: 12px;
  border-radius: 100px;
  border: 2px solid white;
  background-color: hotpink;
}

#marker-atlantis{
  top: 29%;
  left: 22%;
}
#marker-gyro{
  top: 17%;
  left: 77%;
}
#marker-carousel{
  top: 62%;
  left: 29%;
}
#marker-river{
  top: 69%;
  left: 69%;
}

/* 6) Tooltips
   - Hidden by default; visible on hover of the marker.
   - Small label box above the marker (position absolute relative to marker).
   - Add a subtle background, border, and rounded corners.
   - Raise above map and marker with z-index.
*/
.tooltip{
  display: none;
}

/* .tooltip:hover{

} */

.marker:hover .tooltip {
  display: flex;
  justify-content: center;
  text-align: center;
  width: 120px;
  padding: 20px 40px;
  color: white;
  background-color: black;
  opacity: 80%;
  border: none;
  border-radius: 12px;

}


/* 7) Legend box
   - Position absolute INSIDE the map wrapper, bottom-right corner.
   - Add background, padding, small rounded corners.
   - Keep text legible and compact.
  
*/
.legend h3{

  line-height: 1px;
}

.legend {
  position: absolute;
  right: 3%;
  bottom: 3%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: white;
  border-radius: 8px;
  padding: 9px 10px;
  padding-right: 10px;
  width: 100px;
  height: 80px;

  border: 2px solid rgb(239, 237, 237);

  z-index: 1000;

}

.legend ul li::marker{
  color: lightskyblue;
}


/* 8) Fixed Back to Top button
   - Position fixed at bottom-right of viewport.
   - Visible at all times.
   - Style as a small pill button.
   - Keep above everything with z-index.
   
*/
.back-to-top {
  display: inline-block;
  padding: 10px;
  background-color: rgb(50, 19, 151);
  color: white;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bolder;
  opacity: 80%;
  position: fixed;
  bottom: 20px;   
  right: 20px;    
  z-index: 1000;  
}


.back-to-top:hover {
  display: inline-block;
  translate: 0 -2px;
  opacity: 100%;
}
/* 9) Footer (muted, centered) */
footer {
  margin-top: 30px;
  text-align: center;
  opacity: 50%;
  border-top: 1px solid grey;
}

/* 10) Getting Here & Around section styling  */
.transport-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.transport-columns div {
  line-height: 26px;
  margin: 14px;
  height: 550px;
  background-color: white;
  padding: 10px;
  border-radius: 8px;
  border: 2px solid rgb(234, 233, 233);
}