/* Container that sits in the center of the header toolbar */
#pf-header {
  display: flex;
  align-items: center;
  width: 12rem; /* Small initial width - just search icon */
  min-width: 3rem; /* Minimum for search icon */
  max-width: 20rem; /* Maximum width for center positioning */
  position: relative;
  z-index: 30; /* above header background */
  transition: width 0.3s ease; /* Smooth expansion */
  flex: 1; /* Take up available space between title and GitHub */
  justify-content: center; /* Center the search input within the container */
}

/* Expand when typing but keep centered */
#pf-header:focus-within,
#pf-header .pagefind-ui__form:focus-within,
#pf-header.expanded .pagefind-ui__form {
  width: 24rem; /* Expand to reasonable width when typing */
  max-width: 24rem;
}

/* Explicit expanded state - authoritative when drawer is visible */
#pf-header.expanded {
  width: 24rem;
  max-width: 24rem;
}

/* Prefer pure CSS when supported: expand while the drawer is visible */
@supports selector(:has(*)) {
  #pf-header:has(.pagefind-ui__drawer:not([hidden])) {
    width: 24rem;
    max-width: 24rem;
  }
}

/* Let Pagefind render its own input; make it look like Material */
#pf-header .pagefind-ui__form {
  width: 100%;
}
#pf-header .pagefind-ui__search-input {
  width: 100%;
  height: 2.25rem;
  border-radius: 0.375rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  padding: 0 1.75rem;
  font: inherit;
  font-size: 0.75rem;
}

#pf-header .pagefind-ui__search-clear {
  font-size: 0.6rem;
}

#pf-header input:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
#pf-header .pagefind-ui__drawer {
  /* Dropdown panel under the input */
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 0;
  width: 40rem; /* Fixed wide width for readability */
  max-width: 50rem; /* Allow some expansion */
  max-height: 75vh;
  overflow: auto;
  box-shadow: var(--md-shadow-z2);
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.5rem;
  z-index: 1000; /* Ensure it's above other content */
}

/* Keep the drawer wide when results are shown */
#pf-header:focus-within .pagefind-ui__drawer {
  width: 40rem; /* Maintain wide width */
  max-width: 50rem;
}

/* Style the search results for better readability */
#pf-header .pagefind-ui__result {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

#pf-header .pagefind-ui__result:last-child {
  border-bottom: none;
}

#pf-header .pagefind-ui__result-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--md-default-fg-color);
}

#pf-header .pagefind-ui__result-excerpt {
  font-size: 0.875rem;
  color: var(--md-default-fg-color--light);
  line-height: 1.4;
}

#pf-header .pagefind-ui__result-excerpt mark {
  background-color: var(--md-accent-fg-color--transparent);
  color: var(--md-accent-fg-color);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
}

/* Ensure header content doesn't get squeezed with centered search */
.md-header__inner {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 1rem; /* Space between elements */
  /* No justify-content needed - flex: 1 on search container handles centering */
}

/* Protect the title - never let it get squeezed */
.md-header__title {
  flex-shrink: 0; /* Never shrink the title */
  min-width: 8rem; /* Ensure minimum space for "SWHID.org" */
}

/* Protect the GitHub link - never let it get squeezed */
.md-header__source {
  flex-shrink: 0; /* Never shrink the GitHub link */
  min-width: 4rem; /* Ensure space for GitHub icon and text */
}

/* Medium screens - adjust for centered layout */
@media (max-width: 76.1875em) {
  #pf-header { 
    width: 10rem; /* Smaller initial width */
    min-width: 3rem;
    max-width: 18rem; /* Reasonable max width for center */
  }
  
  #pf-header:focus-within {
    width: 20rem; /* Expand but keep centered */
    max-width: 20rem;
  }
  
  #pf-header.expanded {
    width: 20rem; /* Expand but keep centered */
    max-width: 20rem;
  }
  
  /* CSS-only path for medium screens */
  @supports selector(:has(*)) {
    #pf-header:has(.pagefind-ui__drawer:not([hidden])) {
      width: 20rem;
      max-width: 20rem;
    }
  }
  
  /* Make the drawer full width on medium screens */
  #pf-header .pagefind-ui__drawer {
    width: 100vw;
    max-width: 100vw;
    left: 0;
    right: 0;
  }
}

/* Small screens - show search icon only, redirect to search page */
@media (max-width: 48em) {
  #pf-header {
    display: none;
  }
}

/* Optional: keep header height stable when results open */
.md-header { overflow: visible; }