/**
 * Component — Search Overlay
 *
 * Structural chrome only: trigger, backdrop, panel, close button. Per the
 * Component Ownership Rule, the search form itself is Stage 13's
 * responsibility. Panel interior is unstyled here beyond layout — Stage 13
 * renders into it via RL_Hooks::SEARCH_OVERLAY_CONTENT.
 *
 * @package Recipes_Lola
 * @version 1.0.0
 */

.rl-search-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--rl-space-10);
  block-size: var(--rl-space-10);
  border-radius: var(--rl-radius-md);
  color: var(--rl-color-foreground);
  flex-shrink: 0;
  transition: background-color var(--rl-transition-fast);
}

.rl-search-trigger:hover { background-color: var(--rl-color-surface-raised); }

.rl-search-trigger:focus-visible {
  outline: var(--rl-focus-outline-width) solid var(--rl-focus-outline-color);
  outline-offset: var(--rl-focus-outline-offset);
}

.rl-search-trigger__icon { inline-size: var(--rl-icon-size-md); block-size: var(--rl-icon-size-md); }

.rl-search-overlay { position: fixed; inset: 0; z-index: var(--rl-z-modal); }
.rl-search-overlay[hidden] { display: none; }

.rl-search-overlay__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--rl-color-overlay);
  opacity: 0;
  transition: opacity var(--rl-transition-default);
}

.rl-search-overlay.is-open .rl-search-overlay__backdrop { opacity: 1; }

.rl-search-overlay__panel {
  position: relative;
  z-index: var(--rl-z-overlay);
  background-color: var(--rl-color-surface);
  box-shadow: var(--rl-shadow-overlay);
  padding-block: var(--rl-space-8);
  transform: translateY(-100%);
  transition: transform var(--rl-transition-default);
}

.rl-search-overlay.is-open .rl-search-overlay__panel { transform: translateY(0); }

.rl-search-overlay__inner {
  inline-size: 100%;
  max-inline-size: var(--rl-container-sm);
  margin-inline: auto;
  padding-inline: var(--rl-container-padding-x);
}

.rl-search-overlay__close {
  position: absolute;
  inset-block-start: var(--rl-space-6);
  inset-inline-end: var(--rl-space-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--rl-space-10);
  block-size: var(--rl-space-10);
  border-radius: var(--rl-radius-md);
  color: var(--rl-color-foreground-muted);
  transition: background-color var(--rl-transition-fast), color var(--rl-transition-fast);
}

.rl-search-overlay__close:hover { background-color: var(--rl-color-surface-raised); color: var(--rl-color-foreground); }

.rl-search-overlay__close:focus-visible {
  outline: var(--rl-focus-outline-width) solid var(--rl-focus-outline-color);
  outline-offset: var(--rl-focus-outline-offset);
}

.rl-search-overlay__close-icon { inline-size: var(--rl-icon-size-sm); block-size: var(--rl-icon-size-sm); }