/* 
====================================
ESFVIZ PROJECT - MAIN STYLESHEET
====================================
Data Visualization Course
Group: EsfViz
Team: Sepehr Khodadadi, Hesam Mohebi, Bahar Khalilian

This file contains all styling for the EsfViz project.
No inline styles are used - all styling is handled here.

SECTIONS:
1. Google Fonts Import
2. Reset and Base Styles
3. Typography (Headings and Text)
4. Layout and Container Styles
5. Header Styles
6. Section Styles
7. List Styles
8. Card Components
9. Image Styles
10. Link Styles
11. Responsive Design
12. D3.js Visualization Styles
====================================
*/

/* 
====================================
1. GOOGLE FONTS IMPORT
====================================
Required fonts as per project specifications:
- Roboto Slab: For headings and titles
- Fira Sans: For body text and paragraphs
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;700&family=Fira+Sans:wght@300;400;500;600&display=swap');

/* 
====================================
2. RESET AND BASE STYLES
====================================
*/
/* Universal reset to ensure consistent styling across browsers */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Base body styling - applies to entire page */
body {
    font-family: 'Fira Sans', sans-serif;  /* Default font for body text */
    line-height: 1.6;                       /* Improves readability */
    color: #333;                            /* Dark gray text */
    background-color: #fff;                 /* White background */
}

/* 
====================================
3. TYPOGRAPHY STYLES
====================================
*/

/* HEADING STYLES - Uses Roboto Slab as required */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto Slab', serif;     /* Required font for headings */
    margin-bottom: 1rem;
    font-weight: 500;
}

/* Main page title (H1) */
h1 {
    font-size: 2.5rem;                      /* Large size for main title */
    font-weight: 700;                       /* Bold weight */
    color: #2c3e50;                         /* Dark blue-gray */
    margin-bottom: 0.5rem;
}

/* Section titles (H2) */
h2 {
    font-size: 2rem;                        /* Medium-large size */
    color: #34495e;                         /* Slightly lighter than H1 */
    margin-top: 2rem;                       /* Space above section titles */
    margin-bottom: 1rem;
}

/* Subsection titles (H3) */
h3 {
    font-size: 1.5rem;                      /* Medium size */
    color: #2c3e50;                         /* Same as H1 for consistency */
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

/* PARAGRAPH STYLES - Uses Fira Sans as required */
p {
    font-family: 'Fira Sans', sans-serif;  /* Required font for body text */
    margin-bottom: 1rem;
    font-size: 1.1rem;                     /* Slightly larger for readability */
    line-height: 1.7;                      /* Generous line spacing */
}

/* 
====================================
4. LAYOUT AND CONTAINER STYLES
====================================
*/

/* Main content container - centers content and provides padding */
.container {
    max-width: 1200px;                      /* Maximum width for large screens */
    margin: 0 auto;                         /* Centers the container */
    padding: 2rem;                          /* Padding on all sides */
}

/* Main content area - positioned after full-height hero section */
.main-content {
    background: #fff;                       /* White background for content */
    position: relative;
    z-index: 2;
    padding-left: 5%;
    padding-right: 5%;
}

/* Main content container - inherits from .container but with specific styling */
.main-content .container {
    padding: 4rem 2rem;                     /* Extra padding for main content */
}

/* 
====================================
5. HERO SECTION STYLES (FULL PAGE)
====================================
*/

/* Full-page hero section with gradient background */
.hero-section {
    height: 100vh;                          /* Full viewport height */
    display: flex;                          /* Flexbox for centering */
    align-items: center;                    /* Vertical centering */
    justify-content: center;                /* Horizontal centering */
    /* Image background instead of animated gradient:
       Use a relative path from this CSS file or an absolute URL.
       Example paths:
         url('../images/hero.jpg')
         url('/assets/hero.jpg')
         url('https://example.com/hero.jpg')
    */
    background-image: url('./heading-background.png'); /* <-- change path to your image */
    background-size: cover;                  /* Cover the area */
    background-position: center center;      /* Center the image */
    background-repeat: no-repeat;            /* No tiling */
    color: white;                            /* White text on image */
    text-align: center;                      /* Center all text */
    position: relative;                      /* For overlay / scroll indicator positioning */
    overflow: hidden;  
}

/* Keyframes for the background gradient animation */
@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Keyframes for fade-in-up animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero container for content spacing */
.hero-container {
    max-width: 1200px;                       /* Limit content width */
    padding: 2rem;                          /* Padding around content */
    z-index: 2; /* Ensure content is above the background */
}

/* Main title in hero section */
.hero-title {
    font-family: 'Roboto Slab', serif;     /* Required font for headings */
    font-size: 4rem;                        /* Large size for impact */
    font-weight: 700;                       /* Bold weight */
    color: white;                           /* White text */
    margin-bottom: 2rem;                    /* Space below title */
    text-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Subtle shadow for readability */
    animation: fadeInUp 1s ease-out;
}

/* Group name styling */
.group-name {
    font-family: 'Roboto Slab', serif;     /* Required font for headings */
    font-size: 2.5rem;                      /* Medium-large size */
    font-weight: 500;                       /* Medium weight */
    color: white;                           /* White text */
    margin-bottom: 3rem;                    /* Space below group name */
    opacity: 0;                          /* Start with opacity 0 for animation */
    animation: fadeInUp 1s ease-out 0.5s forwards; /* forwards keeps the state at the end of the animation */
}

/* Team members container */
.team-members {
    margin-bottom: 4rem;                    /* Space below team section */
    display: flex;                          /* Use flexbox for alignment */
    justify-content: center;                /* Center the members */
    flex-wrap: wrap;                        /* Allow wrapping on smaller screens */
    gap: 1rem;                              /* Add space between members */
}

/* Individual team member styling - displayed one after another */
.team-member {
    font-family: 'Fira Sans', sans-serif;  /* Required font for body text */
    font-size: 1.5rem;                      /* Medium size */
    font-weight: 400;                       /* Normal weight */
    color: white;                           /* White text */
    padding: 0.75rem 1.5rem;                /* Padding inside each member */
    background: rgba(255,255,255,0.1);      /* Semi-transparent white background */
    border-radius: 30px;                    /* Rounded corners */
    backdrop-filter: blur(10px);            /* Blur effect for modern look */
    transition: all 0.3s ease;             /* Smooth transitions */
    opacity: 0; /* Start with opacity 0 for animation */
    animation: fadeInUp 0.8s ease-out forwards; /* Animation for all members */
}

/* Staggered animation delays for team members */
.team-member:nth-child(1) {
    animation-delay: 1s;
}
.team-member:nth-child(2) {
    animation-delay: 1.2s;
}
.team-member:nth-child(3) {
    animation-delay: 1.4s;
}
.team-member:nth-child(4) {
    animation-delay: 1.6s;
}

/* Team member hover effects */
.team-member:hover {
    background: rgba(255,255,255,0.2);      /* Lighter background on hover */
    transform: translateY(-2px);            /* Slight lift effect */
}

/* Scroll indicator styling */
.scroll-indicator {
    position: absolute;                     /* Positioned relative to hero section */
    bottom: 2rem;                           /* Distance from bottom */
    left: 50%;                              /* Horizontal centering */
    transform: translateX(-50%);            /* Center adjustment */
    text-align: center;                     /* Center text */
    cursor: pointer;                        /* Pointer cursor for interaction */
    transition: opacity 0.3s ease;         /* Smooth fade transition */
}

/* Scroll arrow styling */
.scroll-arrow {
    font-size: 2rem;                        /* Large arrow size */
    margin-bottom: 0.5rem;                  /* Space below arrow */
    transition: transform 0.5s ease;       /* Smooth movement animation */
}

/* Scroll indicator text */
.scroll-indicator p {
    font-family: 'Fira Sans', sans-serif;  /* Consistent font */
    font-size: 0.9rem;                      /* Small text size */
    opacity: 0.8;                           /* Semi-transparent */
    margin: 0;                              /* Remove default margins */
}

/* 
====================================
6. SECTION STYLES
====================================
*/

/* Main content sections */
.section {
    margin-bottom: 3rem;                    /* Space between sections */
    padding: 2rem 0;                        /* Vertical padding */
    border-bottom: 1px solid #eee;          /* Light separator line */
}

/* Remove border from last section */
.section:last-child {
    border-bottom: none;
}

.footer-section {
    padding-left: 5%;                          /* Gray text color */
}
/* 
====================================
7. NAVIGATION STYLES (FOR VISUALIZATION PAGES)
====================================
*/

/* Navigation bar for visualization pages */
.visualization-nav {
    background: #002D40;                    /* Dark background */
    padding: 1rem 0;                        /* Vertical padding */
    position: sticky;                       /* Sticky positioning */
    top: 0;                                 /* Stick to top */
    z-index: 100;                           /* High z-index for overlay */
}

/* Navigation container */
.nav-container {
    max-width: 1200px;                      /* Same max width as main content */
    margin: 0 auto;                         /* Center the nav */
    padding: 0 2rem;                        /* Horizontal padding */
    display: flex;                          /* Flexbox layout */
    justify-content: space-between;         /* Space between items */
    align-items: center;                    /* Vertical alignment */
}

/* Back navigation link */
.nav-back {
    color: #ecf0f1;                         /* Light gray text */
    text-decoration: none;                  /* Remove underline */
    font-family: 'Fira Sans', sans-serif;  /* Consistent font */
    font-weight: 500;                       /* Medium weight */
    transition: color 0.2s ease;           /* Smooth color transition */
}

.nav-back:hover {
    color: #667eea;                         /* Accent color on hover */
}

/* Navigation title */
.nav-title {
    color: #ecf0f1;                         /* Light gray text */
    font-family: 'Roboto Slab', serif;     /* Heading font */
    font-size: 1.5rem;                      /* Medium size */
    margin: 0;  
    padding-left: 50%;                            /* Remove default margins */
}
.nav-logo{
    padding: 0%;
}

/* Visualization page container */
.visualization-page {
    background: #fff;                       /* White background */
    min-height: 100vh;                      /* Full height minimum */
}

/* Visualization description section */
.viz-description {
    background: #f8f9fa;                    /* Light background */
    padding: 2rem;                          /* Padding around content */
    border-radius: 10px;                    /* Rounded corners */
    margin-bottom: 2rem;                    /* Space below */
}

/* Chart information styling */
.chart-info {
    background: #e9ecef;                    /* Light gray background */
    padding: 1rem;                          /* Padding inside */
    border-radius: 5px;                     /* Rounded corners */
    margin-top: 1rem;                       /* Space above */
    font-size: 0.9rem;                      /* Slightly smaller text */
}

.chart-info p {
    margin-bottom: 0.5rem;                  /* Small spacing between lines */
}

.chart-info p:last-child {
    margin-bottom: 0;                       /* No margin on last paragraph */
}

/* Regional conflicts chart specific styles */
.regional-conflicts-chart {
    width: 100%;                            /* Full width container */
    overflow-x: auto;                       /* Horizontal scroll if needed */
}

.regional-conflicts-chart svg {
    min-width: 800px;                       /* Minimum width for chart */
    height: auto;                           /* Maintain aspect ratio */
}

/* 
====================================
8. LIST STYLES
====================================
*/

/* General list styling (ul and ol) */
ul, ol {
    margin: 1rem 0;                         /* Vertical margins */
    padding-left: 2rem;                     /* Indentation for list items */
}

/* List item styling */
li {
    margin-bottom: 0.5rem;                  /* Space between list items */
    font-family: 'Fira Sans', sans-serif;  /* Consistent font with body text */
}

/* TEAM MEMBERS LIST - Special styling for header team list (DEPRECATED - kept for compatibility) */
.team-list {
    list-style: none;                       /* Remove default bullets */
    padding-left: 0;                        /* Remove default indentation */
    display: flex;                          /* Flexible layout */
    flex-wrap: wrap;                        /* Allow wrapping on small screens */
    gap: 1rem;                              /* Space between team member items */
    justify-content: center;                /* Center team member list */
    margin-top: 1rem;
}

/* Individual team member styling (DEPRECATED - kept for compatibility) */
.team-list li {
    background: #f8f9fa;                    /* Light gray background */
    padding: 0.5rem 1rem;                   /* Padding inside each item */
    border-radius: 25px;                    /* Rounded corners */
    font-weight: 500;                       /* Medium font weight */
    color: #495057;                         /* Dark gray text */
}

/* 
====================================
9. CARD COMPONENTS
====================================
*/

/* Grid container for visualization page cards */
.page-sections {
    display: grid;                          /* CSS Grid layout */
    /* Responsive columns: minimum 300px, fill available space */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;                              /* Space between cards */
    margin-top: 2rem;                       /* Space above card grid */
}

/* Individual page/visualization cards */
.page-card {
    background: #f8f9fa;                    /* Light gray background */
    padding: 2rem;                          /* Padding inside cards */
    border-radius: 10px;                    /* Rounded corners */
    border-left: 4px solid #b82f2f;         /* Colored left border accent */
    /* Smooth animations on hover */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;                     /* For status badge positioning */
}

/* Clickable card links */
.page-card-link {
    text-decoration: none;                  /* Remove link underline */
    color: inherit;                         /* Inherit text color */
    display: block;                         /* Block-level for full card click */
}

.page-card-link:hover {
    text-decoration: none;                  /* Keep no underline on hover */
    color: inherit;                         /* Keep inherited color */
}

/* Card hover effects */
.page-card:hover,
.page-card-link:hover .page-card {
    transform: translateY(-5px);            /* Lift effect on hover */
    box-shadow: 0 5px 20px rgba(0,0,0,0.1); /* Shadow on hover */
}

/* Card title styling */
.page-card h3 {
    color: #b82f2f;                         /* Accent color for card titles */
    margin-top: 0;                          /* Remove top margin in cards */
}

/* Status badges for visualization cards */
.status-ready {
    background: #28a745;                    /* Green background for ready */
    color: white;                           /* White text */
    padding: 0.25rem 0.5rem;                /* Small padding */
    border-radius: 12px;                    /* Rounded corners */
    font-size: 0.75rem;                     /* Small font size */
    font-weight: 600;                       /* Bold weight */
    text-transform: uppercase;              /* Uppercase text */
}

.status-planned {
    background: #ffc107;                    /* Yellow background for planned */
    color: #212529;                         /* Dark text */
    padding: 0.25rem 0.5rem;                /* Small padding */
    border-radius: 12px;                    /* Rounded corners */
    font-size: 0.75rem;                     /* Small font size */
    font-weight: 600;                       /* Bold weight */
    text-transform: uppercase;              /* Uppercase text */
}

/* 
====================================
9. IMAGE STYLES
====================================
*/

/* Styling for project images */
.project-image {
    max-width: 100%;                        /* Responsive image sizing */
    height: auto;                           /* Maintain aspect ratio */
    border-radius: 8px;                     /* Rounded corners */
    margin: 1rem 0;                         /* Vertical margins */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Subtle shadow */
}

/* 
====================================
10. LINK STYLES
====================================
*/

/* General link styling */
a {
    color: #667eea;                         /* Accent color for links */
    text-decoration: none;                  /* Remove default underline */
    transition: color 0.2s ease;           /* Smooth color transition */
}

/* Link hover effects */
a:hover {
    color: #764ba2;                         /* Darker color on hover */
    text-decoration: underline;             /* Underline on hover */
}

/* 
====================================
11. RESPONSIVE DESIGN
====================================
Mobile-first approach for different screen sizes
*/

/* Styles for tablets and smaller screens */
@media (max-width: 768px) {
    /* Reduce container padding on small screens */
    .container {
        padding: 1rem;
    }
    
    /* HERO SECTION RESPONSIVE ADJUSTMENTS */
    .hero-title {
        font-size: 2.5rem;                  /* Reduced from 4rem */
    }
    
    .group-name {
        font-size: 2rem;                    /* Reduced from 2.5rem */
    }
    
    .team-member {
        font-size: 1.2rem;                  /* Reduced from 1.5rem */
        padding: 0.5rem 1rem;               /* Reduced padding */
    }
    
    /* Smaller heading sizes for mobile */
    h1 {
        font-size: 2rem;                    /* Reduced from 2.5rem */
    }
    
    h2 {
        font-size: 1.5rem;                  /* Reduced from 2rem */
    }
    
    /* Navigation adjustments for mobile */
    .nav-container {
        flex-direction: column;             /* Stack navigation items */
        gap: 1rem;                          /* Space between items */
        text-align: center;                 /* Center text */
    }
    
    .nav-title {
        font-size: 1.25rem;                 /* Smaller navigation title */
    }
    
    /* Stack team members vertically on mobile (deprecated styles) */
    .team-list {
        flex-direction: column;             /* Vertical layout */
        align-items: center;                /* Center items */
    }
    
    /* Single column layout for cards on mobile */
    .page-sections {
        grid-template-columns: 1fr;         /* Single column */
    }
    
    /* Scroll indicator adjustments */
    .scroll-indicator {
        bottom: 1rem;                       /* Closer to bottom on mobile */
    }
    
    .scroll-arrow {
        font-size: 1.5rem;                  /* Smaller arrow on mobile */
    }
    
    /* Mobile adjustments for regional conflicts chart */
    .visualization-container {
        padding: 1rem;                      /* Reduced padding on mobile */
    }
    
    .regional-conflicts-chart svg {
        min-width: 600px;                   /* Smaller minimum width on mobile */
    }
    
    /* Chart description adjustments */
    .viz-description {
        padding: 1rem;                      /* Reduced padding on mobile */
    }
    
    .viz-description h2 {
        font-size: 1.5rem;                  /* Smaller heading on mobile */
    }
}

/* 
====================================
12. D3.JS VISUALIZATION STYLES
====================================
These styles are applied to D3.js SVG elements
NO INLINE STYLES - All visualization styling handled here
*/

/* Container for visualization charts */
.visualization-container {
    background: #f8f9fa;                    /* Light background for charts */
    padding: 2rem;                          /* Padding around visualizations */
    border-radius: 10px;                    /* Rounded corners */
    margin: 2rem 0;                         /* Vertical margins */
    text-align: center;                     /* Center chart content */
}

/* SVG container styling */
.chart-svg {
    max-width: 100%;                        /* Responsive SVG */
    height: auto;                           /* Maintain aspect ratio */
}

/* Chart title styling */
.chart-title {
    font-family: 'Roboto Slab', serif;     /* Heading font */
    font-size: 16px;                       /* Medium font size */
    font-weight: 600;                      /* Semi-bold weight */
    fill: #2c3e50;                         /* Dark color */
}

/* SVG BAR CHART STYLES */
/* Default bar styling - modify colors as needed */
.bar {
    fill: #667eea;                          /* Bar color - matches theme */
    transition: fill 0.2s ease;            /* Smooth color transition */
}

/* Bar hover effects */
.bar:hover,
.bar-hover {
    fill: #764ba2;                          /* Darker color on hover */
}

/* AXIS STYLING */
/* Styling for chart axes */
.axis {
    font-family: 'Fira Sans', sans-serif;  /* Consistent font */
    font-size: 12px;                       /* Small font for axis text */
}

/* Axis text styling */
.axis text {
    fill: #495057;                          /* Dark gray text */
}

/* Axis line styling */
.axis path,
.axis line {
    stroke: #dee2e6;                       /* Light gray lines */
    stroke-width: 1;                       /* Thin lines */
}

/* Axis label styling */
.axis-label {
    font-family: 'Fira Sans', sans-serif;  /* Consistent font */
    font-size: 14px;                       /* Slightly larger for labels */
    font-weight: 500;                      /* Medium weight for emphasis */
    fill: #495057;                         /* Dark gray text */
}

/* 
====================================
CUSTOMIZATION NOTES
====================================

TO MODIFY COLORS:
- Change the hex values in the color properties
- Main theme colors: #667eea (blue) and #764ba2 (purple)

TO ADD NEW VISUALIZATION STYLES:
- Add new CSS classes below this section
- Use descriptive class names (e.g., .line-chart, .pie-slice)
- Follow the existing pattern for hover effects

TO MODIFY FONTS:
- Headings: Change 'Roboto Slab' references
- Body text: Change 'Fira Sans' references

TO ADJUST RESPONSIVE BREAKPOINTS:
- Modify the @media query values
- Add additional breakpoints as needed

EXAMPLE OF ADDING NEW VISUALIZATION STYLES:
.line-chart-path {
    stroke: #667eea;
    stroke-width: 2px;
    fill: none;
}

.pie-slice {
    stroke: white;
    stroke-width: 1px;
}

TO MODIFY HERO SECTION:
- Change .hero-section background gradient
- Adjust .hero-title, .group-name, .team-member styles
- Modify .scroll-indicator positioning and styling

TO ADD NEW STATUS BADGES:
- Follow .status-ready and .status-planned pattern
- Use semantic color coding (green=ready, yellow=planned, red=blocked, etc.)
*/