/* ========================================
   FLOWCAP FUNDING - NAVBAR CONSISTENCY LOCK
   This file FORCES navbar proportions to be
   IDENTICAL across ALL pages and viewports
   ======================================== */

/*
 * CRITICAL: This stylesheet must be loaded AFTER main.css and responsive.css
 * to override any conflicting styles and ensure perfect navbar consistency.
 */

/* ===== FORCED NAVBAR DIMENSIONS ===== */

/* Lock navbar container height to 80px on ALL devices and pages */
.navbar {
  height: 80px !important;
  min-height: 80px !important;
  max-height: 80px !important;
}

.nav-container {
  height: 80px !important;
  min-height: 80px !important;
  max-height: 80px !important;
}

/* Lock logo height to 55px on ALL devices and pages */
.logo-image {
  height: 55px !important;
  min-height: 55px !important;
  max-height: 55px !important;
  width: auto !important;
}

/* ===== FORCED BUTTON DIMENSIONS ===== */

/* Lock phone button dimensions */
.nav-phone {
  padding: 10px 20px !important;
  font-size: 16px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  border: 2px solid #ffffff !important;
  border-radius: 8px !important;
}

.nav-phone i {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
}

/* Lock CTA button dimensions */
.nav-cta {
  padding: 14px 28px !important;
  font-size: 16px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  border-radius: 8px !important;
}

/* ===== FORCED SPACING & ALIGNMENT ===== */

/* Lock nav links gap and alignment */
.nav-links {
  gap: 32px !important;
  align-items: center !important;
}

.nav-links li {
  display: flex !important;
  align-items: center !important;
}

.nav-links a:not(.nav-cta):not(.nav-phone) {
  font-size: 16px !important;
  padding: 8px 12px !important;
}

/* ===== RESPONSIVE OVERRIDES ===== */

/* Tablet and Desktop: Maintain exact proportions */
@media (min-width: 768px) {
  .navbar,
  .nav-container {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
  }

  .logo-image {
    height: 55px !important;
    min-height: 55px !important;
    max-height: 55px !important;
  }

  .nav-phone {
    padding: 10px 20px !important;
    font-size: 16px !important;
    min-height: 42px !important;
  }

  .nav-cta {
    padding: 14px 28px !important;
    font-size: 16px !important;
    min-height: 50px !important;
  }
}

/* Large Desktop: Still maintain exact proportions */
@media (min-width: 1440px) {
  .navbar,
  .nav-container {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
  }

  .logo-image {
    height: 55px !important;
    min-height: 55px !important;
    max-height: 55px !important;
  }

  .nav-phone {
    padding: 10px 20px !important;
    font-size: 16px !important;
  }

  .nav-cta {
    padding: 14px 28px !important;
    font-size: 16px !important;
  }
}

/* Mobile: Maintain proportions even on small screens */
@media (max-width: 767px) {
  .navbar,
  .nav-container {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
  }

  .logo-image {
    height: 55px !important;
    min-height: 55px !important;
    max-height: 55px !important;
  }

  /* Mobile menu top position */
  .nav-links {
    top: 80px !important;
    max-height: calc(100vh - 80px) !important;
  }

  /* Mobile menu buttons - UNLOCK for proper sizing */
  .nav-phone {
    padding: 10px 16px !important;
    font-size: 15px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    height: 44px !important;
    line-height: 1.2 !important;
  }

  .nav-phone i {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
  }

  .nav-phone span {
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  .nav-cta {
    padding: 12px 20px !important;
    font-size: 16px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    height: 48px !important;
    line-height: 1.2 !important;
  }
}

/* Small Mobile: STILL maintain exact proportions */
@media (max-width: 374px) {
  .navbar,
  .nav-container {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
  }

  .logo-image {
    height: 55px !important;
    min-height: 55px !important;
    max-height: 55px !important;
  }

  /* Smaller buttons for small screens */
  .nav-phone {
    padding: 9px 12px !important;
    font-size: 14px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    height: 40px !important;
  }

  .nav-phone i {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
  }

  .nav-phone span {
    font-size: 14px !important;
  }

  .nav-cta {
    padding: 10px 16px !important;
    font-size: 15px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    height: 44px !important;
  }
}

/* Landscape orientation: Maintain proportions */
@media (max-width: 767px) and (orientation: landscape) {
  .navbar,
  .nav-container {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
  }

  .logo-image {
    height: 55px !important;
    min-height: 55px !important;
    max-height: 55px !important;
  }

  .nav-links {
    top: 80px !important;
    max-height: calc(100vh - 80px) !important;
  }

  /* Compact buttons for landscape */
  .nav-phone {
    padding: 8px 14px !important;
    font-size: 14px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    height: 38px !important;
  }

  .nav-phone i {
    width: 14px !important;
    height: 14px !important;
  }

  .nav-cta {
    padding: 9px 16px !important;
    font-size: 15px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    height: 40px !important;
  }
}

/* ===== PREVENT HERO SECTION INTERFERENCE ===== */

/* Ensure hero sections don't affect navbar appearance */
.hero + .navbar,
.navbar + .hero,
.section-sm + .navbar,
.navbar + .section-sm {
  /* Isolation prevents style bleeding */
  isolation: isolate;
}

/* ===== VERTICAL CENTERING ENFORCEMENT ===== */

/* Force perfect vertical centering for all nav items */
.navbar-logo,
.nav-links,
.nav-links li,
.nav-links a,
.nav-phone,
.nav-cta {
  display: flex !important;
  align-items: center !important;
}

.nav-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* ===== BACKGROUND & SHADOW CONSISTENCY ===== */

/* Lock background gradient */
.navbar {
  background: linear-gradient(135deg, var(--flowcap-navy) 0%, #001a3d 100%) !important;
  box-shadow: 0 4px 16px rgba(0, 19, 49, 0.2) !important;
}

/* Lock navbar border line */
.navbar::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(1, 192, 211, 0.3), transparent) !important;
}

/* ===== DEBUGGING HELPERS (remove in production) ===== */

/* Uncomment to visually verify navbar dimensions */
/*
.navbar {
  outline: 2px solid red !important;
}

.nav-container {
  outline: 2px solid blue !important;
}

.logo-image {
  outline: 2px solid green !important;
}

.nav-phone {
  outline: 2px solid yellow !important;
}

.nav-cta {
  outline: 2px solid purple !important;
}
*/