/* The shared navigation bar. Loaded by every customer-facing page; the markup
 * it styles is built by site-nav.js.
 *
 * The listings page bar is the canonical design this reproduces: cream, blurred,
 * sticky, 68px, Fraunces wordmark, clay CTA. The variables below are the ones
 * every page already defines in its own :root; the fallbacks exist so the bar
 * is never unstyled on a page that defines fewer of them.
 */

.mv-nav {
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: blur(10px);
  background: rgba(244, 241, 234, .84);
  border-bottom: 1px solid rgba(229, 223, 211, .78);
}
/* The wrap class is page-owned (max-width + padding) and differs slightly per
 * page; only the row inside it belongs to this file. */
.mv-nav-in {
  display: flex; align-items: center; gap: 20px; height: 68px;
}

.mv-logo {
  display: flex; align-items: baseline; gap: 8px;
  flex: 0 0 auto; text-decoration: none; color: inherit;
  font-family: "Fraunces", Georgia, serif; font-weight: 700;
  font-size: 1.45rem; letter-spacing: -.02em;
}
.mv-logo-mark { width: 32px; height: 32px; align-self: center; flex: 0 0 auto; }
.mv-logo-ar {
  font-family: "Noto Kufi Arabic", "Inter", sans-serif;
  font-size: .78rem; font-weight: 600; color: var(--muted, #6d665a);
}

/* `margin-inline-start:auto` rather than `margin-left`: this is the one
 * declaration that decides which end of the bar the controls sit at, and the
 * logical property flips with dir="rtl" without a second RTL rule. */
.mv-nav-links {
  display: flex; align-items: center; gap: 22px;
  margin-inline-start: auto; min-width: 0;
  font-size: .92rem; font-weight: 500; color: var(--ink-soft, #3b352d);
}
.mv-nav-links a { color: inherit; text-decoration: none; white-space: nowrap; }
.mv-nav-links a:hover { color: var(--clay, #b8542f); }
/* The page you are on, stated rather than implied. */
.mv-nav-links a[aria-current="page"] { color: var(--clay, #b8542f); font-weight: 650; }

.mv-lang {
  flex: 0 0 auto;
  font: inherit; font-weight: 700; font-size: .85rem;
  padding: 8px 14px; border-radius: 999px;
  border: 1.5px solid var(--line, #e5dfd3); background: transparent;
  color: var(--ink, #16130f); cursor: pointer; white-space: nowrap;
}
.mv-lang:hover { border-color: #c7bcaa; }

/* The single primary action on the site. */
.mv-cta {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px;
  background: var(--clay, #b8542f); color: #fff;
  font-weight: 700; font-size: .9rem; text-decoration: none; white-space: nowrap;
  box-shadow: 0 12px 24px -15px rgba(184, 84, 47, .7);
  transition: background .16s, transform .16s;
}
.mv-cta:hover { background: var(--clay2, #c96a42); transform: translateY(-1px); }
/* The arrow is decoration and must not be read out or translated; it is also
 * the first thing to go when the bar is tight, below. */
.mv-cta::after { content: "→"; font-size: 1rem; line-height: 1; }
[dir="rtl"] .mv-cta::after, html[dir="rtl"] .mv-cta::after { content: "←"; }

.mv-signin {
  flex: 0 0 auto;
  font-size: .9rem; font-weight: 650; text-decoration: none;
  color: var(--ink-soft, #3b352d); white-space: nowrap;
}
.mv-signin:hover { color: var(--clay, #b8542f); }

/* ---- account menu ------------------------------------------------------- */
.mv-account-slot { flex: 0 0 auto; display: flex; align-items: center; }
.mv-account { position: relative; }
.mv-account-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px 5px 6px; border-radius: 999px;
  border: 1.5px solid var(--line, #e5dfd3); background: var(--surface, #fff);
  font: inherit; font-size: .86rem; font-weight: 650; line-height: 1;
  color: var(--ink, #16130f); cursor: pointer; white-space: nowrap;
}
html[dir="rtl"] .mv-account-trigger { padding: 5px 6px 5px 11px; }
.mv-account-trigger:hover { border-color: #c7bcaa; }
.mv-account-trigger:focus-visible { outline: 2px solid var(--clay, #b8542f); outline-offset: 2px; }
.mv-account-avatar {
  width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--clay, #b8542f); color: #fff;
  font-size: .72rem; font-weight: 800; text-transform: uppercase;
}
.mv-account-caret {
  width: 0; height: 0; border-left: 4px solid transparent;
  border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .55;
}
.mv-account-panel {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 1200;
  min-width: 232px; padding: 7px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e5dfd3); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(22, 19, 15, .04), 0 22px 44px -20px rgba(22, 19, 15, .3);
}
.mv-account-panel[hidden] { display: none; }
.mv-account-who {
  padding: 9px 11px 11px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line, #e5dfd3);
}
.mv-account-who b { display: block; font-size: .9rem; color: var(--ink, #16130f); }
.mv-account-who span {
  display: block; font-size: .76rem; color: var(--muted, #6d665a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  /* An address is LTR even in an RTL page, but it still belongs at the
     trailing edge with everything else. */
  direction: ltr;
}
html[dir="rtl"] .mv-account-who span { text-align: right; }
.mv-account-panel a, .mv-account-panel button {
  display: block; width: 100%; padding: 9px 11px;
  border: none; background: none; border-radius: 9px;
  font: inherit; font-size: .86rem; font-weight: 600;
  color: var(--ink-soft, #3b352d); text-align: start;
  text-decoration: none; cursor: pointer;
}
.mv-account-panel a:hover, .mv-account-panel button:hover {
  background: var(--clay-soft, #f7ece5); color: var(--clay, #b8542f);
}
.mv-account-signout {
  margin-top: 6px; padding-top: 12px !important;
  border-top: 1px solid var(--line, #e5dfd3) !important;
  color: #a8341f !important;
}
.mv-account-signout:hover { background: #fdeeea !important; color: #8f2b19 !important; }
.mv-account-error { margin: 6px 11px 2px; font-size: .76rem; color: #a8341f; }
.mv-account-error[hidden] { display: none; }

/* ---- responsive --------------------------------------------------------
 * Three widths, each measured rather than guessed. The bar must never wrap,
 * never overflow sideways, and never push the account control off the edge --
 * that last one is how Sign out became unreachable on a phone in the first
 * place.
 */

/* Tablet: the three text links are the first thing to go -- they all exist in
   the account panel, and the CTA is the reason someone is here. */
@media (max-width: 900px) {
  .mv-nav-links { display: none; }
  .mv-nav-in { gap: 14px; }
  /* Without the links there is nothing left to push the controls over. */
  .mv-logo { margin-inline-end: auto; }
}

/* Phone: the wordmark yields to the mark. English runs longer than Arabic --
   "Start a valuation" is 143px against 100px -- and at 375px the full
   lockup plus language plus CTA plus the account control does not fit in any
   arrangement that keeps the CTA. The mark alone is still the brand, and it is
   still a link home. */
@media (max-width: 760px) {
  .mv-nav-in { gap: 10px; height: 60px; }
  .mv-logo-text, .mv-logo-ar { display: none; }
  .mv-lang { padding: 7px 10px; font-size: .8rem; }
  .mv-cta { padding: 9px 13px; font-size: .82rem; gap: 6px; }
  .mv-account-name, .mv-account-caret { display: none; }
  .mv-account-trigger { padding: 5px; }
  html[dir="rtl"] .mv-account-trigger { padding: 5px; }
}

/* Very narrow (iPhone SE and below): the CTA keeps its words and drops its
   decoration rather than the other way round. */
@media (max-width: 360px) {
  .mv-cta::after { display: none; }
}

/* A spinner is decoration; honour the OS setting. */
@media (prefers-reduced-motion: reduce) {
  .mv-cta { transition: none; }
  .mv-cta:hover { transform: none; }
}