/*
FineRide Footer Styles

This stylesheet defines the footer component for the FineRide platform, providing site-wide navigation, branding, and contact information. It supports the bike riding community's needs by including links to environmental data and event features.

Key features:
- Brand section with FineRide logo and tagline
- Quick navigation links to core pages (Events, About, etc.)
- Contact information for user support
- Responsive design for mobile and desktop

Dependencies:
- style.css (base variables like --medium-blue, --medium-gray)
- Bootstrap for grid layout utilities

Browser Support:
- Modern browsers (Chrome 70+, Firefox 65+, Safari 12+, Edge 79+)
- Mobile browsers with touch support

Last Updated: December 26, 2025
Author: HowToolHelp/Intelligent
*/

/* =============================================================================
   FOOTER COMPONENT STYLES
   ============================================================================= */

/*------------------------------------*\
  #FOOTER-CONTAINER
\*------------------------------------*/

/* Footer container - Main wrapper for footer content
   Provides consistent layout and spacing across the site.
   Uses flexbox for responsive alignment of brand and links.

   Usage:
   <footer class="main-footer">
     <div class="footer-container">
       <!-- Brand and links content -->
     </div>
   </footer>
*/
.main-footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
  border-top: 1px solid var(--card-border);
  padding: 0;                       /* No internal padding; handled by container */
  margin-top: 50px;                 /* Space from main content */
}

.main-footer a {
  color: inherit;
  transition: var(--transition);
}

.main-footer .text-muted, 
.main-footer .small.text-muted {
  color: var(--medium-gray) !important;
}

.footer-container {
  max-width: 1200px;                /* Constrain width for readability */
  margin: 0 auto;                   /* Center horizontally */
  padding: 50px 30px;               /* Generous padding for breathing room */
  display: flex;                    /* Flexbox for flexible layout */
  justify-content: space-between;   /* Space brand and links apart */
  flex-wrap: wrap;                  /* Wrap on smaller screens */
}

/*------------------------------------*\
  #FOOTER-BRAND
\*------------------------------------*/

/* Footer brand section - Displays FineRide branding and tagline
   Reinforces the platform's focus on bike riding with clean air.

   Structure:
   .footer-brand
   ├── h3 (brand name)
   └── p (tagline)
*/
.footer-brand {
  flex: 0 0 300px;                  /* Fixed width for brand prominence */
  margin-bottom: 30px;              /* Bottom margin for spacing */
}

.footer-brand h3 {
  font-size: 1.8rem;                /* Large, readable heading */
  margin: 0 0 10px 0;               /* Tight bottom margin */
  color: var(--medium-blue);        /* Brand color for consistency */
}

.footer-brand p {
  color: var(--medium-gray);        /* Muted text for secondary info */
  font-size: 1.1rem;                /* Slightly larger for readability */
  margin: 0;                        /* No margins */
}

/*------------------------------------*\
  #FOOTER-LINKS
\*------------------------------------*/

/* Footer links section - Navigation to key platform features
   Organized in columns for easy scanning, with hover effects for interactivity.

   Structure:
   .footer-links
   ├── .footer-links-column (multiple)
   │   ├── h4 (column title)
   │   └── ul > li > a (links)
*/
.footer-links {
  flex: 1;                          /* Take remaining space */
  display: flex;                    /* Flex for column layout */
  justify-content: flex-end;        /* Align to right */
  gap: 50px;                        /* Space between columns */
  flex-wrap: wrap;                  /* Wrap on small screens */
}

.footer-links-column {
  min-width: 150px;                 /* Minimum width for stability */
  margin-bottom: 30px;              /* Bottom margin for spacing */
}

.footer-links-column h4 {
  font-size: 1.2rem;                /* Medium heading size */
  margin: 0 0 20px 0;               /* Bottom margin for separation */
  color: var(--medium-dark-blue);   /* Darker blue for hierarchy */
}

.footer-links-column ul {
  list-style: none;                 /* Remove default bullets */
  padding: 0;                       /* No padding */
  margin: 0;                        /* No margins */
}

.footer-links-column li {
  margin-bottom: 10px;              /* Space between list items */
}

.footer-links-column a {
  color: var(--medium-gray);        /* Muted link color */
  text-decoration: none;            /* Remove underlines */
  transition: color 0.3s ease;      /* Smooth hover transition */
  font-size: 1rem;                  /* Standard font size */
  display: inline-flex;             /* Flex for icon alignment */
  align-items: center;              /* Center vertically */
}

.footer-links-column a::before {
  content: "›";                     /* Arrow indicator */
  margin-right: 8px;                /* Space from text */
  color: var(--medium-blue);        /* Brand color */
  font-size: 1.2rem;                /* Slightly larger for visibility */
  opacity: 0;                       /* Hidden by default */
  transform: translateX(-5px);      /* Slide-in effect */
  transition: all 0.3s ease;        /* Smooth animation */
}

.footer-links-column a:hover {
  color: var(--medium-blue);        /* Highlight on hover */
}

.footer-links-column a:hover::before {
  opacity: 1;                       /* Show arrow on hover */
  transform: translateX(0);         /* Slide to position */
}

/*------------------------------------*\
  #FOOTER-BOTTOM
\*------------------------------------*/

/* Footer bottom section - Copyright and additional links
   Provides legal info and external policy links for compliance.

   Structure:
   .footer-bottom
   └── p (copyright text with links)
*/
.footer-bottom {
  background-color: var(--white);
  padding: 20px 30px;                /* Moderate padding */
  text-align: center;                /* Center alignment */
}

.footer-bottom p {
  color: var(--medium-gray);         /* Muted text */
  margin: 0;                         /* No margins */
  font-size: 0.9rem;                 /* Smaller font for footer */
}

.footer-bottom a {
  color: var(--medium-blue);         /* Brand link color */
  text-decoration: none;             /* Remove underlines */
  transition: color 0.3s ease;       /* Smooth hover */
}

.footer-bottom a:hover {
  color: var(--medium-dark-blue);    /* Darker on hover */
  text-decoration: underline;        /* Underline for clarity */
}

/* =============================================================================
   RESPONSIVE DESIGN PATTERNS
   ============================================================================= */

/* Tablet and below - Adjust layout for medium screens
   Reduces gaps and padding for tighter mobile experience.
*/
@media (max-width: 992px) {
  .footer-container {
    padding: 30px 20px;             /* Reduced padding */
  }

  .footer-links {
    gap: 30px;                      /* Smaller gaps */
  }
}

/* Mobile devices - Stack elements vertically
   Single-column layout for touch-friendly navigation.
*/
@media (max-width: 576px) {
  .footer-container {
    flex-direction: column;          /* Stack vertically */
    padding: 20px 15px;             /* Minimal padding */
  }

  .footer-brand {
    flex: none;                     /* Full width */
    text-align: center;             /* Center brand */
  }

  .footer-links {
    justify-content: center;        /* Center links */
    gap: 20px;                      /* Smaller gaps */
  }
}

/* =============================================================================
   ACCESSIBILITY AND UTILITY CLASSES
   ============================================================================= */

/* High contrast mode support - Enhance visibility for accessibility */
@media (prefers-contrast: high) {
  .footer-links-column a {
    border-bottom: 1px solid var(--medium-gray); /* Visible underlines */
  }
}

/* Reduced motion preferences - Disable animations for user comfort */
@media (prefers-reduced-motion: reduce) {
  .footer-links-column a::before {
    transition: none;                /* Remove arrow animation */
  }

  .footer-links-column a,
  .footer-bottom a {
    transition: none;                /* Remove color transitions */
  }
}