/**
 * Mobile Inline Search Styles
 * Displays search bar below header on screens < 600px
 * Agence Minimal - 2025
 */

/* ==========================================
   Mobile Inline Search Container
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

.mobileSearchInline {
  display: none;
  background: #fff;
  border-bottom: none;
  position: absolute;
  top: 95px;
  z-index: 40;
  transition: opacity 0.3s ease, transform 0.3s ease;
  width: calc(100% - 50px);
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 8px;
}

.siteHeader>.w-100.px-3 {
  z-index: 41;
  position: relative;
}

.mobileSearchInline .mobileSearchHeader .mobileSearchInputField {
  border: none;
  background: #ffff;
  outline: none !important;
  box-shadow: none !important;
}

/* Adjust when header scrolls up */
/* .headerUp ~ #smooth-wrapper .mobileSearchInline,
body:has(.headerUp) .mobileSearchInline {
  top: 56px; 
} */

/* ==========================================
   Show on mobile < 600px
   ========================================== */
@media (max-width: 600px) {
  .mobileSearchInline {
    display: block;
  }

  /* Add padding to main content to account for fixed search bar */
  #smooth-wrapper {
    padding-top: 53px;
    /* Height of search bar + padding */
  }

  /* Hide when burger menu is open */
  .responsiveNav.open+.mobileSearchInline {
    display: none;
  }

  /* Hide search icon in header on mobile */
  .d-block.d-lg-none .eventSearch {
    display: none !important;
  }

  /* Ensure header stays on one line */
  .siteHeader .headerInner .row {
    flex-wrap: nowrap !important;
  }

  /* Adjust logo column to leave space for burger */
  .siteHeader .headerInner .siteLogoInit {
    flex: 1 1 auto;
    max-width: calc(100% - 70px) !important;
  }

  /* Ensure burger menu column doesn't wrap */
  .d-block.d-lg-none.col-4 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Remove gap that might cause wrapping */
  .d-block.d-lg-none .gap-3 {
    gap: 0.5rem !important;
  }
}

/* ==========================================
   Search Header (Input + Close button)
   ========================================== */
.mobileSearchHeader {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ==========================================
   Search Form
   ========================================== */
.mobileSearchForm {
  flex: 1;
  width: 100%;
  max-width: 100%;
}

/* ==========================================
   Input Wrapper
   ========================================== */
.searchInputWrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.searchIconInline {
  position: absolute;
  left: 12px;
  color: #666;
  pointer-events: none;
}

/* ==========================================
   Search Input Field
   ========================================== */
.mobileSearchInputField {
  width: 100%;
  padding: 10px 40px 10px 40px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  /* font-family: "Suisse Intl", Arial, sans-serif; */
  font-family: "Open Sans", sans-serif;
  color: #101720;
  background-color: #f5f5f5;
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.2s ease;
}

.mobileSearchInputField:focus {
  border-color: #EEC21B;
  background-color: #fff;
  box-shadow: none !important;
  outline: none !important;
}

.mobileSearchInputField::placeholder {
  color: #101720;
  font-size: 14px;
}

/* Hide native X from search type */
.mobileSearchInputField[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* ==========================================
   Clear Button (X icon inside input)
   ========================================== */
.mobileClearBtn {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: #101720;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.2s ease;
}

.mobileClearBtn:hover {
  color: #EEC21B;
}

.mobileClearBtn:focus {
  outline: 2px solid #EEC21B;
  outline-offset: 2px;
}

/* ==========================================
   Close Button (FERMER)
   ========================================== */
.mobileCloseBtn {
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: #101720;
  padding: 0px;
  white-space: nowrap;
  /* font-family: "Suisse Intl", Arial, sans-serif; */
  font-family: "Open Sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color 0.2s ease;
}

.mobileCloseBtn:hover {
  color: #EEC21B;
}

.mobileCloseBtn:focus {
  outline: 2px solid #EEC21B;
  outline-offset: 2px;
}

/* ==========================================
   Mobile Search Results Dropdown
   ========================================== */
.mobileSearchResults {
  display: none;
  list-style: none;
  margin: 15px 0;
  padding: 0;
  background: #fff;
  border: none;
  border-radius: 0;
  max-height: 60vh;
  overflow-y: auto;
  box-shadow: none;
}

.mobileSearchResults.has-results {
  display: block;
}

/* Mobile result items */
.mobile-result-item {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s ease;
  outline: none;
}

.mobile-result-item:last-child {
  border-bottom: none;
}

.mobile-result-item:active,
.mobile-result-item:hover {
  background-color: #f8f8f8;
}

/* Focused state for keyboard navigation */
.mobile-result-item.focused {
  background-color: #f0f0f0;
  border-left: 3px solid #EEC21B;
  padding-left: 13px;
}

.mobile-result-item:focus {
  outline: 2px solid #EEC21B;
  outline-offset: -2px;
}

.mobile-result-title {
  font-size: 14px;
  font-weight: 600;
  color: #101720;
  margin-bottom: 4px;
  /* font-family: "Suisse Intl", Arial, sans-serif; */
  font-family: "Open Sans", sans-serif;
}

.mobile-result-excerpt {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
  /* font-family: "Suisse Intl", Arial, sans-serif; */
  font-family: "Open Sans", sans-serif;
}

/* Loading, no results, error states */
.mobileSearchResults .loading,
.mobileSearchResults .no-results,
.mobileSearchResults .error {
  padding: 24px 16px;
  text-align: center;
  font-size: 14px;
  color: #666;
  /* font-family: "Suisse Intl", Arial, sans-serif; */
  font-family: "Open Sans", sans-serif;
}

.mobileSearchResults .error {
  color: #d32f2f;
}

/* ==========================================
   Accessibility
   ========================================== */
.mobileSearchInline .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}