/* ====== Reset and basic body styling ====== */
body {
  margin: 0;
  font-family: 'Geom', 'Poppins';
  line-height: 1.6;
  background-color: #BCB88A;
  color: #312E26;
}

/* ====== Header styling ====== */
/* Replace the existing header styling section with this: */

/* ====== Header styling ====== */
header {
  background-color: #656D4A;
  color: #1b1b1b;
  padding: .75rem 0;
  text-align: center;
  margin: 15px; /* Creates gap around header */
  border-radius: 15px; /* Rounded corners */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Optional subtle shadow */
}

header h1 {
  margin: 0;
  font-size: 2.2rem;
}

header nav {
  margin-top: 0.5rem;
}

header nav a {
  color: #1b1b1b;
  margin: 0 1rem;
  text-decoration: none;
  font-weight: bold;
}

header nav a:hover {
  text-decoration: underline;
}

header nav a:hover {
  text-decoration: underline;
}

/* ====== Main content ====== */
main {
  padding: 2rem;
  max-width: 900px;
  margin: auto;
}

section {
  margin-bottom: 3rem;
}

section h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

section p {
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

/* ====== Images ====== */
section img {
  display: block;
  margin-top: 1rem;
  border-radius: 8px;
  max-width: 100%;
  height: auto;
}

/* ====== Image Captions ====== */
.image-caption {
  font-size: 0.85rem;
  font-style: italic;
  text-align: center;
  color: #312E26;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

/* ====== About Me Flex Layout ====== */
.about-me {
  margin-bottom: 1rem;
  overflow: auto;
}

.about-me h2 {
  margin-top: 0;
  margin-bottom: 0.8rem;
}

.about-image {
  float: right;
  width: 280px;
  max-width: 35%;
  margin-left: 2rem;
  margin-bottom: 1rem;
}

.about-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* ====== Research Interests Section ====== */
.research-interests > p {
  margin-bottom: 2rem;
}

.ri-subsection-container {
  margin-bottom: 2.5rem;
  overflow: auto; /* Clearfix for floated image */
}

.ri-text h3 {
  font-size: 1.5rem;
  margin-top: 0;
  margin-bottom: 0.8rem;
}

.ri-image {
  float: right;
  width: 350px;
  max-width: 40%;
  margin-left: 2rem;
  margin-bottom: 1rem;
}

.ri-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

/* ====== Education & Outreach Section ====== */
.eo-container {
  overflow: auto; /* Clearfix for floated image */
}

.eo-text h2 {
  margin-top: 0;
}

.eo-image {
  float: right;
  width: 350px;
  max-width: 40%;
  margin-left: 2rem;
  margin-bottom: 1rem;
}

.eo-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

/* ====== Mobile Responsiveness ====== */
@media (max-width: 768px) {
  .about-image,
  .ri-image,
  .eo-image {
    float: none;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-bottom: 1.5rem;
  }
  
  .about-me,
  .research-interests
  .ri-subsection-container,
  .eo-container {
    text-align: center;
  }
  /* Add this new rule */
  .research-interests h2,
  .research-interests > p {
    clear: both;
    text-align: center;
  }
}



/* ====== Sightings Page ====== */
.wildlife-container {
  max-width: 900px;
  margin: auto;
  padding: 2rem;
}

/* Toggle buttons */
.view-buttons {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

.view-buttons button {
  padding: 0.6rem 1.2rem;
  border: none;
  background-color: #ddd;
  cursor: pointer;
  border-radius: 6px;
  font-size: 1rem;
}

.view-buttons button.active {
  background-color: #333;
  color: white;
}

/* Sighting entries (default list view) */
#sightings.list-view .sighting {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  background: white;
  padding: 1rem;
  border-radius: 10px;
}

#sightings.list-view .sighting img {
  width: 150px;
  height: auto;
  border-radius: 8px;
}

/* Grid view */
#sightings.grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
}

#sightings.grid-view .sighting {
  display: block;
  background: white;
  padding: 1rem;
  text-align: center;
  border-radius: 10px;
}

#sightings.grid-view .sighting img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 0.8rem;
}

/* ====== Sightings Info with Icons ====== */
.sighting-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Each row (icon + text) */
.info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
}

/* Make long species/location/date names fit nicely */
.sighting-info .info-text {
  font-size: 1.1rem;
  white-space: nowrap;        /* keep it on one line */
  overflow: hidden;           /* hide overflow if too long */
  text-overflow: ellipsis;    /* add ... at the end if it doesn’t fit */
}

/* Shared icon base styling */
.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: cover;
}

/* SVG icons (inline images as background) */
.species-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23333' d='M226.5 92.9c14.3 42.9-.3 86.2-32.6 96.8s-70.1-15.6-84.4-58.5-1.1-86.2 31.2-96.8 71.5 15.6 85.8 58.5zM100.4 198.6c18.9 32.4 14.3 70.1-10.2 84.1s-59.7-.9-78.5-33.3-14.3-70.1 10.2-84.1 59.7.9 78.5 33.3zM69.2 401.2C121.6 259.9 214.7 224 256 224s134.4 35.9 186.8 177.2c3.6 9.7 5.2 20.1 5.2 30.5v1.6c0 25.8-20.9 46.7-46.7 46.7c-11.5 0-22.9-1.4-34-4.2l-88-22c-15.3-3.8-31.3-3.8-46.6 0l-88 22c-11.1 2.8-22.5 4.2-34 4.2C84.9 480 64 459.1 64 433.3v-1.6c0-10.4 1.6-20.8 5.2-30.5zM421.8 282.7c-24.5-14-29.1-51.7-10.2-84.1s54-47.3 78.5-33.3 29.1 51.7 10.2 84.1-54 47.3-78.5 33.3zM310.1 189.7c-32.3-10.6-46.9-53.9-32.6-96.8s52.1-69.1 84.4-58.5 46.9 53.9 32.6 96.8-52.1 69.1-84.4 58.5z'/%3E%3C/svg%3E");
}

.location-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23333' d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/></svg>");
}

.date-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23333' d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v15c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 17H5V8h14v12z'/><path fill='%23333' d='M11 10h2v5h-2z'/></svg>");
}

.sighting-expanded {
  display: none; /* hidden initially */
  margin-top: 1rem;
  padding: 1rem;
  background-color: #f0f0f0;
  border-radius: 10px;
}

.sighting-expanded img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

/* Modal styling */
.modal {
  display: none; /* hidden by default */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.7); /* dark transparent background */
}

.modal-content {
  background-color: #fff;
  margin: 5% auto;
  padding: 1.5rem;
  border-radius: 10px;
  max-width: 600px;
  text-align: center;
  position: relative;
}

.modal-content img {
  max-width: 100%;
  height: auto;
  transition: transform 0.3s ease;
  cursor: zoom-in;
}

.modal-content img.zoomed {
  transform: scale(1.5);
  cursor: zoom-out;
}

/* Close button */
.close {
  position: absolute;
  top: 10px;
  right: 15px;
  color: #333;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
}

.sightings-intro {
  max-width: 800px;
  margin: -2rem auto 1rem auto; /* top, left/right auto, bottom */
  padding: 1rem 1.5rem;
  text-align: center;
  background: #BCB88A;
  border-radius: 8px;
}


.sightings-intro h2 {
  margin-bottom: 0.5rem;
  font-size: 1.8rem;
}

.sightings-intro p {
  font-size: 1.1rem;
  color: #312E26;
}

.site-footer {
    display: flex;              /* use flex layout */
    justify-content: center;    /* center horizontally */
    align-items: center;        /* center vertically */
    padding: 2rem 0;
}

.footer-icons {
    display: flex;              /* this makes the children line up side by side */
    gap: 2rem;                  /* spacing between icons */
}

.footer-icons a img,
.footer-icons a svg {
    width: 50px;   /* bigger icons */
    height: 50px;
    display: block;
}

/* Add this to your existing style.css file */

/* Map container styling */
#map-container {
  width: 100%;
  margin-top: 2rem;
}

#map {
  width: 100%;
  height: 600px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Make sure the map tiles load properly */
.leaflet-container {
  font-family: 'Geom', 'Poppins', sans-serif;
}

/* Style the popup content */
.leaflet-popup-content {
  font-family: 'Geom', 'Poppins', sans-serif;
  text-align: center;
}

.leaflet-popup-content b {
  color: #656D4A;
  font-size: 1.1rem;
}

/* Responsive map height */
@media (max-width: 768px) {
  #map {
    height: 400px;
  }
}

/* ====== Pixel Bird Decoration ====== */
.pixel-bird {
  position: fixed;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  z-index: 100;
  pointer-events: none;
}

/* Left side birds - facing right */
.bird-left-1 {
  left: -4px;
  top: 200px;
  width: 50px;
  height: auto;
  transform: scaleX(-1);
}

.bird-left-2 {
  left: -4px;
  top: 400px;  /* 350px gap from left-1 */
  width: 50px;
  height: auto;
  transform: scaleX(-1);
}

.bird-left-3 {
  left: -4px;
  top: 600px;  /* 215px gap from right-1 */
  width: 50px;
  height: auto;
  transform: scaleX(-1);
}

/* Right side birds - facing left */
.bird-right-1 {
  right: -4px;
  top: 200px;
  width: 50px;
  height: auto;
}

.bird-right-2 {
  right: -4px;
  top: 600px;  /* 215px gap from right-1 */
  width: 50px;
  height: auto;
}

.bird-right-3 {
  right: -4px;
  top: 400px;  /* 215px gap from right-1 */
  width: 50px;
  height: auto;
}

/* Hide on mobile */
@media (max-width: 978px) {
  .pixel-bird {
    display: none;
  }
}