/* NOTE: Variables do not work inside media queries and container queries. */
/* Info about pagefind here: https://pagefind.app/docs/ui-usage/ */

:root {
  --pagefind-ui-scale: 1.125; /* 16 pixels base becomes 18 pixels */
  --pagefind-ui-primary: #034ad8;
  --pagefind-ui-text: #393939;
  --pagefind-ui-background: #ffffff;
  --pagefind-ui-border: #eeeeee;
  --pagefind-ui-tag: #eeeeee;
  --pagefind-ui-border-width: 2px;
  --pagefind-ui-border-radius: 8px;
  --pagefind-ui-image-border-radius: 8px;
  --pagefind-ui-image-box-ratio: 3 / 2;
  --pagefind-ui-font: sans-serif;
}

.pagefind-ui__search-input.svelte-1d60ae3 {
    height: calc(64px * var(--pagefind-ui-scale));
    padding: 0 calc(70px * var(--pagefind-ui-scale)) 0 calc(54px * var(--pagefind-ui-scale));
    font-size: calc(17px * var(--pagefind-ui-scale));
    position: relative;
}
.pagefind-ui__result-title {
    font-size: calc(16px * var(--pagefind-ui-scale)) !important;
}


/* --- MODAL SPECIFIC STYLES --- */

/* Transitions syntax: transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; */
#modal-search.modal {
  display: flex;
  left: 100%;
  opacity: 0;
  transition-property: left, opacity;
  transition-duration: 0.35s, 0.5s;
  transition-delay: 0s, 0s;
}
#modal-search.modal.is-active {
  left: 0%;
  opacity: 1;
}
#modal-search .modal-background {
  background-color: rgba(10, 10, 10, 0);
  transition-property: background-color;
  transition-duration: 0.35s;
  transition-delay: 0.35s;
}
#modal-search.is-active  .modal-background {
  background-color: rgba(10, 10, 10, 0.86);
}
#modal-search.modal {
  z-index: 1004;
  padding: 20px;
}
#modal-search.modal-card-head {
  justify-content: flex-end;
}