/* navbar.css — cleaned and organized
   Sections: variables, layout, containers, search, controls
*/

:root {
  --navbar-bg: #04202C;
  --navbar-search-w: 520px;
  --navbar-search-h: 2.5rem;
  --navbar-search-bg: #506578;
}

/* -----------------------------
   Layout
   ----------------------------- */
#mainNavbar {
  background: var(--navbar-bg);
  width: 100%;
  z-index: 3000;
  padding: 0;
  position: fixed;
  top: 0; left: 0; right: 0;
}

#searchContainer {
  background: var(--color-forest);
  color: #fff;
  width: 100%;
  z-index: 2000;
  position: sticky;
  top: 0;
}

.navbar-main-row {
  display: flex;
  align-items: center;
  min-height: 50px;
  width: 100%;
  padding: 12px;
  gap: .5rem;
}

/* When navbars are fixed, the page content needs top offset. Use `.pt-navbar` on <main>. */
.pt-navbar { padding-top: calc(var(--navbar-search-h) + 24px); }

/* Spacer div to offset fixed navbar while keeping bg-color from the page header */
.mercat-navbar-spacer { height: calc(var(--navbar-search-h) + 24px); }

/* -----------------------------
   Search containers
   ----------------------------- */
.navbar-search-wrap { width: 100%; max-width: var(--navbar-search-w); margin: 0 auto; }
.navbar-search-wrap.w-100 {
  max-width: 900px;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}
.navbar-search-wrap { position: relative; }
.navbar-search { padding-right: 12px; }
/* Clear (×) button removed — styles intentionally deleted. */

/* IMPORTANT: keep this specific override — do not remove it. */
.navbar-search-wrap.w-100 .navbar-back-btn{margin-right:0 !important;margin-inline-end:0 !important}

/* -----------------------------
   Search input
   ----------------------------- */
.navbar-search {
  width: 100%;
  font-size: 1rem;
  height: var(--navbar-search-h);
  line-height: var(--navbar-search-h);
  padding-top: 0;
  padding-bottom: 0;
  padding: 0 12px;
  background: var(--navbar-search-bg);
  border: none;
  color: #fff;
  border-radius: 1.25rem;
  box-sizing: border-box;
  transition: background .2s, border-color .2s, width .2s, padding .2s;
}
.navbar-search::placeholder { color: rgba(255,255,255,.5); }
#mainNavbar .navbar-search,
#mainNavbar .navbar-search:focus,
#searchContainer .navbar-search,
#searchContainer .navbar-search:focus { color: #fff; }
#mainNavbar .navbar-search:focus,
#searchContainer .navbar-search:focus {
  background: #516578;
  border: 0 solid #7ec3ff;
  box-shadow: 0 0 0 1px #7ec3ff, 0 2px 16px 0 rgba(126,195,255,.15);
  outline: none;
}

/* -----------------------------
   Back button
   ----------------------------- */
.navbar-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--navbar-search-h);
  height: var(--navbar-search-h);
  min-width: var(--navbar-search-h);
  padding: 0;
  margin-right: 0;
  background: #516578;
  border: none;
  border-radius: 50%;
  overflow: hidden;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background .18s, color .18s;
  box-shadow: 0 0 0 1px #7ec3ff, 0 2px 8px 0 rgba(126,195,255,.1);
}

.navbar-search { padding-left: 12px; padding-right: 12px; }

/* Clear (×) button for navbar search */
.navbar-search-clear { position: absolute; right: 12px; top: 50%; transform: translateY(calc(-50% - 1px)); border: none; background: transparent; color: #fff; font-size: 18px; line-height: normal; padding: 0 8px; cursor: pointer; z-index: 3; height: var(--navbar-search-h); display: inline-flex; align-items: center; justify-content: center; }
.navbar-search-clear.d-none { display: none; }
.navbar-search-clear:focus { outline: none; }

/* Hide native browser 'clear' buttons for search inputs so we don't duplicate UI */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
/* IE/Edge clear/reveal buttons */
input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

/* Hide back-button only on the exact mercat root URL. The template adds
  `is-mercat-root` to the body when request.path == '/' + slug_mercat. */
body.is-mercat-root .navbar-back-btn { display: none !important; }