/**
 * Bootstrap 5 — Avenue theme layer (nav + site-modal + Tom Select compat).
 * Loaded after Bootstrap CSS and shared.css.
 */

:root {
  --bs-primary: var(--accent, #0066ff);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent-hover);
  --bs-border-radius: 0.5rem;
  --bs-body-font-family: var(--font-body, 'Plus Jakarta Sans', system-ui, sans-serif);
}

/* ════════════════════════════════════════════════════════════════
   PUBLIC NAV — PF-style (custom .pf-nav, not Bootstrap .navbar)
════════════════════════════════════════════════════════════════ */
.pf-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  border-bottom: 1px solid rgba(0,0,0,.08);
  transition: box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.pf-nav--scrolled {
  background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent) 100%);
  box-shadow: 0 4px 20px var(--accent-glow);
}

/* Home page: translucent themed gradient until scroll */
body.home .pf-nav:not(.pf-nav--scrolled) {
  background:
    linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  opacity: 1;
  border-color: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Inner layout */
.pf-nav__inner {
  display: flex;
  align-items: center;
  height: 54px;
  gap: 20px;
}

/* Brand */
.pf-nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  color: #fff;
}
body.home .pf-nav:not(.pf-nav--scrolled) .pf-nav__brand { color: #fff; }
.pf-nav__brand-804 { font-family: var(--font-nav); font-weight: 800; font-size: 1.05rem; color: var(--accent); }
.pf-nav__brand-av { font-family: var(--font-nav); font-weight: 800; font-size: 1.05rem; letter-spacing: .04em; color: #fff; }
.pf-nav__brand-sub {
  display: block;
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-top: 1px;
}
body.home .pf-nav:not(.pf-nav--scrolled) .pf-nav__brand-sub { color: rgba(255,255,255,.6); }

/* ── Image-based brand (.pf-nav__brand--img) ─────────────── */
.pf-nav__brand--img { gap: 0; padding: 4px 0; }
.pf-nav__brand-img {
  display: block;
  height: 38px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: filter .25s ease, opacity .2s ease, height .25s ease;
}
.pf-nav__brand--img:hover .pf-nav__brand-img { opacity: .85; }

body.home .pf-nav:not(.pf-nav--scrolled) .pf-nav__brand-img {
  filter: brightness(0) invert(1);
}

.pf-nav--scrolled .pf-nav__brand-img { height: 34px; }

@media (max-width: 640px) {
  .pf-nav__inner { height: 50px; gap: 10px; }
  .pf-nav__brand-img { height: 32px; max-width: 150px; }
  .pf-nav--scrolled .pf-nav__brand-img { height: 30px; }
}

/* Nav links list */
.pf-nav__links {
  display: flex;
  align-items: center;
  gap: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}
.pf-nav__item { position: relative; }
.pf-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 7px;
  transition: color .18s ease, background .18s ease;
  white-space: nowrap;
}
.pf-nav__link:hover { color: #fff; background: rgba(255,255,255,.18); }
.pf-nav__link.active {
  color: #fff;
  font-weight: 700;
  background: rgba(0,0,0,.18);
}
body.home .pf-nav:not(.pf-nav--scrolled) .pf-nav__link { color: rgba(255,255,255,.92); }
body.home .pf-nav:not(.pf-nav--scrolled) .pf-nav__link:hover { color: #fff; background: rgba(255,255,255,.18); }

/* Mobile drawer accent variant — used by "List Your Property" link in the
   mobile hamburger drawer (the desktop CTA lives in pf-nav__actions). */
.pf-nav__mobile-link--accent {
  color: var(--accent) !important;
  font-weight: 700;
}
.pf-nav__chevron { transition: transform .2s ease; }
.pf-nav__item--dd.is-open .pf-nav__chevron { transform: rotate(180deg); }

/* Dropdown panels */
.pf-nav__dd-panel {
  position: absolute;
  /* Flush with the button (no transparent gap) so the cursor can move directly
     from the button into the panel without falling off in between. The visual
     6px breathing room is now produced by the panel's own padding-top. */
  top: 100%;
  left: -12px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(8,15,35,.13), 0 0 0 1px #e5e7eb;
  padding: 18px 12px 12px;
  min-width: 320px;
  z-index: 200;
  animation: navDdIn .18s ease;
}
/* Invisible bridge so mouseleave doesn't fire in the gap between button and panel */
/* Invisible "hover bridge" above the panel so the cursor never lands in
   no-man's-land while moving from the trigger button into the panel.
   Wider than the panel itself so it covers the button area too. */
.pf-nav__dd-panel::before {
  content: '';
  position: absolute;
  top: -14px;
  left: -20px;
  right: -20px;
  height: 14px;
}
.pf-nav__dd-panel--sm { min-width: 280px; }
@keyframes navDdIn { from { opacity:0; transform:translateY(-6px) } to { opacity:1; transform:translateY(0) } }

.pf-nav__dd-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pf-nav__dd-col { padding: 4px 8px; }
.pf-nav__dd-heading {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 8px;
  padding: 0 6px;
}
.pf-nav__dd-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: .82rem;
  color: #374151;
  text-decoration: none;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.pf-nav__dd-link:hover { background: var(--accent-10, rgba(0,102,255,.06)); color: var(--accent); }
.pf-nav__dd-link--icon { align-items: center; }
.pf-nav__dd-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--accent-10, rgba(0,102,255,.08));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}
.pf-nav__dd-link--icon strong { font-size: .82rem; font-weight: 700; color: #111827; display: block; }
.pf-nav__dd-link--icon small { font-size: .7rem; color: #9ca3af; }
.pf-nav__dd-divider { height: 1px; background: #f3f4f6; margin: 8px 0; }

/* Right-side actions */
.pf-nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.pf-nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 8px;
  transition: color .18s ease, background .18s ease;
}
.pf-nav__phone:hover { color: #fff; background: rgba(255,255,255,.18); }
body.home .pf-nav:not(.pf-nav--scrolled) .pf-nav__phone { color: #fff; }

.pf-nav__list-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 7px;
  font-size: .72rem;
  font-weight: 700;
  background: #0b1220;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: .02em;
}
.pf-nav__list-btn:hover {
  background: #fff;
  color: var(--accent);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transform: translateY(-1px);
}

/* Ghost variant — secondary CTA next to the solid Inquiry pill */
.pf-nav__list-btn.pf-nav__list-btn--ghost {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6);
}
.pf-nav__list-btn.pf-nav__list-btn--ghost:hover {
  background: #fff;
  color: var(--accent);
  box-shadow: inset 0 0 0 1.5px #fff, 0 6px 18px rgba(0,0,0,.25);
}
.pf-nav__list-btn.pf-nav__list-btn--ghost.is-active {
  background: #fff;
  color: var(--accent);
}
body.home .pf-nav:not(.pf-nav--scrolled) .pf-nav__list-btn--ghost {
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6);
}
body.home .pf-nav:not(.pf-nav--scrolled) .pf-nav__list-btn--ghost:hover {
  background: #fff;
  color: var(--accent);
  box-shadow: inset 0 0 0 1.5px #fff, 0 6px 18px rgba(0,0,0,.25);
}

.pf-nav__signin-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 7px;
  font-size: .76rem;
  font-weight: 700;
  color: #fff;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.6);
  text-decoration: none;
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
}
.pf-nav__signin-btn:hover {
  background: #fff;
  border-color: #fff;
  color: var(--accent);
}

/* Avatar — light bordered on orange nav */
.pf-nav__avatar-wrap { position: relative; }
.pf-nav__avatar-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.15);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .18s ease;
}
.pf-nav__avatar-btn:hover { border-color: #fff; }
.pf-nav__avatar-img { width: 100%; height: 100%; object-fit: cover; }
.pf-nav__avatar-initials { font-size: .82rem; font-weight: 700; color: #fff; }

/* Hamburger — white bars on dark nav */
.pf-nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: background .18s ease;
}
.pf-nav__hamburger:hover { background: rgba(255,255,255,.12); }
.pf-nav__hamburger span {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all .25s ease;
}
body.home .pf-nav:not(.pf-nav--scrolled) .pf-nav__hamburger span { background: #fff; }
.pf-nav__user-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(8,15,35,.14), 0 0 0 1px #e5e7eb;
  padding: 8px;
  min-width: 220px;
  z-index: 200;
  animation: navDdIn .18s ease;
}
.pf-nav__user-info { padding: 10px 12px 12px; border-bottom: 1px solid #f3f4f6; margin-bottom: 4px; }
.pf-nav__user-name { font-size: .85rem; font-weight: 700; color: #111827; }
.pf-nav__user-email { font-size: .72rem; color: #9ca3af; margin-top: 2px; }
.pf-nav__signout-btn { background: none; border: none; padding: 0; font-size: .82rem; color: #ef4444; cursor: pointer; font-weight: 500; }

/* Hamburger — white bars on dark nav */
.pf-nav__hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pf-nav__hamburger.is-open span:nth-child(2) { opacity: 0; }
.pf-nav__hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.pf-nav__mobile {
  background: #fff;
  border-top: 1px solid #e5e7eb;
  padding: 20px 0 32px;
  max-height: calc(100vh - 68px);
  overflow-y: auto;
}
.pf-nav__mobile-inner { padding: 0 20px; }
.pf-nav__mobile-group { margin-bottom: 24px; }
.pf-nav__mobile-label {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 8px;
  padding: 0 4px;
}
.pf-nav__mobile-link {
  display: block;
  padding: 10px 4px;
  font-size: .88rem;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  border-bottom: 1px solid #f9fafb;
}
.pf-nav__mobile-link:hover { color: var(--accent); }
.pf-nav__mobile-actions { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid #e5e7eb; }

/* Extra top-level links — keep desktop row readable on laptop widths */
@media (min-width: 1025px) and (max-width: 1399.98px) {
  .pf-nav__inner { gap: 10px; }
  .pf-nav__link { padding: 6px 8px; font-size: .72rem; }
}

@media (max-width: 1024px) {
  .pf-nav__links { display: none; }
  .pf-nav__list-btn { display: none !important; }
  .pf-nav__hamburger { display: flex; }
  .pf-nav__inner { gap: 16px; }
}

/* ════════════════════════════════════════════════════════════════
   SITE MODAL — NOT Bootstrap .modal (avoids z-index clash)
════════════════════════════════════════════════════════════════ */
.site-modal {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 1050;
  overflow: hidden;
}
.site-modal.is-active { display: flex !important; }
.site-modal .modal-background {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: rgba(8,15,35,.55);
  backdrop-filter: blur(4px);
}

/* ════════════════════════════════════════════════════════════════
   TOM SELECT + Bootstrap form-select alignment
════════════════════════════════════════════════════════════════ */
/* Tom Select — single-select alignment fix */
.ts-wrapper.single {
  min-height: 0;
}
.ts-wrapper.single .ts-control {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  padding: 8px 32px 8px 12px !important;
  min-height: 2.5em !important;
  height: auto !important;
  background: #fff !important;
  border: 1.5px solid #e2e5e9 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  font-family: var(--font-body) !important;
  font-size: .85rem !important;
  color: var(--text-primary) !important;
  line-height: 1.4 !important;
}
.ts-wrapper.single .ts-control .item {
  font-size: .85rem !important;
  color: var(--text-primary) !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  line-height: 1.4 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Hide the inline search input when an item is selected — only show on focus */
.ts-wrapper.single.has-items .ts-control input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
}
.ts-wrapper.single.has-items.focus .ts-control input,
.ts-wrapper.single.has-items .ts-control input:focus {
  position: relative !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  flex: 1;
  font-size: .85rem !important;
}
/* Tom Select caret/chevron */
.ts-wrapper.single .ts-control::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border: none !important;
  pointer-events: none;
}
.ts-wrapper.single:hover .ts-control {
  border-color: #c9cdd3 !important;
}
.ts-wrapper.single.focus .ts-control,
.ts-wrapper.single .ts-control:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-15) !important;
}
/* Dropdown panel */
.ts-dropdown {
  z-index: 1060 !important;
  border-radius: 10px !important;
  border: 1px solid #e2e5e9 !important;
  box-shadow: 0 8px 28px rgba(8,15,35,.1) !important;
  background: #fff !important;
  font-family: var(--font-body) !important;
  padding: 4px 0 !important;
  margin-top: 4px !important;
}
.ts-dropdown .ts-dropdown-content {
  max-height: 240px;
  overflow-y: auto;
}
.ts-dropdown .option {
  padding: 8px 14px !important;
  font-size: .84rem !important;
  color: #374151 !important;
  cursor: pointer;
}
.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background: #f3f4f6 !important;
  color: #111827 !important;
}
.ts-dropdown .option.selected {
  font-weight: 600 !important;
  color: var(--accent) !important;
  background: var(--accent-10) !important;
}