/* shared/theme/branding/header.css
   Everything rendered inside <header> across all products: layout/sizing,
   version selector, logo, search bar, Ask AI button, and palette toggle.
   Consolidated from main.html's inline <style> block plus colors.css/search.css
   so the whole header lives in one file regardless of which property type
   (color, font-weight, position) each rule happens to touch.

   Depends on --md-primary-fg-color, --md-primary-bg-color,
   --md-primary-fg-color--light, --md-default-bg-color, --md-default-fg-color--lightest,
   and --md-accent-fg-color from colors.css — mkdocs-base.yml lists colors.css
   first in extra_css so those variables are defined before this file loads.
*/

/* ============================================================
   HEADER STYLING
   ============================================================ */
.md-header {
    background-color: var(--md-primary-fg-color);
    /* The inactive search-results dropdown (.md-search__output → __scrollwrap)
       stays laid out (transparent) even when not searching. On a narrow header
       the right-aligned search box pushes that ~468px dropdown past the viewport's
       right edge, creating page-wide horizontal scroll — which makes the header
       background paint only across the true viewport width, leaving a white gutter.
       Clip the header's horizontal spill so that dropdown can't extend the page.
       Must be `clip`, not `hidden`: `hidden` would force overflow-y to compute to
       `auto`, turning the header into a scroll container that clips the search and
       version-switch dropdowns as they open downward. `clip` leaves overflow-y
       visible (so those still show) and does not clip position:fixed descendants
       (so the mobile full-screen active-search overlay is unaffected). */
    overflow-x: clip;
}

/* Disable header title scroll animation - keep stable */
.md-header__title {
  font-weight: 600;
}

/* Tab row (navigation.tabs.sticky) renders inside <header> — see
   partials/tabs.html included from header.html — so its active-state
   styling belongs here, alongside the sidebar nav/TOC section below. */
.md-tabs__link--active {
    font-weight: 600;
}

/* ============================================================
   HEADER LAYOUT / SIZING
   ============================================================ */
.md-header__inner {
    height: 2.5rem !important;
    min-height: 0 !important;
    padding-top: 1rem !important;
}

.md-header__title {
    margin-left: 0.25rem !important;
}

.md-tabs__item {
    height: 2rem !important;
}

.md-tabs__link {
    margin-top: 0.75rem !important;
    margin-bottom: 0 !important;
}

/* Single source for the header gem logo height so it is identical everywhere:
   product pages render it as an inline <svg> (partials/logo.html) and the splash
   page as an <img> of logo-dark.svg (Material's default header) — same artwork
   (identical viewBox), so matching the height makes them the exact same size. */
:root {
    --pg-logo-height: 1.75rem;

    /* Header control "pill" tokens. The search bar, Ask AI button, palette toggle,
       and version switcher are intentionally identical — rounded pill, translucent
       dark fill, subtle white border, matching height, and a scheme-aware hover
       overlay (lighten in light mode, darken in dark mode; see the
       comment on .pg-version-switch__button). Defining that look once keeps all of
       them in lockstep instead of copy-pasting the values across ~6 rules.
       (Kept separate from --pg-logo-height even though both are 1.75rem: same
       number, different concept — they shouldn't be coupled.) */
    --pg-header-control-height: 1.75rem;
    --pg-header-control-radius: 0.75rem;
    --pg-header-control-border: 1px solid rgba(255, 255, 255, 0.35);
    --pg-header-control-bg: rgba(0, 0, 0, 0.26);
    --pg-header-control-hover-light: rgba(255, 255, 255, 0.12); /* white overlay (light mode) */
    --pg-header-control-hover-dark: rgba(0, 0, 0, 0.45); /* black overlay (dark mode / version switch) */

    /* Shared text size for the version switch, Ask AI's secondary label, and the
       Ask-AI-in-search-results button — kept as one token so nudging header text
       size doesn't require hunting down every place 0.75rem was copy-pasted. */
    --pg-header-control-font-size: 0.75rem;
}

.md-header__button.md-logo {
    margin-left: 0.4rem !important;
    margin-top: 0.5rem !important;
}

.md-header__button.md-logo svg {
    height: var(--pg-logo-height) !important;
    width: auto !important;
}

/* Flex spacer between the left cluster (logo/title/version-switch) and the
   right cluster (search/Ask AI/palette) — grows to fill available space so
   the right cluster stays right-aligned regardless of left-cluster width. */
.pgk-header-spacer {
    flex: 100 1 0;
    min-width: 0;
}

/* ============================================================
   VERSION SELECTOR (file-structure versioning)
   Custom dropdown (button + menu) rendered server-side in partials/header.html
   from config.extra.versions, as a flex item in the header row (after the title,
   before the spacer). A custom control — not a native <select> — because native
   <select> popups don't allow author control of width/padding/row styling.
   version-switcher.js opens/closes it and navigates on choice. Present only for
   products with extra.versions.
   ============================================================ */
.pg-version-switch {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: 1rem;
  position: relative; /* anchor for the absolutely-positioned menu */
}

/* Closed pill — matches the header's other controls (search, Ask AI, palette):
   rounded, translucent-dark fill, subtle white border, white text, and a scheme-aware
   hover overlay (lighten in light mode, darken in dark mode). */
.pg-version-switch__button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start; /* left-align the label; chevron is positioned absolutely */
  position: relative; /* anchor the absolutely-positioned chevron */
  /* Fixed width (sized for the widest label) so the pill doesn't resize with the
     selected version; the menu's min-width:100% then matches it for a uniform
     rectangle. */
  width: 5rem;
  height: var(--pg-header-control-height);
  /* Left padding matches the menu options' text inset (menu 0.2rem + option
     0.6rem = 0.8rem) so the button label and option labels start at the same x. */
  padding: 0 0.5rem 0 0.8rem;
  font-family: inherit;
  font-size: var(--pg-header-control-font-size);
  color: var(--md-primary-bg-color);
  background: var(--pg-header-control-bg);
  border: var(--pg-header-control-border);
  border-radius: var(--pg-header-control-radius);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.pg-version-switch__button:hover {
  background: var(--pg-header-control-hover-light);
}
[data-md-color-scheme="slate"] .pg-version-switch__button:hover {
  background: var(--pg-header-control-hover-dark);
}

.pg-version-switch__chevron {
  position: absolute;
  right: 0.5rem;
  top: 0;
  bottom: 0;
  margin: auto 0; /* vertical-center without transform, leaving transform for the rotate */
  width: 0.6rem;
  height: 0.6rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s;
}
.pg-version-switch__button[aria-expanded="true"] .pg-version-switch__chevron {
  transform: rotate(180deg);
}

/* Open: the button + menu read as one taller rounded rectangle, split by a subtle
   divider at the seam (which also makes any slight button/menu width difference
   look intentional). The bottom corners square off; a 1px bottom border draws the
   divider; the fill already equals the menu's (both the header green under a 26%
   black overlay) so the hover overlay is disabled to keep them identical; z-index keeps
   the button and its divider above the menu's drop shadow. */
.pg-version-switch__button[aria-expanded="true"] {
  position: relative;
  z-index: 101;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.pg-version-switch__button[aria-expanded="true"]:hover {
  background: var(--pg-header-control-bg);
}

/* Open menu — sits flush under the button and reads as the lower half of one
   rounded rectangle: same fill (the darkened header green, matching the button),
   same side border, no top border/rounding (it butts against the open button),
   and bottom corners share the button's radius. min-width matches the button so
   the rectangle is a uniform width. */
.pg-version-switch__list {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  min-width: 100%;
  padding: 0.2rem;
  background: color-mix(in srgb, var(--md-primary-fg-color) 74%, black);
  border: var(--pg-header-control-border);
  border-top: none;
  border-radius: 0 0 var(--pg-header-control-radius) var(--pg-header-control-radius);
  box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.3);
}
.pg-version-switch__list[hidden] {
  display: none;
}

.pg-version-switch__option {
  padding: 0.3rem 0.6rem;
  font-family: inherit;
  font-size: var(--pg-header-control-font-size);
  text-align: left;
  white-space: nowrap;
  color: var(--md-primary-bg-color);
  background: none;
  border: none;
  border-radius: 0.35rem;
  cursor: pointer;
}
.pg-version-switch__option:hover,
.pg-version-switch__option:focus-visible {
  background: var(--md-primary-fg-color--light);
  outline: none;
}

/* ============================================================
   ASK AI BUTTON
   ============================================================ */
#pgk-ask-btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    padding: 0 3px;
    background: var(--pg-header-control-bg);
    color: white;
    border: var(--pg-header-control-border);
    cursor: pointer;
    border-radius: var(--pg-header-control-radius);
    white-space: nowrap;
    font-family: inherit;
    font-size: 0.85rem;
    flex-shrink: 0;
    align-self: center;
    margin: 0 0 0 4px;
    width: 4rem;
    height: var(--pg-header-control-height);
    position: relative;
    transition: background 0.15s;
}
#pgk-ask-btn:hover {
    background: var(--pg-header-control-hover-light);
}
[data-md-color-scheme="slate"] #pgk-ask-btn:hover {
    background-color: var(--pg-header-control-hover-dark);
}
#pgk-ask-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a1a;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.72rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 100;
}
#pgk-ask-btn:hover::after {
    opacity: 1;
}
#pgk-ask-btn svg {
    margin-left: 4px;
}
#pgk-ask-btn span {
    color: hsla(0, 0%, 100%, 0.7);
    font-size: var(--pg-header-control-font-size);
    margin-left: 4px;
}

/* ============================================================
   PALETTE TOGGLE
   ============================================================ */
form[data-md-component="palette"] label {
    border-radius: var(--pg-header-control-radius) !important;
    border: var(--pg-header-control-border) !important;
    background: var(--pg-header-control-bg) !important;
    height: var(--pg-header-control-height) !important;
}
form[data-md-component="palette"] label:hover {
    background: var(--pg-header-control-hover-light) !important;
    opacity: 1 !important;
}
[data-md-color-scheme="slate"] form[data-md-component="palette"] label:hover {
    background-color: var(--pg-header-control-hover-dark) !important;
    opacity: 1 !important;
}
form[data-md-component="palette"] label svg {
    margin-top: -3px;
}

/* Palette toggle FOUC fix. html[data-md-palette] is stamped from localStorage in
   <head> before any body content renders, so these rules are active from the very
   first paint. !important overrides the [hidden] attribute, meaning the correct
   icon is visible even before the sync script in the header removes [hidden]. */
html[data-md-palette="slate"] form[data-md-component="palette"] label:nth-of-type(1) {
    display: none !important;
}
html[data-md-palette="slate"] form[data-md-component="palette"] label:nth-of-type(2) {
    display: inline-block !important;
}
html[data-md-palette="default"] form[data-md-component="palette"] label:nth-of-type(1) {
    display: inline-block !important;
}
html[data-md-palette="default"] form[data-md-component="palette"] label:nth-of-type(2) {
    display: none !important;
}

/* Keep palette form in the flex layout when search is active.
   Material collapses .md-header__option via max-width:0 (not display:none),
   so the labels overflow to the right outside the header margin. Override
   max-width so the form renders at its natural width in the flex row. */
[data-md-toggle="search"]:checked ~ .md-header .md-header__option {
    display: flex !important;
    max-width: none !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: none !important;
}
/* Match palette label stacking to Ask AI. Material's .md-header__button sets
   position:relative; z-index:1 on the label, which lifts it above the search
   overlay (z-index:1, earlier in DOM). Ask AI has no position/z-index so it
   sits at z-index:auto — below the overlay. Setting z-index:0 on the palette
   label puts both at the same stacking level relative to the overlay. */
[data-md-toggle="search"]:checked ~ .md-header .md-header__option .md-header__button {
    z-index: 0 !important;
}

/* Mobile (below 76.1875em, Material's tablet breakpoint where the hamburger/
   drawer replaces the tab row — see main.html's matching query): the header
   row can't fit the logo, the full site name, the version picker (versioned
   products), and the right-hand controls (search, Ask AI, palette) at once.
   Drop the wordmark and show the gem logo for ALL products — the logo carries
   the brand. (This was originally scoped to versioned products with :has(),
   on the assumption non-versioned ones had room; but on a phone the wordmark
   plus the three right-hand controls still overflow, pushing the palette
   toggle off the right edge — so it now applies to every product.)
   The rules are prefixed with `.md-header` for specificity so they beat the
   base `.md-header__title` width/flex rules in the SEARCH section further down
   the file (equal-specificity + later-in-file would otherwise win and the title
   wouldn't collapse). Must match main.html's 76.1875em breakpoint, not a
   narrower one — the hamburger eats into the row's width the moment it appears. */
@media screen and (max-width: 76.1875em) {
  .md-header__inner {
      height: auto !important;
      padding-top: 0.5rem !important;
      padding-bottom: 0.5rem !important;
  }

  /* Drop the wordmark text (the gem logo below carries the brand). */
  .md-header .md-header__title .md-ellipsis {
    display: none !important;
  }
  /* Hiding the text leaves .md-header__title's flex box sized by its flex-grow,
     which reserves width and shoves the right-hand controls rightward (on
     non-versioned products that pushed the palette toggle off-screen; on
     versioned ones it made the picker drift). Collapse the box entirely. */
  .md-header .md-header__title {
    flex: 0 0 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  .md-header .md-header__button.md-logo {
    display: flex !important;
  }

  /* Ask AI collapses to an icon on the cramped mobile row so it and the theme
     toggle both fit; the full "Ask AI" label returns at desktop widths. */
  #pgk-ask-btn span {
    display: none !important;
  }
  #pgk-ask-btn {
    /* Match the collapsed width of the neighboring icon buttons (search and
       palette). Both are .md-header__button.md-icon with width:auto, so each
       shrinks to fit its box: a 1.2rem icon + 0.4rem padding per side + 1px
       border per side = 2rem + 2px. Ask AI is box-sizing:border-box with an
       explicit width and (below) zero padding, so its border-box width must
       equal that same total for all three collapsed controls to render at the
       same size. The 2px is the two 1px borders — absolute, so it stays correct
       regardless of the root font-size that scales the 2rem. */
    width: calc(2rem + 2px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center !important;
    /* Match the symmetric margin of the neighboring .md-header__button icons
       (search, palette) so the gaps between all three are even. The desktop
       rule uses an asymmetric `margin: 0 0 0 4px` (spacing from the "Ask AI"
       label), which left a wider gap before Ask AI than after it. */
    margin: 0.2rem !important;
  }
  /* The star's 4px left margin spaces it from the "Ask AI" label at desktop
     widths; with the label hidden and the button centered here, that margin
     shoves the icon right of center — zero it so the icon centers. */
  #pgk-ask-btn svg {
    margin-left: 0 !important;
  }
}

.md-header__title .md-ellipsis,
.md-header__topic .md-ellipsis {
    font-weight: 600;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Logo sizing and alignment */
.md-header__button.md-logo img {
    height: var(--pg-logo-height);
    width: auto;
}

/* ============================================================
   LOGO NOTE
   White logo (logo-dark.svg) is used for both light and dark modes
   since the header background remains dark green in both schemes.
   ============================================================ */

/* ============================================================
   SEARCH BAR
   ============================================================ */
.md-search {
    flex: 0 0 auto !important;
    width: 34.4rem;
    height: var(--pg-header-control-height);
    align-self: center !important;
    margin-left: 2rem;
    justify-content: right;
}
.md-search__inner {
    width: 18rem;
}
.md-search__form {
    border-radius: var(--pg-header-control-radius) !important;
    border: var(--pg-header-control-border) !important;
    height: var(--pg-header-control-height) !important;
    align-items: center !important;
    margin-right: 0rem;
    align-self: center !important;
}
[data-md-color-scheme="slate"] .md-search__form:hover {
    background-color: var(--pg-header-control-hover-dark);
}
/* Active search: drop the resting pill's border/radius (the open dropdown/overlay
   shouldn't look like a pill). Height is handled per breakpoint below. */
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
    height: auto !important;
    border: none !important;
    border-radius: 0 !important;
}
/* Desktop dropdown (>=60em): with height:auto the form collapses to just the text
   line, so the input centers ABOVE the magnifier and stops short of the results,
   leaving a gap. Give it a fixed 1.8rem and anchor it to the top of the search bar
   so the input fills from its top down to the results — its text lands on the
   magnifier's line and the gap closes. (1.8rem measured against the 1.2rem
   magnifier; in rem so it scales with zoom.) Below 60em Material renders a
   different full-screen overlay — taller 2.4rem input, absolutely-positioned icon —
   so this must NOT apply there or it would mis-size that layout. */
@media screen and (min-width: 60em) {
    [data-md-toggle="search"]:checked ~ .md-header .md-search__form {
        height: 1.8rem !important;
        align-self: flex-start !important;
    }
    [data-md-toggle="search"]:checked ~ .md-header .md-search__input {
        height: 1.8rem !important;
    }
}
.md-header__button[for="__search"] {
    height: var(--pg-header-control-height) !important;
    border-radius: var(--pg-header-control-radius) !important;
    border: var(--pg-header-control-border) !important;
    background: var(--pg-header-control-bg) !important;
    align-self: center !important;
}
/* The collapsed magnifier sits ~3px below center in the forced 1.75rem height
   (default block+padding layout). The palette toggle — same .md-header__button
   .md-icon structure — corrects the identical offset with margin-top:-3px on its
   svg and measures dead-centered; mirror that here. Nudges only the icon, never
   `display`, so Material's responsive show/hide of this button is untouched. */
.md-header__button[for="__search"] svg {
    margin-top: -3px;
}
.md-search__input {
    text-overflow: clip !important;
    margin-left: -8px !important;
}

/* 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 (above) is a separate flex item in the header row, 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;
}

/* The version-switch pill (above) sits before the header's flex spacer, so its
   width would push the search / Ask AI / palette group rightward — on a full row
   it overflows the centered 61rem grid, collapsing the spacer and spilling the
   group past the edge. The search box reserves a wide fixed width above but only
   shows an 18rem bar right-aligned within it, so reclaim the pill's footprint
   from that empty reserved space (versioned products only). The visible search
   bar is unchanged; the right-hand group lands where it does on unversioned
   pages. */
.md-header:has(.pg-version-switch) .md-search {
  width: 28.4rem;
}

/* Mobile (below 76.1875em — see the version-selector breakpoint comment above
   for why this width was chosen): the search box's fixed desktop width (34.4rem)
   with a left margin stays in the flex flow on mobile and pushes the Ask AI
   button and the theme toggle off-screen. The open search state is a
   fixed-position overlay, so collapse the in-flow box here. Margin 0 so that
   below Material's 60em search-collapse breakpoint — where .md-search is a
   0-width overlay host sitting in-flow between the magnifier toggle and Ask AI —
   it adds no phantom gap (the magnifier's own 0.2rem margin already yields an
   even 8px search→Ask AI gap, matching Ask AI→palette). */
@media screen and (max-width: 76.1875em) {
  .md-header__inner .md-search {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
  }
}

/* Between Material's 60em search breakpoint and our 76.1875em breakpoint the
   search renders as the inline BAR (not the collapsed magnifier), and .md-search
   IS that visible bar. Give it a 0.2rem right margin so the bar→Ask AI gap is 8px
   — matching the Ask AI→palette gap (two adjacent 0.2rem margins). Scoped to this
   band so it doesn't re-pad the 0-width overlay host below 60em (where it'd make
   the magnifier→Ask AI gap 12px) or touch the desktop layout above 76.1875em. */
@media screen and (min-width: 60em) and (max-width: 76.1875em) {
  .md-header__inner .md-search {
    margin-right: 0.2rem !important;
  }
}

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

.md-search__output {
    width: 95% !important;
    left: 2.5% !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: var(--pg-header-control-font-size);
    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);
}

/* ============================================================
   SIDEBAR NAVIGATION & TABLE OF CONTENTS
   Grouped here by deliberate choice, not DOM structure: these render in
   .md-container (partials/nav.html, partials/toc.html), as siblings of
   <header>, not inside it. Kept alongside the header's own nav styling
   (tab-row active state, above) since together they cover all navigation
   treatment for the site.
   ============================================================ */
.md-nav__link--active {
    font-weight: 600;
}

.md-nav--secondary .md-nav__link {
    font-size: 0.7rem;
}

.md-nav--secondary .md-nav__item {
    padding: 0;
}