/* Brand theming for Pagefind's Component UI (pagefind-modal-trigger,
   pagefind-modal). Pagefind exposes its look exclusively through these
   custom properties — its own rules use boosted specificity, so selector
   overrides won't win; only these variables will. Values map to the same
   brand palette defined in each page's tailwind.config (clay/earth/ink/
   cream/stone). */
:root {
  --pf-background: #FAF7F2;
  --pf-text: #0D0D0D;
  --pf-text-muted: rgba(13, 13, 13, 0.55);
  --pf-text-secondary: #733A19;
  --pf-border: #DAD8D6;
  --pf-border-focus: #E85610;
  --pf-hover: rgba(218, 216, 214, 0.35);
  --pf-mark: #E85610;
  --pf-outline-focus: #E85610;
  --pf-modal-backdrop: rgba(13, 13, 13, 0.6);
  --pf-border-radius: 10px;
  --pf-font: 'coolvetica', sans-serif;
}

/* The trigger sits on the footer's dark --earth background, so it needs
   its own pass rather than the cream defaults above (those are tuned for
   the modal, which floats over the page on a light surface). Re-declaring
   these custom properties on the wrapper — rather than overriding
   Pagefind's own selectors, which use boosted specificity and would win
   regardless — lets the trigger's existing rules (background: var(--pf-
   background), the icon's mask-image fill, etc.) resolve to these
   footer-scoped values through normal inheritance instead. */
.footer-search {
  --pf-background: rgba(250, 247, 242, 0.08);
  --pf-border: rgba(250, 247, 242, 0.25);
  --pf-text-muted: rgba(250, 247, 242, 0.8);
}

/* Two of this site's 27 posts are written entirely in Arabic; the rest are
   English. The build indexes the whole site as one unified language
   (`--force-language en` in package.json's build script — Pagefind has no
   supported way to search multiple per-page languages from a single search
   box otherwise), so results carry no per-item language signal for
   Pagefind's own UI to align automatically. unicode-bidi: plaintext derives
   each result's direction from its own first strong character instead of
   inheriting the page's ltr default, so Arabic titles/excerpts still align
   and flow correctly without needing that signal. */
.pf-result-title,
.pf-result-excerpt {
  unicode-bidi: plaintext;
}

.pf-filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.pf-filters-row pagefind-filter-dropdown {
  flex: 1;
  min-width: 140px;
}