/*
 * Quark 2 — user customizations
 *
 * This file is safe to edit. It is loaded last so anything here overrides
 * theme.css without having to mark rules !important.
 */

/* SimpleSearch: keep the submit button on the same row, to the right of the input.
 * Pico makes raw <button> elements `width: 100%`; the plugin also locks the
 * input at 80%. Together they wrap. Higher-specificity selectors beat the
 * plugin stylesheet (which loads after this file). */
.search-wrapper form {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  margin-bottom: 0;
}

.search-wrapper form .search-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin-bottom: 0;
}

.search-wrapper form .search-submit {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 0.9rem;
}

.search-wrapper form .search-submit img {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
}

/* Pagination plugin paints `border: 1px solid #eee` on every <li>. Quark2
 * already styles the inner link/span, so the extra box around disabled
 * prev/next (and the other items) has to go. */
ul.pagination > li {
  border: 0;
}

/* Custom logo: readable in the 72px header; invert on dark chrome. */
.navbar-brand img {
  height: 52px;
  width: auto;
  max-width: 160px;
}

:root[data-theme='dark'] .navbar-brand img,
body.header-dark:not(.scrolled) #header .navbar-brand img {
  filter: invert(1);
}

/* Logo centered in the home hero */
.hero-logo {
  display: flex;
  justify-content: center;
  padding: 2rem 0;
}

.hero-logo a {
  display: inline-flex;
  line-height: 0;
}

.hero-logo img,
.hero-logo svg {
  height: clamp(4.5rem, 16vw, 10rem);
  width: auto;
  max-width: min(70vw, 280px);
}

.hero.hero-large .hero-logo img,
.hero.hero-large .hero-logo svg {
  height: 250px;
}

.hero.hero-small .hero-logo img,
.hero.hero-small .hero-logo svg {
  height: 4.5rem;
  max-width: min(50vw, 180px);
}

.hero.hero-tiny .hero-logo img,
.hero.hero-tiny .hero-logo svg {
  height: 3rem;
  max-width: min(40vw, 140px);
}

.hero.text-light .hero-logo img,
.hero[style*="background-image"] .hero-logo img {
  filter: invert(1);
}