/* ==========================================================================
   DGA header search + one-line nav + language switcher (comment #3)
   Enqueued build-free by mu-plugins/dga-tokens-loader.php. Behaviour lives in
   assets/dga/dga-header-search.js (vanilla, no Alpine bundle dependency).
   ========================================================================== */

/* Positioning context for the search panel. Anchored to <header> (which is
   w-full, no container padding) rather than <nav> (the padded .container) so
   the dropdown's white background spans the full viewport width. */
header {
  position: relative;
}

/* ---- Mobile nav-bar search + language (icon only) ---------------------- */
.dga-mobile-actions {
  gap: var(--spacing-1);
}
/* In the mobile bar the search is a plain icon button -- no label, no green
   fill, no hover bar. The panel still drops full-width below the header. */
.dga-header-search--mobile .dga-search-trigger {
  padding: var(--spacing-2) !important;
  background: transparent !important;
  color: var(--text-default) !important;
}
.dga-header-search--mobile .dga-search-trigger__label {
  display: none;
}
.dga-header-search--mobile .dga-search-trigger::after {
  content: none;
}
.dga-mobile-lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2);
  background: transparent;
  border: 0;
  color: var(--text-default);
  cursor: pointer;
}

/* Keep the right cluster (search + language) on the same row as the menu, and
   stretch it to the full nav-row height so search/language become full-height
   tabs matching #headMenuItems (DGA review 14-09). */
.tabrespalign {
  gap: var(--spacing-3);
  flex-wrap: nowrap;
  align-items: stretch;
}

/* ---- "Search" trigger (replaces the old always-open input box) ---------- */
.dga-header-search {
  position: static;
  display: inline-flex;
  align-items: stretch;
  align-self: stretch;                        /* fill the nav row so the trigger's */
  height: 100%;                               /* height:100% resolves (fixes "sinking") */
}

.dga-search-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  /* Full-height tab matching #headMenuItems .menu-item-container: fills the nav
     row (touch top & bottom), 6px radius, light-grey fill + 5px bar on hover. */
  height: 100%;
  padding-block: 0;
  padding-inline: var(--spacing-4);
  background: transparent !important;
  border: 0;
  color: var(--text-default) !important;
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.dga-search-trigger:hover {
  background-color: var(--background-neutral-100) !important;
}
/* Same 5px bottom bar the nav items use. */
.dga-search-trigger::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 8%;
  right: 8%;
  height: 5px;
  border-radius: 6px;
  background-color: transparent;
  transition: background-color 0.15s ease;
}
.dga-search-trigger:hover::after {
  background-color: var(--background-neutral-400);
}
/* Green only while the search panel is open. The hover bar then shows in a
   lighter green (only on hover, same as the closed state's grey bar). */
.dga-search-trigger[aria-expanded="true"] {
  background: var(--button-background-primary-default) !important;
  color: #fff !important;
}
.dga-search-trigger[aria-expanded="true"]:hover::after {
  background-color: var(--colors-primary-sa-flag-400);
}
.dga-search-trigger__icon {
  flex-shrink: 0;
}

/* ---- Expandable panel (full-width row below the nav) -------------------- */
.dga-search-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 50;
  background: var(--background-white);
  border-top: 1px solid var(--border-neutral-primary);
  box-shadow: 0 12px 24px rgba(16, 24, 40, 0.08);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
  padding-top: var(--spacing-6);
  padding-bottom: var(--spacing-10);
}
.dga-search-panel[hidden] {
  display: none;
}

.dga-search-panel__top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--spacing-2);
}
.dga-search-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--text-default);
  cursor: pointer;
  border-radius: var(--radius-full);
}
.dga-search-panel__close:hover {
  background: var(--button-background-neutral-hovered);
}

.dga-search-panel__form {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-3);
}

.dga-search-panel__inputwrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  background: var(--form-field-background-default);
  border: 1px solid var(--form-field-border-default);
  border-radius: var(--radius-md);
  padding: 0 var(--spacing-xl);
  gap: var(--spacing-2);
}
/* Same jank fix used sitewide (dga-forms.css, dga-feedback.css, ...):
   growing border-bottom + a compensating negative margin reflowed the
   field and made it twitch on hover/focus. An inset box-shadow paints the
   same accent without ever changing the box's own dimensions. */
.dga-search-panel__inputwrap:hover:not(:focus-within),
.dga-search-panel__inputwrap:focus-within {
  box-shadow: inset 0 -2px 0 -1px var(--colors-neutral-600);
}
.dga-search-panel__icon {
  flex-shrink: 0;
  color: var(--form-field-text-placeholder);
}
.dga-search-panel__field {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent;
  height: 44px;
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  color: var(--form-field-text-focused);
}
.dga-search-panel__field::placeholder {
  color: var(--form-field-text-placeholder);
}
/* Hide the native search "x" -- we render our own accessible clear button. */
.dga-search-panel__field::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.dga-header-search .dga-search-panel__field {
  background: none !important;
}

.dga-search-panel__clear,
.dga-search-panel__voice {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--form-field-text-placeholder);
  cursor: pointer;
  border-radius: var(--radius-full);
}
.dga-search-panel__clear:hover,
.dga-search-panel__voice:hover {
  color: var(--text-default);
  background: var(--button-background-neutral-hovered);
}
.dga-search-panel__clear[hidden],
.dga-search-panel__voice[hidden] {
  display: none;
}
.is-listening .dga-search-panel__voice {
  color: var(--link-primary);
  background: var(--button-background-neutral-hovered);
}

.dga-search-panel__submit {
  flex-shrink: 0;
  padding: 10px var(--spacing-6);
  background: var(--button-background-primary-default) !important;
  color: #fff !important;
  border: 0;
  border-radius: var(--radius-md);
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.dga-search-panel__submit:hover {
  filter: brightness(0.95);
}

/* ---- Autocomplete dropdown --------------------------------------------- */
.dga-search-panel__auto {
  list-style: none;
  margin: var(--spacing-2) 0 0;
  padding: var(--spacing-2);
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-md);
  background: var(--background-white);
}
.dga-search-panel__auto[hidden] {
  display: none;
}
/* .rtl a { font-family: NeoSans Arabic !important } (legacy bundle rule,
   specificity 0,1,1) ties this rule's own specificity exactly -- scope with
   the parent (0,2,1) + !important to win regardless of stylesheet load
   order, same pattern as dga-search-page.css's chip/card-title fixes. */
.dga-search-panel__auto .dga-search-panel__auto-item a {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-sm);
  color: var(--text-default);
  font-family: var(--font-family-arabic) !important;
  font-size: var(--font-size-text-small);
  line-height: var(--line-height-text-small);
  text-decoration: none;
}
.dga-search-panel__auto-item a:hover {
  background: var(--colors-neutral-100);
  color: var(--link-primary-hovered);
}
.dga-search-panel__auto-item svg {
  flex-shrink: 0;
  color: var(--form-field-text-placeholder);
}

/* ---- "Suggestions for you" chips --------------------------------------- */
.dga-search-panel__suggest {
  margin-top: var(--spacing-6);
}
.dga-search-panel__suggest-label {
  display: block;
  margin-bottom: var(--spacing-3);
  color: var(--link-primary);
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  font-weight: var(--font-weight-bold);
}
.dga-search-panel__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}
.dga-search-panel__chip {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-xl);
  background: var(--colors-neutral-100);
  border: 0;
  border-radius: var(--radius-md);
  color: var(--text-default);
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-small);
  line-height: var(--line-height-text-small);
  text-decoration: none;
}
.dga-search-panel__chip:hover {
  background: var(--background-neutral-200);
  color: var(--text-default);
}

/* ---- Language switcher per Figma (translate icon + "عربي") -------------- */
.dga-header-lang {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--text-default);
}
.dga-header-lang__icon {
  flex-shrink: 0;
}
/* Whole control (translate icon + language name) is one clickable target with
   an underline-on-hover affordance, matching the nav links. Click handling for
   the icon area is wired in dga-header-search.js. */
.dga-header-lang {
  position: relative;
  cursor: pointer;
  height: 100%;
  padding-block: 0;
  padding-inline: var(--spacing-4);
  border-radius: 6px;
  transition: background-color 0.15s ease;
}
.dga-header-lang:hover {
  background-color: var(--background-neutral-100);
}
.dga-header-lang::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 8%;
  right: 8%;
  height: 5px;
  border-radius: 6px;
  background-color: transparent;
  transition: background-color 0.15s ease;
}
.dga-header-lang:hover::after,
.dga-header-lang:focus-within::after {
  background-color: var(--background-neutral-400);
}
/* Per the reference design the language control is a one-click toggle showing
   only the OTHER language (no dropdown, no flag). Weglot already renders that
   target-language link inside its <ul><li><a href="/ar/...">, so we strip its
   dropdown chrome (current-language label, caret, checkbox, absolute panel)
   and surface just that link inline -- clicking it switches language via
   Weglot's own correct URL, both EN->AR and AR->EN. */
.dga-header-lang .weglot-dropdown {
  position: static !important;
  min-width: 0 !important;
  width: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.dga-header-lang .weglot-dropdown .weglot_choice,
.dga-header-lang .weglot-dropdown .wgcurrent {
  display: none !important;
}
.dga-header-lang .weglot-dropdown ul {
  display: block !important;
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  min-width: 0 !important;
  width: auto !important;
}
.dga-header-lang .weglot-dropdown li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.dga-header-lang .weglot-dropdown li a,
.dga-header-lang .weglot-dropdown li a span {
  padding: 0 !important;
  color: var(--text-default);
  /* Weglot/legacy theme CSS forces "NeoSans Arabic" here at higher specificity,
     so pin the DGA font with !important. */
  font-family: var(--font-family-arabic) !important;
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  background: transparent !important;
}
.dga-header-lang .weglot-dropdown li a:hover {
  color: var(--text-default);
  text-decoration: none;
}
/* No country flag per the reference -- Weglot draws the target-language flag
   as the link's ::before background image. */
.dga-header-lang .weglot-dropdown li a:before {
  display: none !important;
}

/* ---- Small screens: panel form stacks ---------------------------------- */
@media (max-width: 768px) {
  .dga-search-panel__form {
    flex-wrap: wrap;
  }
  .dga-search-panel__inputwrap {
    flex-basis: 100%;
  }
  .dga-search-panel__submit {
    flex-basis: 100%;
    padding: var(--spacing-3);
  }
}