/* =============================================================================
   PAGEFIND COMPONENT UI — Mirantis theme integration
   Follows the body / body[data-theme="light"] selector pattern used in
   overrides/_index.sass, reusing MDS palette tokens throughout.

   CSS custom properties (--pf-*) are inherited even through `all: initial`,
   so overriding them on `body` is enough to theme all pagefind components.
   ============================================================================= */


/* ── Global --pf-* token overrides ─────────────────────────────────────────── */
/* Default = dark (matches the Mirantis theme default before JS sets data-theme) */

body {
  --pf-text:              var(--mds-theme-palette-grey10);    /* #d7dade */
  --pf-text-secondary:    var(--mds-theme-palette-grey20);    /* #b9c2c9 */
  --pf-text-muted:        var(--mds-theme-palette-grey30);    /* #a5b1ba */
  --pf-background:        var(--mds-theme-palette-grey90);    /* #17222f */
  --pf-border:            var(--mds-theme-palette-grey70);    /* #404d59 */
  --pf-border-focus:      var(--mds-theme-palette-grey50);    /* #768491 */
  --pf-hover:             var(--mds-theme-palette-grey80);    /* #26323f */
  --pf-mark:              var(--mds-theme-palette-grey10);
  --pf-scroll-shadow:     rgba(0, 0, 0, 0.3);

  --pf-skeleton:          var(--mds-theme-palette-grey80);
  --pf-skeleton-shine:    var(--mds-theme-palette-grey70);

  --pf-outline-focus:     var(--mds-theme-palette-marine40);  /* #268aef */
  --pf-modal-backdrop:    rgba(0, 0, 0, 0.65);

  --pf-shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.3);
  --pf-shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4);
  --pf-shadow-lg:  0 16px 48px rgba(0, 0, 0, 0.5);

  --pf-error-bg:            #2a1a1a;
  --pf-error-border:        #5c2828;
  --pf-error-text:          #f87171;
  --pf-error-text-secondary:#ef4444;

  /* Modal sizing — match pagefind defaults */
  --pf-modal-max-width:  760px;
  --pf-modal-max-height: min(80dvh, 800px);
  --pf-modal-top:        10dvh;

  /* Typography */
  --pf-font: "Open Sans", Roboto, var(--font-stack, sans-serif);
  --pf-input-font-size:         14px;
  --pf-result-title-font-size:  14px;
  --pf-result-excerpt-font-size:13px;

  /* Shape */
  --pf-border-radius: 4px;
}

body[data-theme="light"] {
  --pf-text:           var(--mds-theme-palette-grey90);    /* #17222f */
  --pf-text-secondary: var(--mds-theme-palette-grey70);    /* #404d59 */
  --pf-text-muted:     var(--mds-theme-palette-grey40);    /* #90a0ac */
  --pf-background:     var(--mds-theme-palette-white0);    /* #ffffff */
  --pf-border:         var(--mds-theme-palette-white25);   /* #e9ebee */
  --pf-border-focus:   var(--mds-theme-palette-grey40);    /* #90a0ac */
  --pf-hover:          var(--mds-theme-palette-white15);   /* #f2f3f5 */
  --pf-mark:           var(--mds-theme-palette-grey90);
  --pf-scroll-shadow:  rgba(0, 0, 0, 0.06);

  --pf-skeleton:       var(--mds-theme-palette-white25);
  --pf-skeleton-shine: var(--mds-theme-palette-white15);

  --pf-outline-focus:   var(--mds-theme-palette-marine50); /* #0073ec */
  --pf-modal-backdrop:  rgba(0, 0, 0, 0.45);

  --pf-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --pf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --pf-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.18);

  --pf-error-bg:             #fef2f2;
  --pf-error-border:         #fecaca;
  --pf-error-text:           #dc2626;
  --pf-error-text-secondary: #b91c1c;
}


/* ── Hide modal body (filters + results) until the user types something ─────── */

pagefind-modal:has(.pf-input:placeholder-shown) pagefind-modal-body {
  display: none !important;
}


/* ── Sidebar trigger — make pagefind-modal-trigger fill the wrapper ─────────── */

/* Let the trigger grow as a flex item inside .sidebar-search-wrapper */
.sidebar-search-wrapper pagefind-modal-trigger {
  flex: 1 0 auto !important;
  min-width: 0 !important;
  /* The wrapper already provides the bottom border and height —
     remove pagefind's default block sizing */
  display: flex !important;
  align-items: stretch !important;
}

/* Strip pagefind's default rounded-input look; match the Mirantis underline input */
.sidebar-search-wrapper .pf-trigger-btn {
  background:    transparent !important;
  border:        none !important;
  border-radius: 0 !important;
  box-shadow:    none !important;
  height:        26px !important;
  width:         100% !important;
  padding:       0 !important;
  gap:           4px !important;
  font-size:     12px !important;
  font-family:   "Open Sans", Roboto, sans-serif !important;
  /* Inherit muted color used for placeholder + icons */
  color: var(--pf-text-muted) !important;
}

.sidebar-search-wrapper .pf-trigger-btn:hover {
  background:   transparent !important;
  border-color: transparent !important;
}

/* Reorder flex children to match the Mirantis input layout:
   [🔍]  [Search text …]  [⌘K] */
.sidebar-search-wrapper .pf-trigger-icon {
  order:  1 !important;
  /* Scale the mask icon to match the original 24 × 24 SVG size */
  width:  16px !important;
  height: 16px !important;
}

.sidebar-search-wrapper .pf-trigger-text {
  order: 2 !important;
  flex:  1 !important;
  text-align: start !important;
  text-transform: capitalize !important;
}

.sidebar-search-wrapper .pf-trigger-shortcut {
  order: 3 !important;
}

/* Keyboard badge colours scoped to the sidebar */
body .sidebar-search-wrapper .pf-trigger-key {
  background:   var(--mds-theme-palette-grey80) !important;
  border-color: var(--mds-theme-palette-grey60) !important;
  color:        var(--mds-theme-palette-grey30) !important;
}

body[data-theme="light"] .sidebar-search-wrapper .pf-trigger-key {
  background:   var(--mds-theme-palette-white15) !important;
  border-color: var(--mds-theme-palette-grey30)  !important;
  color:        var(--mds-theme-palette-grey60)  !important;
}

/* The wrapper already colours the svg fill; do the same for the mask icon */
body .sidebar-search-wrapper .pf-trigger-icon {
  background: rgb(165, 177, 186) !important; /* --mds-theme-palette-grey30 */
}

body[data-theme="light"] .sidebar-search-wrapper .pf-trigger-icon {
  background: rgb(64, 77, 89) !important;    /* --mds-theme-palette-grey70 */
}

/* Focus ring on the wrapper (mirrors the .focused class the existing JS adds) */
.sidebar-search-wrapper:focus-within {
  border-color: rgb(0, 115, 236) !important; /* --mds-theme-palette-marine50 */
}






/* ── Filter dropdown ────────────────────────────────────────────────────────── */

/* Expand the menu to the widest option label instead of truncating. */
pagefind-filter-dropdown .pf-dropdown-menu {
  min-width: max-content !important;
}

pagefind-filter-dropdown .pf-dropdown-trigger-label,
pagefind-filter-dropdown .pf-dropdown-option-label {
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: nowrap !important;
  padding-inline-end: 32px !important;
}

/* When open: use flex-column layout so only .pf-dropdown-options scrolls.
   When closed: pagefind's defaults (overflow:hidden + max-height:0) hide the menu.
   JS (constrainDropdownHeight) sets max-height so the menu fits inside modal-body,
   so no overflow:visible on modal-body is needed and z-index stays correct. */
pagefind-filter-dropdown:has(.pf-dropdown-trigger.open) .pf-dropdown-menu {
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important; /* scroll lives on .pf-dropdown-options */
}

/* Only this element scrolls — one scrollbar, no nesting conflict. */
pagefind-filter-dropdown .pf-dropdown-options {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overscroll-behavior: contain !important;
}


/* ── Doc-type badge ─────────────────────────────────────────────────────────── */

.pf-result-badge {
  display: inline-block !important;
  margin-right: 8px !important;
  padding: 1px 7px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  border-radius: 3px !important;
  background: var(--pf-hover) !important;
  color: var(--pf-text-muted) !important;
  vertical-align: middle !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.pf-result-badge[data-pf-type="note"] {
  background: var(--color-admonition-title-background--note) !important;
  color: var(--color-admonition-title--note) !important;
}
.pf-result-badge[data-pf-type="tip"],
.pf-result-badge[data-pf-type="hint"] {
  background: var(--color-admonition-title-background--tip) !important;
  color: var(--color-admonition-title--tip) !important;
}
.pf-result-badge[data-pf-type="important"] {
  background: var(--color-admonition-title-background--important) !important;
  color: var(--color-admonition-title--important) !important;
}
.pf-result-badge[data-pf-type="seealso"] {
  background: var(--color-admonition-title-background--seealso) !important;
  color: var(--color-admonition-title--seealso) !important;
}
.pf-result-badge[data-pf-type="danger"] {
  background: var(--color-admonition-title-background--danger) !important;
  color: var(--color-admonition-title--danger) !important;
}
.pf-result-badge[data-pf-type="admonition-todo"] {
  background: var(--color-admonition-title-background--admonition-todo) !important;
  color: var(--color-admonition-title--admonition-todo) !important;
}
.pf-result-badge[data-pf-type="warning"] {
  background: var(--color-admonition-title-background--warning) !important;
  color: var(--color-admonition-title--warning) !important;
}
.pf-result-badge[data-pf-type="caution"] {
  background: var(--color-admonition-title-background--caution) !important;
  color: var(--color-admonition-title--caution) !important;
}


/* ── Result title — bold ────────────────────────────────────────────────────── */

.pf-result-title {
  font-weight: 700 !important;
}


/* ── Result excerpt — allow up to 2 lines instead of the default single line ── */

.pf-result-excerpt {
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: unset !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
}


/* ── Result URL path ────────────────────────────────────────────────────────── */

.pf-result-url {
  display: block;
  margin-top: 4px;
  font-size: 11px !important;
  color: var(--pf-text-muted) !important;
  word-break: break-all;
  position: relative; /* stay above the stretched pf-result-link::after overlay */
  z-index: 1;
}


/* ── Permalink icon — rendered via CSS so pagefind never indexes it ─────────── */
/* html_permalinks_icon is set to "" in conf.py; this restores the visual ¶ */
.headerlink::after {
  content: "¶";
}