/*
 * Shared structural presentation for strain indexes and detail pages.
 * Themes can override the --strain-index-* color properties on .strain-index.
 *
 * SPDX-License-Identifier: GPL-2.0-or-later
 */
:where(.strain-index nav[aria-label="Strain index letters"]) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm, 0.5rem);
  margin-block: var(--space-md, 1rem);
}

:where(.strain-index nav[aria-label="Strain index letters"]) a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--strain-index-ink, var(--link, #1a73e8));
  border-radius: 0.25rem;
  background: var(--strain-index-background, var(--page-bg, #fff));
  color: var(--strain-index-ink, var(--link, #1a73e8));
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

:where(.strain-index nav[aria-label="Strain index letters"]) a:hover {
  border-color: var(--strain-index-hover, var(--link-hover, #1558b0));
  background: var(--strain-index-hover, var(--link-hover, #1558b0));
  color: var(--strain-index-hover-ink, #fff);
}

:where(.strain-index nav[aria-label="Strain index letters"]) a[aria-current="page"] {
  border-color: var(--strain-index-current, var(--link, #1a73e8));
  background: var(--strain-index-current, var(--link, #1a73e8));
  color: var(--strain-index-current-ink, #fff);
}

:where(.strain-index nav[aria-label="Strain index letters"]) a:focus-visible,
:where(.strain-index-filter) :is(input, button):focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

:where(.strain-index-filter) {
  max-width: 42rem;
  margin-block: var(--space-md, 1rem);
}

:where(.strain-index-filter label) {
  display: block;
  margin-block-end: 0.4rem;
  font-weight: 600;
}

:where(.strain-index-filter-controls) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
}

:where(.strain-index-filter) input[type="search"] {
  flex: 1 1 16rem;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border, #ccc);
  border-radius: 0.25rem;
  font: inherit;
}

:where(.strain-index-filter) button {
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--strain-index-ink, var(--link, #1a73e8));
  border-radius: 0.25rem;
  background: var(--strain-index-background, var(--page-bg, #fff));
  color: var(--strain-index-ink, var(--link, #1a73e8));
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

:where(.strain-index-filter) button:hover {
  background: var(--strain-index-hover, var(--link-hover, #1558b0));
  color: var(--strain-index-hover-ink, #fff);
}

:where(.strain-index-filter [hidden], .strain-index-filter-results[hidden]) {
  display: none !important;
}

:where(.strain-index-filter-hint,
       .strain-index-filter-status,
       .strain-index-filter-noscript) {
  margin-block: 0.5rem;
}

:where(.strain-index-filter-status:empty) {
  display: none;
}

:where(.strain-index-filter-results) {
  margin-block: var(--space-md, 1rem);
}

:where(.strain-index .strain-links) {
  columns: 3 14rem;
  column-gap: 2rem;
}

:where(.strain-index .strain-links li) {
  break-inside: avoid;
}

:where(.strain-index-filter-group) {
  margin-block: 1rem;
}

:where(.strain-index-filter-group h2) {
  margin-block: 0 0.5rem;
}

:where(.strain-article > .strain-featured-image) {
  float: left;
  max-width: min(40%, 22rem);
  margin: 0 var(--space-lg, 1.5rem) var(--space-md, 1rem) 0;
}

:where(.strain-featured-image > .featured-image) {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
}

:where(.strain-article > .strain-attributes, .strain-article > .author-box) {
  clear: both;
}

:where(.strain-attributes caption) {
  background: var(--strain-db-caption-background, var(--surface, #f2f2f2));
  padding-block: 0.5rem;
  font-weight: 600;
}

@media (max-width: 700px) {
  :where(.strain-article > .strain-featured-image) {
    float: none;
    max-width: 100%;
    margin: 0 auto var(--space-md, 1rem);
  }
}