/* https://imfing.github.io/hextra/docs/advanced/customization/#custom-css */

/* Center the navbar and add spacing between menu items */

/* HV: Asked chatbot for this */

/* Alignment of navigation bar elements =============== */
.nav-container nav {
  display: flex !important;
  gap: 1.2rem !important;
  padding-left: 5rem;
  padding-right: 5rem;
  font-size: 1.5rem;
} */

.nav-container nav a {
  font-size: 1rem !important;
}


/* Overlay text on image ========================== */

.overlay-static {
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  z-index: 2;
}

.overlay-more-text {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  color: #fff;
  font-size: 1.2rem;
  opacity: 0;
  max-height: 0;
  transition: opacity 0.3s, max-height 0.3s;
  z-index: 2;
  overflow: hidden;
}


.fullwidth-image-overlay {
  position: relative;
  width: 600px;      /* Set your desired width */
  height: 250px;     /* Set your desired height */
  max-width: 100%;
  cursor: pointer;
  overflow: hidden;
}

.fullwidth-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Crop the image to fit the container */
  display: block;
}

.overlay {
  position: absolute;
  top: 1rem; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0);
  transition: background 0.3s;
}

.overlay-static {
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  z-index: 2;
}

.overlay-more-text {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  color: #fff;
  font-size: 1.2rem;
  opacity: 0;
  max-height: 0;
  transition: opacity 0.3s, max-height 0.3s;
  z-index: 2;
  overflow: hidden;
}

.fullwidth-image-overlay:hover .overlay {
  background: rgba(0,0,0,0.7);
}

.fullwidth-image-overlay:hover .overlay-more-text {
  opacity: 1;
  max-height: 200px;
}

/* Map format ========================== */
.map-fullwidth {
  width: 100vw;      /* or 100% */
  max-width: 100%;
  margin-left: calc(0vw);
}

.map-fullwidth iframe {
  width: 100%;
  height: 300px;     /* or 60vh, or any value you prefer */
}

.paper-image {
  width: 100%;
  max-width: 400px; /* Adjust the max-width for better visibility */
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}


/* Person format ====================== */

/* assets/css/main.css */

/* Grid container for the people list */
.people-grid {
  display: grid;
  /* Creates 2 columns on medium screens and up, 1 on small screens */
  grid-template-columns: repeat(auto-fit, 350px);
  justify-content: center;
  gap: 1.5rem; /* Space between cards */
  padding: 0;
  margin: 2rem 0;
}

/* 2. Media query to switch to a 3-column flexible grid on larger screens */
@media (min-width: 1100px) {
  .people-grid {
    /* On wide screens, we go back to 3 equal, flexible columns */
    grid-template-columns: repeat(3, 1fr);
  }
}


/* Individual person card styling */
.person-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5rem;
  background-color: #f9f9f9;
  transition: box-shadow 0.3s ease;
}

.person-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Clickable profile image link */
.person-image-link {
  display: block;
  margin-bottom: -0.3rem !important;
}

/* Profile image styling */
/* Find this block in your CSS */
.person-image {
  border-radius: 8px; /* CHANGED FROM 50% - This creates rounded corners */
  object-fit: cover;
  border: 0px solid #fff;
  /* box-shadow: 0 2px 6px rgba(0,0,0,0.15); */
  margin-top: 0.3rem !important;
  margin-bottom: -0.3rem !important;
}

.person-details {
  flex-grow: 1;
}

.person-name {
  margin: 0.5rem 0 0.25rem;
  font-size: 1.25rem;
  color: #333 !important;
  margin-bottom: -0.3rem !important;
}

.person-position {
  margin: 0 0 1rem;
  font-style: italic;
  color: #555;
  margin-bottom: -1rem !important;
}

.person-interests-title {
    font-weight: bold;
    margin-bottom: -0.3rem !important;
    color: #444;
}

.person-interests-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
  color: #666;
}

.person-interests-list li {
  margin-bottom: -0.3rem !important;
}

/* Add this new rule for the card link */
.person-card-link {
  text-decoration: none; /* Removes the underline */
  color: inherit; /* Makes text inside the link use the parent's color */
}


/* remove horizontal lines generated by Markdown parsers ====================== */
h2 {
  border-bottom: none;
}

/* Styling for the borderless table ====================== */
/* This targets the table itself for basic setup */
.borderless-table {
  width: 80%;
  border-collapse: collapse;
  margin: 0 auto;
  display: table;
}

/* This targets every row (tr) and cell (td) inside our table */
.borderless-table tbody tr,
.borderless-table td {
  /* This removes the alternating row colors */
  background-color: transparent !important;

  /* This forcefully removes any borders (including horizontal lines) */
  border: none !important;

  /* This removes any shadow effects that might look like lines */
  box-shadow: none !important;

  /* Basic alignment and spacing */
  padding: 8px 0;
  text-align: left;
  
}

/* Hiding "Read More" and datetime in blog mode ====================== */
a.hx-underline.hx-underline-offset-2.hx-decoration-from-font {
  display: none !important;
}

/* Hiding datetime in blog mode ====================== */
.hx-opacity-50.hx-text-sm.hx-mt-4.hx-leading-7 {
  display: none !important;
}

/* Hiding "Text" in blog mode ====================== */
p.hx-opacity-80.hx-mt-4.hx-leading-7 {
  display: none !important;
}

/* Hiding the auto-generated title above "Read more →" in blog mode ====================== */
.hx-font-semibold.hx-mt-8.hx-text-2xl {
  display: none !important;
}

/* Hiding the auto-generated "People > Profile1" in blog mode ====================== */
div.hx-flex.hx-items-center.hx-text-sm {
  display: none !important;
}

/* Reduce the space between the header (e.g., ## Address) and the text below it ====================== */
.content h2 {
  margin-bottom: -0.5em; /* Reduce as needed */
}
.content h3 {
  margin-bottom: -0.7em; /* Reduce as needed */
}