/* ─── Pagefind search modal ─────────────────────────────────── */
/*
  Restyles the Pagefind <pagefind-modal-trigger>/<pagefind-modal> web
  components (trigger icon, modal footer) to match the site's design
  system. Trigger and modal markup live in nav.njk / partials/pagefind-modal.njk.

  Pagefind's .pf-trigger-btn uses triple :is(*, #\#) specificity tricks,
  so !important is needed to strip the default bordered-box appearance.
*/
pagefind-modal-trigger {
  display: flex;
  align-items: center;
}

pagefind-modal-trigger .pf-trigger-btn {
  background: none !important;
  border: none !important;
  padding: 0 4px !important;
  height: auto !important;
  width: auto !important;
  transition: none !important;
}

pagefind-modal-trigger .pf-trigger-icon {
  background: var(--color-text-muted) !important;
  width: 18px !important;
  height: 18px !important;
  transition: background 0.15s ease !important;
}

pagefind-modal-trigger .pf-trigger-btn:hover .pf-trigger-icon,
pagefind-modal-trigger .pf-trigger-btn:focus-visible .pf-trigger-icon {
  background: var(--color-text) !important;
}

/* Search modal footer — wrap both hints and button so we own the flex layout.
   Pagefind's shadow DOM controls the footer's internal slot layout, so we
   can't override it from outside; this wrapper gives us full control. */
.search-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  width: 100%;
  padding-block-end: var(--space-s);
}

.search-see-all[hidden] {
  display: none;
}

.search-see-all {
  display: inline-block;
  padding: var(--space-xs) var(--space-m);
  border: 1px solid var(--color-accent);
  border-radius: 8px;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.search-see-all:hover,
.search-see-all:focus-visible {
  background: var(--color-accent);
  color: var(--color-text-on-accent-fill);
  border-color: var(--color-accent);
}