/*
 * Site search.
 *
 * Self-contained on purpose: this loads on all 161 pages, while the
 * --egohome-* palette is defined by homepage-v2.v1.css and therefore only
 * exists on the five home pages. The values below are that same palette,
 * restated locally so the box looks identical everywhere.
 *
 * Every state is marked by shape as well as colour (border, underline,
 * position), so it survives a colour-vision difference and a forced-colours
 * mode. Touch targets are 44px; the input is 16px so iOS does not zoom.
 */

.egoSearch {
  --ego-search-bg: #07101f;
  --ego-search-panel: #0b192b;
  --ego-search-raised: #0e1e33;
  --ego-search-line: #172c47;
  --ego-search-line-strong: #213958;
  --ego-search-focus: #5b86ff;
  --ego-search-text: #e9f2ff;
  --ego-search-soft: #a1b5ce;
  --ego-search-quiet: #7890ad;
  --ego-search-teal: #49d2b5;
  --ego-search-radius: 14px;
}

/* ------------------------------------------------------------ the trigger */

.egoSearchTrigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid #2b476c;
  border-radius: 999px;
  background: rgba(11, 25, 43, 0.72);
  color: #a7b8ce;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.egoSearchTrigger:hover { color: #e9f2ff; border-color: #416db8; }

.egoSearchTrigger:focus-visible {
  outline: 2px solid #5b86ff;
  outline-offset: 2px;
  color: #e9f2ff;
}

.egoSearchTriggerMark { font-size: 14px; line-height: 1; }

/*
 * Icon-only from tablet down, not just phone.
 *
 * The trigger lives inside .globalNav, so its label is added to a bar that
 * already overflows at 834 px in German and Dutch - measured at +67 px on /de/
 * before this release existed. Carrying the word as well as the glyph pushed
 * that to +126 px and created overflow on routes that had none.
 *
 * The button keeps its accessible name either way: aria-label is set from the
 * same string, so a screen reader still announces "Caută" / "Suchen" while the
 * bar only spends 32 px on it.
 */
@media (max-width: 1024px) {
  .egoSearchTriggerText { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .egoSearchTrigger { padding: 4px 9px; gap: 0; }
}

/* ------------------------------------------------------------ the overlay */

.egoSearchOverlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(12px, 6vh, 84px) clamp(12px, 4vw, 40px);
  background: rgba(3, 8, 16, 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.egoSearchOverlay[hidden] { display: none; }

html.egoSearchOpen, html.egoSearchOpen body { overflow: hidden; }

.egoSearchDialog {
  --ego-search-bg: #07101f;
  --ego-search-panel: #0b192b;
  --ego-search-raised: #0e1e33;
  --ego-search-line: #172c47;
  --ego-search-focus: #5b86ff;
  --ego-search-text: #e9f2ff;
  --ego-search-soft: #a1b5ce;
  --ego-search-quiet: #7890ad;
  --ego-search-teal: #49d2b5;

  position: relative;
  width: min(680px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--ego-search-line);
  border-radius: 16px;
  background: var(--ego-search-bg);
  box-shadow: 0 24px 64px rgba(2, 6, 14, 0.62);
  color: var(--ego-search-text);
  font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
}

.egoSearchClose {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ego-search-quiet);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.egoSearchClose:hover { color: var(--ego-search-text); background: var(--ego-search-raised); }
.egoSearchClose:focus-visible { outline: 2px solid var(--ego-search-focus); outline-offset: 2px; }

.egoSearchLabel {
  padding-right: 48px;
  color: var(--ego-search-soft);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------- the field */

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

.egoSearchInput {
  width: 100%;
  min-height: 48px;
  padding: 10px 46px 10px 14px;
  border: 1px solid var(--ego-search-line-strong, #213958);
  border-radius: 12px;
  background: var(--ego-search-panel);
  color: var(--ego-search-text);
  font: inherit;
  /* 16px keeps iOS from zooming the page when the field takes focus. */
  font-size: 16px;
}

.egoSearchInput::placeholder { color: var(--ego-search-quiet); }
.egoSearchInput:focus { outline: 2px solid var(--ego-search-focus); outline-offset: 1px; border-color: var(--ego-search-focus); }

.egoSearchClear {
  position: absolute;
  right: 3px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ego-search-quiet);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  visibility: hidden;
}
.egoSearchClear::before { content: "×"; }
.egoSearchClear.isVisible { visibility: visible; }
.egoSearchClear:hover { color: var(--ego-search-text); }
.egoSearchClear:focus-visible { outline: 2px solid var(--ego-search-focus); outline-offset: 2px; visibility: visible; }

.egoSearchHint { margin: 0; color: var(--ego-search-quiet); font-size: 12px; }

/* ------------------------------------------------------------- the results */

.egoSearchPanel { overflow-y: auto; border-top: 1px solid var(--ego-search-line); padding-top: 8px; }
.egoSearchPanel[hidden] { display: none; }

.egoSearchListbox { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }

.egoSearchOption {
  position: relative;
  padding: 10px 12px 10px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
}

/* The active option is marked by a left bar and a border as well as a fill,
   so it is not colour alone that says which row Enter would open. */
.egoSearchOption::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 2px;
  background: transparent;
}
.egoSearchOption[aria-selected="true"] {
  background: var(--ego-search-raised);
  border-color: var(--ego-search-line-strong, #213958);
}
.egoSearchOption[aria-selected="true"]::before { background: var(--ego-search-teal); }
.egoSearchOption:hover { background: var(--ego-search-panel); }

.egoSearchOptionTitle { margin: 0; font-size: 15px; line-height: 1.35; }
.egoSearchOptionTitle a { color: var(--ego-search-text); text-decoration: none; }
.egoSearchOptionTitle mark,
.egoSearchOptionSummary mark {
  background: transparent;
  color: var(--ego-search-teal);
  font-weight: 700;
  /* Underlined as well as coloured: the match is still visible in a
     forced-colours mode and to a monochrome eye. */
  text-decoration: underline;
  text-underline-offset: 2px;
}

.egoSearchOptionType {
  display: inline-block;
  margin-top: 4px;
  color: var(--ego-search-quiet);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.egoSearchOptionSummary { margin: 4px 0 0; color: var(--ego-search-soft); font-size: 13px; line-height: 1.5; }

.egoSearchOptionMeta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; color: var(--ego-search-quiet); font-size: 11px; }
.egoSearchDesignation {
  padding: 1px 6px;
  border: 1px solid var(--ego-search-line-strong, #213958);
  border-radius: 999px;
  color: var(--ego-search-soft);
  font-family: var(--font-geist-mono), ui-monospace, monospace;
}
.egoSearchDeep { color: var(--ego-search-teal); }

/* --------------------------------------------------------- empty and cross */

.egoSearchEmpty[hidden], .egoSearchCross[hidden] { display: none; }

.egoSearchEmptyState { padding: 20px 12px; text-align: center; }
.egoSearchEmptyMark { color: var(--ego-search-quiet); font-size: 26px; }
.egoSearchEmptyState h2 { margin: 6px 0 4px; font-size: 15px; }
.egoSearchEmptyState p { margin: 0; color: var(--ego-search-soft); font-size: 13px; }

.egoSearchSuggestRow { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }

.egoSearchSuggest, .egoSearchOffer {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--ego-search-line-strong, #213958);
  border-radius: 999px;
  background: var(--ego-search-panel);
  color: var(--ego-search-text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.egoSearchSuggest:hover, .egoSearchOffer:hover { border-color: var(--ego-search-focus); }
.egoSearchSuggest:focus-visible, .egoSearchOffer:focus-visible { outline: 2px solid var(--ego-search-focus); outline-offset: 2px; }

.egoSearchCross {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ego-search-line);
  color: var(--ego-search-quiet);
  font-size: 12px;
}

.egoSearchStatus { margin: 0; min-height: 1em; color: var(--ego-search-quiet); font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .egoSearchOverlay { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (forced-colors: active) {
  .egoSearchOption[aria-selected="true"] { border-color: Highlight; }
  .egoSearchOptionTitle mark, .egoSearchOptionSummary mark { color: Highlight; }
}