/* Structure shared by every theme. A theme (themes/<name>/theme.css) does all
   the looks; this file only resets, hides what a theme hasn't asked for, and
   lays out the photo viewer. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, p, dl, dd { margin: 0; }
ol, ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 2000; }
.skip-link:focus { left: 16px; }

/* Opt-in parts: a theme shows these when it wants them. */
.hero, .toc, .species-hero { display: none; }

.sort button[aria-pressed="true"] { font-weight: 600; }
.species-list[data-sort]:not([data-sort="group"]) .group-title { display: none; }
.species-link, .photo-link { text-decoration: none; }

/* The photo viewer (built by site.js). Themes can recolour it with
   --viewer-bg / --viewer-fg. */
.viewer {
  position: fixed; inset: 0; z-index: 1500; display: grid;
  grid-template-rows: 1fr auto; align-items: center; justify-items: center;
  background: var(--viewer-bg, rgba(8, 9, 10, .96)); color: var(--viewer-fg, #eee);
  padding: 56px 64px 16px; touch-action: pan-y;
}
.viewer-img {
  max-width: 100%; max-height: calc(100vh - 128px); width: auto; height: auto; object-fit: contain;
  user-select: none;
}
.viewer-caption { padding: 12px 0 0; font-size: 14px; text-align: center; opacity: .85; min-height: 2.6em; }
.viewer-caption > * + *::before { content: " · "; }
.viewer button {
  position: absolute; background: none; border: 0; color: inherit; cursor: pointer;
  font-size: 32px; line-height: 1; padding: 12px; opacity: .75;
}
.viewer button:hover, .viewer button:focus-visible { opacity: 1; }
.viewer-close { top: 8px; right: 12px; }
.viewer-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.viewer-next { right: 8px; top: 50%; transform: translateY(-50%); }
.viewer-count { position: absolute; top: 18px; left: 20px; font-size: 13px; opacity: .7; }
html.viewer-open { overflow: hidden; }
@media (max-width: 640px) {
  .viewer { padding: 48px 8px 12px; }
  .viewer-prev, .viewer-next { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
.species-list .group.is-empty { display: none; }