/* Header search trigger button (sits in the Ananke nav) */
.pf-trigger{display:inline-flex;align-items:center;gap:.4rem;background:transparent;border:1px solid rgba(255,255,255,.45);
  color:rgba(255,255,255,.9);border-radius:2rem;padding:.28rem .8rem;font-size:.95rem;cursor:pointer;line-height:1;font-family:inherit}
.pf-trigger:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.pf-trigger svg{width:1rem;height:1rem;fill:currentColor}
.pf-trigger .pf-trigger-label{display:none}
@media screen and (min-width:60em){.pf-trigger .pf-trigger-label{display:inline}}

/* Modal overlay */
.pf-modal[hidden]{display:none}
.pf-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center;
  background:rgba(0,0,0,.55);padding:6vh 1rem 1rem}
.pf-modal__panel{background:#fff;color:#111;width:100%;max-width:44rem;border-radius:.5rem;
  box-shadow:0 20px 60px rgba(0,0,0,.4);max-height:82vh;overflow:auto;padding:1rem 1.15rem 1.4rem}
.pf-modal__bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.pf-modal__title{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:#666;margin:0}
.pf-modal__close{background:none;border:0;font-size:1.5rem;line-height:1;color:#666;cursor:pointer;padding:.1rem .4rem}
.pf-modal__close:hover{color:#111}
@media (prefers-color-scheme:dark){
  .pf-modal__panel{background:#1b1b1f;color:#eee}
  .pf-modal__title{color:#aaa}
  .pf-modal__close{color:#aaa}.pf-modal__close:hover{color:#fff}
}
/* Let Pagefind's own UI theming show through inside the modal */
.pf-modal .pagefind-ui{--pagefind-ui-scale:.9}