/* Search box in the navbar (navbar.html) and its results dropdown, also used by the /guide/ hub search.
   JS: tager/static/tager/js/site_search.js. On screens under 992px the box is a search icon that
   opens it full width over the bar. */

.ss { position: relative; flex: 1 1 auto; min-width: 0; max-width: 440px; margin: 0 16px 0 auto; font-family: inherit; }
.ss-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ss-box { position: relative; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; box-sizing: border-box;
          border: 1px solid #E7E4DF; border-radius: 10px; background: #FFFFFF; color: #5B616B; }
.ss-box:focus-within { border-color: #C2522D; box-shadow: 0 0 0 1px #C2522D; }
.ss-input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: inherit; font-size: 0.9rem; color: #15171C; outline: none; }
.ss-input::placeholder { color: #5B616B; }
.ss-input::-webkit-search-cancel-button { display: none; }
.ss-kbd { font-family: inherit; font-size: 12px; line-height: 1.3; border: 1px solid #E7E4DF; border-radius: 6px; padding: 1px 7px; color: #5B616B; background: #FFFFFF; }
.ss-kbd-esc, .ss-box:focus-within .ss-kbd-slash { display: none; }
.ss-box:focus-within .ss-kbd-esc { display: inline; }

.ss-toggle, .ss-close { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none;
                        border: 0; border-radius: 8px; background: transparent; color: #3d4148; cursor: pointer; }
.ss-toggle:hover, .ss-close:hover { background: #f4f3f1; color: #15171C; }
.ss-toggle:focus-visible, .ss-close:focus-visible { outline: 2px solid #C2522D; outline-offset: 2px; }

/* Dropdown */
.ss-drop { position: absolute; top: calc(100% + 8px); left: 0; right: 0; min-width: 420px; z-index: 1200; box-sizing: border-box;
           padding: 8px; background: #FFFFFF; border: 1px solid #E7E4DF; border-radius: 14px;
           box-shadow: 0 24px 60px -20px rgba(21, 23, 28, 0.35); color: #15171C; text-align: left; font-family: inherit; }
.ss-drop[hidden] { display: none; }
.ss-list { max-height: min(560px, calc(100vh - 180px)); overflow-y: auto; }
.ss-group { padding: 10px 10px 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #5B616B; }
.ss-drop .ss-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 10px; color: #15171C; text-decoration: none; }
.ss-drop .ss-item:hover, .ss-drop .ss-item.is-active { background: #FAF9F7; color: #15171C; text-decoration: none; }
.ss-item.is-active { box-shadow: inset 0 0 0 1px #C2522D; }
.ss-badge { flex: none; width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.ss-badge-feature { background: #FBEDE7; color: #9E3F20; }
.ss-badge-problem { background: #E8EEF8; color: #23407A; }
.ss-badge-guide { background: #E6F1EF; color: #1F5F5B; }
.ss-badge-tool { background: #F0EEEA; color: #15171C; }
.ss-badge-page { background: #F4F3F1; color: #4A4F57; }
.ss-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-title { font-weight: 600; font-size: 15px; line-height: 1.35; }
.ss-line { font-size: 13.5px; color: #4A4F57; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss-url { margin-left: auto; padding-top: 3px; font-size: 12px; color: #5B616B; white-space: nowrap; max-width: 34%; overflow: hidden; text-overflow: ellipsis; }

.ss-empty { padding: 24px 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ss-empty[hidden] { display: none; }
.ss-empty b { font-weight: 600; font-size: 16px; }
.ss-empty span { font-size: 14.5px; color: #4A4F57; line-height: 1.5; }
.ss-drop .ss-empty a { padding: 10px 14px; border-radius: 10px; background: #FBEDE7; color: #9E3F20; font-weight: 600; font-size: 14.5px; text-decoration: none; }
.ss-drop .ss-empty a:hover { color: #9E3F20; background: #F7DFD5; }

.ss-foot { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #F0EEEA; margin-top: 6px; padding: 10px 10px 4px; font-size: 12.5px; color: #5B616B; }
.ss-drop .ss-foot a { color: #C2522D; text-decoration: none; }
.ss-drop .ss-foot a:hover { color: #9E3F20; }

/* The /guide/ hub search box opens the same dropdown under itself */
#guide-search { position: relative; }
#guide-search .ss-drop { min-width: 0; }

/* Narrower screens: a search icon; the box opens full width over the navbar */
@media (max-width: 991.98px) {
    .ss { flex: none; max-width: none; margin: 0 4px 0 auto; }
    .ss-toggle { display: inline-flex; }
    .ss-box { display: none; }
    .ss.is-open .ss-box { display: flex; position: fixed; top: 0; left: 0; right: 0; height: 80px; z-index: 1200;
                          padding: 0 8px 0 16px; border: 0; border-bottom: 1px solid #E7E4DF; border-radius: 0; box-shadow: none; }
    .ss.is-open .ss-close { display: inline-flex; }
    .ss-kbd { display: none !important; }
    .ss-box .ss-drop { position: fixed; top: 88px; left: 8px; right: 8px; min-width: 0; }
    .ss-input { font-size: 16px; }   /* 16px stops iOS from zooming in on focus */
    .ss-url { display: none; }
}
@media (max-width: 767.98px) {
    .ss-list { max-height: calc(100vh - 190px); }
}