/* ============================================================
   flyExclusive — header site search

   A magnifier at the top right of the fixed header. Clicking it swaps the
   icon for a field in the same slot; matches drop below the header as a
   navy panel styled like .home-subnav, so the search reads as part of the
   menu system rather than as a widget bolted onto it.

   Loaded on every page that carries the header, after css/home-hero.css.
   The markup is injected by js/lux-search.js — nothing here applies until
   that script has run, so with JS off the header is exactly as it was.

   Layout notes that matter if this is ever moved:

   * .lux-search is a direct child of the .home-header grid and takes its
     third track (1fr auto 1fr — burger, logo, this). It is deliberately
     NOT position:relative: the results panel is absolute against the
     HEADER, so it hangs below the whole bar including the quick-link row
     rather than below the field. That row occupies its --home-hq-h height
     on every page whether or not it is visible, so top:100% lands in the
     same place site-wide.
   * pointer-events comes from .home-header > * in home-hero.css. The
     header itself is pointer-events:none so clicks fall through to the
     hero, and every direct child turns them back on — which is why this
     component has to be a direct child and not wrapped in anything.
   ============================================================ */

/* The header's own tracks are `1fr auto 1fr`, and a 1fr track keeps an
   automatic minimum of its content's min-content width — so the open field,
   which is wider than the icon it replaces, would widen the third track and
   push the centred logo off centre. minmax(0, 1fr) drops that minimum: the
   tracks stay at their fr share and the field is free to overflow leftward
   over the logo instead, which is what the narrow-viewport rules below
   deliberately do. Equal specificity to home-hero.css's own .home-header
   rule and loaded after it, so no !important is needed.
   Nothing else about the grid changes. */
.home-header {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.lux-search {
  /* tokens are declared on .home-header's children in home-hero.css, but
     that block does not name this component, so re-state the two it needs
     with the same literal fallbacks that file uses. */
  --lux-search-navy: var(--fe-navy-900, #00274D);
  --lux-search-accent: var(--fe-blue, #299FCF);
  --lux-search-ease: cubic-bezier(.65, 0, .35, 1);
  --lux-search-field-h: 44px;

  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* the field is wider than the icon; reserving the width here stops the
     swap from nudging the centred logo */
  min-width: var(--lux-search-field-h);
  font-family: var(--home-display, var(--lux-font, system-ui, sans-serif));
}

/* While the menu panel or a sub-panel is open the header is lifted above the
   panel so the burger can serve as its X (see home-hero.css section 4b), and
   everything else the header paints steps back. This has to step back with
   the logo and the quick links, or a lone magnifier floats over the menu. */
html.home-nav-open .lux-search,
html.home-subnav-open .lux-search {
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------
   1. TRIGGER
   White artwork on alpha, so it carries the same two drop-shadows as the
   burger and the logo: a tight one to give the 1.6px strokes an edge, and
   a wider soft one to seat the mark. Without them it disappears into a
   light frame of the hero video.
   --------------------------------------------------------------- */
.lux-search__trigger {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  height: var(--lux-search-field-h);
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, .60))
    drop-shadow(0 2px 10px rgba(0, 0, 0, .38));
  transition: opacity .25s ease, transform .25s var(--lux-search-ease);
}

.lux-search__icon {
  display: block;
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

/* Set in the quick-link strip's voice — Galano, uppercase, tracked — so the
   two right-hand marks read as the same navigation, not as two systems. The
   word is what makes the icon discoverable; below 1024px there is no room
   for it beside the centred logo and the icon carries it alone. */
.lux-search__label {
  display: none;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .lux-search__label { display: inline; }
}

.lux-search__trigger:hover,
.lux-search__trigger:focus-visible {
  opacity: .78;
}

.lux-search__trigger:focus-visible {
  outline: 1px solid rgba(255, 255, 255, .8);
  outline-offset: 6px;
}

/* ---------------------------------------------------------------
   2. FIELD
   Its own translucent surface rather than a plain border: on the homepage
   the header sits bare over the hero video, where a hairline alone is not
   enough to read as an input. The blur is what separates the two planes,
   the same device the header's own scrim uses.
   --------------------------------------------------------------- */
/* Positioned against the HEADER, like the panel below it — .lux-search is
   deliberately unpositioned, so this resolves against the header's padding
   box. That is what makes one formula work at every width: `right` lands on
   the page gutter and `100%` is the header's own width, which (unlike 100vw)
   excludes the scrollbar. With 100vw the field sat 6px inside the burger's
   hit area on a 387px viewport — measured, not theorised.

   `top` and `bottom` stay auto on purpose. An absolutely positioned child of
   a flex container takes its static position from that container's
   alignment, so align-items:center on .lux-search keeps the field centred on
   the burger's 48px row with no dependency on the header's padding value.

   The 56px reserve clears the burger: it is 60px wide with a -13px left
   margin, so its right edge is 47px past the gutter. Below ~470px the field
   is narrower than 340px and simply spans what is left. */
.lux-search__form {
  position: absolute;
  right: var(--home-gutter, clamp(1.25rem, 4vw, 3rem));
  width: min(340px, calc(100% - 2 * var(--home-gutter, 1.25rem) - 56px));
  display: none;
  align-items: center;
  height: var(--lux-search-field-h);
  background: rgba(0, 16, 36, .55);
  border: 1px solid rgba(255, 255, 255, .42);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.lux-search.is-open .lux-search__form { display: flex; }
.lux-search.is-open .lux-search__trigger { display: none; }

.lux-search__form .lux-search__icon {
  position: absolute;
  left: 12px;
  width: 17px;
  height: 17px;
  color: rgba(255, 255, 255, .55);
  pointer-events: none;
}

/* The :not() chain matches the global field rule in luxury.css section 2
   (input:not([type=checkbox])... , specificity 0,6,1) so this wins on
   specificity rather than on !important — that rule would otherwise put a
   white background and a light border on the field. */
.lux-search input.lux-search__input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=image]) {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0 40px 0 38px;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  /* 16px exactly: anything smaller zooms iOS Safari on focus, which on a
     fixed header leaves the page scrolled sideways with no way back. */
  font-size: 16px;
  font-weight: 300;
  letter-spacing: .01em;
  -webkit-appearance: none;
  appearance: none;
}

.lux-search input.lux-search__input:focus {
  outline: 0;
  /* the global input:focus rule paints a blue 1px ring; the field's own
     border carries focus here instead (see .lux-search.is-open below) */
  box-shadow: none;
}

.lux-search__input::placeholder {
  color: rgba(255, 255, 255, .5);
  opacity: 1;
}

/* WebKit's own clear affordance renders as a dark glyph on a dark field and
   duplicates the X to its right. */
.lux-search__input::-webkit-search-cancel-button,
.lux-search__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.lux-search.is-focused .lux-search__form {
  border-color: rgba(255, 255, 255, .8);
}

.lux-search__close {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .65);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.lux-search__close svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.lux-search__close:hover,
.lux-search__close:focus-visible { color: #fff; }

/* ---------------------------------------------------------------
   3. RESULTS PANEL
   Same surface as .home-subnav — solid navy, one hairline, a long shadow —
   so the results read as the menu answering rather than as a new object.
   --------------------------------------------------------------- */
.lux-search__panel {
  position: absolute;
  top: 100%;
  right: var(--home-gutter, clamp(1.25rem, 4vw, 3rem));
  /* same containing block and the same reasoning as the field above: 100% is
     the header, so this is gutter-to-gutter on a phone and 420px on a desk */
  width: min(420px, calc(100% - 2 * var(--home-gutter, 1.25rem)));
  max-height: min(62vh, 540px);
  /* The list scrolls, not the panel: the count line has to stay on screen,
     and inside a scrolling panel it sat below the fold on any query with
     more than four or five results. */
  flex-direction: column;
  background: var(--lux-search-navy);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 24px 60px rgba(0, 16, 36, .45);
  /* The [hidden] attribute is kept in sync for assistive tech but is NOT
     what hides this: a bare attribute selector loses to any author display
     rule, and that has shipped a visible element on this site before. The
     class is the switch; the attribute is the announcement. */
  display: none;
}

.lux-search__panel.is-open { display: flex; }

.lux-search__list {
  margin: 0;
  padding: 0;
  list-style: none;
  min-height: 0;          /* or the flex item refuses to shrink and scroll */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lux-search__item + .lux-search__item {
  border-top: 1px solid rgba(255, 255, 255, .09);
}

.lux-search__link {
  display: block;
  padding: 13px 18px 14px;
  /* 3px of transparent border on the left, filled on the active row: an
     inset accent bar cannot shift the text when it appears. */
  border-left: 3px solid transparent;
  color: #fff;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}

.lux-search__link:hover,
.lux-search__link:focus-visible,
.lux-search__item.is-active .lux-search__link {
  background-color: rgba(41, 159, 207, .16);
  border-left-color: var(--lux-search-accent);
  outline: 0;
}

.lux-search__title {
  display: block;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.3;
}

/* The matched run inside a title. No background — a highlight block in a
   list of 10 rows is noise; weight alone is enough to show the hit. */
.lux-search__title mark {
  background: none;
  color: #fff;
  font-weight: 600;
}

.lux-search__meta {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .48);
  /* a long job-opening path must not wrap the row to three lines */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lux-search__note {
  flex: 0 0 auto;
  margin: 0;
  padding: 12px 18px 13px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.45;
  color: rgba(255, 255, 255, .55);
}

/* the empty and error states are the only content, so they carry no rule */
.lux-search__panel--empty .lux-search__note { border-top: 0; }

.lux-search__note b {
  color: #fff;
  font-weight: 400;
}

/* Scrollbar, for the long-result case. Left at the platform default on
   Firefox, which has no equivalent hook worth the code. */
.lux-search__list::-webkit-scrollbar { width: 10px; }
.lux-search__list::-webkit-scrollbar-track { background: transparent; }
.lux-search__list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .22);
  border: 3px solid var(--lux-search-navy);
}

/* ---------------------------------------------------------------
   4. NARROW VIEWPORTS
   The geometry above already adapts — one formula, no breakpoint. What
   changes here is the logo: below 1024px the open field reaches past the
   viewport centre and covers it, the same trade the menu panel makes. The
   field is translucent and blurred, so the mark would read *through* it
   rather than be hidden by it. Mirrors html.home-nav-open .home-logo in
   home-hero.css, including the .5s opacity transition that lives there.
   --------------------------------------------------------------- */
@media (max-width: 1023px) {
  html.lux-search-open .home-logo {
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 767px) {
  .lux-search { --lux-search-field-h: 40px; }
  .lux-search__icon { width: 19px; height: 19px; }
  .lux-search__panel { max-height: 68vh; }
}

@media (prefers-reduced-motion: reduce) {
  .lux-search__trigger,
  .lux-search__link { transition: none; }
}