/**
 * CXP Footer CSS - Extracted from index.php
 * Standalone footer styling for reuse across all pages
 * UPDATED: Now imports shared variables for consistency
 */

/* Import shared CSS variables */
@import url('variables.css');

/* Fallback CSS Variables for footer - Now using shared variables */
:root {
  /* Fallback values if variables.css fails to load */
  --ces-primary: #191d63;
  --ces-primary-light: #004c8a;
  --ces-secondary: #f59e0b;
  --ces-white: #ffffff;
  --ces-gray-300: #d1d5db;
  --ces-gray-400: #9ca3af;
  --transition: all 0.3s ease;
}

/* Footer with stronger CSS specificity */
.ces-footer {
  background: linear-gradient(
    135deg,
    var(--ces-primary) 0%,
    var(--ces-primary-light) 100%
  ) !important;
  color: var(--ces-white) !important;
  padding: 4rem 0 1rem !important;
}

/* Fallback background in case CSS variables fail */
.ces-footer {
  background: linear-gradient(135deg, #191d63 0%, #004c8a 100%) !important;
}

/* Ensure container exists and works */
.ces-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

.ces-footer-content {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  gap: 2rem !important;
  margin-bottom: 2rem !important;
}

.ces-footer-section h3 {
  font-size: 1.2rem !important;
  margin-bottom: 1rem !important;
  color: var(--ces-white) !important;
}

.ces-footer-link {
  color: var(--ces-gray-300) !important;
  text-decoration: none !important;
  transition: var(--transition) !important;
}

.ces-footer-link:hover {
  color: var(--ces-white) !important;
}

.ces-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding-top: 1rem !important;
  text-align: center !important;
  color: var(--ces-gray-400) !important;
}

.ces-footer-tagline {
  font-weight: 600 !important;
  color: var(--ces-secondary) !important;
  font-style: italic !important;
}

/* Responsive Footer with stronger specificity */
@media (max-width: 768px) {
  .ces-footer-content {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    text-align: center !important;
  }

  .ces-footer-section {
    margin-bottom: 1rem !important;
  }
}