/* css styles */


/* Heading styles */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
}

/* Adjust header sizes */
h1 {
  font-size: 1.5rem !important;
}
h2 {
  font-size: 1.35rem !important;
}
h3 {
  font-size: 1.25rem !important;
}
h4 {
  font-size: 0.9rem !important;
}
h5 {
  font-size: 0.75rem !important;
}
h6 {
  font-size: 0.5rem !important;
}

.quarto-grid-item .listing-title {
  font-size: 1.15rem !important;  /* bigger and more visible */
  font-weight: bold;             /* if you want it bolder */
}



/* Navbar background */
.navbar {
  background-color: #2c3e50 !important;
}

/* Link color and hover */
a {
  color: #1e90ff;           
}

a:hover {
  color: #ff8c00;           
}

/* icon size for navbar */
.navbar .navbar-brand img {
  max-height: 75px !important; /* Force a larger height */
  height: 75px !important;
  width: auto;
}

/* Center the map and control its size */
.centered-map-container iframe,
.centered-map-container .leaflet-container {
  max-width: 90%; /* Reduce map width slightly */
  height: 400px; /* Slightly smaller map height */
  margin: 0 auto;
}

/* Increase spacing below the map */
.centered-map-container {
  margin-bottom: 3rem; /* More vertical space below map */
}

/* Center the listing container and control width */
.quarto-listing-container-default {
  margin: 0 auto;
  max-width: 900px; /* Slightly larger than 800px if you want wider cards */
  text-align: center; /* Center the container */
}

/* Center the listing cards themselves */
.quarto-grid-item {
  display: inline-block;
  margin: 1rem;
}

/* Make all cluster markers green */
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  background-color: #28a745 !important;  /* green background */
  color: white !important;               /* white text for numbers */
  border: 2px solid #28a745 !important;  /* green border */
}

/* Custom styling for each pet name */
.pet-royce {
  color: purple;
  font-weight: bold;
}
.pet-phantom {
  color: goldenrod;  /* rich gold tone */
  font-weight: bold;
}
.pet-phoebe {
  color: hotpink;  /* vibrant pink */
  font-weight: bold;
}

/* Style for personal name */
.my-name {
  font-weight: bold;
  color: #0a3d62;  /* Dark blue (same as your site's primary color) */
}