:root {
  --strawsearch-text: "Search EmployNZ Knowledge Base";

  --strawsearch-border-color: var(--e-global-color-ca8364b, #eaecf0);
  --strawsearch-border-thickness: 3px;
  --strawsearch-border-radius: 5px;

  --strawsearch-padding: 10px;

  --strawsearch-vertical-position: 9.4%;
  --strawsearch-vertical-position-tablet: 15%;
  --strawsearch-vertical-position-mobile: 10%;

  --strawsearch-slash-border-color: var(--strawsearch-border-color);
  --strawsearch-slash-border-thickness: 2px;
  --strawsearch-slash-border-radius: var(--strawsearch-border-radius);
  --strawsearch-slash-color: var(--strawsearch-border-color);

  --strawsearch-right-badge-padding-inline: 8px;
  --strawsearch-right-badge-padding-block: 2px;
  /* Computed width for the inline close (×) button */
  --strawsearch-close-width: calc(
    1ch /* content width for single character */ +
      var(--strawsearch-right-badge-padding-inline) * 2 /* left+right padding */ +
      var(--strawsearch-slash-border-thickness) * 2 /* left+right border */
  );

  --strawsearch-crumb-gap: 2px;
  --strawsearch-crumb-sep-char: ">";
  --strawsearch-crumb-sep-color: var(--e-global-color-secondary, #54595f);
  --strawsearch-crumb-font-size: 14px;
  --strawsearch-crumb-font-weight: 600;

  --strawsearch-highlight-bg: #ffd97978;
  --strawsearch-highlight-padding-block: 1.5px;
  --strawsearch-highlight-padding-inline: 2px;
  --strawsearch-highlight-rgba: rgba(
    255,
    217,
    121,
    0.48
  ); /* same color as #ffd97978 */
  --strawsearch-hit-radius: var(--strawsearch-first-item-radius, 5px);
  --strawsearch-hit-inset: var(--strawsearch-first-hover-border-width, 3px);

  --strawsearch-fade-duration: 4s;

  --strawsearch-modal-width-pct: 47.5;
  --strawsearch-modal-height-pct: 80;
  --strawsearch-results-max-height: 60vh;

  --strawsearch-scrollbar-width: 6px;
  --strawsearch-scrollbar-color: var(--e-global-color-ca8364b, #eaecf0);
  --strawsearch-scrollbar-radius: 5px;
  --strawsearch-scrollbar-gap: 12.5px;

  --strawsearch-excerpt-color: var(--e-global-color-secondary, #54595f);

  --strawsearch-item-gap: 16px;
  --strawsearch-item-padding-block: 8px;
  --strawsearch-item-padding-inline: 0;
  --strawsearch-item-border-thickness: 3px;
  --strawsearch-item-border-radius: 5px;
  --strawsearch-item-border-color: var(--strawsearch-border-color);

  --strawsearch-first-item-bg: var(--strawsearch-highlight-bg);
  --strawsearch-first-item-radius: 5px;
  --strawsearch-first-hover-border-width: 3px;

  /* Resource (external) highlight color — shared for top and focused items */
  --strawsearch-resource-bg: #d1283037;

  --strawsearch-results-right-pad: var(--strawsearch-padding);

  /* Glossary keyboard-focus (tab) highlight color */
  --strawsearch-glossary-kbd-bg: #288bd154;

  /* === Added: on‑page (destination) highlight controls === */
  --strawsearch-onpage-spread: calc(
    var(--strawsearch-highlight-padding-inline) - 2px
  ); /* bigger halo */
  --strawsearch-onpage-radius: var(--strawsearch-hit-radius); /* match modal */

  /* Filter pill max widths (content box); used to keep consistent padding */
  --strawsearch-filter-max-desktop: 18ch; /* legacy (border-box) */
  --strawsearch-filter-max-mobile: 8ch; /* legacy (border-box) */
  /* Preferred: content-area max (excludes padding/border) */
  --strawsearch-filter-content-max-desktop: 18ch;
  --strawsearch-filter-content-max-mobile: 8ch;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.strawsearch-fake-input,
.strawsearch-fake-input .ssi-text::before,
.strawsearch-fake-input .ssi-right::before,
.strawsearch-modal-body input#strawsearchInput {
  color: var(--e-global-color-secondary);
  font-family: var(--e-global-typography-b2bcdb0-font-family), Sans-serif;
  font-weight: var(--e-global-typography-b2bcdb0-font-weight);
}

.strawsearch-modal-body input#strawsearchInput::placeholder {
  color: var(--e-global-color-secondary);
  opacity: 1;
  font-family: var(--e-global-typography-b2bcdb0-font-family), Sans-serif;
  font-weight: var(--e-global-typography-b2bcdb0-font-weight);
}

.strawsearch-modal-body input#strawsearchInput {
  border: var(--strawsearch-border-thickness) solid
    var(--strawsearch-border-color);
  border-radius: var(--strawsearch-border-radius);
  width: 100%;
  padding-left: var(--strawsearch-padding);
  padding-right: var(--strawsearch-padding);
  box-sizing: border-box;
}

.strawsearch-modal-body input#strawsearchInput:focus {
  outline: none;
  border: var(--strawsearch-border-thickness) solid
    var(--strawsearch-border-color);
  border-radius: var(--strawsearch-border-radius);
}

.strawsearch-fake-input {
  border: var(--strawsearch-border-thickness) solid
    var(--strawsearch-border-color);
  border-radius: var(--strawsearch-border-radius);
  padding: var(--strawsearch-padding);
  width: 100%;
  box-sizing: border-box;
  cursor: text;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ssi-text {
  flex: 1 1 auto;
}
.ssi-text::before {
  content: var(--strawsearch-text);
  line-height: 1;
}

.ssi-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  border: var(--strawsearch-slash-border-thickness) solid
    var(--strawsearch-slash-border-color);
  border-radius: var(--strawsearch-slash-border-radius);
  padding: var(--strawsearch-right-badge-padding-block)
    var(--strawsearch-right-badge-padding-inline);
  line-height: 1;
  color: var(--strawsearch-slash-color);
}
.ssi-right::before {
  content: "/";
}

/* Close button styled like the "/" badge */
/* Input wrapper with inline × button */
.strawsearch-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 5;
}

/* Add right padding so text doesn't overlap × */
.strawsearch-input-wrap input#strawsearchInput {
  /* reserve space for filter pill + close button */
  --strawsearch-filter-reserved: 12ch;
  padding-right: calc(
    var(--strawsearch-close-width) + var(--strawsearch-filter-reserved)
  );
}

/* Inline X button — identical to "/" badge */
.strawsearch-input-wrap .strawsearch-close {
  position: absolute;
  top: 50%;
  right: var(--strawsearch-padding);
  transform: translateY(-50%);
  inline-size: var(--strawsearch-close-width);
  min-inline-size: var(--strawsearch-close-width);
  margin-left: 0;
  border: var(--strawsearch-slash-border-thickness) solid
    var(--strawsearch-slash-border-color);
  border-radius: var(--strawsearch-slash-border-radius);
  padding: var(--strawsearch-right-badge-padding-block)
    var(--strawsearch-right-badge-padding-inline);
  line-height: 1;
  color: var(--e-global-color-text, #000); /* Elementor text color */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;

  /* Prevent Elementor/global hover effects */
  transition: none !important;
}

/* Filter pill (right side, to the left of the ×) */
.strawsearch-input-wrap .strawsearch-filter {
  position: absolute;
  top: 50%;
  /* place just to the left of the close button; gap equals X→border start (padding - 3px) */
  right: calc(
    var(--strawsearch-padding) + var(--strawsearch-close-width) +
      (var(--strawsearch-padding) - var(--strawsearch-border-thickness))
  );
  transform: translateY(-50%);
  border: var(--strawsearch-slash-border-thickness) solid
    var(--strawsearch-slash-border-color);
  border-radius: var(--strawsearch-slash-border-radius);
  padding: var(--strawsearch-right-badge-padding-block)
    var(--strawsearch-right-badge-padding-inline);
  line-height: 1;
  color: var(--e-global-color-text, #000);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  /* Include padding/border in the width; compute from desired content width */
  box-sizing: border-box;
  max-width: calc(
    var(--strawsearch-filter-content-max-desktop, 18ch) +
      (var(--strawsearch-right-badge-padding-inline) * 2) +
      (var(--strawsearch-slash-border-thickness) * 2)
  );
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: none !important;
}

/* Mobile: keep filter inline but compact */
@media (max-width: 600px) {
  /* Reserve less space to the right of the input (only compact filter + ×) */
  .strawsearch-input-wrap input#strawsearchInput {
    --strawsearch-filter-reserved: calc(
      var(--strawsearch-filter-content-max-mobile, 8ch) +
        (var(--strawsearch-right-badge-padding-inline) * 2) +
        (var(--strawsearch-slash-border-thickness) * 2)
    );
  }
  /* Limit the pill width; text is shortened by JS to "Filter" on small screens */
  .strawsearch-input-wrap .strawsearch-filter {
    max-width: calc(
      var(--strawsearch-filter-content-max-mobile, 8ch) +
        (var(--strawsearch-right-badge-padding-inline) * 2) +
        (var(--strawsearch-slash-border-thickness) * 2)
    );
  }
}
.strawsearch-input-wrap .strawsearch-filter:hover,
.strawsearch-input-wrap .strawsearch-filter:focus,
.strawsearch-input-wrap .strawsearch-filter:active {
  color: var(--e-global-color-text, #000) !important;
  border: var(--strawsearch-slash-border-thickness) solid
    var(--strawsearch-slash-border-color) !important;
  border-radius: var(--strawsearch-slash-border-radius) !important;
  background: none !important;
  box-shadow: none !important;
}

/* Dropdown menu for filter */
.strawsearch-filter-menu {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 22.5%;
  width: 20%;
  max-width: none;
  min-width: 0;
  height: var(--strawsearch-results-max-height);
  max-height: var(--strawsearch-results-max-height);
  margin-top: var(--strawsearch-padding);
  overflow: auto;
  background: #fff;
  border: var(--strawsearch-border-thickness) solid
    var(--strawsearch-border-color);
  border-radius: var(--strawsearch-border-radius);
  box-shadow: none;
  padding: 6px 0;
  font-family: var(--e-global-typography-b2bcdb0-font-family), Sans-serif;
  font-weight: var(--e-global-typography-b2bcdb0-font-weight);
  color: var(--e-global-color-secondary);
}
.strawsearch-filter-menu:not([hidden]) {
  margin-left: var(--strawsearch-padding);
}
.strawsearch-filter-menu[hidden] {
  display: none;
}
.strawsearch-filter-menu .ssf-group-title {
  padding: 6px 12px;
  font-weight: 600;
  color: var(--e-global-color-secondary);
}
.strawsearch-filter-menu .ssf-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 8px 12px;
  cursor: pointer;
  font: inherit;
  color: var(--e-global-color-secondary, #54595f);
  white-space: normal;
  overflow-wrap: break-word;
}
.strawsearch-filter-menu .ssf-item:hover,
.strawsearch-filter-menu .ssf-item[aria-selected="true"],
.strawsearch-filter-menu .ssf-item:focus,
.strawsearch-filter-menu .ssf-item:active {
  background: none;
  color: var(--e-global-color-text, #000);
  outline: none;
}

@media (max-width: 768px) {
  .strawsearch-results-wrap {
    flex-direction: column;
  }

  .strawsearch-filter-menu {
    width: 100%;
    max-width: none;
    flex: 0 0 auto;
    height: auto;
    max-height: none;
    margin-left: 0;
    min-width: 0;
  }

  .strawsearch-filter-menu:not([hidden]) {
    margin-left: 0;
  }
}

/* Tablet: stack and show filter above results when open */
@media (max-width: 1024px) {
  .strawsearch-results-wrap {
    flex-direction: column;
    /* ensure rail alignment when stacked */
    --strawsearch-filter-offset: 0px;
  }
  .strawsearch-filter-menu {
    width: 100%;
    max-width: none;
    flex: 0 0 auto;
    height: auto;
    max-height: none;
    min-width: 0;
  }
  /* When the filter menu is visible, place it before the results list */
  .strawsearch-results-wrap.strawsearch-filter-open
    #strawsearchFilterMenu:not([hidden]) {
    order: -1;
    margin-bottom: var(--strawsearch-padding);
  }
  /* Remove desktop left margin when stacked */
  .strawsearch-filter-menu:not([hidden]) {
    margin-left: 0;
  }
}

.strawsearch-input-wrap .strawsearch-close:hover,
.strawsearch-input-wrap .strawsearch-close:focus,
.strawsearch-input-wrap .strawsearch-close:active {
  color: var(--e-global-color-text, #000) !important;
  border-color: var(--strawsearch-slash-border-color) !important;
  border: var(--strawsearch-slash-border-thickness) solid
    var(--strawsearch-slash-border-color);
  border-radius: var(--strawsearch-slash-border-radius);
  background: none !important;
  box-shadow: none !important;
}

/* results */

.strawsearch-results-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
  --strawsearch-filter-offset: 0px;
}

.strawsearch-results-pane {
  position: relative;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

#strawsearchResults {
  margin-top: var(--strawsearch-padding);
  padding-left: var(--strawsearch-padding);
  max-height: var(--strawsearch-results-max-height);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  /* Ensure an opaque backdrop behind scrolling content on mobile/tablet */
  background: #fff;
}
#strawsearchResults::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}
#strawsearchResults::-webkit-scrollbar-track {
  background: transparent;
}
#strawsearchResults::-webkit-scrollbar-thumb {
  background-color: var(--strawsearch-scrollbar-color);
  border-radius: var(--strawsearch-scrollbar-radius);
  border: none;
}

.strawsearch-scroll-rail {
  position: absolute;
  top: var(--strawsearch-padding);
  bottom: 0;
  right: calc(
    -1 * var(--strawsearch-scrollbar-gap) - var(--strawsearch-filter-offset, 0px)
  );
  width: var(--strawsearch-scrollbar-width);
  background: transparent;
  border-radius: var(--strawsearch-scrollbar-radius);
  pointer-events: auto;
}
.strawsearch-scroll-thumb {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40px;
  background: var(--strawsearch-scrollbar-color);
  border-radius: var(--strawsearch-scrollbar-radius);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.strawsearch-scroll-thumb.is-dragging {
  cursor: grabbing;
}

#strawsearchResults > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#strawsearchResults > ul > li {
  margin: 0 0 var(--strawsearch-item-gap) 0;
}

#strawsearchResults .strawsearch-item {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: var(--strawsearch-item-padding-block)
    var(--strawsearch-item-padding-inline);
  padding-right: var(--strawsearch-results-right-pad);
  border-bottom: var(--strawsearch-item-border-thickness) solid
    var(--strawsearch-item-border-color);
  border-radius: 0 0 0 0;
}
#strawsearchResults li:last-child .strawsearch-item {
  border-bottom: 0;
}

#strawsearchResults .strawsearch-item:hover .strawsearch-result-title,
#strawsearchResults .strawsearch-item:hover .strawsearch-excerpt {
  color: var(--e-global-color-text);
}

/* Table defaults inside excerpts: keep spacing readable */
.strawsearch-excerpt table {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
}
.strawsearch-excerpt th,
.strawsearch-excerpt td {
  border: 1px solid var(--strawsearch-border-color, #eaecf0);
  padding: 6px 8px;
  vertical-align: top;
}
.strawsearch-excerpt td p,
.strawsearch-excerpt td li {
  margin: 0 0 4px 0;
}
.strawsearch-excerpt td p:last-child,
.strawsearch-excerpt td li:last-child {
  margin-bottom: 0;
}

/* First result wrapper + highlight + border */
#strawsearchResults ul > li:first-child .strawsearch-item {
  position: relative;
  z-index: 0;
  background: none;
  border: none;
  border-radius: var(--strawsearch-first-item-radius);
}
#strawsearchResults ul > li:first-child .strawsearch-item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--strawsearch-padding));
  right: 0;
  background: var(--strawsearch-first-item-bg);
  border-radius: var(--strawsearch-first-item-radius);
  z-index: -1;
  pointer-events: none;
  box-sizing: border-box;
}
#strawsearchResults ul > li:first-child .strawsearch-item::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--strawsearch-padding));
  right: 0;
  border: var(--strawsearch-first-hover-border-width, 3px) solid
    var(--strawsearch-first-item-bg);
  border-radius: var(--strawsearch-first-item-radius);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
  z-index: 1;
  box-sizing: border-box;
}
#strawsearchResults ul > li:first-child .strawsearch-item:hover::after {
  opacity: 1;
}

#strawsearchResults .strawsearch-item.is-glossary {
  cursor: default;
}
#strawsearchResults
  .strawsearch-item.is-glossary:hover
  .strawsearch-result-title,
#strawsearchResults .strawsearch-item.is-glossary:hover .strawsearch-excerpt {
  color: inherit;
}
#strawsearchResults .strawsearch-item.is-glossary:hover::after {
  opacity: 0 !important;
}

#strawsearchResults .strawsearch-item:focus,
#strawsearchResults .strawsearch-item:focus-visible {
  outline: none;
}
#strawsearchResults .strawsearch-item:focus-visible .strawsearch-result-title,
#strawsearchResults .strawsearch-item:focus-visible .strawsearch-excerpt {
  color: var(--e-global-color-text);
}
#strawsearchResults ul > li:first-child .strawsearch-item:focus-visible::after {
  opacity: 1;
}
#strawsearchResults .strawsearch-item.is-glossary:focus,
#strawsearchResults .strawsearch-item.is-glossary:focus-visible {
  outline: none;
}
#strawsearchResults
  .strawsearch-item.is-glossary:focus-visible
  .strawsearch-result-title,
#strawsearchResults
  .strawsearch-item.is-glossary:focus-visible
  .strawsearch-excerpt {
  color: inherit;
}
#strawsearchResults .strawsearch-item.is-glossary:focus-visible::after {
  opacity: 0 !important;
}

#strawsearchResults .strawsearch-item.is-kbd {
  position: relative;
  z-index: 0;
  background: none;
  border: none;
  border-radius: var(--strawsearch-first-item-radius);
}
#strawsearchResults .strawsearch-item.is-kbd::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--strawsearch-padding));
  right: 0;
  background: var(--strawsearch-first-item-bg);
  border-radius: var(--strawsearch-first-item-radius);
  z-index: -1;
  pointer-events: none;
}
#strawsearchResults .strawsearch-item.is-kbd::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--strawsearch-padding));
  right: 0;
  border: var(--strawsearch-first-hover-border-width, 3px) solid
    var(--strawsearch-first-item-bg);
  border-radius: var(--strawsearch-first-item-radius);
  opacity: 1 !important;
  pointer-events: none;
}
#strawsearchResults .strawsearch-item.is-glossary.is-kbd::before {
  background: var(--strawsearch-glossary-kbd-bg) !important;
}
#strawsearchResults .strawsearch-item.is-glossary.is-kbd::after {
  border-color: var(--strawsearch-glossary-kbd-bg) !important;
}
#strawsearchResults .strawsearch-item.is-glossary.is-kbd::after {
  opacity: 1 !important;
}
#strawsearchResults .strawsearch-item.is-glossary.is-kbd:focus-visible::after {
  opacity: 1 !important;
}
#strawsearchResults .strawsearch-item.is-kbd mark.strawsearch-hit {
  background: transparent !important;
  color: inherit !important;
  font-weight: inherit !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.strawsearch-glossary-expanded {
  margin-top: 6px;
}
.strawsearch-glossary-expanded .strawsearch-excerpt {
  margin-top: 0;
}

.strawsearch-result-title {
  color: var(--e-global-color-secondary);
  text-decoration: none;
  font-family: var(--e-global-typography-b2bcdb0-font-family), Sans-serif;
  font-weight: var(--e-global-typography-b2bcdb0-font-weight);
  font-size: var(--e-global-typography-h2-font-size, 32px) !important;
  line-height: var(--e-global-typography-h2-line-height, 1.2) !important;
  transition: color 0.15s ease-in-out;
  overflow-wrap: break-word;
  word-break: normal;
  line-break: auto;
  hyphens: auto;
}

.strawsearch-excerpt {
  color: var(--strawsearch-excerpt-color);
  font-family: var(--e-global-typography-text-font-family, inherit) !important;
  font-size: var(--e-global-typography-text-font-size, 16px) !important;
  font-weight: var(--e-global-typography-text-font-weight, 400) !important;
  line-height: var(--e-global-typography-text-line-height, 1.6) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  margin-top: 8px;
  overflow-wrap: break-word;
  word-break: normal;
  line-break: auto;
  hyphens: auto;
}

.strawsearch-excerpt ul {
  margin: 8px 0;
  padding-left: 1.25rem;
  list-style-type: disc;
  list-style-position: outside;
}

.strawsearch-excerpt ol {
  margin: 8px 0;
  padding-left: 1.25rem;
  list-style-type: decimal;
  list-style-position: outside;
}

#strawsearchResults .strawsearch-empty {
  color: var(--e-global-color-text, #000);
  font-family: var(--e-global-typography-text-font-family, inherit) !important;
  font-size: var(--e-global-typography-text-font-size, 16px) !important;
  font-weight: var(--e-global-typography-text-font-weight, 400) !important;
  line-height: var(--e-global-typography-text-line-height, 1.6) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

#strawsearchResults ul > li:first-child .strawsearch-result-title,
#strawsearchResults ul > li:first-child .strawsearch-excerpt {
  color: var(--e-global-color-text) !important;
}

mark.strawsearch-hit {
  background: var(--strawsearch-highlight-bg);
  color: var(--e-global-color-text);
  font-size: inherit;
  font-weight: 600;
  padding: var(--strawsearch-highlight-padding-block)
    var(--strawsearch-highlight-padding-inline);
  border-radius: var(--strawsearch-hit-radius);
}
#strawsearchResults ul > li:first-child mark.strawsearch-hit {
  background: transparent !important;
  color: inherit !important;
  font-weight: inherit !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
#strawsearchResults.kbd-on-nonfirst ul > li:first-child .strawsearch-item {
  border-bottom: var(--strawsearch-item-border-thickness) solid
    var(--strawsearch-item-border-color) !important;
  border-radius: 0 0 0 0 !important;
}
#strawsearchResults.kbd-on-nonfirst
  ul
  > li:first-child
  .strawsearch-item::before {
  background: none !important;
}
#strawsearchResults.kbd-on-nonfirst
  ul
  > li:first-child
  .strawsearch-item::after {
  opacity: 0 !important;
}
#strawsearchResults.kbd-on-nonfirst
  ul
  > li:first-child
  .strawsearch-result-title {
  color: var(--strawsearch-excerpt-color) !important;
}
#strawsearchResults.kbd-on-nonfirst ul > li:first-child .strawsearch-excerpt {
  color: var(--strawsearch-excerpt-color) !important;
}
#strawsearchResults.kbd-on-nonfirst ul > li:first-child mark.strawsearch-hit {
  background: var(--strawsearch-highlight-bg) !important;
  color: var(--e-global-color-text) !important;
  font-weight: 600 !important;
  padding: var(--strawsearch-highlight-padding-block)
    var(--strawsearch-highlight-padding-inline) !important;
  border-radius: 3px !important;
}

.strawsearch-crumbs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--strawsearch-crumb-gap);
  color: var(--e-global-color-secondary);
  font-family: var(--e-global-typography-text-font-family, inherit) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: var(--e-global-typography-text-line-height, 1.6) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  margin-bottom: 2px;
}
.strawsearch-crumbs .crumb {
  color: var(--e-global-color-secondary);
}
.strawsearch-crumbs .crumb + .crumb::before {
  content: var(--strawsearch-crumb-sep-char);
  color: var(--strawsearch-crumb-sep-color);
  margin: 0 var(--strawsearch-crumb-gap);
}

.strawsearch-modal {
  display: none;
  position: fixed;
  z-index: 2147483645 !important; /* max safe integer for z-index */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: flex-start;
  visibility: hidden;
  overflow-y: auto;
}

.strawsearch-modal-content {
  background: #fff;
  border-radius: var(--strawsearch-border-radius);
  width: calc(var(--strawsearch-modal-width-pct, 90) * 1%);
  height: auto;
  max-height: calc(var(--strawsearch-modal-height-pct, 80) * 1%);
  max-height: min(
    calc(var(--strawsearch-modal-height-pct, 80) * 1%),
    var(--ss-vvh, 100svh)
  );
  max-width: none;
  min-width: 900px;
  padding: 20px;
  margin-top: var(--strawsearch-vertical-position);
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.strawsearch-modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--strawsearch-padding);
  min-height: 0;
}

.strawsearch-modal-body .strawsearch-results-wrap {
  flex: 1 1 auto;
  min-height: 0;
}

@media (max-width: 1024px) {
  .strawsearch-modal-content {
    margin-top: var(--strawsearch-vertical-position-tablet);
  }
}
@media (max-width: 767px) {
  .strawsearch-modal-content {
    margin-top: var(--strawsearch-vertical-position-mobile);
  }
}

/* =========================================
   Highlights & animations
   ========================================= */

/* (Modal list) jump target highlight: subtle inset glow, then fade out */
@keyframes strawsearchFade {
  0% {
    background: var(--strawsearch-highlight-bg);
    box-shadow: 0 0 0 var(--strawsearch-hit-inset)
      var(--strawsearch-highlight-bg) inset;
  }
  60% {
    background: var(--strawsearch-highlight-bg);
    box-shadow: 0 0 0 calc(var(--strawsearch-hit-inset) * 0.5)
      var(--strawsearch-highlight-bg) inset;
  }
  100% {
    background: transparent;
    box-shadow: 0 0 0 0 transparent inset;
  }
}
.strawsearch-jump-highlight {
  animation: strawsearchFade var(--strawsearch-fade-duration) ease-out forwards;
  transition: background 0.25s ease-out, box-shadow 0.25s ease-out;
  border-radius: var(--strawsearch-hit-radius);
}

/* After fade: ensure fully neutral text */
html.strawsearch-onpage mark.strawsearch-hit.strawsearch-hit--jumped {
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  font-weight: inherit !important;
  padding: 0 !important;
  color: inherit !important;
}

/* Keep modal marks exactly as before, even when on-page class is present */
html.strawsearch-onpage #strawsearchModal mark.strawsearch-hit {
  background: var(--strawsearch-highlight-bg) !important;
  color: var(--e-global-color-text) !important;
  font-weight: 600 !important;
  padding: var(--strawsearch-highlight-padding-block)
    var(--strawsearch-highlight-padding-inline) !important;
  border-radius: var(--strawsearch-hit-radius) !important;
  box-shadow: none !important;
}

/* === On‑page halo fade (no layout shift) — additive === */

/* ensure the real text stays neutral on the page */
html.strawsearch-onpage mark.strawsearch-hit {
  position: relative; /* anchor the halo */
  z-index: 0;
  background: transparent !important; /* no real bg = no reflow */
  box-shadow: none !important;
  color: inherit !important;
  font-weight: inherit !important;
  padding: 0 !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Hide the native browser text-fragment highlight so only our halo shows */
html.strawsearch-onpage ::target-text {
  background: transparent !important;
  color: inherit !important;
  text-decoration: none !important;
}

/* the fading halo lives on ::before so text metrics never change */
html.strawsearch-onpage
  mark.strawsearch-hit.strawsearch-jump-highlight::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* grow slightly around the text to match modal’s visual size */
  top: calc(-1 * var(--strawsearch-highlight-padding-block));
  bottom: calc(-1 * var(--strawsearch-highlight-padding-block));
  left: calc(-1 * var(--strawsearch-highlight-padding-inline));
  right: calc(-1 * var(--strawsearch-highlight-padding-inline));
  border-radius: var(--strawsearch-onpage-radius, 5px);
  background: var(--strawsearch-highlight-rgba, rgba(255, 217, 121, 0.48));
  /* soft outer glow so multi-line looks consistent */
  box-shadow: 0 0 0 var(--strawsearch-onpage-spread, 2px)
    var(--strawsearch-highlight-rgba, rgba(255, 217, 121, 0.48));
  pointer-events: none;
  animation: strawsearchHaloFade var(--strawsearch-fade-duration, 4s) ease-out
    forwards;
}

/* smooth opacity fade (no color interpolation glitches) */
@keyframes strawsearchHaloFade {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* after fade, keep things perfectly neutral */
html.strawsearch-onpage mark.strawsearch-hit.strawsearch-hit--jumped::before {
  opacity: 0 !important;
}

/* Force our on‑page halo color above aggressive widget styles */
html.strawsearch-onpage
  body
  mark.strawsearch-hit.strawsearch-jump-highlight::before {
  background: var(
    --strawsearch-highlight-rgba,
    rgba(255, 217, 121, 0.48)
  ) !important;
  box-shadow: 0 0 0 var(--strawsearch-onpage-spread, 2px)
    var(--strawsearch-highlight-rgba, rgba(255, 217, 121, 0.48)) !important;
}

/* And make sure the actual <mark> stays neutral no matter what */
html.strawsearch-onpage body mark.strawsearch-hit {
  background: transparent !important;
  color: inherit !important;
}

/* Reduced motion: no animation; keep static background where relevant */
@media (prefers-reduced-motion: reduce) {
  .strawsearch-jump-highlight,
  html.strawsearch-onpage .strawsearch-jump-highlight {
    animation: none !important;
  }
}

/* === StrawSearch: full-screen modal on phones === */
@media (max-width: 1024px) {
  /* Make the overlay stretch so the dialog can fill the viewport */
  .strawsearch-modal {
    align-items: stretch;
    background: rgba(0, 0, 0, 0.5);
  }

  /* Fill the usable viewport (updated via --ss-vvh JS) */
  .strawsearch-modal-content {
    width: 100%;
    max-width: none;
    min-width: auto;
    height: var(--ss-vvh, 100svh);
    max-height: var(--ss-vvh, 100svh);
    margin: 0; /* override desktop top offset */
    border-radius: 0; /* page-like on phones */
    background: #fff; /* ensure full modal backdrop is opaque */
    overflow: hidden; /* prevent inner scroll from revealing overlay */
    /* keep everything else the same, but move bottom spacing to the list */
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    padding-right: 16px;
    padding-left: 16px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
  }

  /* Let the inner column stretch and give its child the scroll */
  .strawsearch-modal-body {
    flex: 1 1 auto;
    min-height: 0; /* critical for flex + overflow */
    gap: var(--strawsearch-padding);
    background: #fff; /* keep body opaque when filter toggles */
  }

  .strawsearch-modal-body .strawsearch-results-wrap {
    flex: 1 1 auto;
    min-height: 0; /* allow it to shrink with keyboard */
    display: flex;
    flex-direction: column;
    background: #fff; /* avoid gaps above/below list */
  }

  /* The list owns the scroll on mobile; remove desktop cap */
  #strawsearchResults {
    flex: 1 1 auto;
    max-height: none !important;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--strawsearch-padding); /* visual breathing room */
  }

  /* Keep custom rail spanning the full scrollable area */
  .strawsearch-scroll-rail {
    top: var(--strawsearch-padding);
    bottom: 0;
  }
  /* Ensure pane behind the list and rail is opaque */
  .strawsearch-results-pane {
    background: #fff;
  }

  /* Make the results pane a flex column so the list can flex and scroll */
  .strawsearch-results-pane {
    display: flex;
    flex-direction: column;
    min-height: 0; /* allow inner scroller to shrink within viewport */
  }
}

/* Hide the "/" badge on tablet and mobile */
@media (max-width: 1024px) {
  .ssi-right {
    display: none !important;
  }
}

/* divider removed per request */

/* ===== Resource + Firstlike wrapper highlights ===== */
/* Top resource uses resource wrapper color instead of yellow */
#strawsearchResults ul > li:first-child .strawsearch-item.is-resource::before {
  background: var(--strawsearch-resource-bg) !important;
}
#strawsearchResults ul > li:first-child .strawsearch-item.is-resource::after {
  border-color: var(--strawsearch-resource-bg) !important;
  opacity: 1 !important; /* show border by default, like highlighted */
}

/* Top glossary uses glossary wrapper color instead of yellow */
#strawsearchResults ul > li:first-child .strawsearch-item.is-glossary::before {
  background: var(--strawsearch-glossary-kbd-bg) !important;
}
#strawsearchResults ul > li:first-child .strawsearch-item.is-glossary::after {
  border-color: var(--strawsearch-glossary-kbd-bg) !important;
  opacity: 1 !important; /* show border by default, like highlighted */
}

/* Any resource when keyboard-focused should also use the resource color (blue) */
#strawsearchResults .strawsearch-item.is-resource.is-kbd::before {
  background: var(--strawsearch-resource-bg) !important;
}
#strawsearchResults .strawsearch-item.is-resource.is-kbd::after {
  border-color: var(--strawsearch-resource-bg) !important;
  opacity: 1 !important;
}

/* Ensure no yellow inline marks inside the blue top resource */
#strawsearchResults
  ul
  > li:first-child
  .strawsearch-item.is-resource
  mark.strawsearch-hit {
  background: transparent !important;
  color: inherit !important;
  font-weight: inherit !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
/* Even when keyboard navigation flips first-item state, keep resource marks neutral */
#strawsearchResults.kbd-on-nonfirst
  ul
  > li:first-child
  .strawsearch-item.is-resource
  mark.strawsearch-hit {
  background: transparent !important;
  color: inherit !important;
  font-weight: inherit !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
/* Hide blue wrapper itself once keyboard moved off the first item */
#strawsearchResults.kbd-on-nonfirst
  ul
  > li:first-child
  .strawsearch-item.is-resource::before {
  background: none !important;
}
#strawsearchResults.kbd-on-nonfirst
  ul
  > li:first-child
  .strawsearch-item.is-resource::after {
  opacity: 0 !important;
}

/* Any-position "first-like" wrapper highlight (same as first item yellow) */
#strawsearchResults .strawsearch-item.is-firstlike {
  position: relative;
  z-index: 0;
  background: none;
  border: none;
  border-radius: var(--strawsearch-first-item-radius);
}
#strawsearchResults .strawsearch-item.is-firstlike::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--strawsearch-padding));
  right: 0;
  background: var(--strawsearch-first-item-bg);
  border-radius: var(--strawsearch-first-item-radius);
  z-index: -1;
  pointer-events: none;
  box-sizing: border-box;
}
#strawsearchResults .strawsearch-item.is-firstlike::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--strawsearch-padding));
  right: 0;
  border: var(--strawsearch-first-hover-border-width, 3px) solid
    var(--strawsearch-first-item-bg);
  border-radius: var(--strawsearch-first-item-radius);
  opacity: 0; /* Hide border by default; show on keyboard focus via .is-kbd */
  transition: opacity 0.15s ease;
  pointer-events: none;
  z-index: 1;
  box-sizing: border-box;
}

/* Neutralize inline marks inside the injected first-like item by default */
#strawsearchResults .strawsearch-item.is-firstlike mark.strawsearch-hit {
  background: transparent !important;
  color: inherit !important;
  font-weight: inherit !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* After moving keyboard focus past it, restore normal mark styling (when not focused) */
#strawsearchResults.kbd-on-nonfirst
  .strawsearch-item.is-firstlike:not(.is-kbd)
  mark.strawsearch-hit {
  background: var(--strawsearch-highlight-bg) !important;
  color: var(--e-global-color-text) !important;
  font-weight: 600 !important;
  padding: var(--strawsearch-highlight-padding-block)
    var(--strawsearch-highlight-padding-inline) !important;
  border-radius: 3px !important;
}
/* Hide the first-like yellow wrapper once keyboard moved off the first item */
#strawsearchResults.kbd-on-nonfirst .strawsearch-item.is-firstlike::before {
  background: none !important;
}
#strawsearchResults.kbd-on-nonfirst .strawsearch-item.is-firstlike::after {
  opacity: 0 !important;
}

/* When the injected section (first-like) is keyboard-focused, restore its wrapper */
#strawsearchResults.kbd-on-nonfirst
  .strawsearch-item.is-firstlike.is-kbd::before {
  background: var(--strawsearch-first-item-bg) !important;
}
#strawsearchResults.kbd-on-nonfirst
  .strawsearch-item.is-firstlike.is-kbd::after {
  opacity: 1 !important;
}