.circle-crop {
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: auto;
  filter: grayscale(100%) brightness(1.15);
  transition: filter 0.4s ease;
  transform: translateX(-100px) translateY(0px); /* negative = left, positive = right; adjust value */
}

.circle-crop:hover {
  filter: grayscale(0%) brightness(1);
}

/* Apply custom font and color to body text */
body {
  font-family: 'Dosis', sans-serif;
  color: #404040; /* Dark gray for all text */
}


html {
  scroll-behavior: smooth;
}

h2 {
  scroll-margin-top: 100px; /* adjust if a sticky header covers the heading */
}

#welcome {
  scroll-margin-top: 0;
}

#quarto-sidebar {
  width: 650px !important;
  flex: 0 0 350px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 50vh;
  text-align: right;
  font-family: "Dosis", serif;
  background-color: #efeeec;
}

#quarto-sidebar .sidebar-item:first-child {
  margin-top: -300px; /* pulls the whole block up; positive value pushes down */
}

#quarto-sidebar .sidebar-item {
  margin-bottom: 30px; /* space between items */
}

#quarto-sidebar .sidebar-item-text,
#quarto-sidebar a {
  font-family: inherit;
  color: #666362;
  font-family: "Dosis"; /* swap for whatever font you want */
  font-size: 22px;
  
}

#quarto-sidebar a[href="index.qmd#cake"] {
  font-size: 0; /* hides the text visually */
}

#quarto-sidebar a[href="index.qmd#cake"]::before {
  font-family: "bootstrap-icons" !important;
  font-weight: normal !important;
  content: "\f6ed";
  font-size: 22px; /* icon needs its own font-size since parent's is now 0 */
  color: #db615e;
}

#quarto-sidebar .sidebar-section {
  display: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

#quarto-sidebar li:hover > .sidebar-section {
  display: block;
  opacity: 1;
}

#quarto-document-content {
  margin-left: 430px !important;
  padding-left: 10px;
  padding-right: 10px;
}

.cv-location {
  font-size: 14px;
  color: #888;
  font-weight: 300;
}

.social-btn {
  padding: 3px 7px;
  background-color: transparent;
  color: #666362;
  border: none;
  border-radius: 3px;
  font-size: 14px;
}

.social-btn:hover {
  background-color: transparent;
  color: #eb6864; /* slightly darker on hover instead of a filled background, since there's no border now */
}


.carousel-item img {
  width: 100%;
  height: 500px;      /* fixed height, same for every slide */
  object-fit: contain; /* shows the whole image, no cropping */
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23db615e'%3E%3Cpath d='M11.354 8.354a.5.5 0 0 0 0-.708L5.354 1.646a.5.5 0 1 0-.708.708L10.293 8l-5.647 5.646a.5.5 0 0 0 .708.708l6-6z'/%3E%3C/svg%3E");
}

#dataviz-carousel {
  position: relative;
  padding: 0 40px; /* makes room on either side for the arrows */
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  opacity: 1; /* Bootstrap dims these by default; force full visibility */
}

.carousel-control-prev {
  left: -5px; /* pushes it outside the padded box, to the left */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23db615e'%3E%3Cpath d='M11.354 8.354a.5.5 0 0 0 0-.708L5.354 1.646a.5.5 0 1 0-.708.708L10.293 8l-5.647 5.646a.5.5 0 0 0 .708.708l6-6z'/%3E%3C/svg%3E") !important;
  width: 30px;
  height: 30px;
}

.carousel-control-prev-icon {
  transform: rotate(180deg); /* flips the arrow to point left, since it's the same SVG */
}

#more-pubs li {
  margin-bottom: 1.1em;
}

.expand-btn {
  padding: 10px 30px;
  background-color: #db615e;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.expand-btn:hover {
  background-color: #a94442;
}

.media-collage {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(4, 250px) !important;
  grid-auto-rows: 250px !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
}

.media-collage .sweet-item {
  position: relative !important;
  width: 100% !important;
  height: 250px !important;
  min-height: 250px !important;
  max-height: 250px !important;
  overflow: hidden !important;
  border-radius: 6px !important;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.media-collage .sweet-item:hover {
  opacity: 1;
}

.media-collage .sweet-item img,
.media-collage .sweet-item video {
  display: block !important;
  width: 100% !important;
  height: 250px !important;
  min-height: 250px !important;
  max-height: 250px !important;
  object-fit: cover !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 6px !important;
}

.sweet-item {
  position: relative !important;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.sweet-item:hover {
  opacity: 1;
}

.sweet-item::after {
  content: attr(data-description);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;

  background: rgba(255, 255, 255, 0.75);
  color: #444;

  font-size: 1rem;
  line-height: 1.3;
  font-weight: 400;

  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;

  pointer-events: none;
}

.sweet-item:hover::after {
  opacity: 1;
  transform: translateY(0);
}


/* =========================================================
   MOBILE — REMOVE NAVIGATION
   ========================================================= */

@media (max-width: 768px) {

  /* Hide the entire sidebar/navigation */
  #quarto-sidebar,
  #quarto-sidebar-toggle {
    display: none !important;
  }

  /* Let the content use the full screen */
  #quarto-document-content {
    margin-left: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Center profile picture */
  .circle-crop {
    transform: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Keep media collage at 3 columns */
  .media-collage {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    grid-auto-rows: 120px !important;
    gap: 5px !important;
  }

  .media-collage .sweet-item,
  .media-collage .sweet-item img,
  .media-collage .sweet-item video {
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
  }

  .carousel-item img {
    height: auto !important;
    max-height: 400px;
  }

  #dataviz-carousel {
    padding: 0 30px;
  }
}


/* Small phones */
@media (max-width: 480px) {

  #quarto-document-content {
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-top: 15px !important;
  }

  .media-collage {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: 100px !important;
    gap: 4px !important;
  }

  .media-collage .sweet-item,
  .media-collage .sweet-item img,
  .media-collage .sweet-item video {
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
  }
}