/* ============================================================
   Search switch v3 (5 October 2026).
   Lets visitors choose between Hubert's Ask box and the classic
   guide search, on the homepage hero (83155) and the guide-page
   sidebar (83156). Hubert's widget is pointed at the empty
   .sv3-hubert-slot, so it never hides the classic search itself;
   this file and js/searchswitch.js decide which one shows.
   The switch only appears once Hubert's box is on the page, so
   if Hubert fails to load, the classic search simply stays.
   v2: tab bar above the search on guide pages on phones.
   v3: the same tab bar everywhere (hero, sidebar, phones), with
   a dark-panel variant on the homepage hero. Replaces v1 and v2.
   Additive only, and scoped through .sv3 and .sv3-searchswitch.
   ============================================================ */

/* Hidden until js/searchswitch.js confirms Hubert's box exists */
.sv3-searchswitch-tabs { display: none; }
.sv3.sv3-hubert-ready .sv3-searchswitch-tabs { display: flex; }

/* Hubert chosen (the default): hide the classic search */
.sv3.sv3-hubert-ready[data-sv3-search="hubert"] .sv3-searchswitch .sv3-searchwrap-classic { display: none; }

/* Classic chosen: hide Hubert's box, wherever the widget has placed it */
.sv3.sv3-hubert-ready[data-sv3-search="classic"] [data-hubb-help-inline="hero"],
.sv3.sv3-hubert-ready[data-sv3-search="classic"] [data-hubb-help-inline="compact"] { display: none !important; }

/* Layout: the switch sits above the search as a tab bar. Every
   child is given full width, because auto margins in a flex column
   would otherwise shrink the classic search to its content. */
.sv3-searchswitch { display: flex; flex-direction: column; }
.sv3-searchswitch > * { width: 100%; }
.sv3-searchswitch-tabs {
  order: -1;
  flex-wrap: nowrap;
  gap: 0;
  padding: 4px;
  margin: 0 0 10px;
  border-radius: 999px;
}
.sv3-searchswitch-btn {
  flex: 1 1 0;
  min-height: 38px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--sv3-font);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s var(--sv3-ease), color .18s var(--sv3-ease), box-shadow .18s var(--sv3-ease);
}
.sv3-searchswitch-btn:focus-visible { outline: 2px solid var(--sv3-purple-light); outline-offset: 2px; }

/* Guide pages, sidebar and phones: light background */
.sv3-page .sv3-searchswitch-tabs { background: var(--sv3-gray-100); }
.sv3-page .sv3-searchswitch-btn { color: var(--sv3-gray-600); }
.sv3-page .sv3-searchswitch-btn:hover { color: var(--sv3-purple); }
.sv3-page .sv3-searchswitch-btn[aria-pressed="true"] {
  background: var(--sv3-white);
  color: var(--sv3-purple);
  box-shadow: var(--sv3-shadow-sm), 0 0 0 1px var(--sv3-gray-300);
}

/* Homepage hero: dark panel, same 640px width as the search */
.sv3-hero .sv3-searchswitch-tabs {
  max-width: 640px;
  margin: 0 auto 14px;
  background: rgb(255 255 255 / 0.08);
  box-shadow: inset 0 0 0 1px #4a4a7a;
}
.sv3-hero .sv3-searchswitch-btn { color: #cfcee4; }
.sv3-hero .sv3-searchswitch-btn:hover { color: var(--sv3-white); }
.sv3-hero .sv3-searchswitch-btn[aria-pressed="true"] {
  background: var(--sv3-white);
  color: var(--sv3-purple);
}

@media (prefers-reduced-motion: reduce) {
  .sv3-searchswitch-btn { transition: none; }
}