/* css styles */

/* Remove border from navbar toggler */
.navbar-toggler {
  border-color: transparent !important;
  &:focus {
    box-shadow: none !important;
  }
}

/* Set maximum text box height for json code blocks */
.sourceCode .json {
  max-height: 500px;
  overflow-y: auto;
}


/* Responsive figure layouts */
/* Flex container for the layout row */
.quarto-layout-row {
  display: flex;
  flex-direction: row;  /* Forces horizontal layout */
  gap: 2rem;           /* Space between figures */
  width: 100%;
}

/* Individual cells containing figures */
.quarto-layout-cell {
  flex: 1;             /* Each cell takes equal space */
  min-width: 0;        /* Allows shrinking below content size */
  display: flex;
  justify-content: center;
}

/* Image styling */
.quarto-layout-cell img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Only stack on very small screens */
@media (max-width: 580px) {
  .quarto-layout-row {
      flex-direction: column;
  }
  .quarto-layout-cell {
      width: 100%;
  }
}

/* Rounded corners for images */
.figure-img {
  border-radius: 5px;
}

/* Add space to descriptions */
.description {
  margin-top: 8px !important;
}

/* Landing page recent posts listing.
   Date sits in its own column, baseline-aligned with the title, so it reads as
   metadata alongside the entry rather than as a subtitle beneath it. */
.recent-post {
  display: grid;
  grid-template-columns: 9rem 1fr;
  column-gap: 1.75rem;
  align-items: baseline;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.recent-post:last-child {
  border-bottom: none;
}

.recent-post-date {
  margin: 0;
  white-space: nowrap;
  font-size: var(--site-meta-scale) !important;
}

.recent-post-title {
  margin-bottom: 0.25rem;
  font-family: var(--site-display-font);
  font-weight: 400;
  font-size: 1.3rem;
}

.recent-post-description {
  margin-bottom: 0;
}

.recent-post a {
  color: inherit;
  text-decoration: none;
}

.recent-post a:hover .recent-post-title {
  text-decoration: underline;
}

/* Too narrow for two columns -- the date returns above the title. */
@media (max-width: 700px) {
  .recent-post {
    grid-template-columns: 1fr;
    row-gap: 0.35rem;
  }
}

/* "Show more" link under a truncated landing-page listing */
.more-link {
  display: inline-block;
  margin-top: 0.9rem;
  font-family: var(--site-meta-font);
  font-size: 0.78em;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
}

.more-link::after {
  content: " \2192";
  display: inline-block;
  transition: transform 0.18s ease;
}

.more-link:hover::after {
  transform: translateX(3px);
}

/* Ink bleed on typewriter metadata. One rule for every element set in the
   meta face; the shadow strength comes from the theme (--site-ink-bleed). */
.date,
.date-modified,
.listing-date,
.recent-post-date,
.quarto-title-meta-heading,
.quarto-title-meta-contents,
.code-with-filename-file,
#toc-title,
.more-link,
.nav-footer,
.scrapbook-label,
.glightbox-clean .gslide-description {
  text-shadow: var(--site-ink-bleed, none);
}

/* Blog listing hover underline */
.quarto-post .listing-title a:hover {
  text-decoration: underline;
}

/* Subtitles read as a standfirst under the title, on the landing page and on
   the posts that carry one. */
.quarto-title .subtitle {
  font-size: 1.1rem;
  font-style: italic;
}

/* Landing page section headings styled as headings, not links.
   Sized explicitly with a high floor: Bootstrap's responsive scale shrinks
   h2s toward the 1.3rem listing titles on narrow screens, flattening the
   hierarchy. */
.section-link {
  color: inherit !important;
  text-decoration: none !important;
  font-weight: 500;
  font-size: clamp(1.75rem, 1.45rem + 1.5vw, 2.15rem);
}

.section-link:hover {
  text-decoration: underline !important;
}

/* Add a blur effect to the background of the search overlay */
.aa-DetachedOverlay {
  background-color: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Ensure search container sits above the blur */
.aa-DetachedContainer {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(128, 128, 128, 0.3) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}