/* Site-search modal styling (systemsdev-16366).
 *
 * PORTED VERBATIM from the static site's source stylesheet, wpml-org/content
 * site/clean/styles/input.css — the "global search modal" block (there under @layer components;
 * flattened here, and the two rules this app adds are marked below). Keep this file in step with
 * that block on any chrome-parity pass: the two searches are meant to be visually identical, and
 * a client crossing between wpml.org and app.wpml.org should not be able to tell them apart.
 *
 * Why this file exists at all, rather than the rules arriving with the rest of the chrome:
 * app/assets/stylesheets/static_site.css is the static build's compiled styles.css, vendored on
 * 2026-07-09 — BEFORE the search modal shipped on that side — so it carries none of these rules.
 * Re-vendoring the whole stylesheet would land weeks of unrelated design changes across every app
 * page at once, which is a separate review.
 *
 * Every custom property below (--color-fg-*, --color-surface-*, --color-brand-*) is already
 * defined by that vendored stylesheet, which both layouts load BEFORE this one. Loading order
 * matters: on its own this file renders an unstyled modal.
 */

.gs-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15, 23, 42, 0.55);
  padding: 15vh 1rem 1.5rem;
  display: flex; align-items: flex-start; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  /* visibility must NOT be interpolated over the fade (systemsdev-16618): a transitioned
     `visibility` stays `hidden` for the WHOLE 240ms when opening, and an element that is
     visibility:hidden cannot take focus — so site_search.js's `input.focus()` (one rAF after
     the class flip, ~16ms in) was silently refused and focus stayed on the trigger button,
     which also broke Esc-to-close. Step it at 0s instead: instantly visible on open, held
     visible until the fade-out finishes on close. Opacity still carries the animation, so the
     modal looks unchanged. Ported from the same fix on the static side (content MR !158). */
  transition: opacity 240ms ease, visibility 0s linear 240ms;
}
.gs-overlay.open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 240ms ease, visibility 0s linear 0s;
}
.gs-panel {
  width: 100%; max-width: 40rem;
  display: flex; flex-direction: column;
  max-height: min(70vh, 34rem);
  border-radius: 0.75rem; background: #fff; overflow: hidden;
  box-shadow: 0 20px 50px rgba(2, 8, 20, 0.35);
}
.gs-field {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-surface-border);
  color: var(--color-fg-muted);
}
.gs-field input {
  flex: 1; min-width: 0; border: 0; outline: none;
  font-size: 1.05rem; color: var(--color-fg-strong);
  background: transparent;
}
.gs-field input::-webkit-search-cancel-button { display: none; }
.gs-close {
  flex: none; font-size: 0.72rem; font-weight: 600;
  color: var(--color-fg-muted);
  border: 1px solid var(--color-surface-border);
  border-radius: 0.375rem; padding: 0.15rem 0.45rem;
  background: var(--color-surface-raised); cursor: pointer;
}
.gs-close:hover { background: var(--color-surface-sunken); }
.gs-status {
  padding: 1rem; font-size: 0.9rem; color: var(--color-fg-muted);
}
.gs-results {
  overflow-y: auto; overscroll-behavior: contain;
  padding: 0.5rem 0.5rem 0.75rem;
}
.gs-group + .gs-group { margin-top: 0.75rem; }
.gs-group-label {
  padding: 0.4rem 0.6rem 0.25rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-fg-faint);
}
.gs-row {
  display: block; padding: 0.45rem 0.6rem; border-radius: 0.5rem;
  text-decoration: none; color: var(--color-fg-body);
}
.gs-row:hover, .gs-row.is-active { background: var(--color-brand-50); }
.gs-row-top { display: flex; align-items: baseline; gap: 0.6rem; }
.gs-row-t { font-weight: 600; color: var(--color-fg-strong); }
.gs-badge {
  margin-inline-start: auto; flex: none;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em;
  color: var(--color-brand-700); background: var(--color-brand-50);
  border: 1px solid var(--color-brand-100);
  border-radius: 999px; padding: 0.05rem 0.5rem;
}
.gs-row:hover .gs-badge, .gs-row.is-active .gs-badge {
  background: #fff;
}

/* ADDED HERE (not in the static source yet — systemsdev-16366): the log-in flag on a result that
 * needs an account. Amber rather than brand so it reads as a condition to satisfy, not a
 * category label like the section badge sitting next to it. Ships to the static side in the same
 * ticket; keep the two definitions identical. */
.gs-badge-auth {
  margin-inline-start: 0.4rem;
  color: #92400e; background: #fef3c7; border-color: #fde68a;
}
.gs-row:hover .gs-badge-auth, .gs-row.is-active .gs-badge-auth {
  background: #fffbeb;
}

.gs-row-d {
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 0.1rem; font-size: 0.82rem;
  color: var(--color-fg-muted);
}
.gs-sub {
  margin-inline-start: 0.9rem; padding: 0.3rem 0.6rem;
  font-size: 0.85rem; color: var(--color-fg-muted);
}
.gs-sub-t::before { content: "# "; color: var(--color-fg-faint); }
.gs-more {
  display: block; width: 100%; text-align: start;
  padding: 0.35rem 0.6rem; border: 0; background: none;
  cursor: pointer; border-radius: 0.5rem;
  font-size: 0.82rem; font-weight: 600;
  color: var(--color-brand-600);
}
.gs-more:hover { background: var(--color-surface-raised); }
@media (max-width: 480px) {
  .gs-overlay { padding: 4rem 0.6rem 1rem; }
  .gs-panel { max-height: 80vh; }
}

/* Matches the static site's reduced-motion block, which lists .gs-overlay among the surfaces
 * whose transition is dropped.
 *
 * .gs-overlay.open has to be named too. Media queries add no specificity, so the one-class
 * `.gs-overlay` selector here loses to the two-class `.gs-overlay.open` rule above, and the fade
 * that rule declares would run for a visitor who asked for no motion (systemsdev-16618). */
@media (prefers-reduced-motion: reduce) {
  .gs-overlay,
  .gs-overlay.open { transition: none; }
}