/* Fix navbar/scroll issues and offset content under fixed-top navbar */
html, body {
  height: auto !important;
  overflow-y: auto !important;
}

:root { --nav-offset: 96px; }
@media (min-width: 992px) {
  :root { --nav-offset: 108px; }
}
body { padding-top: var(--nav-offset); }
.navbar .navbar-collapse { max-height: calc(100vh - var(--nav-offset)); }


.navbar {
  min-height: 72px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  transition: all 120ms ease-in;
  background-color: #ffcc00ff !important;
}
.navbar-nav { gap: 1rem; }


@media (min-width: 992px) {
  .navbar-brand-logo {
    min-height: 56px;
    max-height: 64px;
  }
}

/* Ensure dual brand logos align nicely */
.navbar .navbar-brand .navbar-brand-logo { vertical-align: middle; }
.navbar .navbar-brand .navbar-brand-logo.me-2 { margin-right: .5rem; }

/* Ensure USC logo sits flush on the far right */
.navbar .navbar-usc { margin-left: auto; display: inline-flex; align-items: center; }
.navbar .navbar-usc img { height: 36px; width: auto; }
@media (min-width: 992px) {
  .navbar .navbar-usc img { height: 40px; }
}

.publication-content {
  display: flex;                /* Enable flexbox layout */
  align-items: flex-start;     /* Align items at the top */
  margin-bottom: 20px;         /* Space between publications */
}

/* Style for the image */
.publication-image {
  width: 200px;                /* Set a fixed width for the image */
  height: 160px;               /* Equal height for all research images */
  object-fit: cover;           /* Crop to maintain aspect ratio */
  margin-right: 20px;          /* Space between image and text */
  border-radius: 8px;          /* Optional: Add rounded corners */
}

/* Style for the text container */
.publication-text {
  flex-grow: 1;                /* Allow text to take the remaining space */
}

/* Headings and description text */
.publication-text h4 {
  margin-top: 0;               /* Remove top margin from heading */
  line-height: 1;
}

.image-container {
  float: right;
  margin-left: 15px;
  margin-bottom: 10px;
  max-width: 50%;
}

.responsive-image {
  max-width: 100%;     /* Ensure the image does not exceed the width of its container */
  height: auto;        /* Maintain the aspect ratio */
}

/* Normalize left margin/gutter across pages */
.page-content-row > [class^='col-'] {
  padding-left: calc(var(--bs-gutter-x) * .5);
}

/* Carousel sizing and centering */
.fixed-carousel-height {
  height: 480px;
}
@media (max-width: 576px) {
  .fixed-carousel-height, .carousel-image-wrapper { height: 360px; }
}
@media (min-width: 1200px) {
  .fixed-carousel-height, .carousel-image-wrapper { height: 560px; }
}
.carousel-image-wrapper {
  height: 480px;
}
.carousel-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fill the frame */
}

/* Carousel: smaller container and non-zoomed images */
.fixed-carousel-height, .carousel-image-wrapper { height: 300px !important; }
@media (max-width: 576px) { .fixed-carousel-height, .carousel-image-wrapper { height: 240px !important; } }
@media (min-width: 1200px) { .fixed-carousel-height, .carousel-image-wrapper { height: 360px !important; } }
.carousel-image-wrapper img, .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
}

/* Styles for Robots page grid */
.robot-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem; /* Slightly larger images by reducing gap */
}
.robot-item {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  background: #f6f6f6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem;
}
.robot-item img {
  width: auto;
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* markdown stuff*/
li p, 
li a, 
li code, 
li strong, 
li em {
  color: inherit;
  background-color: inherit;
}

ol, ul, li {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  margin-left: 0.7rem;         /* avoid double indent */
}

:not(li) > code,
:not(li) code.highlighter-rouge {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Robot cards */
.robot-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #fff;
  display: block;
  margin: 0 auto;
}

/* Robots page: crop images to square */
.robot-card .card-img-top {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  padding: .5rem;
}
.robot-item img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Homepage hero background support */
.site-hero {
  min-height: 320px;
  padding: 2rem 0;
  display: flex;
  align-items: center;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.site-hero .container { padding-top: 0.5rem; padding-bottom: 0.5rem; }

/* Hero area: no background, two-column layout with text on right */
.site-hero { background: none !important; }
.site-hero .row { align-items: center; }
.site-hero .hero-figure { display: block;}
.site-hero .hero-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.site-hero .hero-text h1 { margin: 0; }
.site-hero .hero-text .sub-link { font-weight: 500; }

/* Hero sub-link: underline only under text (no overflow) */
.site-hero .hero-text .sub-link {
  display: inline;
  position: relative;
  text-decoration: underline;
  text-decoration-color: var(--bs-link-color, currentColor);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.site-hero .hero-text .sub-link::after { content: none !important; }

/* Carousel overlays: light image veil, dark buttons, dark caption */
.carousel-image-wrapper { position: relative; }
/* Remove light overlay from carousel images */
.carousel-image-wrapper::before { content: none !important; background: none !important; }
/* Darken carousel controls */
.carousel-control-prev, .carousel-control-next {
  background: rgba(0, 0, 0, 0.35);
  width: 3rem; height: 3rem;
  border-radius: 50%;
  top: 50%; transform: translateY(-50%);
  opacity: 1;
}
.carousel-control-prev:hover, .carousel-control-next:hover { background: rgba(0, 0, 0, 0.5); }
.carousel-control-prev-icon, .carousel-control-next-icon { filter: invert(1); opacity: 0.9; }
/* Caption background */
.carousel-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;         /* Move caption bar to bottom of image */
  top: auto;
  width: 100%;
  margin: 0;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 0;  /* Full-width bar */
  padding: .5rem 1rem;
  text-align: center;
}

/* Carousel indicators: place below the image and center them */
.carousel {
  overflow: visible;
  padding-bottom: 2rem; /* space for indicators below */
}
.carousel-indicators {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  justify-content: center;
}

/* Subtle darkened background for the main Home section */
.section-veil {
  background: rgba(0, 0, 0, 0.05);
  padding: 0 !important;
  border-radius: 8px;
}
@media (min-width: 768px) {
  .section-veil { padding: 0 !important; }
}


/* Faster hover transitions for hyperlinks sitewide (including footer) */
a { transition: color 60ms ease-in, text-decoration-color 60ms ease-in, background-color 60ms ease-in; }
footer a, .site-footer a { transition: color 60ms ease-in, text-decoration-color 60ms ease-in, background-color 60ms ease-in; }

/* Full-bleed band with navbar color */
.full-bleed-band {
  background: #ffcc00ff;
  color: #212529;
  width: 102dvw;
  margin-left: 50%;
  transform: translateX(-50%);
  background-size: cover;        /* stretch and crop as needed */
  background-position: center;
  background-repeat: no-repeat;
  padding: 2rem 0;     

}

.contact {
  padding: 2rem;               /* small horizontal padding for mobile */
  box-sizing: border-box;
}

.join {
  padding: 2rem;               /* small horizontal padding for mobile */
  box-sizing: border-box;
}

/* Publications page: force-remove all link underlines/effects */
.publications-page a,
.publications-page a:hover,
.publications-page a:focus,
.publications-page a:active,
.publications-page h4 a {
  text-decoration: none !important;
  border-bottom: 0 !important;
  background-image: none !important;
  box-shadow: none !important;
}
.publications-page a::after,
.publications-page h4 a::after { display: none !important; content: none !important; }

/* Make PI images a bit smaller on desktop */
.pi-figure img {
  display: block;
  margin: 0 auto 1rem auto;
  max-width: 80%;
  height: auto;
  object-fit: contain;
}
@media (max-width: 576px) {
  .pi-figure img { max-width: 100%; }
}

/* People page: force person images to be square-cropped */
.people-page .card .card-img-top {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.people-page .pi-figure img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Research page: equalize image heights */
.research-thumb {
  width: 100%;
  height: 220px !important;
  display: block;
  object-fit: cover;
}

/* Join page: unify link and inline code styling */
.join-page a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  color: var(--bs-link-color, #0d6efd);
}
.join-page a:hover { text-decoration-color: currentColor; }
.join-page code, .join-page kbd {
  background: rgba(0, 0, 0, 0.06);
  border-radius: .2rem;
  padding: .125rem .25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Robots page: shrink entire robot blocks to ~60% of previous size */
.robots-page .robot-col { flex: 0 0 30%; max-width: 30%; }
@media (max-width: 575.98px) {
  .robots-page .robot-col { flex: 0 0 100%; max-width: 100%; }
}
/* Restore images to fill the smaller card width */
.robots-page .robot-card .card-img-top { width: 100%; margin: 0; padding: .5rem; }