/* ── MN2S talent search box ────────────────────────────────────────────────
 * Markup: mn2s_talent_search_form() in lib/talent-search.php.
 * Behaviour: assets/js/mn2s-talent-search.js.
 * The box inherits its font from the page; spacing around it (margin-top etc.)
 * belongs to the page using it.
 * Rules are scoped under .ts-search and some use !important because
 * screen.css styles every input/textarea and button[type=submit]
 * (teal, big padding, position:absolute).
 * ────────────────────────────────────────────────────────────────────── */
.ts-search {
    --ts-blue: #46A9F5;
    --ts-blue-dark: #2f8ee0;
    --ts-ink: #242331;
    --ts-text: #666666;
    --ts-line: #d4e0ea;
    --ts-hover: #faf9f6;
    position: relative; display: flex; align-items: center; gap: 12px;
    max-width: 578px; height: 64px; margin: 0; padding: 0 6px 0 10px;
    background: #fff; border-radius: 32px; box-sizing: border-box;
}
.ts-search *, .ts-search *::before, .ts-search *::after { box-sizing: border-box; }
.ts-search__modes { flex: 0 0 auto; display: flex; padding: 3px; gap: 2px; border-radius: 999px; background: #e1e1e1; }
.ts-search .ts-search__mode {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer;
    margin: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ts-ink); padding: 0;
}
.ts-search__mode svg { width: 17px; height: 17px; }
.ts-search .ts-search__mode.is-active { background: #fff; color: var(--ts-blue); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.ts-search .ts-search__input {
    flex: 1 1 auto; min-width: 0; height: 44px; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0;
    font-family: inherit; font-size: 14px; line-height: 44px; color: var(--ts-ink);
}
.ts-search textarea.ts-search__input { resize: none; overflow: hidden; white-space: nowrap; }
.ts-search .ts-search__input:focus { outline: none; }
.ts-search .ts-search__input::placeholder { color: var(--ts-text); opacity: 1; }
.ts-search .ts-search__submit {
    position: static !important; flex: 0 0 auto; width: 52px; height: 52px; margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 50% !important; display: flex !important; align-items: center; justify-content: center;
    background: var(--ts-blue) !important; color: #fff; font-size: 0; cursor: pointer;
}
.ts-search .ts-search__submit:hover { background: var(--ts-blue-dark) !important; }
.ts-search__submit svg { width: 24px; height: 24px; }
.ts-search .ts-search__submit:disabled { opacity: .6; cursor: progress; }
.ts-search__results {
    position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; right: 0; display: none;
    max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--ts-line);
    border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .1); text-align: left;
}
.ts-search__results.is-open { display: block; }
.ts-search__results ul { list-style: none; margin: 0; padding: 6px 0; }
.ts-search__results li { margin: 0; }
.ts-search__results li a { display: block; padding: 9px 20px; font-size: 14px; color: var(--ts-ink) !important; text-decoration: none; }
.ts-search__results li a:hover, .ts-search__results li a:focus { background: var(--ts-hover); color: var(--ts-blue) !important; }
.ts-search__empty { padding: 9px 20px; font-size: 14px; color: var(--ts-text); }
.ts-search__hint {
    margin-top: 4px !important; padding: 10px 20px; border-top: 1px solid var(--ts-line);
    font-size: 13px; color: var(--ts-blue); cursor: pointer;
}
.ts-search__hint:hover, .ts-search__hint:focus { text-decoration: underline; outline: none; }

@media (max-width: 767.98px) {
    .ts-search { max-width: none; height: 56px; padding: 0 4px 0 6px; gap: 8px; }
    .ts-search .ts-search__input { font-size: 12px; }
    /* the phone design wraps the textarea placeholder onto two lines */
    .ts-search textarea.ts-search__input {
        height: 32px; line-height: 16px; white-space: normal; overflow-y: auto; scrollbar-width: none;
    }
    .ts-search .ts-search__submit { width: 36px; height: 36px; }
    .ts-search__submit svg { width: 18px; height: 18px; }
    .ts-search .ts-search__mode { width: 30px; height: 30px; }
}