/**
 * Search bar expansion - takes over full header width
 * Uses semantic class names for targeting instead of order-* classes
 * to support flexible DOM ordering for accessibility (keyboard focus order)
 */

/* Animate logo/nav and CTA containers */
.header-row-main .header-nav-container,
.header-row-main .header-cta-container {
  transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1),
              max-width 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animate search container */
.header-row-main .header-search-container {
  transition: flex-grow 500ms cubic-bezier(0.4, 0, 0.2, 1),
              flex-shrink 500ms cubic-bezier(0.4, 0, 0.2, 1),
              flex-basis 500ms cubic-bezier(0.4, 0, 0.2, 1),
              max-width 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure search container doesn't move vertically and stays right-aligned */
.header-row-main .header-search-container {
  align-self: center;
  margin-left: auto;
}

/* Hide logo, nav, and CTA when search is expanded (controlled by JS) */
.header-row-main:has(.header-search-form .form-item.search-expanded) .header-nav-container,
.header-row-main:has(.header-search-form .form-item.search-expanded) .header-cta-container {
  opacity: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Expand search container when expanded (controlled by JS) */
.header-row-main:has(.header-search-form .form-item.search-expanded) .header-search-container {
  flex-grow: 1 !important;
  /* Leave room for Close button (~100px) */
  max-width: calc(100% - 100px) !important;
  /* Reset margin-left so space is on the right where Close button is */
  margin-left: 0 !important;
}

/* Hide Chrome's native clear button to prevent overlap */
.header-search-form input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

/* Search form-item wrapper when expanded - full width */
.header-search-form .form-item.search-expanded {
  width: 100% !important;
  transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Search input when expanded - full width */
.header-search-form .form-item.search-expanded input[type="search"] {
  width: 100% !important;
  height: 40px !important;
  transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1),
              height 500ms cubic-bezier(0.4, 0, 0.2, 1);
}