/* ── Breed search in the MENU row ──────────────────────────────────────────
   The homepage's breed box, on every other page that has the bare MENU row.

   Those pages render `<nav class="nav-bar">` as a single right-aligned MENU
   button with nothing beside it, which is the same slot the homepage fills
   with .breed-search-standalone. This file dresses the box that now sits
   there, and it is index.html's own CSS rather than a new skin: the same
   .filter-label, .search-row, .breed-wrapper, .breed-input, .breed-icon,
   .breed-clear-btn, .breed-go-btn, .breed-dropdown, .breed-option and
   .pes-text-link rules, copied across unchanged.

   Two deliberate departures, each forced by where the box now lives:

     • Every rule is scoped under .nav-bar. Two of these pages
       (/available/ and /start) already carry a breed box of their own
       further down, with their own copies of these class names in their
       inline <style>. Scoping keeps this file inside the menu row, so
       those boxes keep their own styling and nothing here reaches them.

     • Every var() carries its literal fallback. These pages do not all
       declare the same custom properties — /faq and /all-locations have no
       --brown or --brown-mid, /greg-dashboard has none of --brown-mid,
       --cream or --warm-white — so the values from index.html's :root are
       written out behind each one and the box looks the same on all of them.

   The band itself is not restyled: each page keeps its own .nav-bar padding,
   background and border, so the row grows to fit the box and otherwise reads
   exactly as it did. `overflow: visible` is the one addition, so the dropdown
   can hang below the row the way it does on the homepage. */

.nav-bar { overflow: visible; }

/* The box takes the row; the MENU button keeps its place at the right-hand
   end of .search-row, which is where the homepage keeps it too. */
.nav-bar .nav-breed-search {
  flex: 1 1 auto;
  min-width: 0;
}

.nav-bar .filter-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brown-mid, #7B4A22);
  white-space: nowrap;
  margin-bottom: 8px;
}

.nav-bar .search-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-bar .breed-wrapper {
  position: relative;
  flex: 1;
  min-width: 180px;
  max-width: 420px;
  overflow: visible;
}

.nav-bar .breed-input {
  width: 100%;
  padding: 10px 36px 10px 38px;
  box-sizing: border-box;
  border: 2px solid rgba(58,32,16,0.13);
  border-radius: 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.95rem;
  background: white;
  color: var(--brown, #3A2010);
  transition: border-color 0.2s;
  cursor: pointer;
}
.nav-bar .breed-input:focus { outline: none; border-color: var(--gold, #C9893A); }

.nav-bar .breed-icon {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  pointer-events: none;
}

/* × and GO are both useful while there is text in the box, the way
   /available/ shows them: on the homepage they alternate, because there the ×
   clears a filter that is already applied. So .has-actions shifts the × clear
   of GO and widens the field's right padding while the two are on screen, and
   nothing moves when the box is empty. */
.nav-bar .breed-wrapper.has-actions .breed-input { padding-right: 84px; }

.nav-bar .breed-clear-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #3A2010;
  color: #ffffff;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1;
  font-family: 'Nunito', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.nav-bar .breed-clear-btn:focus { outline: none; }
.nav-bar .breed-wrapper.has-actions .breed-clear-btn { right: 54px; }

.nav-bar .breed-go-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--gold, #C9893A);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  z-index: 2;
  line-height: 1.2;
  letter-spacing: 0.5px;
  display: none;
}
.nav-bar .breed-go-btn:hover { filter: brightness(1.08); }

.nav-bar .breed-dropdown {
  position: absolute;
  top: calc(100% + 6px); left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(440px, 90vw);
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(58,32,16,0.16);
  max-height: 320px;
  overflow-y: auto;
  z-index: 9999;
  display: none;
  border: 1px solid rgba(58,32,16,0.08);
  text-align: left;
}
.nav-bar .breed-dropdown.open { display: block; }

.nav-bar .breed-option {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 0.92rem;
  transition: background 0.12s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--brown-mid, #7B4A22);
  font-weight: 700;
}
.nav-bar .breed-option:first-child { border-radius: 12px 12px 0 0; }
.nav-bar .breed-option:last-child  { border-radius: 0 0 12px 12px; }
.nav-bar .breed-option:hover,
.nav-bar .breed-option.highlighted { background: var(--cream, #FAF7F0); }

/* The Pup-E-Matchmaker line under the field. */
.nav-bar .pes-text-link {
  display: inline-block;
  color: #c9893a;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 0.3px;
}
.nav-bar .pes-text-link:hover {
  text-decoration: underline;
  color: #e0a64a;
}
.nav-bar .pes-text-link-standalone {
  display: block;
  margin-top: 6px;
}

/* index.html's own two breakpoints for this box, carried over unchanged. */
@media (max-width: 600px) {
  .nav-bar .search-row { gap: 10px; }
  .nav-bar .pes-text-link { font-size: 0.8rem; }
}

@media (min-width: 1024px) {
  .nav-bar .search-row {
    width: 100%;
    gap: 24px;
    align-items: flex-end;
  }
  .nav-bar .breed-wrapper {
    flex: 1 1 auto;
    max-width: none;
    min-width: 320px;
  }
  .nav-bar .hamburger-menu { margin-left: auto; }
  .nav-bar .hamburger-menu[data-menu-label]::before { bottom: calc(100% + 6px); }
}