/* ═══════════════════════════════════════════════════════════════════
   Vuexy front-page navbar + footer → Blueprint Estimation palette.
   Loaded after blueprint-theme.css / blueprint-dark-theme.css so it
   wins the cascade. Vuexy blade/scss files stay untouched.
   Light = blues on white, Dark = blues on slate (#0f172a family).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Navbar shell ─────────────────────────────────────────────────── */
/* shared.css + blueprint(-dark)-theme.css style the bare <nav> element
   (full-width bar bg/border/blur for the old custom header) — neutralize
   all of it on Vuexy's outer navbar shell so the original floating
   .landing-navbar pill shows through */
nav.layout-navbar {
  padding: 0 !important;
  display: block !important;
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  /* core.scss sets .layout-navbar z-index:2, tying with page hero overlays
     (e.g. .hero-inner) which then paint over the navbar and swallow clicks */
  z-index: 1030 !important;
}
/* Vuexy renders the pill 38%-transparent at rest and only goes solid once
   front-main.js adds .navbar-active on scroll — force the solid look from
   page load instead (background-color beats both the at-rest var bg and the
   .navbar-active rule, so the color never shifts on scroll) */
nav.layout-navbar .navbar.landing-navbar {
  background-color: var(--bs-paper-bg) !important;
  box-shadow: var(--bs-box-shadow-sm) !important;
}
html[data-bs-theme="dark"] nav.layout-navbar .navbar.landing-navbar {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

/* Links must never wrap to two lines; the long "Blueprint Estimation"
   brand leaves little room below xxl, so use Vuexy's compact <xl spacing
   from xl up too */
.landing-navbar .navbar-nav .nav-link {
  white-space: nowrap;
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .landing-navbar .navbar-nav .nav-link {
    margin-inline-end: 0 !important;
    padding-inline: .5rem !important;
  }
  .landing-navbar .navbar-brand {
    margin-inline-end: 1.25rem !important;
  }
}

/* ── Navbar brand ─────────────────────────────────────────────────── */
.landing-navbar .app-brand-text {
  color: #082f63 !important;
}
html[data-bs-theme="dark"] .landing-navbar .app-brand-text {
  color: #e2e8f0 !important;
}

/* ── Navbar links ─────────────────────────────────────────────────── */
.landing-navbar .navbar-nav .nav-link {
  color: rgba(38, 55, 70, 0.72) !important;
}
.landing-navbar .navbar-nav .nav-link:hover,
.landing-navbar .navbar-nav .nav-link.active {
  color: #0b4ea2 !important;
}
html[data-bs-theme="dark"] .landing-navbar .navbar-nav .nav-link {
  color: rgba(203, 213, 225, 0.72) !important;
}
html[data-bs-theme="dark"] .landing-navbar .navbar-nav .nav-link:hover,
html[data-bs-theme="dark"] .landing-navbar .navbar-nav .nav-link.active {
  color: #60a5fa !important;
}

/* ── Navbar / footer primary buttons ──────────────────────────────── */
.landing-navbar .btn-primary,
.landing-footer .btn-primary {
  background: linear-gradient(135deg, #0b4ea2, #3b82f6) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(31, 120, 180, 0.28) !important;
}
.landing-navbar .btn-primary:hover,
.landing-footer .btn-primary:hover {
  background: linear-gradient(135deg, #0a4187, #2563eb) !important;
}
html[data-bs-theme="dark"] .landing-navbar .btn-primary,
html[data-bs-theme="dark"] .landing-footer .btn-primary {
  background: #2563eb !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3) !important;
}

/* ── Theme toggle (injected by theme-toggle.js) ───────────────────── */
.landing-navbar #theme-toggle {
  border-color: rgba(11, 78, 162, 0.28);
}
.landing-navbar #theme-toggle:hover {
  border-color: rgba(11, 78, 162, 0.5);
  background: rgba(11, 78, 162, 0.06);
}
.landing-navbar #theme-toggle svg {
  stroke: rgba(38, 55, 70, 0.75);
}
html[data-bs-theme="dark"] .landing-navbar #theme-toggle {
  border-color: rgba(96, 165, 250, 0.3);
}
html[data-bs-theme="dark"] .landing-navbar #theme-toggle svg {
  stroke: rgba(203, 213, 225, 0.75);
}

/* ── Footer ───────────────────────────────────────────────────────── */
/* Drop Vuexy's dark texture image; theme css colors the footer bg
   (light #f0f7fc / dark #050d1b via the bare `footer` selector) */
.landing-footer .footer-bg {
  display: none !important;
}
.landing-footer .footer-top {
  background: transparent !important;
}

.landing-footer .app-brand-text,
.landing-footer .footer-title {
  color: #082f63 !important;
}
.landing-footer .footer-text,
.landing-footer .footer-logo-description,
.landing-footer .footer-form label {
  color: rgba(38, 55, 70, 0.68) !important;
}
.landing-footer .footer-link {
  color: rgba(38, 55, 70, 0.68) !important;
}
.landing-footer .footer-link:hover {
  color: #0b4ea2 !important;
}

.landing-footer .footer-bottom {
  background: rgba(11, 78, 162, 0.06) !important;
}
.landing-footer .footer-bottom-text,
.landing-footer .footer-bottom a {
  color: rgba(38, 55, 70, 0.6) !important;
}
.landing-footer .footer-bottom a:hover {
  color: #0b4ea2 !important;
}

html[data-bs-theme="dark"] .landing-footer .app-brand-text,
html[data-bs-theme="dark"] .landing-footer .footer-title {
  color: #ffffff !important;
}
html[data-bs-theme="dark"] .landing-footer .footer-text,
html[data-bs-theme="dark"] .landing-footer .footer-logo-description,
html[data-bs-theme="dark"] .landing-footer .footer-form label,
html[data-bs-theme="dark"] .landing-footer .footer-link {
  color: rgba(255, 255, 255, 0.65) !important;
}
html[data-bs-theme="dark"] .landing-footer .footer-link:hover {
  color: #ffffff !important;
}
html[data-bs-theme="dark"] .landing-footer .footer-bottom {
  background: rgba(255, 255, 255, 0.04) !important;
}
html[data-bs-theme="dark"] .landing-footer .footer-bottom-text,
html[data-bs-theme="dark"] .landing-footer .footer-bottom a {
  color: rgba(255, 255, 255, 0.6) !important;
}
html[data-bs-theme="dark"] .landing-footer .footer-bottom a:hover {
  color: #ffffff !important;
}

/* Newsletter input */
.landing-footer .footer-form .form-control {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  color: #082f63 !important;
}
html[data-bs-theme="dark"] .landing-footer .footer-form .form-control {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
}