/*
FineRide About Page Styles

This stylesheet styles the About page for FineRide, highlighting the platform's mission to connect bike riders with environmental data (AQI, weather, YouBike). It includes sections for mission, features, contact, and privacy, with a fixed navigation sidebar for easy access.

Key features:
- Card-based sections with icons for visual hierarchy
- Fixed quick navigation for long content
- Responsive design adapting to mobile screens
- Accessibility features like focus indicators and screen reader support

Dependencies:
- style.css (variables like --medium-blue, --medium-gray)
- components.css (base card styles, if extended)
- Font Awesome for icons

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
*/

/* =============================================================================
   CSS CUSTOM PROPERTIES (VARIABLES) DOCUMENTATION
   ============================================================================= */

:root {
  /* Navigation-specific variables */
  --about-nav-width: 280px;          /* Fixed width for sidebar */
  --about-nav-bg: #fff;              /* White background for contrast */
  --about-nav-header-bg: linear-gradient(135deg, var(--medium-blue), var(--medium-light-blue)); /* Gradient for branding */
  --about-nav-text-color: var(--medium-dark-gray); /* Muted text */
  --about-nav-hover-bg: rgba(0, 102, 204, 0.08); /* Subtle hover background */
  --about-nav-active-color: var(--medium-blue); /* Active link color */
}

/* =============================================================================
   ABOUT PAGE LAYOUT AND COMPONENTS
   ============================================================================= */

/*------------------------------------*\
  #ABOUT-CONTAINER
\*------------------------------------*/

/* About container - Main content wrapper for the About page
   Centers content with a light background and subtle shadow for focus.

   Usage:
   <main class="about-container">
     <!-- Section content -->
   </main>
*/
.about-container {
  max-width: 900px;                  /* Constrain for readability */
  margin: 2rem auto;                 /* Center with top/bottom margin */
  padding: 2rem;                     /* Generous padding */
  background-color: #f8f9fa;         /* Light gray background */
  border-radius: 8px;                /* Rounded corners */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle elevation */
}

/*------------------------------------*\
  #ABOUT-HEADER
\*------------------------------------*/

/* About header - Page title and subtitle
   Introduces FineRide's mission with prominent styling.

   Structure:
   .about-header
   ├── h1 (title)
   └── .about-subtitle (tagline)
*/
.about-header {
  text-align: center;                /* Center alignment */
  margin-bottom: 3rem;              /* Space below */
  padding-bottom: 1.5rem;           /* Bottom padding */
  border-bottom: 1px solid #e0e0e0; /* Separator line */
}

.about-header h1 {
  font-size: 2.5rem;                /* Large heading */
  color: var(--medium-dark-blue);   /* Dark blue for emphasis */
  margin-bottom: 0.5rem;            /* Tight bottom margin */
}

.about-subtitle {
  font-size: 1.2rem;                /* Medium subtitle */
  color: var(--medium-gray);        /* Muted color */
}

/*------------------------------------*\
  #ABOUT-SECTIONS
\*------------------------------------*/

/* About sections - Card-based content blocks for mission, features, etc.
   Each section has an icon, hover effects, and responsive layout.

   Structure:
   .about-section
   ├── .section-icon (icon)
   └── .section-content (text)

   Usage:
   <section class="about-section" id="mission">
     <!-- Icon and content -->
   </section>
*/
.about-section {
  display: flex;                     /* Flex for icon + content */
  align-items: flex-start;           /* Top alignment */
  margin-bottom: 30px;              /* Space between sections */
  padding: 28px 24px;               /* Internal padding */
  background: var(--card-bg); /* changed from white for consistency */
  border-radius: 12px;              /* Rounded corners */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); /* Elevation */
  border-left: 4px solid transparent; /* Placeholder for accent */
  transition: all 0.3s ease;        /* Smooth hover transitions */
  position: relative;               /* For pseudo-element */
  overflow: hidden;                 /* Contain pseudo-element */
}

.about-section::before {
  content: '';                      /* Accent bar */
  position: absolute;               /* Positioned left */
  top: 0;                           /* Full height */
  left: 0;
  width: 4px;                       /* Thin bar */
  height: 100%;
  background: linear-gradient(135deg, var(--medium-blue), var(--medium-light-blue)); /* Brand gradient */
  transition: width 0.3s ease;      /* Expand on hover */
}

.about-section:hover {
  transform: translateY(-2px);      /* Lift effect */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); /* Enhanced shadow */
}

.about-section:hover::before {
  width: 8px;                       /* Thicker accent on hover */
}

.about-section .section-icon {
  margin-right: 16px;               /* Space from content */
  font-size: 1.5rem;                /* Icon size */
  color: var(--medium-blue);        /* Brand color */
  width: 40px;                      /* Fixed size */
  height: 40px;
  flex-shrink: 0;                   /* Prevent shrinking */
  display: flex;                    /* Center icon */
  align-items: center;
  justify-content: center;
  background: rgba(0, 102, 204, 0.1); /* Subtle background */
  border-radius: 50%;               /* Circular */
}

.about-section .section-content {
  flex: 1;                          /* Take remaining space */
}

.about-section .section-content h2 {
  font-size: 1.8rem;                /* Section heading */
  color: var(--medium-blue);        /* Brand color */
  margin-bottom: 16px;              /* Bottom margin */
  margin-top: 0;                    /* No top margin */
  font-weight: 600;                 /* Semi-bold */
  display: flex;                    /* Flex for potential icon */
  align-items: center;
  gap: 12px;                        /* Gap if icon added */
}

.about-section .section-content p,
.about-section .section-content ul {
  font-size: 1.25rem;               /* Readable body text */
  line-height: 1.7;                 /* Comfortable line height */
  color: var(--medium-dark-gray);   /* Dark gray for contrast */
}

/* Feature list - Bulleted list with check icons */
.feature-list {
  list-style: none;                 /* Remove bullets */
  padding-left: 0;                  /* No padding */
}

.feature-list li {
  display: flex;                    /* Flex for icon + text */
  align-items: center;
  gap: 0.75rem;                     /* Space between */
  margin-bottom: 0.75rem;           /* Bottom margin */
}

.feature-list li i.fa-check-circle {
  color: var(--medium-green);       /* Green for success */
  font-size: 1.2rem;                /* Icon size */
}

/* Contact info - Styled links with icons */
.contact-info .contact-item {
  display: flex;                    /* Flex for icon + link */
  align-items: center;
  gap: 0.75rem;                     /* Gap */
  font-size: 1rem;                  /* Standard size */
  margin-bottom: 0.5rem;            /* Bottom margin */
}

.contact-info .contact-item i {
  color: var(--medium-blue);        /* Brand color */
  font-size: 1.2rem;                /* Icon size */
}

.contact-link {
  color: var(--medium-blue);        /* Link color */
  text-decoration: none;            /* No underline */
  transition: color 0.3s ease;      /* Smooth hover */
}

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

/* Privacy content - Headings and lists for policy info */
.privacy-content h3 {
  font-size: 1.3rem;                /* Subsection heading */
  color: var(--medium-dark-blue);   /* Dark blue */
  margin-top: 1.5rem;               /* Top margin */
  margin-bottom: 0.75rem;           /* Bottom margin */
}

.privacy-list {
  list-style: disc;                 /* Bulleted list */
  padding-left: 20px;               /* Indent */
}

.privacy-commitment strong {
  color: var(--medium-black);       /* Strong emphasis */
}

.policy-links {
  display: flex;                    /* Flex for vertical stack */
  flex-direction: column;
  gap: 0.75rem;                     /* Gap between links */
  margin-top: 1rem;                 /* Top margin */
}

.policy-link {
  display: inline-flex;             /* Flex for icon + text */
  align-items: center;
  gap: 0.75rem;                     /* Gap */
  padding: 0.75rem 1rem;            /* Padding */
  background-color: #f1f5f9;        /* Light background */
  color: #1e293b;                   /* Dark text */
  border-radius: 6px;               /* Rounded */
  text-decoration: none;            /* No underline */
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transitions */
  border: 1px solid #e2e8f0;        /* Subtle border */
  font-weight: 500;                 /* Medium weight */
  font-size: 0.95rem;               /* Small font */
}

.policy-link:hover {
  background-color: #e9ecef;        /* Lighter on hover */
  color: var(--medium-blue);        /* Brand color */
}

.policy-link .fab.fa-google {
  color: #4285F4;                   /* Google blue */
  font-size: 1.3rem;                /* Icon size */
}

.policy-link .fas.fa-fire {
  color: #FFCA28;                   /* Firebase yellow */
  font-size: 1.3rem;                /* Icon size */
}

.policy-link i.fa-external-link-alt {
  font-size: 0.8rem;                /* Small icon */
  margin-left: auto;                /* Push to right */
  opacity: 0.7;                     /* Semi-transparent */
  color: #64748b;                   /* Muted color */
}

/*------------------------------------*\
  #ABOUT-NAVIGATION
\*------------------------------------*/

/* About navigation - Fixed sidebar for quick page navigation
   Provides easy access to sections, with toggle for mobile.

   Structure:
   .about-navigation
   ├── .nav-header (title)
   ├── .nav-menu (links)
   └── .nav-toggle (button)
*/
.about-navigation {
  position: fixed;                  /* Fixed to right side */
  top: 150px;                       /* Offset from top */
  right: 30px;                      /* Right margin */
  width: var(--about-nav-width);    /* Fixed width */
  background-color: var(--about-nav-bg); /* White background */
  border-radius: 8px;               /* Rounded */
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15); /* Shadow */
  z-index: 900;                     /* Above content */
  transition: transform 0.3s ease-in-out; /* For potential collapse */
  transform: translateX(0);         /* Default visible */
}

.about-navigation .nav-header {
  background: var(--about-nav-header-bg); /* Gradient background */
  color: white;                     /* White text */
  padding: 1rem;                    /* Padding */
  font-size: 1.1rem;                /* Medium size */
  font-weight: 600;                 /* Bold */
  display: flex;                    /* Flex for icon + text */
  align-items: center;
  gap: 0.75rem;                     /* Gap */
  border-top-left-radius: 8px;      /* Rounded top */
  border-top-right-radius: 8px;
}

.about-navigation .nav-menu {
  list-style: none;                 /* No bullets */
  padding: 0.5rem 0;                /* Vertical padding */
  margin: 0;                        /* No margins */
  max-height: calc(100vh - 250px);  /* Constrain height */
  opacity: 1;                       /* Visible */
  visibility: visible;              /* Visible */
  overflow-y: auto;                 /* Scroll if needed */
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out, visibility 0.3s ease-out; /* Smooth toggle */
}

.about-navigation .nav-menu:not(.show) {
  max-height: 0;                    /* Hidden */
  opacity: 0;
  visibility: hidden;
}

.about-navigation .nav-menu.show {
  max-height: calc(100vh - 250px);  /* Expanded */
  opacity: 1;
  visibility: visible;
}

.about-navigation .nav-item .nav-link {
  display: flex;                    /* Flex for icon + text */
  align-items: center;
  gap: 0.75rem;                     /* Gap */
  padding: 0.85rem 1.25rem;         /* Padding */
  color: var(--about-nav-text-color); /* Muted color */
  text-decoration: none;            /* No underline */
  font-size: 0.95rem;               /* Small font */
  transition: background-color 0.2s ease, color 0.2s ease; /* Smooth hover */
  border-left: 3px solid transparent; /* Placeholder for active */
}

.about-navigation .nav-item .nav-link:hover {
  background-color: var(--about-nav-hover-bg); /* Hover background */
  color: var(--about-nav-active-color); /* Active color */
  border-left-color: var(--about-nav-active-color); /* Accent border */
}

.about-navigation .nav-item .nav-link.active {
  color: var(--about-nav-active-color); /* Active color */
  font-weight: 600;                 /* Bold */
  border-left-color: var(--about-nav-active-color); /* Accent */
  background-color: var(--about-nav-hover-bg); /* Background */
}

.about-navigation .nav-item .nav-link i {
  font-size: 1rem;                  /* Icon size */
  width: 20px;                      /* Fixed width */
  text-align: center;               /* Center */
  opacity: 0.8;                     /* Semi-transparent */
}

.about-navigation .nav-item .nav-link:hover i,
.about-navigation .nav-item .nav-link.active i {
  opacity: 1;                       /* Full opacity */
}

.about-navigation .nav-toggle {
  position: absolute;               /* Positioned left of panel */
  top: 50%;                         /* Center vertically */
  left: -15px;
  transform: translateY(-50%);
  background-color: var(--medium-blue); /* Brand background */
  color: white;                     /* White icon */
  border: none;                     /* No border */
  border-radius: 50%;               /* Circular */
  width: 30px;                      /* Size */
  height: 30px;
  display: flex;                    /* Center icon */
  align-items: center;
  justify-content: center;
  cursor: pointer;                  /* Pointer cursor */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Shadow */
  transition: background-color 0.2s ease; /* Smooth hover */
}

.about-navigation .nav-toggle:hover {
  background-color: var(--medium-dark-blue); /* Darker on hover */
}

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

/* Tablet and below - Adjust navigation and sections */
@media (max-width: 992px) {
  .about-navigation {
    position: relative;              /* Relative for mobile */
    top: auto;                       /* Reset */
    right: auto;
    width: 100%;                    /* Full width */
    margin-bottom: 2rem;            /* Bottom margin */
  }

  .about-navigation .nav-menu {
    max-height: 0;                  /* Hidden by default */
    opacity: 0;
    visibility: hidden;
  }

  .about-section {
    flex-direction: column;          /* Stack vertically */
    padding: 1.5rem;                /* Reduced padding */
  }
}

/* Mobile devices - Compact layout */
@media (max-width: 768px) {
  .about-container {
    padding: 1rem;                  /* Reduced padding */
    margin: 1rem auto;              /* Smaller margins */
  }

  .about-header h1 {
    font-size: 2rem;                /* Smaller heading */
  }

  .about-subtitle {
    font-size: 1rem;                /* Smaller subtitle */
  }

  .about-section {
    flex-direction: row;            /* Keep row on mobile */
    align-items: flex-start;
    padding: 1.25rem;               /* Reduced padding */
  }

  .about-section .section-icon {
    margin-right: 12px;             /* Smaller margin */
    width: 32px;                    /* Smaller size */
    height: 32px;
    font-size: 1.2rem;              /* Smaller icon */
  }

  .about-section .section-content h2 {
    font-size: 1.4rem;              /* Smaller heading */
  }
}

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

/* Back-to-top button overrides - Ensure gradient for FineRide branding */
#backToTopBtn.back-to-top-button {
  background: linear-gradient(135deg, var(--button-gradient-blue-start), var(--button-gradient-teal-end)) !important; /* Brand gradient */
  color: white !important;           /* White text */
  border: none !important;           /* No border */
}

#backToTopBtn.back-to-top-button:hover {
  background: linear-gradient(135deg, var(--button-gradient-teal-end), var(--button-gradient-blue-start)) !important; /* Reversed gradient */
}

/* High contrast mode support - Enhance borders and colors */
@media (prefers-contrast: high) {
  .about-section {
    border: 2px solid var(--medium-gray); /* Visible borders */
  }

  .policy-link {
    border-width: 2px;              /* Thicker borders */
  }
}

/* Reduced motion preferences - Disable animations */
@media (prefers-reduced-motion: reduce) {
  .about-section,
  .about-navigation .nav-menu,
  .about-navigation .nav-toggle {
    transition: none;                /* Remove transitions */
  }

  .about-section::before {
    transition: none;                /* Remove pseudo-element animation */
  }
}