/* Custom Pagefind styling to match blog fonts */

/* Override Pagefind UI fonts */
.pagefind-ui,
.pagefind-ui__result,
.pagefind-ui__search-input {
  font-family: "Crimson Pro", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* Search input styling */
.pagefind-ui__search-input {
  font-size: 20px !important;
  font-weight: 300 !important;
  padding: 14px 14px 14px 50px !important;
}

/* Result title styling - Crimson Pro */
.pagefind-ui__result-title {
  font-family: "Crimson Pro", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 23px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin-bottom: 8px !important;
}

/* Result excerpt text - Lora */
.pagefind-ui__result-excerpt {
  font-family: "Lora", Georgia, serif !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
}

/* Result link text */
.pagefind-ui__result-link {
  font-family: "Crimson Pro", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 23px !important;
}

/* Message text */
.pagefind-ui__message {
  font-family: "Crimson Pro", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 19px !important;
  font-weight: 300 !important;
}

/* Clear button styling */
.pagefind-ui__search-clear {
  font-size: 18px !important;
  font-family: "Crimson Pro", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* Load more button styling */
.pagefind-ui__button {
  font-size: 18px !important;
  font-family: "Crimson Pro", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  padding: 16px 24px !important;
  line-height: 1.5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Increase result container padding for better spacing */
.pagefind-ui__result {
  padding: 16px 20px !important;
  margin-bottom: 20px !important;
}

/* Dark mode support - CSS Variables */
[data-theme="dark"] .pagefind-ui {
  --pagefind-ui-primary: #5c9eff;
  --pagefind-ui-text: #e8e8e8;
  --pagefind-ui-background: #1e1e1e;
  --pagefind-ui-border: #404040;
  --pagefind-ui-tag: #1e1e1e;
}

[data-theme="dark"] .pagefind-ui__search-input {
  background-color: #2a2a2a !important;
  color: #e8e8e8 !important;
  border-color: #404040 !important;
}

[data-theme="dark"] .pagefind-ui__result {
  background-color: #1e1e1e !important;
  background: #1e1e1e !important;
  border: none !important;
  border-bottom: 1px solid #404040 !important;
}

[data-theme="dark"] .pagefind-ui__result-inner {
  background-color: #1e1e1e !important;
  background: #1e1e1e !important;
}

[data-theme="dark"] .pagefind-ui__results {
  background-color: #1e1e1e !important;
  background: #1e1e1e !important;
}

[data-theme="dark"] .pagefind-ui__result-title,
[data-theme="dark"] .pagefind-ui__result-link {
  color: #e8e8e8 !important;
}

[data-theme="dark"] .pagefind-ui__result-excerpt {
  color: #c8c8c8 !important;
}

[data-theme="dark"] .pagefind-ui__message {
  color: #c8c8c8 !important;
}

[data-theme="dark"] .pagefind-ui__button {
  background-color: #3a3a3a !important;
  color: #e8e8e8 !important;
  border-color: #404040 !important;
}

/* Search term highlighting in dark mode */
[data-theme="dark"] mark,
[data-theme="dark"] .pagefind-ui__result-excerpt mark {
  background-color: #6b5b00 !important;
  color: #fff !important;
}

/* Clear button in dark mode */
[data-theme="dark"] .pagefind-ui__search-clear {
  background-color: transparent !important;
  color: #e8e8e8 !important;
  border: none !important;
}

/* Magnifying glass icon size */
.pagefind-ui__search-input::before {
  width: 24px !important;
  height: 24px !important;
  font-size: 24px !important;
}

.pagefind-ui svg {
  width: 24px !important;
  height: 24px !important;
}

/* Search icon (magnifying glass) in dark mode */
[data-theme="dark"] .pagefind-ui__search-input::before,
[data-theme="dark"] .pagefind-ui svg,
[data-theme="dark"] .pagefind-ui svg path,
[data-theme="dark"] .pagefind-ui__form::before {
  color: #e8e8e8 !important;
  fill: #e8e8e8 !important;
  stroke: #e8e8e8 !important;
}

/* Target the magnifying glass icon specifically */
[data-theme="dark"] .pagefind-ui__form {
  --pagefind-ui-text: #e8e8e8 !important;
}

[data-theme="dark"] .pagefind-ui__drawer {
  background-color: #1e1e1e !important;
  border-color: #404040 !important;
}