/* File: /wwwroot/css/inpage-search.css
   (Or your site bundle CSS.)

   Key fixes:
   - Spacer must NOT be display:none; otherwise layout jump/pinStartY measuring gets weird.
   - Keep .is-fixed as class-based fixed positioning (no inline styles).
*/

.inpage-search__row {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}

.inpage-search__count {
    font-size: .9rem;
    opacity: .8;
}

.inpage-search-highlight {
    background: #f5ab35;
    padding: 0.08em;
    border-radius: .15em;
}

.inpage-search-active {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Default (in-flow) */
.inpage-search {
    width: 100%;
    background: #fff;
    max-width: 550px;
}

/* Placeholder used when we switch to fixed to prevent layout jump */
.inpage-search-spacer {
    display: block; /* IMPORTANT (was none) */
    height: 0;
    width: 100%;
}

/*
  "Sticky simulation":
  When JS adds .is-fixed, the widget becomes fixed.
  --inpage-search-top lets you pin it under an existing fixed header.
*/
.inpage-search.is-fixed {
    position: fixed;
    top: var(--inpage-search-top, 0px);
    left: 0;
    right: 0;
    z-index: 1050;
    border-bottom: 1px solid rgba(0,0,0,.1);
    padding: .5rem .75rem;
}

/* When jumping to matches, keep them below the pinned bar
   (JS also enforces extra spacing with its own scroll math) */
:root {
    --inpage-search-offset: 80px;
}

mark.inpage-search-highlight {
    scroll-margin-top: var(--inpage-search-offset);
}