/* Fusion Collective Custom Styles */

/* CSS Custom Properties for Brand Colors */
:root {
  /* Primary brand colors */
  --fc-orange: #F09C2D;
  --fc-orange-soft: #F0AD54;
  --fc-red: #F02F00;
  --fc-red-soft: #F04E27;
  --fc-blue: #3BA5E4;
  --fc-blue-soft: #60B3E4;
  --fc-purple: #3D369F;
  --fc-purple-soft: #5555F0;

  /* Background colors */
  --fc-background: #FAFAFA;  /* Very pale grey */
  --fc-background-white: #FFFFFF;
  --fc-background-light: #F5F5F5;
  --fc-background-grey: #E0E0E0;

  /* Text colors */
  --fc-text-dark: #1A1A1A;
  --fc-text-medium: #4A4A4A;
  --fc-text-light: #6A6A6A;
}

/* Proxima Nova Font Face Declarations */
@font-face {
  font-family: 'Proxima Nova';
  src: url('/static/fonts/ProximaNova.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('/static/fonts/ProximaNova-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('/static/fonts/ProximaNova-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('/static/fonts/ProximaNova-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('/static/fonts/ProximaNova-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('/static/fonts/ProximaNova-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('/static/fonts/ProximaNova-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Italic variants */
@font-face {
  font-family: 'Proxima Nova';
  src: url('/static/fonts/ProximaNova-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('/static/fonts/ProximaNova-LightIt.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('/static/fonts/ProximaNova-MediumIt.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('/static/fonts/ProximaNova-SemiboldIt.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('/static/fonts/ProximaNova-BoldIt.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Body and global font settings */
body {
  font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  background-color: var(--fc-background);
  color: var(--fc-text-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
}

/* Typography Hierarchy */
h1, .h1 {
  font-family: 'Proxima Nova', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700; /* Bold for H1 */
  font-size: 2.75rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  color: var(--fc-text-dark);
}

h2, .h2 {
  font-family: 'Proxima Nova', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500; /* Medium for H2 */
  font-size: 2.25rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
  color: var(--fc-text-dark);
}

h3, .h3 {
  font-family: 'Proxima Nova', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300; /* Light for H3 */
  font-size: 1.875rem;
  line-height: 1.3;
  letter-spacing: 0;
  margin-bottom: 1rem;
  color: var(--fc-text-dark);
}

h4, .h4 {
  font-family: 'Proxima Nova', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600; /* Semibold for H4 */
  font-size: 1.5rem;
  line-height: 1.35;
  margin-bottom: 1rem;
  color: var(--fc-text-dark);
}

h5, .h5 {
  font-family: 'Proxima Nova', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500; /* Medium for H5 */
  font-size: 1.25rem;
  line-height: 1.4;
  margin-bottom: 0.75rem;
  color: var(--fc-text-dark);
}

h6, .h6 {
  font-family: 'Proxima Nova', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600; /* Semibold for H6 */
  font-size: 1.125rem;
  line-height: 1.4;
  margin-bottom: 0.75rem;
  color: var(--fc-text-dark);
}

/* Paragraph and body text styling */
p {
  font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  line-height: 1.65;
  margin-bottom: 1rem;
}

/* Lead paragraph style */
.lead {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--fc-text-medium);
}

/* Small text style */
small, .small {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
}

/* Text color utilities */
.text-fc-orange { color: var(--fc-orange) !important; }
.text-fc-orange-soft { color: var(--fc-orange-soft) !important; }
.text-fc-red { color: var(--fc-red) !important; }
.text-fc-red-soft { color: var(--fc-red-soft) !important; }
.text-fc-blue { color: var(--fc-blue) !important; }
.text-fc-blue-soft { color: var(--fc-blue-soft) !important; }
.text-fc-purple { color: var(--fc-purple) !important; }
.text-fc-purple-soft { color: var(--fc-purple-soft) !important; }

/* Background color utilities */
.bg-fc-orange { background-color: var(--fc-orange) !important; }
.bg-fc-orange-soft { background-color: var(--fc-orange-soft) !important; }
.bg-fc-red { background-color: var(--fc-red) !important; }
.bg-fc-red-soft { background-color: var(--fc-red-soft) !important; }
.bg-fc-blue { background-color: var(--fc-blue) !important; }
.bg-fc-blue-soft { background-color: var(--fc-blue-soft) !important; }
.bg-fc-purple { background-color: var(--fc-purple) !important; }
.bg-fc-purple-soft { background-color: var(--fc-purple-soft) !important; }

/* Border color utilities */
.border-fc-orange { border-color: var(--fc-orange) !important; }
.border-fc-orange-soft { border-color: var(--fc-orange-soft) !important; }
.border-fc-red { border-color: var(--fc-red) !important; }
.border-fc-red-soft { border-color: var(--fc-red-soft) !important; }
.border-fc-blue { border-color: var(--fc-blue) !important; }
.border-fc-blue-soft { border-color: var(--fc-blue-soft) !important; }
.border-fc-purple { border-color: var(--fc-purple) !important; }
.border-fc-purple-soft { border-color: var(--fc-purple-soft) !important; }

/* Button variants using FC colors */
.btn-fc-orange {
  background-color: var(--fc-orange);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  border: 2px solid var(--fc-orange);
}

.btn-fc-orange:hover {
  background-color: var(--fc-orange-soft);
  border-color: var(--fc-orange-soft);
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(240, 156, 45, 0.3);
}

.btn-fc-blue {
  background-color: var(--fc-blue);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  border: 2px solid var(--fc-blue);
}

.btn-fc-blue:hover {
  background-color: var(--fc-blue-soft);
  border-color: var(--fc-blue-soft);
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(59, 165, 228, 0.3);
}

.btn-fc-purple {
  background-color: var(--fc-purple);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  border: 2px solid var(--fc-purple);
}

.btn-fc-purple:hover {
  background-color: var(--fc-purple-soft);
  border-color: var(--fc-purple-soft);
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(61, 54, 159, 0.3);
}

/* Outline button variants */
.btn-outline-fc-orange {
  background-color: transparent;
  color: var(--fc-orange);
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  border: 2px solid var(--fc-orange);
}

.btn-outline-fc-orange:hover {
  background-color: var(--fc-orange);
  color: white;
}

.btn-outline-fc-blue {
  background-color: transparent;
  color: var(--fc-blue);
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  border: 2px solid var(--fc-blue);
}

.btn-outline-fc-blue:hover {
  background-color: var(--fc-blue);
  color: white;
}

/* Link styles */
a {
  color: var(--fc-blue);
  transition: color 0.3s ease;
}

a:hover {
  color: var(--fc-blue-soft);
}

/* Navigation link overrides */
nav a {
  transition: color 0.3s ease;
}

nav a:hover {
  color: var(--fc-orange) !important;
}

/* Custom Navigation Height */
nav.nav-tall {
  min-height: 6rem; /* 96px minimum height */
}

nav.nav-tall .logo-container img {
  max-height: 4rem; /* 64px max height for logo */
  width: auto;
  object-fit: contain;
}

/* Card component with FC styling */
.fc-card {
  background-color: var(--fc-background-white);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Section backgrounds */
.section-light {
  background-color: var(--fc-background-light);
}

.section-white {
  background-color: var(--fc-background-white);
}

/* Gradient backgrounds using FC colors */
.gradient-fc-orange {
  background: linear-gradient(135deg, var(--fc-orange) 0%, var(--fc-orange-soft) 100%);
}

.gradient-fc-blue {
  background: linear-gradient(135deg, var(--fc-blue) 0%, var(--fc-blue-soft) 100%);
}

.gradient-fc-purple {
  background: linear-gradient(135deg, var(--fc-purple) 0%, var(--fc-purple-soft) 100%);
}

.gradient-fc-mixed {
  background: linear-gradient(135deg, var(--fc-orange) 0%, var(--fc-purple) 100%);
}

/* Hero section styling */
.hero-section {
  background-color: var(--fc-background-white);
  position: relative;
}

.hero-section h1 {
  color: var(--fc-text-dark);
  font-size: 3rem;
  font-weight: 700;
}

/* Footer styling override */
footer {
  background-color: var(--fc-text-dark) !important;
}

/* Form styling */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  background-color: var(--fc-background-white);
  border: 1px solid var(--fc-background-grey);
  transition: border-color 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  border-color: var(--fc-blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 165, 228, 0.1);
}

/* Badge/tag styling */
.badge-fc-orange {
  background-color: var(--fc-orange);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
}

.badge-fc-blue {
  background-color: var(--fc-blue);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Font weight utility classes */
.font-light { font-weight: 300 !important; }
.font-normal { font-weight: 400 !important; }
.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }
.font-extrabold { font-weight: 800 !important; }
.font-black { font-weight: 900 !important; }

/* Enhanced button styling with Proxima Nova */
.btn-fc-orange,
.btn-fc-blue,
.btn-fc-purple,
.btn-outline-fc-orange,
.btn-outline-fc-blue {
  font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Navigation enhancements */
nav {
  font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
}

/* Form field typography */
input, textarea, select, button {
  font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Footer text styling */
footer {
  font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

footer h3, footer h4 {
  font-weight: 600;
  letter-spacing: 0;
}

/* Hero section enhancements */
.hero-section h1 {
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.hero-section p {
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.75;
}

/* Card typography */
.fc-card h2, .fc-card h3 {
  font-weight: 600;
}

.fc-card p {
  font-weight: 400;
  color: var(--fc-text-medium);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  h1, .h1 {
    font-size: 2rem;
    letter-spacing: -0.01em;
  }

  h2, .h2 {
    font-size: 1.75rem;
    letter-spacing: 0;
  }

  h3, .h3 {
    font-size: 1.5rem;
  }

  p {
    font-size: 1rem;
    line-height: 1.6;
  }
}

/* Large screen enhancements */
@media (min-width: 1024px) {
  h1, .h1 {
    font-size: 3rem;
  }

  .hero-section h1 {
    font-size: 3.5rem;
    line-height: 1.1;
  }
}