/* Pagefind UI Override - Dark Theme Integration */

/* Override root variables for dark theme */
.pagefind-ui {
  --pagefind-ui-scale: 0.8;
  --pagefind-ui-primary: #5e8fc4;
  --pagefind-ui-text: #ffffff;
  --pagefind-ui-background: #38444d;
  --pagefind-ui-border: #5a6570;
  --pagefind-ui-tag: #2a3035;
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 4px;
  --pagefind-ui-image-border-radius: 4px;
  --pagefind-ui-image-box-ratio: 3 / 2;
  --pagefind-ui-font: 'OpenDyslexic', sans-serif;
}

/* Search input styling */
.pagefind-ui__search-input {
  background-color: #44515a !important;
  border: 1px solid #5a6570 !important;
  color: #ffffff !important;
  font-family: 'OpenDyslexic', sans-serif !important;
  height: 36px !important;
  padding: 8px 40px 8px 12px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  border-radius: 4px !important;
}

.pagefind-ui__search-input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
  opacity: 1 !important;
}

/* Remove the search icon */
.pagefind-ui__form::before {
  display: none !important;
}

/* Clear button styling */
.pagefind-ui__search-clear {
  background-color: transparent !important;
  color: #ffffff !important;
  height: 30px !important;
  top: 3px !important;
  right: 3px !important;
  padding: 0 8px !important;
  font-size: 14px !important;
}

.pagefind-ui__search-clear:hover {
  background-color: #5e8fc4 !important;
  border-radius: 4px;
}

/* Results styling */
.pagefind-ui__results-area {
  margin-top: 16px !important;
}

.pagefind-ui__message {
  color: #ffffff !important;
  font-family: 'OpenDyslexic', sans-serif !important;
  font-size: 14px !important;
  padding: 12px 0 !important;
}

.pagefind-ui__result {
  border-color: #5a6570 !important;
}

.pagefind-ui__result-title .pagefind-ui__result-link {
  color: #5e8fc4 !important;
  font-family: 'OpenDyslexic', sans-serif !important;
}

.pagefind-ui__result-title .pagefind-ui__result-link:hover {
  color: #4a7aad !important;
}

.pagefind-ui__result-excerpt {
  color: #b0b8c0 !important;
  font-family: 'OpenDyslexic', sans-serif !important;
}

/* Tag styling */
.pagefind-ui__result-tag {
  background-color: #2a3035 !important;
  color: #ffffff !important;
  font-family: 'OpenDyslexic', sans-serif !important;
  border-radius: 4px !important;
}

/* Button styling */
.pagefind-ui__button {
  background-color: #38444d !important;
  border-color: #5a6570 !important;
  color: #ffffff !important;
  font-family: 'OpenDyslexic', sans-serif !important;
  border-radius: 4px !important;
}

.pagefind-ui__button:hover {
  background-color: #5e8fc4 !important;
  border-color: #5e8fc4 !important;
}

/* Filter panel styling */
.pagefind-ui__filter-block {
  border-color: #5a6570 !important;
}

.pagefind-ui__filter-name {
  color: #ffffff !important;
  font-family: 'OpenDyslexic', sans-serif !important;
}

.pagefind-ui__filter-label {
  color: #b0b8c0 !important;
  font-family: 'OpenDyslexic', sans-serif !important;
}

.pagefind-ui__filter-checkbox {
  background-color: #44515a !important;
  border-color: #5a6570 !important;
}

.pagefind-ui__filter-checkbox:checked {
  background-color: #5e8fc4 !important;
  border-color: #5e8fc4 !important;
}

/* Navbar integration - spacing only */
.blog-search {
  display: flex;
  align-items: center;
  margin: 10px;
  position: relative;
}

/* Top dock position - normal flow */
#nav-container.dock-top .blog-search {
  margin: 10px;
}

/* Bottom dock position - results appear above navbar */
#nav-container.dock-bottom .blog-search {
  margin: 10px;
}

#nav-container.dock-bottom .pagefind-ui {
  display: flex;
  flex-direction: column-reverse;
}

/* Bottom dock — force results drawer into viewport space above navbar */
#nav-container.dock-bottom .pagefind-ui__drawer {
  position: relative;
  left: 6px;
  bottom: calc(
    var(--navbar-height, 0px) + calc(
    var(--pagefind-results-height, 120px) * 8
    )
  );
  overflow-y: visible;
  margin: 0;
  max-height: calc(100vh - var(--navbar-height, 0px) - 32px);
}


/* Left dock position - vertical layout */
#nav-container.dock-left .blog-search {
  margin: 10px 0;
  padding: 0 16px;
  width: 100%;
  box-sizing: border-box;
}

#nav-container.dock-left .blog-search .pagefind-ui {
  width: 100%;
}

#nav-container.dock-left .blog-search .pagefind-ui__form {
  width: 100%;
}

#nav-container.dock-left .blog-search .pagefind-ui__search-input {
  width: 100%;
  text-align: center;
}

#nav-container.dock-left .pagefind-ui__drawer {
  position: fixed;
  left: 190px;
  top: 16px;
  bottom: 180px;
  margin: 0;
  width: calc(100vw - 190px - 32px);
  max-width: 800px;
  overflow-y: show;
}

/* Right dock position - vertical layout */
#nav-container.dock-right .blog-search {
  margin: 10px 0;
  padding: 0 16px;
  width: 100%;
  box-sizing: border-box;
}

#nav-container.dock-right .blog-search .pagefind-ui {
  width: 100%;
}

#nav-container.dock-right .blog-search .pagefind-ui__form {
  width: 100%;
}

#nav-container.dock-right .blog-search .pagefind-ui__search-input {
  width: 100%;
  text-align: center;
}

#nav-container.dock-right .pagefind-ui__drawer {
  position: fixed;
  right: 190px;
  top: 16px;
  bottom: 180px;
  margin: 0;
  width: calc(100vw - 190px - 32px);
  max-width: 800px;
  overflow-y: show;
}


/* Dragging vertical state */
#nav-container.dragging.drag-vertical .blog-search {
  margin: 10px 0;
  padding: 0 16px;
  width: auto;
  box-sizing: border-box;
}

#nav-container.dragging.drag-vertical .blog-search .pagefind-ui {
  width: 100%;
}

#nav-container.dragging.drag-vertical .blog-search .pagefind-ui__form {
  width: 100%;
}

#nav-container.dragging.drag-vertical .blog-search .pagefind-ui__search-input {
  width: 100%;
  text-align: center;
}

/* Dragging horizontal state */
#nav-container.dragging.drag-horizontal .blog-search {
  margin: 10px;
  padding: 0;
  width: auto;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
  #nav-container.dock-left .blog-search .pagefind-ui__drawer,
  #nav-container.dock-right .blog-search .pagefind-ui__drawer {
    position: fixed;
    left: 50%;
    right: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
}