/* ===========================================
   .FYLR AGGRESSIVE COMPACT STYLING
   Fixes hero layout, navigation, and spacing issues
   =========================================== */

/* ===== ROOT VARIABLES (More Aggressive) ===== */
:root {
  /* Tighter spacing scale */
  --space-xs: 0.25rem;    /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 0.75rem;    /* 12px */
  --space-lg: 1rem;       /* 16px */
  --space-xl: 1.25rem;    /* 20px */
  
  /* Compact typography scale */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.85rem;     /* 13.6px */
  --text-base: 0.9rem;    /* 14.4px */
  --text-lg: 1.05rem;     /* 16.8px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  
  /* Component heights */
  --nav-height: 52px;
  --btn-height: 38px;
  --input-height: 38px;
}

/* ===== GLOBAL RESET - MORE AGGRESSIVE ===== */
html {
  font-size: 14px !important;
  scroll-padding-top: 90px !important;
  scroll-behavior: smooth !important;
}

body {
  font-size: var(--text-base) !important;
  line-height: 1.4 !important;
  color: #e5e5e5 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Main content padding for fixed header */
main {
  padding-top: 80px !important;
  min-height: calc(100vh - 80px);
}

/* ===== NAVIGATION FIXES ===== */
.navbar,
nav,
header,
[class*="nav"],
[class*="header"] {
  padding: var(--space-xs) var(--space-md) !important;
  min-height: var(--nav-height) !important;
  height: var(--nav-height) !important;
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.navbar-brand,
.nav-brand,
[class*="brand"] {
  font-size: var(--text-lg) !important;
  padding: var(--space-xs) 0 !important;
  margin: 0 !important;
  color: #ff6b00 !important;
  text-align: left !important;
}

.nav-link,
.navbar-nav .nav-link,
[class*="nav-link"] {
  padding: var(--space-xs) var(--space-sm) !important;
  font-size: var(--text-sm) !important;
  margin: 0 var(--space-xs) !important;
  color: #d1d5db !important;
}

.nav-link:hover,
.navbar-nav .nav-link:hover {
  color: #ff6b00 !important;
}

/* Header button fixes */
.navbar .btn,
nav .btn,
header .btn,
[class*="nav"] .btn {
  padding: 6px 12px !important;
  font-size: 12px !important;
  min-height: 32px !important;
  border-radius: 4px !important;
  margin-left: auto !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

/* Hide unnecessary hamburger menu */
.navbar-toggler,
.navbar-toggle,
[class*="hamburger"],
[class*="menu-toggle"] {
  display: none !important;
}

/* ===== HERO SECTION - DRAMATIC REDUCTION FOR LAYOUT FIX ===== */
.hero,
.hero-section,
[class*="hero"],
.jumbotron,
.banner,
.main-banner,
section:first-of-type {
  padding: var(--space-md) var(--space-md) !important;
  margin: 0 !important;
  background: transparent !important;
  min-height: auto !important;
}

/* Main content adjusted for fixed nav - uses padding-top from line 47 */

/* Remove any hero pseudo-elements causing layout issues */
.hero::before,
.hero::after,
[class*="hero"]::before,
[class*="hero"]::after,
.hero-gradient::before,
.hero-gradient::after {
  display: none !important;
}

/* Hero typography - centered and larger */
.hero h1,
h1[class*="text-"],
h1[class*="hero"],
[class*="hero"] h1,
.display-3 {
  font-size: 3rem !important; /* Increased from 2.5rem */
  line-height: 1.2 !important;
  margin-bottom: var(--space-md) !important;
  margin-top: 0 !important;
  color: #ffffff !important;
  text-align: center !important;
}

.hero h2,
h2[class*="text-"],
[class*="hero"] h2 {
  font-size: var(--text-xl) !important;
  line-height: 1.3 !important;
  margin-bottom: var(--space-md) !important;
  color: #e5e5e5 !important;
  text-align: center !important;
}

.hero p,
.hero-subtitle,
[class*="hero"] p,
.lead {
  font-size: 1.1rem !important; /* Slightly larger than var(--text-base) */
  line-height: 1.5 !important;
  margin-bottom: var(--space-md) !important;
  color: #d1d5db !important;
  text-align: center !important;
}

/* ===== HERO ROW AND COLUMNS - FIX LAYOUT ===== */
.hero .row,
[class*="hero"] .row {
  margin-left: calc(var(--space-xs) * -1) !important;
  margin-right: calc(var(--space-xs) * -1) !important;
  align-items: center !important;
}

.hero .col,
.hero [class*="col-"],
[class*="hero"] .col,
[class*="hero"] [class*="col-"] {
  padding-left: var(--space-xs) !important;
  padding-right: var(--space-xs) !important;
}

/* Fix hero demo card container */
.hero-demo-stack,
[class*="hero-demo"],
.demo-card-container {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== CONTAINERS - TIGHTER ===== */
.container,
.container-fluid {
  padding-left: var(--space-md) !important;
  padding-right: var(--space-md) !important;
  max-width: 100% !important;
}

.row {
  margin-left: calc(var(--space-sm) * -1) !important;
  margin-right: calc(var(--space-sm) * -1) !important;
}

.col,
[class*="col-"] {
  padding-left: var(--space-sm) !important;
  padding-right: var(--space-sm) !important;
}

/* ===== CARDS - COMPACT ===== */
.card,
[class*="card"],
.demo-card,
.primary-card {
  padding: var(--space-md) !important;
  margin-bottom: var(--space-md) !important;
  border-radius: 8px !important;
  background: rgba(25, 25, 25, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.card-body,
[class*="card-body"] {
  padding: var(--space-md) !important;
  color: #e5e5e5 !important;
}

/* ===== BUTTONS - SLEEK TECH STYLE ===== */
.btn,
button,
[role="button"] {
  padding: 8px 16px !important;
  font-size: 13px !important;
  min-height: 34px !important;
  border-radius: 6px !important;
  margin: 2px !important;
  font-weight: 500 !important;
  border: 1px solid transparent !important;
  text-transform: none !important;
  transition: all 0.15s ease !important;
}

.btn-lg,
[class*="btn-lg"] {
  padding: 10px 20px !important;
  font-size: 14px !important;
  min-height: 38px !important;
  border-radius: 8px !important;
}

.btn-orange,
.btn-primary {
  background: #ff6b00 !important;
  border-color: #ff6b00 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(255, 107, 0, 0.2) !important;
}

.btn-orange:hover,
.btn-primary:hover {
  background: #e55a00 !important;
  border-color: #e55a00 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(255, 107, 0, 0.3) !important;
}

/* Secondary buttons */
.btn-secondary,
.btn-outline-primary {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #d1d5db !important;
}

.btn-secondary:hover,
.btn-outline-primary:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

/* ===== TEXT CONTRAST FIXES ===== */
p, span, div, li {
  color: #d1d5db !important;
  line-height: 1.4 !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #ffffff !important;
}

/* Links */
a {
  color: #60a5fa !important;
}

a:hover {
  color: #ff6b00 !important;
}

/* ===== UTILITY SPACING OVERRIDES ===== */
.py-5 { padding-top: var(--space-lg) !important; padding-bottom: var(--space-lg) !important; }
.py-4 { padding-top: var(--space-md) !important; padding-bottom: var(--space-md) !important; }
.py-3 { padding-top: var(--space-sm) !important; padding-bottom: var(--space-sm) !important; }

.my-5 { margin-top: var(--space-lg) !important; margin-bottom: var(--space-lg) !important; }
.my-4 { margin-top: var(--space-md) !important; margin-bottom: var(--space-md) !important; }
.my-3 { margin-top: var(--space-sm) !important; margin-bottom: var(--space-sm) !important; }

.px-5 { padding-left: var(--space-lg) !important; padding-right: var(--space-lg) !important; }
.px-4 { padding-left: var(--space-md) !important; padding-right: var(--space-md) !important; }
.px-3 { padding-left: var(--space-sm) !important; padding-right: var(--space-sm) !important; }

.mb-5 { margin-bottom: var(--space-lg) !important; }
.mb-4 { margin-bottom: var(--space-md) !important; }
.mb-3 { margin-bottom: var(--space-sm) !important; }

.mt-5 { margin-top: var(--space-lg) !important; }
.mt-4 { margin-top: var(--space-md) !important; }
.mt-3 { margin-top: var(--space-sm) !important; }

/* ===== REMOVE SPACE WASTERS ===== */
hr,
.divider,
[class*="separator"] {
  margin: var(--space-xs) 0 !important;
  height: 1px !important;
  border: none !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* ===== SPECIFIC HERO FIXES ===== */
/* Fix hero button spacing */
.hero .d-flex,
[class*="hero"] .d-flex {
  gap: var(--space-sm) !important;
  margin-bottom: var(--space-md) !important;
}

/* Fix trust indicators spacing */
.hero .d-flex.align-items-center {
  gap: var(--space-md) !important;
  margin-top: var(--space-md) !important;
}

/* Fix hero demo positioning */
.hero .position-relative,
[class*="hero"] .position-relative {
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== DEMO CARD SPECIFIC FIXES ===== */
.demo-card,
.primary-card {
  max-width: 100% !important;
  margin: 0 !important;
  padding: var(--space-md) !important;
}

.savings-amount {
  font-size: var(--text-2xl) !important;
  margin-bottom: var(--space-sm) !important;
}

.analysis-result {
  margin-bottom: var(--space-sm) !important;
}

.progress-container {
  margin-bottom: var(--space-xs) !important;
}

.quick-actions {
  margin-top: var(--space-sm) !important;
}

/* ===== FORMS COMPACT ===== */
.form-control,
input,
textarea,
select {
  background: rgba(30, 30, 30, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  padding: var(--space-sm) !important;
  height: var(--input-height) !important;
  border-radius: 4px !important;
}

/* ===== RESPONSIVE FIXES ===== */
@media (max-width: 768px) {
  html {
    font-size: 13px !important;
  }
  
  .hero {
    padding: var(--space-sm) !important;
  }
  
  .hero h1,
  .display-3 {
    font-size: var(--text-3xl) !important;
  }
  
  .container,
  .container-fluid {
    padding-left: var(--space-sm) !important;
    padding-right: var(--space-sm) !important;
  }
}

@media (max-width: 576px) {
  .hero h1,
  .display-3 {
    font-size: var(--text-2xl) !important;
  }
  
  .navbar {
    padding: var(--space-xs) !important;
  }
  
  .hero .d-flex {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* ===== LOGO CONSISTENCY ACROSS SITE ===== */
/* Ensure all .fylr logos match header style */
.logo-text,
.navbar-brand,
.nav-brand,
[class*="brand"],
h5:contains(".fylr"),
h5.text-orange,
footer h5,
.footer .logo,
.footer .brand {
  font-size: var(--text-lg) !important;
  color: #ff6b00 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* Footer logo consistency */
footer .text-orange,
footer h5,
.footer-brand {
  color: #ff6b00 !important;
  font-size: var(--text-lg) !important;
  font-weight: 600 !important;
}

/* Beautiful base logo styling */
.logo-text {
  font-size: var(--text-lg) !important;
  color: #ff6b00 !important;
  font-weight: 600 !important;
  background: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #ff6b00 !important;
}

/* Layout template logo with icon */
.navbar-brand .text-white.fs-4,
.navbar-brand span.fw-bold {
  color: #ff6b00 !important;
  font-size: var(--text-lg) !important;
  font-weight: 600 !important;
}

/* Remove any subtitle text to keep logos clean */
.navbar-brand .text-white-50,
.navbar-brand .small {
  display: none !important;
}

/* Footer .fylr branding consistency */
footer h5:contains(".fylr"),
footer .text-orange:contains(".fylr") {
  color: #ff6b00 !important;
  font-size: var(--text-lg) !important;
  font-weight: 600 !important;
}

/* Footer text - change grey to white */
footer,
footer p,
footer span,
footer div,
footer li,
footer a,
footer .text-muted,
footer .text-white-50,
footer small {
  color: #ffffff !important;
}

footer .text-muted {
  color: #ffffff !important;
}

/* ===== ACCESSIBILITY MAINTAINED ===== */
*:focus,
*:focus-visible {
  outline: 2px solid #ff6b00 !important;
  outline-offset: 1px !important;
}

/* ===== PERFORMANCE ===== */
* {
  transition: all 0.2s ease !important;
}

/* ===== DARK THEME ENHANCEMENTS ===== */
body {
  background: #0a0a0b !important;
}

.card,
[class*="card"] {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* ===== PROGRESS BARS ===== */
.progress {
  height: 6px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 3px !important;
}

.progress-bar,
.progress-bar-orange {
  background: #ff6b00 !important;
}

/* ===== BADGES AND STATUS ===== */
.badge,
.status-indicator {
  background: rgba(255, 107, 0, 0.2) !important;
  color: #ff6b00 !important;
  padding: var(--space-xs) var(--space-sm) !important;
  border-radius: 4px !important;
  font-size: var(--text-xs) !important;
}

/* ===== MOBILE CARD MARGINS ===== */
@media (max-width: 768px) {
  .card,
  .glass-card,
  .result-card,
  .transaction-card,
  [class*="card"] {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  
  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ===== GLOBAL TEXT-MUTED OVERRIDE FOR DARK BACKGROUNDS ===== */
.text-muted {
  color: #C8C8CC !important;
}

/* Ensure muted text is readable everywhere */
p.text-muted,
span.text-muted,
small.text-muted,
div.text-muted,
a.text-muted {
  color: #C8C8CC !important;
}