/* --- Custom CSS Variables --- */
:root {
  /* 🎨 Primary Brand Colors */
  --ocean-tech-blue: #0077B6;    /* Ideal for buttons, headlines, logos — feels tech-forward yet trustworthy */
  --seafoam-teal: #00C2A8;       /* Adds freshness + movement — great for secondary CTA or highlights */
  --deep-marine: #0A1E2C;        /* Core identity — already used in your backgrounds and logo */
  --trade-gold: #F4A300;         /* The hero highlight — you’re already using this in the North arrow */
  --mist-white: #F9FBFC;         /* Keeps everything breathable and modern — great for section backgrounds */

  /* 🧩 Supporting Neutrals */
  --slate-ink: #4B5563;          /* Excellent for readable body text */
  --cloud-line: #E5E7EB;         /* Subtle input borders, card dividers */
  --ice-blue: #EDF4F8;           /* Matches your visual tone — especially card BGs or light modals */
  --dust-grey: #D1D5DB;          /* Great for wireframes, form fields, soft lines */

  /* Semantic Aliases (Optional, but useful for common roles) */
  --color-primary: var(--ocean-tech-blue);
  --color-secondary: var(--seafoam-teal);
  --color-background-dark: var(--deep-marine);
  --color-text-body: var(--slate-ink);
  --color-highlight: var(--trade-gold);
  --color-background-light: var(--mist-white);
  --color-border: var(--cloud-line);
  --color-card-bg: white; /* Changed to white for summary cards specifically, for more crisp look */
  --color-form-field: var(--dust-grey);

  /* New: A slightly darker primary blue for hover states, derived from --ocean-tech-blue */
  --ocean-tech-blue-darker: #006094; /* Example: 20% darker */
  --seafoam-teal-darker: #009c88; /* Example: 20% darker */

  /* Trust Zone Colors - NEW ADDITION TO UNIVERSAL */
  --trust-recovery-bg: #F8D7DA; /* Light red */
  --trust-recovery-text: #DC3545; /* Dark red */

  --trust-growth-bg: #FFF3CD; /* Light orange */
  --trust-growth-text: #E08E0B; /* Dark orange */

  --trust-trusted-bg: #D4EDDA; /* Light green */
  --trust-trusted-text: #28A745; /* Dark green */

  --trust-prime-bg: #C1E0F5; /* Light blue */
  --trust-prime-text: var(--ocean-tech-blue); /* Dark blue */
}

/* --- Universal Box-Sizing and Smooth Scroll --- */
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}
*, *::before, *::after {
  box-sizing: inherit;
}

/* --- Body Styles --- */
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background-color: var(--ice-blue); /* Changed to ice-blue for the overall body background */
  color: var(--color-text-body);
  line-height: 1.6;
  min-height: 100vh; /* Ensure body takes full viewport height */
  display: flex;
  flex-direction: column; /* For sticky footer/layout */
}

/* --- Header Styles (General, will be overridden for Dashboard where needed) --- */
/*
 * NOTE: The .dashboard-header in style.css will override some of these for the accounts page.
 * This general header styling is for other pages that might use <header> without .dashboard-header class.
 */
header {
  background-color: var(--color-background-light);
  padding: 0.8rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: padding 0.3s ease, height 0.3s ease;
  height: 60px; /* Base height for header */
}

header.shrink { /* Example for scrolling effect header */
  padding: 0.4rem 1rem;
  height: 48px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.logo { /* General logo container */
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.logo img { /* General logo image sizing */
  height: 60px; /* Default height */
  transition: height 0.3s ease;
}

header.shrink .logo img {
  height: 38px;
}

.logo-text { /* General logo text sizing */
  font-weight: 700;
  font-size: 1.3rem;
  transition: font-size 0.3s ease;
  font-family: 'Inter', sans-serif;
}

.route-dark {
  color: var(--deep-marine);
}

.finderhub-light {
  color: var(--ocean-tech-blue);
}

header.shrink .logo-text {
  font-size: 1.1rem;
}


/* --- Main Navigation Styles (Desktop) --- */
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.main-nav li {
  position: relative;
}

.main-nav a {
  text-decoration: none;
  color: var(--color-background-dark);
  font-weight: 600;
  font-size: 1rem;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  transition: color 0.2s ease;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--color-primary);
}

.dropdown-icon {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--color-background-light);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  padding: 0.5rem 0;
  z-index: 999;
  min-width: 160px;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.dropdown:hover .dropdown-content,
.dropdown.active .dropdown-content {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-content li {
  margin: 0;
}

.dropdown-content a {
  padding: 0.5rem 1rem;
  color: var(--color-background-dark);
  font-size: 0.95rem;
  white-space: nowrap;
  display: block;
}

.dropdown-content a:hover {
  background-color: var(--color-card-bg);
  color: var(--color-primary);
}

/* --- Hamburger Menu Icon --- */
.hamburger {
  display: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem;
}

/* --- Mobile Navigation (Hidden by default, shown via JS) --- */
.mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--color-background-light);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0.3s ease;
}

.mobile-nav.is-open {
  display: flex;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.mobile-nav li {
  width: 100%;
}

.mobile-nav a {
  padding: 1rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-background-dark);
  text-align: center;
  text-decoration: none;
  display: block;
  transition: background-color 0.2s ease;
}

.mobile-nav a:hover {
  background-color: var(--color-card-bg);
}

/* --- Hero Section - Common Styles --- */
.hero-section {
  position: relative;
  min-height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 80px;
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 1.5rem;
}

.required-asterisk {
    color: red;


  }


  /* add in your scoped CSS */
.rfh-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .6rem;border:1px solid var(--cloud-line);border-radius:999px;background:var(--mist-white);font-size:.85rem;margin:.25rem .35rem .25rem 0}
.rfh-badge i{width:16px;height:16px}
.rfh-badge-goal{padding:.75rem .9rem;border:1px dashed var(--cloud-line);border-radius:12px;background:var(--base-50)}
.rfh-badge-goal-sub{font-size:.9rem;opacity:.8;margin-top:.25rem}