:root {
  --site-header-height: 72px;
  --site-admin-offset: 0px;
  --hover-surface: #d5e9ee;
  --hover-border: #5895a6;
  --hover-ink: #104f63;
}
:root:has(body.admin-bar) { --site-admin-offset: 32px; }
/* Preserve the viewport as the scrolling ancestor for the sticky header. */
body { overflow-x: clip; }
.site-header { position: sticky; top: var(--site-admin-offset); z-index: 100; box-shadow: 0 3px 12px rgb(10 39 49 / 12%); }
html { scroll-padding-top: calc(var(--site-header-height) + var(--site-admin-offset) + 16px); }
@media (max-width: 782px) { :root:has(body.admin-bar) { --site-admin-offset: 46px; } }
/* WordPress's mobile admin bar scrolls with the document at this breakpoint. */
@media (max-width: 600px) { :root:has(body.admin-bar) { --site-admin-offset: 0px; } }
@media (max-width: 700px) {
  .site-header .site-nav { max-height: min(450px, calc(100dvh - var(--site-header-height) - var(--site-admin-offset) - 24px)); }
}

/* A distinct teal fill and outline for interactive surfaces in the light theme. */
:root:not([data-theme="dark"]) :is(
  .hero-focus, .feature-card-wide, .collection-card.card, .catalog-review-card,
  .blog-card, .theme-search-item, .review-card, .review-page .usage-card.is-linked,
  a.seo-link-card, a.seo-featured, .seo-pair-card[href], .editorial-source,
  .editorial-post-nav__card
):is(:hover, :focus-within) {
  background: var(--hover-surface);
  border-color: var(--hover-border);
}
:root:not([data-theme="dark"]) :is(
  .category-directory__heading, .category-directory__review,
  .sidebar-categories a, a.seo-chip, .hero-section .btn-tag,
  .catalog-review-card .tag, .collection-card .card-item, .theme-pagination a,
  .article-share .share-button, .seo-filters .filter-reset,
  .review-page .btn-outline, .review-page .btn-secondary
):is(:hover, :focus-visible) {
  background: var(--hover-surface);
  border-color: var(--hover-border);
  color: var(--hover-ink);
}
:root:not([data-theme="dark"]) .category-directory__heading:is(:hover, :focus-visible) .category-directory__count { color: var(--hover-ink); }
:root:not([data-theme="dark"]) .category-directory__review:is(:hover, :focus-visible) .category-directory__arrow { color: var(--hover-ink); }