/*
 * Algolia site-search styling for Ampeg (WEB-4224).
 *
 * Ported from mycordoba/css/cordoba/2023/algolia.css. Structure and selectors
 * are identical so the two can be diffed; only the palette is remapped. Cordoba
 * themes on its brand brown (#7A3A00) over warm neutrals, which would look wrong
 * here -- Ampeg's 2020 design is monochrome (Barlow over #000 to #f0f0f0), so
 * the accent becomes black and the warm greys become Ampeg's cool ones:
 *
 *   #7A3A00 accent        -> #000000
 *   #4a4139 body text     -> #333333
 *   #6d6259 muted text    -> #4d4d4d
 *   #8a7f75 quiet text    -> #737373
 *   #a2988e faintest text -> #999999
 *   #d8cec4 border        -> #cccccc
 *   #e2dad2 / #ece5de     -> #e5e5e5
 *   #f1ece7 tint          -> #f0f0f0
 *   #faf7f4 hover         -> #f7f7f7
 *
 * The one non-grey is the highlight, which uses a soft tint of the Ampeg yellow
 * (#F5D539) already used for the site-maintenance banner in /_topnav.html.
 *
 * Pairs with instantsearch.css reset-min (loaded via the page's css attr) --
 * the reset only normalises widget markup, it carries no theme of its own.
 *
 * Loaded globally from /autohandler, not just on /search/, because the topnav
 * type-ahead panel renders on every page.
 */

.ygg-search {
    padding: 30px 25px 60px;
}

.ygg-search-header {
    margin-bottom: 30px;
}

.ygg-search-header h1 {
    color: #000000;
    font-size: 34px;
    margin: 0 0 18px;
}

/* --- search box --- */

.ygg-search .ais-SearchBox-form {
    display: flex;
    align-items: center;
    border: 1px solid #cccccc;
    border-radius: 3px;
    background: #fff;
    max-width: 640px;
}

.ygg-search .ais-SearchBox-input {
    flex: 1 1 auto;
    border: 0;
    padding: 12px 14px;
    font-size: 17px;
    outline: none;
    background: transparent;
}

.ygg-search .ais-SearchBox-submit,
.ygg-search .ais-SearchBox-reset {
    border: 0;
    background: transparent;
    padding: 0 12px;
    cursor: pointer;
    color: #000000;
}

.ygg-search .ais-SearchBox-submitIcon,
.ygg-search .ais-SearchBox-resetIcon {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

#ais-stats {
    margin-top: 10px;
    color: #4d4d4d;
    font-size: 14px;
}

/* --- facets --- */

/* The counts are right-aligned to the facet column's edge (labelText takes the
   free space), so at md and up they land hard against the results column with
   only bootstrap's 15px gutter between them. Pull the whole facet column in from
   the right to open that seam up.
   Scoped to the breakpoint: below md the columns are stacked full width
   (col-xs-24), where a right inset would just push the counts away from nothing. */
@media (min-width: 992px) {
    .ygg-search-facets {
        padding-right: 60px;
    }
}

.ygg-search-facets h4 {
    color: #000000;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 22px 0 10px;
}

.ygg-search-facets .ais-RefinementList-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ygg-search-facets .ais-RefinementList-item {
    margin-bottom: 6px;
}

.ygg-search-facets .ais-RefinementList-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: normal;
    font-size: 15px;
    margin: 0;
    cursor: pointer;
}

.ygg-search-facets .ais-RefinementList-labelText {
    flex: 1 1 auto;
}

.ygg-search-facets .ais-RefinementList-count {
    color: #737373;
    font-size: 12px;
    background: #f0f0f0;
    border-radius: 10px;
    padding: 1px 8px;
}

.ygg-search-facets .ais-ClearRefinements-button {
    margin-top: 18px;
    border: 1px solid #cccccc;
    background: #fff;
    color: #000000;
    padding: 7px 14px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
}

.ygg-search-facets .ais-ClearRefinements-button--disabled {
    opacity: 0.45;
    cursor: default;
}

.ygg-search-facets .ais-RefinementList-showMore {
    border: 0;
    background: transparent;
    color: #000000;
    padding: 4px 0;
    cursor: pointer;
    font-size: 14px;
    text-decoration: underline;
}

/* --- hits --- */

.ygg-search-results .ais-Hits-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ygg-search-results .ais-Hits-item {
    border-bottom: 1px solid #e5e5e5;
}

.ygg-hit {
    display: flex;
    gap: 18px;
    padding: 18px 4px;
    color: inherit;
    text-decoration: none;
}

.ygg-hit:hover {
    background: #f7f7f7;
    text-decoration: none;
    color: inherit;
}

.ygg-hit-thumb {
    flex: 0 0 72px;
    width: 72px;
}

.ygg-hit-thumb img {
    width: 100%;
    height: auto;
    display: block;
}

.ygg-hit-thumb-empty {
    display: block;
    width: 72px;
    height: 72px;
    background: #f0f0f0;
}

.ygg-hit-body {
    flex: 1 1 auto;
    min-width: 0;
}

.ygg-hit-type {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #737373;
    background: #f0f0f0;
    border-radius: 2px;
    padding: 2px 7px;
    margin-bottom: 6px;
}

.ygg-hit-type-product {
    color: #fff;
    background: #000000;
}

.ygg-hit-title {
    font-size: 19px;
    margin: 0 0 4px;
    color: #000000;
}

.ygg-hit-sku {
    font-size: 12px;
    color: #737373;
    margin-bottom: 4px;
}

.ygg-hit-snippet {
    font-size: 15px;
    color: #333333;
    margin: 0 0 5px;
    /* Snippets are one long line of page text -- clamp so a hit stays scannable. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ygg-hit-path {
    font-size: 12px;
    color: #999999;
}

/* Algolia's default highlight tag is <em>; our index settings ask for <mark>.
   Style both so highlighting shows whichever the index is configured with. */
.ygg-hit mark,
.ygg-hit em {
    background: #faeeb5;
    color: inherit;
    font-style: normal;
    padding: 0 1px;
}

/* The type-ahead panel is dark, so `color: inherit` here would resolve to the
   panel's white and leave white text on pale yellow. Force the dark ink, and use
   the fuller Ampeg yellow since it now sits against #2e2e2e rather than white. */
.ygg-navsearch-hit mark,
.ygg-navsearch-hit em,
.navbar .ygg-navsearch-results a.ygg-navsearch-hit mark,
.navbar .ygg-navsearch-results a.ygg-navsearch-hit em {
    background: #F5D539;
    color: #000000;
    font-style: normal;
    padding: 0 1px;
}

.ygg-hit-empty {
    padding: 40px 4px;
    color: #4d4d4d;
}

/* --- pagination --- */

#ais-pagination {
    margin-top: 28px;
}

#ais-pagination .ais-Pagination-list {
    display: flex;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

#ais-pagination .ais-Pagination-link {
    display: block;
    min-width: 34px;
    text-align: center;
    padding: 6px 9px;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    color: #000000;
    text-decoration: none;
}

#ais-pagination .ais-Pagination-item--selected .ais-Pagination-link {
    background: #000000;
    border-color: #000000;
    color: #fff;
}

#ais-pagination .ais-Pagination-item--disabled .ais-Pagination-link {
    opacity: 0.4;
}

/* --- topnav type-ahead ---
 *
 * Themed DARK here, unlike the Cordoba original's white panel. Ampeg's search
 * subnav is dark (#2e2e2e input on a #333 button, see main.css
 * #search-subnav-container), so a white dropdown reads as bolted on. The results
 * page below the navbar stays light -- only this panel is dark.
 *
 * Specificity matters in this block. main.css has
 *
 *     .navbar .nav-container a { color: #FFF; }   (0,2,1)
 *
 * and the panel is injected inside the navbar, so a bare `.ygg-navsearch-hit`
 * (0,1,0) loses and every title renders white-on-white with only the <mark>
 * visible. Each anchor rule below is therefore duplicated with a `.navbar`
 * ancestor to land at (0,3,1) and win outright rather than relying on this file
 * happening to load after main.css.
 */

.search-desktop-form-container,
.search-mobile-form-container {
    position: relative;
}

.ygg-navsearch-results {
    position: absolute;
    top: 100%;
    /* Geometry here is fiddlier than the other brands'. main.css absolutely
       positions #search-subnav-container .search-desktop-form-field at left:22px,
       and the panel is appended to that field, so the FIELD is the positioning
       ancestor -- not the container as on cordoba/myguild.
       The panel is anchored to the subnav bar's right edge and grows leftward,
       matching the other brands, because the bar itself is right:0 at the
       viewport edge: growing rightward would run off screen.
       The -83px is derived, not guessed: the bar is 330px wide, the field starts
       22px in and is the width of its 225px input, so the field's right edge sits
       330 - 22 - 225 = 83px short of the bar's right edge.
       Consequence to be aware of: at 420px the panel is wider than the 330px bar,
       so it overhangs the black bar's left edge by ~90px. */
    left: auto;
    right: -83px;
    width: 420px;
    max-width: calc(100vw - 40px);
    z-index: 1200;
    background: #2e2e2e;
    border: 1px solid #4d4d4d;
    border-top: 0;
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.4);
    max-height: 60vh;
    overflow-y: auto;
    /* Breathing room at the panel edges so the first and last rows are not
       jammed against the border. */
    padding: 8px 0;
}

.ygg-navsearch-hit,
.navbar .ygg-navsearch-results a.ygg-navsearch-hit {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    /* Wide gap so the right-aligned type label never crowds a truncated title.
     *
     * !important on the box metrics, matching mycordoba and myguild. Something
     * outside these stylesheets wins on padding for these row anchors on all
     * three brands -- it is NOT the nav colour rule, which is class-based here
     * (.navbar .nav-container a) and so would already lose to this selector.
     * Whatever it is, it was not identifiable from the stylesheets alone; if you
     * find it, drop the !importants on all three brands at once and target it
     * properly. main.css already uses !important liberally, so this is in keeping.
     */
    gap: 24px !important;
    padding: 16px 18px !important;
    line-height: 1.5 !important;
    min-height: 0 !important;
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px solid #4d4d4d;
}

/* The panel's own padding already separates the last row from the border. */
.ygg-navsearch-hit:last-of-type,
.navbar .ygg-navsearch-results a.ygg-navsearch-hit:last-of-type {
    border-bottom: 0;
}

.ygg-navsearch-hit:hover,
.navbar .ygg-navsearch-results a.ygg-navsearch-hit:hover {
    background: #3a3a3a;
    color: #ffffff;
    text-decoration: none;
}

.ygg-navsearch-hit-title {
    font-size: 15px;
    /* Titles are long ("Ampeg :: Heritage Series :: Honoring the SVT Legacy") and
       wrapped to three lines, which is what made the rows uneven. One line each,
       ellipsised. min-width is required for ellipsis to work in a flex child. */
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ygg-navsearch-hit-type {
    flex: 0 0 auto;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a0a0a0;
    /* Nudged down off the shared baseline so it reads as a quiet annotation
       rather than part of the title. */
    position: relative;
    top: 1px;
}

.ygg-navsearch-all,
.navbar .ygg-navsearch-results a.ygg-navsearch-all {
    display: block;
    /* Sits below the panel's own bottom padding, so it needs a touch more room
       than a result row to read as a footer rather than another hit. */
    margin: 8px -1px -9px;
    padding: 15px 18px;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffffff;
    text-decoration: none;
    background: #333333;
    border-top: 1px solid #4d4d4d;
}

.ygg-navsearch-all:hover,
.navbar .ygg-navsearch-results a.ygg-navsearch-all:hover {
    background: #4d4d4d;
    color: #ffffff;
    text-decoration: none;
}

.ygg-navsearch-empty {
    padding: 18px;
    font-size: 14px;
    color: #a0a0a0;
}