/* Cap the title's LAYOUT width so the search bar always starts at the same place
   (widening the title would push search / Ask AI / palette to the right). The
   site name is allowed to overflow this 10rem box visibly — overflow:visible plus
   the natural-width ellipsis rule below — so a long name renders in full without
   being clipped to an ellipsis and without shifting the search bar. The version
   picker is a separate flex item in the header row (see .pg-version-switch in
   colors.css), so it has its own width and doesn't factor into this. */
.md-header__title {
    flex: 0 0 auto !important;
    width: 10rem !important;
    overflow: visible !important;
}

/* Keep the site name at its natural width rather than shrinking it to an ellipsis
   to fit the 10rem box above. */
.md-header__title .md-header__ellipsis {
    flex: 0 0 auto;
}

/* Vertically center the search input within the header row at rest */
.md-header__inner .md-search {
    display: flex;
    align-items: center;
}

/* Expand the container when search is active — inner fills it via width: 100% */
[data-md-toggle="search"]:checked ~ .md-header .md-search {
    flex: 0 0 34.4rem !important;
}

/* Cap the results dropdown height so Ask AI stays near the top of the page */
.md-search__scrollwrap {
    max-height: 40vh !important;
}

/* Prevent the inactive search output from intercepting clicks on nav tabs below */
.md-search__output {
    pointer-events: none;
}
[data-md-toggle="search"]:checked ~ .md-header .md-search__output {
    pointer-events: auto;
}

/* Hide text teasers from standard search results — show title only */
.md-search-result__teaser {
    display: none;
}

/* Ask AI item: sticky at top of the scroll container, always in view */
#pgk-search-ask-ai {
    position: sticky;
    top: 0;
    background-color: var(--md-default-bg-color);
    z-index: 2;
    border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.pgk-ask-ai-btn {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    padding: 0.6rem 1rem 0.6rem 0.6rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--md-accent-fg-color);
    font-size: 0.75rem;
    font-family: inherit;
    text-align: left;
}

.pgk-ask-ai-btn:hover,
.pgk-ask-ai-btn:focus-visible {
    background-color: var(--md-accent-fg-color--transparent);
    outline: none;
}

.pgk-ask-ai-icon {
    display: flex;
    flex-shrink: 0;
}

.pgk-ask-ai-icon svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: var(--md-accent-fg-color);
}