/* Cuisine à la française — local search styles
   Loaded after the site theme so we can override .cf-search defaults. */

.cf-search-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 320px;
}

/* Apply directly to the input so it looks right whether or not search.js
   has wrapped it (the wrap is added on pages that need the autocomplete
   dropdown; the search results page uses the input bare). */
input[data-cf-search] {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 16px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 20px;
  outline: none;
  font-family: inherit;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* Header context — fill the full width of the brown bottom row with a
   light-grey background that matches the breadcrumb strip below (#crumbs
   uses #eee in header.css). This "closes" the area visually so the orange
   nav doesn't float over the dark brown body color. */
.cf-header-right-bottom {
  background: #eee;
}

.cf-header-right-bottom .cf-search {
  height: 44px;
  box-sizing: border-box;
  padding: 0 10px;
  display: flex;
  align-items: center;
}

.cf-header-right-bottom .cf-search-wrap {
  display: block;
  width: 100%;
  max-width: none;
}

input[data-cf-search]:focus {
  border-color: #eb6c44;
  box-shadow: 0 0 0 3px rgba(235, 108, 68, 0.15);
}

.cf-search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 420px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  font-size: 14px;
}

.cf-search-group-title {
  padding: 8px 14px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
}

.cf-search-item {
  display: block;
  padding: 10px 14px;
  color: #222;
  text-decoration: none;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
}

.cf-search-item:hover,
.cf-search-item.active {
  background: #fff5f1;
  color: #eb6c44;
}

.cf-search-item-title {
  display: block;
}

.cf-search-all {
  display: block;
  padding: 12px 14px;
  font-weight: 600;
  text-align: center;
  color: #eb6c44;
  background: #fafafa;
  text-decoration: none;
  border-top: 2px solid #f0f0f0;
}

.cf-search-all:hover {
  background: #fff5f1;
}

.cf-search-empty {
  padding: 14px;
  text-align: center;
  color: #888;
  font-style: italic;
}

/* Wider input on the dedicated results page */
.cf-search-page .cf-search-wrap {
  max-width: 600px;
}

.cf-search-page .cf-search-wrap input[data-cf-search] {
  padding: 12px 18px;
  font-size: 16px;
}