/* Site-wide CSS overrides. Keep each rule small, with a comment saying what it fixes. */

/* Title-block banners (title-block-banner in a page's front matter): taller, title
   centred vertically, text shadow for legibility over photos, responsive title size,
   semi-bold subtitle and description so they stay legible over the image.
   Adjust min-height to taste. */
.quarto-title-banner {
  min-height: 20rem;
  align-content: center;
}
.quarto-title-banner .title,
.quarto-title-banner .subtitle,
.quarto-title-banner .description {
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 0 1px 2px rgba(0, 0, 0, 0.9);
}
.quarto-title-banner .title {
  font-size: calc(1.6rem + 1.5vw);
}
.quarto-title-banner .subtitle,
.quarto-title-banner .description {
  font-weight: 600;
}

/* Banners on mostly light images: pair with title-block-banner-color: "#212529"
   and body-classes: banner-light in the page's front matter. Swaps the dark text
   shadow for a white glow so dark text stays legible over busy texture. */
body.banner-light .quarto-title-banner .title,
body.banner-light .quarto-title-banner .subtitle,
body.banner-light .quarto-title-banner .description {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 3px rgba(255, 255, 255, 1);
}

/* About (jolla template): jolla centres <main> in a flex column, so it sizes to
   its content and wide content can push the page wider than a phone screen. */
div.quarto-about-jolla main {
  width: 100%;
}

/* Project pages: show the cover image above the description. The title-block
   description is hidden; each page repeats it below the image with
   {{< meta description >}}, so it is still written once, in the front matter. */
body.project-page .quarto-title-block .description {
  display: none;
}

/* Projects page: with no category selected, show the showcase cards. Selecting a
   category marks it .active; the showcase block (heading and cards) then gives way
   to cards for every project, which Quarto's filter has narrowed to that category. */
.category-cards-block {
  display: none;
}
body:has(.quarto-listing-category .category.active) .showcase-block {
  display: none;
}
body:has(.quarto-listing-category .category.active) .category-cards-block {
  display: block;
}

/* 404 page: it is served at any URL depth (e.g. /projects/typo), but Quarto writes the
   banner image path relative to the page, which breaks below the root. styles.css is
   always linked from the root, so the path below resolves to /assets/404.jpg everywhere.
   (Keep CSS image references out of comments: Quarto scans for them and tries to copy them.) */
body.page-404 .quarto-title-block .quarto-title-banner {
  background-image: url("assets/404.jpg");
}