/* css/finance.css - Dedicated bright yellow theme for the Finance module */

:root {
  --finance-bg-light: #FEFCE8; /* Very soft pastel yellow */
  --finance-bg-alt: #FEF9C3; /* Slightly deeper pastel yellow for contrast */
  --finance-hero-bg: #FACC15; /* Vibrant, premium yellow */
  --finance-text-main: #11110d;
  --finance-text-muted: #555550;
  --finance-accent: #A16207; /* Dark golden brown for text accents */
  --finance-icon-bg: #FEF08A;
  --finance-icon-stroke: #CA8A04;
}

/* Base Overrides */
body.finance-app {
  background-color: var(--finance-bg-light);
  color: var(--finance-text-main);
  
  /* Override Global Theme Variables */
  --color-primary: var(--finance-hero-bg);
  --color-primary-dark: #ca8a04; /* Darker yellow/gold for hover states */
  --color-primary-light: #fef08a; /* Lighter yellow for backgrounds */
  --color-accent: var(--finance-accent);
  --color-text-main: var(--finance-text-main);
  --color-text-dim: var(--finance-text-muted);
}

/* Feature Page Hero (fp-hero) Overrides */
.finance-app .fp-hero {
  background: var(--finance-bg-light);
  border-bottom: 1px solid var(--finance-bg-alt);
}
.finance-app .fp-hero-badge {
  background: var(--finance-icon-bg);
  border-color: var(--finance-hero-bg);
  color: var(--finance-accent);
}
.finance-app .fp-hero-bullets li::before {
  background: var(--finance-hero-bg);
}

.finance-app .feat-subnav-link.active {
  background: var(--finance-text-main);
  color: var(--finance-hero-bg);
}
.finance-app .feat-subnav-link:hover {
  background: var(--finance-bg-alt);
}

/* Finance Feature Pages (Solutions & Resources) */
.finance-feat-page-hero {
  padding: 160px 0 80px;
  background: var(--finance-bg-light);
  text-align: center;
  border-bottom: 1px solid var(--finance-bg-alt);
}

.finance-feat-page-hero .crumb {
  color: var(--finance-accent);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.finance-feat-page-hero h1 {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 800;
  color: var(--finance-text-main);
  letter-spacing: -0.04em;
  margin-bottom: 24px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.finance-feat-page-hero p {
  font-size: 1.15rem;
  color: var(--finance-text-muted);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

.finance-page-section {
  padding: 100px 0;
  background: #fff;
}

.finance-page-section.alt {
  background: var(--finance-bg-light);
}

.finance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  margin-top: 48px;
}

.finance-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
  transition: all 0.3s ease;
}

.finance-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -10px rgba(0,0,0,0.1);
  border-color: var(--finance-hero-bg);
}

.finance-card-icon {
  width: 48px;
  height: 48px;
  background: var(--finance-icon-bg);
  color: var(--finance-accent);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.finance-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--finance-text-main);
}

.finance-card p {
  color: var(--finance-text-muted);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 0;
}

/* Hero Section */
.finance-hero {
  padding: 140px 0 80px;
  background: var(--finance-hero-bg);
  position: relative;
  overflow: hidden;
}

.finance-hero-content h1 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 800;
  color: var(--finance-text-main);
  letter-spacing: -0.04em;
  margin-bottom: 20px;
  line-height: 1.1;
}

.finance-hero-sub {
  font-size: 1.1rem;
  color: #444440;
  margin-bottom: 2rem;
  max-width: 500px;
  line-height: 1.6;
}

/* Buttons */
.btn-finance {
  background: var(--finance-text-main) !important;
  color: #fff !important;
  border-color: var(--finance-text-main) !important;
  font-weight: 600;
  border-radius: 100px;
  padding: 14px 32px;
  transition: all 0.3s ease;
}
.btn-finance:hover {
  background: #333 !important;
  border-color: #333 !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Feature Sections */
.finance-feature {
  padding: 100px 0;
  background: var(--finance-bg-light);
}
.finance-feature.alt {
  background: var(--finance-bg-alt);
}

.finance-feature .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.finance-feature-centered {
  padding: 100px 0;
  background: var(--finance-bg-alt);
}

.finance-feature-centered .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 40px;
}

.finance-feature.feature-alt-left .container {
  direction: rtl;
}

.finance-feature.feature-alt-left .container > * {
  direction: ltr;
}

@media (max-width: 992px) {
  .finance-feature .container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .finance-feature.feature-alt-left .container {
    direction: ltr;
  }
}

.finance-feature h2 {
  color: var(--finance-text-main);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 14px;
}

.finance-feature p {
  color: var(--finance-text-muted);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 24px;
}

/* Feature List Overrides */
.finance-app .feature-list svg circle {
  fill: var(--finance-icon-bg) !important;
}
.finance-app .feature-list svg path {
  stroke: var(--finance-icon-stroke) !important;
}
.finance-app .feature-list li {
  color: var(--finance-text-main);
  font-weight: 500;
}

/* Navigation overrides for Yellow Theme */
.finance-app .navbar {
  background: rgba(254, 252, 232, 0.95) !important;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.finance-app .navbar .nav-links a, .finance-app .dropdown-label {
  color: var(--finance-text-muted) !important;
}
.finance-app .navbar .nav-links a:hover {
  color: var(--finance-accent) !important;
}
.finance-app .logo-icon {
  background-color: var(--finance-hero-bg) !important;
  color: #111 !important;
}
.finance-app .mlogo {
  color: #111 !important;
}

.finance-app .mobile-menu-toggle .bar {
  background-color: #111 !important;
}

.finance-app .nav-feat-dropdown {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}
.finance-app .feat-dd-info strong {
  color: var(--finance-text-main) !important;
}
.finance-app .feat-dd-info span {
  color: var(--finance-text-muted) !important;
}
.finance-app .feat-dd-icon {
  background: var(--finance-bg-light) !important;
}
.finance-app .feat-dd-icon svg {
  stroke: var(--finance-accent) !important;
}

/* Mockup Colors Overrides inside Hero */
.finance-preview-logo {
  color: var(--finance-accent) !important;
}
.finance-preview-icon {
  background: var(--finance-hero-bg) !important;
  color: #111 !important;
}
.finance-preview-tab.active {
  color: var(--finance-accent) !important;
}