/* Legendary Stakes search
   Header magnifying glass, the panel it drops down, and the homepage hero
   search box. Pairs with ls-search.js.

   Every colour falls back to a literal value so the same file works in the
   app, where tokens.css is not loaded. Selectors are scoped under
   .ls-search so The7's global input, button and link styles can't reach in;
   the input selector is deliberately specific enough to beat The7's
   ".content input[type=text]".

   A few properties carry !important on purpose, each against a named
   global rule in brand-overrides.css:
     "p, li, label, td { color: bone !important }" would turn the grey
       group labels and messages (both list items) bone.
     ".elementor-button, .btn, button { font-family, letter-spacing,
       font-weight !important }" would set the hero Search button in Saira
       Condensed instead of the header buttons' Work Sans.
     The input's padding is also forced: a theme input rule was resetting
     it on Staging, which put the typed text underneath the search icon.
     For the same reason the hero field's background, text colour and
     border, and the results list's margin and padding, are forced: inside
     page content the theme turned the light hero field dark and indented
     the list. */

.ls-search, .ls-search *, .ls-search *::before, .ls-search *::after,
.ls-search-toggle, .ls-search-toggle * { box-sizing: border-box; }

/* ------------------------------------------------------------ header button
   Sits in front of Join For Free. Same white as the nav links, The7 gold on
   hover. */
.ls-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  margin: 0 8px 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 3px;
  color: #FFFFFF;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color 200ms cubic-bezier(.2, .7, .2, 1);
}
.ls-search-toggle:hover,
.ls-search-toggle[aria-expanded="true"] { color: #E0B30F; }
.ls-search-toggle[hidden] { display: none !important; }
.ls-search-toggle svg { width: 20px; height: 20px; pointer-events: none; }

/* Beside the hamburger on narrow screens. */
.ls-search-toggle--burger { margin: 0 4px 0 0; }
.ls-search-toggle:focus-visible {
  outline: 2px solid var(--ls-gold-bright, #E3BC27);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ shared parts */
.ls-search__label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ls-search__form { position: relative; margin: 0; }

.ls-search__field {
  position: relative;
  display: flex;
  align-items: center;
}

.ls-search__icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  width: 20px;
  height: 20px;
  pointer-events: none;
}
.ls-search__icon svg { width: 20px; height: 20px; }
/* The icon's colour is set on the svg, not the span around it.
   brand-overrides.css has "span:not(...) { color: inherit !important }",
   which made the wrapper span take the text colour and hid the icon on the
   light hero field. That rule only targets spans, so the svg is safe. */

.ls-search input.ls-search__input[type="search"] {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 52px;
  margin: 0;
  padding: 0 16px 0 48px !important;
  font-family: 'Work Sans', Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  border-radius: 3px;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.ls-search input.ls-search__input[type="search"]::-webkit-search-cancel-button,
.ls-search input.ls-search__input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* The list of matches. Always on dark, wherever the box sits. */
.ls-search__results {
  list-style: none;
  margin: 8px 0 0 !important;
  padding: 6px 0 !important;
  max-height: min(60vh, 520px);
  overflow-y: auto;
  background: var(--ls-ink-950, #14110C);
  border: 1px solid var(--ls-ink-700, #3B3324);
  border-radius: 3px;
  box-shadow: var(--ls-shadow-3, 0 24px 60px -20px rgba(20, 17, 12, .65));
  text-align: left;
  scrollbar-width: thin;
  scrollbar-color: var(--ls-ink-600, #4E4534) transparent;
}
.ls-search__results[hidden] { display: none; }
.ls-search__results::-webkit-scrollbar { width: 8px; }
.ls-search__results::-webkit-scrollbar-track { background: transparent; }
.ls-search__results::-webkit-scrollbar-thumb {
  background: var(--ls-ink-600, #4E4534);
  border-radius: 4px;
}

.ls-search__group {
  margin: 0;
  padding: 12px 20px 6px;
  font-family: 'Work Sans', Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.56px;
  text-transform: uppercase;
  color: var(--ls-stone-400, #8B8374) !important;
}

.ls-search__option { margin: 0; padding: 0; }

.ls-search a.ls-search__link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 20px;
  font-family: 'Work Sans', Helvetica, Arial, sans-serif;
  color: var(--ls-bone-50, #F4EFE3);
  text-decoration: none;
}
.ls-search__option.is-active a.ls-search__link,
.ls-search a.ls-search__link:hover {
  background: var(--ls-ink-850, #221E15);
  color: var(--ls-bone-50, #F4EFE3);
}
.ls-search__option.is-active a.ls-search__link {
  box-shadow: inset 3px 0 0 var(--ls-gold-bright, #E3BC27);
}

.ls-search__name {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  color: inherit;
}
.ls-search__detail {
  font-size: 13px;
  line-height: 1.35;
  color: var(--ls-stone-300, #B4AC9C);
  white-space: nowrap;
}

/* "See all results" closes the list and is the main way through. */
.ls-search__option--all {
  margin-top: 6px;
  border-top: 1px solid var(--ls-ink-800, #2B2517);
  padding-top: 6px;
}
.ls-search .ls-search__option--all a.ls-search__link,
.ls-search .ls-search__option--all.is-active a.ls-search__link {
  color: var(--ls-gold-bright, #E3BC27);
}
.ls-search__option--all .ls-search__name { font-weight: 700; }

/* A result that's been chosen and is opening. */
.ls-search__option.is-opening a.ls-search__link,
.ls-search__option.is-opening.is-active a.ls-search__link {
  background: var(--ls-ink-850, #221E15);
  box-shadow: inset 3px 0 0 var(--ls-gold-bright, #E3BC27);
  flex-wrap: wrap;
  cursor: progress;
}
.ls-search__opening {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-basis: 100%;
  margin-top: 4px;
  font-size: 13px;
  color: var(--ls-gold-bright, #E3BC27);
}
.ls-search__opening::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(227, 188, 39, .3);
  border-top-color: var(--ls-gold-bright, #E3BC27);
  animation: ls-search-spin .8s linear infinite;
}
@keyframes ls-search-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ls-search__opening::before { animation: none; }
}

.ls-search__note {
  margin: 0;
  padding: 12px 20px;
  font-family: 'Work Sans', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ls-stone-300, #B4AC9C) !important;
}

.ls-search__status {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------------------ header panel
   Drops from the bottom of the header, full width. Fixed, so it stays put
   with the fixed header; top is set by the script from the header's height.
   The results list hangs below the field. */
.ls-search--panel {
  position: fixed;
  left: 0;
  right: 0;
  top: 74px;
  z-index: 9002;
  padding: 20px 32px 24px;
  background: var(--ls-ink-950, #14110C);
  border-top: 1px solid var(--ls-ink-800, #2B2517);
  border-bottom: 1px solid var(--ls-gold-line, rgba(201, 160, 44, .40));
  box-shadow: 0 18px 40px -22px rgba(20, 17, 12, .5);
}
.ls-search--panel[hidden] { display: none; }

.ls-search--panel .ls-search__inner { max-width: 760px; margin: 0 auto; }

.ls-search--panel .ls-search__icon svg { color: var(--ls-stone-400, #8B8374); }

.ls-search--panel input.ls-search__input[type="search"] {
  padding-right: 56px !important;
  color: var(--ls-bone-50, #F4EFE3) !important;
  background: var(--ls-ink-900, #1B1710) !important;
  border: 1px solid var(--ls-ink-700, #3B3324) !important;
}
.ls-search--panel input.ls-search__input[type="search"]::placeholder {
  color: var(--ls-stone-400, #8B8374);
  opacity: 1;
}
.ls-search--panel input.ls-search__input[type="search"]:focus {
  border-color: var(--ls-gold, #C9A02C) !important;
}

.ls-search__close {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 3px;
  color: var(--ls-stone-300, #B4AC9C);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.ls-search__close:hover { color: var(--ls-bone-50, #F4EFE3); }
.ls-search__close svg { width: 20px; height: 20px; }

.ls-search--panel .ls-search__results { position: static; }

@media (prefers-reduced-motion: no-preference) {
  .ls-search--panel:not([hidden]) { animation: ls-search-drop 200ms cubic-bezier(.2, .7, .2, 1); }
}
@keyframes ls-search-drop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
  .ls-search--panel { padding: 14px 16px 18px; }
  .ls-search input.ls-search__input[type="search"] { font-size: 16px; }
}

/* ------------------------------------------------------------ hero box
   Sits on the homepage photo under Join For Free. A light field reads
   clearly against the dark, busy image; results drop over the page. */
.ls-search--hero {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.ls-search .ls-search__lede {
  margin: 0 0 14px;
  font-family: var(--ls-font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ls-bone-50, #F4EFE3);
  text-shadow: 0 1px 12px rgba(20, 17, 12, .6);
}

.ls-search--hero .ls-search__icon svg { color: var(--ls-stone-500, #6A6253); }

.ls-search--hero input.ls-search__input[type="search"] {
  height: 56px;
  padding-right: 120px !important;
  color: var(--ls-ink-950, #14110C) !important;
  background: var(--ls-bone-50, #F4EFE3) !important;
  border: 1px solid var(--ls-bone-50, #F4EFE3) !important;
  box-shadow: 0 10px 30px -12px rgba(20, 17, 12, .7);
}
.ls-search--hero input.ls-search__input[type="search"]::placeholder {
  color: var(--ls-stone-500, #6A6253) !important;
  opacity: 1;
}
.ls-search--hero input.ls-search__input[type="search"]:focus {
  border-color: var(--ls-gold, #C9A02C) !important;
  box-shadow: 0 0 0 3px rgba(201, 160, 44, .35), 0 10px 30px -12px rgba(20, 17, 12, .7);
}

.ls-search button.ls-search__go {
  position: absolute;
  right: 6px;
  top: 6px;
  bottom: 6px;
  margin: 0;
  padding: 0 20px;
  font-family: 'Work Sans', Helvetica, Arial, sans-serif !important;
  font-size: 13px;
  font-weight: 700 !important;
  line-height: 1;
  letter-spacing: 1.56px !important;
  text-transform: uppercase;
  color: var(--ls-bone-50, #F4EFE3) !important;
  background: var(--ls-ink-950, #14110C) !important;
  border: 0 !important;
  border-radius: 3px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 200ms cubic-bezier(.2, .7, .2, 1);
}
.ls-search button.ls-search__go:hover { background: var(--ls-ink-700, #3B3324) !important; }

.ls-search--hero .ls-search__results {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 10;
}

.ls-search .ls-search__go:focus-visible,
.ls-search .ls-search__close:focus-visible,
.ls-search a.ls-search__link:focus-visible {
  outline: 2px solid var(--ls-gold-bright, #E3BC27);
  outline-offset: 2px;
}