/* 
========================================
ECHRE Corporation Onboarding Website Styles
========================================

Hey! This is the main stylesheet for our EVE Online corp onboarding site.
We're going for a cool space/industrial theme that looks professional but not boring.

This file is organized like this:
1. CSS Variables (the color scheme and stuff)
2. Reset styles (making browsers behave the same)
3. Base styles (the foundation)
4. Header (the top navigation bar)
5. Main content (all the page content)
6. Components (buttons, cards, etc.)
7. Responsive design (making it work on phones)

Most of the styling techniques come from:
- Modern CSS Grid and Flexbox (for layouts)
- CSS Custom Properties (for the color variables)
- Google Fonts (Orbitron + Exo 2 for the sci-fi look)
- Some inspiration from Material Design (for the card shadows and hover effects)
- blahblahblah it's a styling sheet, get with it

*/

/* 
========================================
CSS Variables - Our Color Scheme & Settings
========================================

These are like global settings that we can use anywhere in the CSS.
Super handy because if we want to change the main blue color, we just change it here!
*/
:root {
    /* 
    Main Colors - These are our brand colors!
    Primary blue is that cool cyan color you see everywhere
    */
    --primary-color: #00b4d8;    /* Main blue - like EVE's UI blue but cooler */
    --secondary-color: #0077b6;  /* Darker blue for gradients */
    --accent-color: #ffd60a;     /* Yellow accent - like warning lights */
    --warning-color: #ff6b35;    /* Orange for warnings */
    --danger-color: #d62828;     /* Red for critical stuff */
    --success-color: #06d6a0;    /* Green for success messages */
    
    /* 
    Background Colors - Dark theme because space is dark!
    We're using different shades of black/gray for depth
    */
    --dark-bg: #0a0a0a;          /* Main background - almost black */
    --darker-bg: #050505;        /* Even darker for contrast */
    --card-bg: #1a1a1a;          /* Card backgrounds - slightly lighter */
    --border-color: #333333;     /* Borders - subtle gray */
    
    /* 
    Text Colors - White and grays for readability
    */
    --text-primary: #ffffff;     /* Main text - pure white */
    --text-secondary: #cccccc;   /* Secondary text - light gray */
    --text-muted: #888888;       /* Muted text - darker gray */
    
    /* 
    Fonts - Google Fonts for that sci-fi look!
    Orbitron is super futuristic, Exo 2 is clean and readable
    */
    --font-primary: 'Orbitron', monospace;    /* For headings - looks like a spaceship UI */
    --font-secondary: 'Exo 2', sans-serif;    /* For body text - clean and modern */
    
    /* 
    Design Tokens - These make everything consistent
    */
    --border-radius: 8px;        /* How rounded our corners are */
    --transition: all 0.3s ease; /* How smooth our animations are */
    --shadow: 0 4px 20px rgba(0, 180, 216, 0.1);      /* Subtle glow effect */
    --shadow-hover: 0 8px 30px rgba(0, 180, 216, 0.2); /* Bigger glow on hover */
}

/* 
========================================
Reset and Base Styles - Making Browsers Behave
========================================

This is like telling all browsers "hey, start from the same place!"
Different browsers have different default styles, so we reset them all.
*/

/* 
The Universal Selector (*) - This affects EVERYTHING
We're removing all default margins, padding, and making box-sizing consistent
*/
* {
    margin: 0;           /* Remove default spacing */
    padding: 0;          /* Remove default padding */
    box-sizing: border-box; /* Makes width/height include padding and borders */
}

/* 
Body Styles - The foundation of our page
This is where we set up the basic look and feel
*/
body {
    font-family: var(--font-secondary);  /* Use our custom font */
    background: var(--dark-bg);          /* Dark space background */
    color: var(--text-primary);          /* White text */
    line-height: 1.6;                    /* Makes text easier to read */
    overflow-x: hidden;                  /* Prevents horizontal scrolling */
    
    /* 
    Font Loading Optimization - Prevents that annoying "text jump" 
    when fonts load at different times
    */
    font-display: swap;                  /* Show fallback font while loading */
    text-rendering: optimizeLegibility;  /* Makes text look crisp */
}

/* 
========================================
Background Effects - Making It Look Like Space!
========================================

This creates a cool animated background that looks like you're floating in space.
We're using CSS gradients to create glowing orbs and a subtle gradient.
*/

.background-overlay {
    position: fixed;     /* Stays in place when scrolling */
    top: 0;             /* Start at the very top */
    left: 0;            /* Start at the very left */
    width: 100%;        /* Cover the whole screen */
    height: 100%;       /* Cover the whole screen */
    
    /* 
    Multiple Gradients - This creates the space effect!
    - First gradient: Blue glow in bottom left
    - Second gradient: Yellow glow in top right  
    - Third gradient: Dark background gradient
    */
    background: 
        radial-gradient(circle at 20% 80%, rgba(0, 180, 216, 0.1) 0%, transparent 50%),  /* Blue glow */
        radial-gradient(circle at 80% 20%, rgba(255, 214, 10, 0.05) 0%, transparent 50%), /* Yellow glow */
        linear-gradient(135deg, var(--dark-bg) 0%, var(--darker-bg) 100%);                /* Dark gradient */
    
    z-index: -1;        /* Put it behind everything else */
}

/* 
========================================
Container - The Main Wrapper
========================================

This is like a "wrapper" that holds all our content and keeps it centered.
It's a common pattern in web design - you'll see this everywhere!
*/

.container {
    max-width: 1200px;  /* Don't let it get wider than 1200px */
    margin: 0 auto;     /* Center it horizontally */
    padding: 0 20px;    /* Add some breathing room on the sides */
}

/* 
========================================
Header Styles - The Top Navigation Bar
========================================

This is the sticky header that stays at the top when you scroll.
We're using some fancy CSS tricks here:
- backdrop-filter: Creates that "frosted glass" effect
- position: sticky: Makes it stick to the top
- z-index: Puts it above other content
*/

.main-header {
    background: rgba(26, 26, 26, 0.95);  /* Semi-transparent dark background */
    backdrop-filter: blur(10px);          /* That cool "frosted glass" effect! */
    border-bottom: 2px solid var(--primary-color); /* Blue line at the bottom */
    position: sticky;                     /* Sticks to the top when scrolling */
    top: 0;                              /* Stick to the very top */
    z-index: 100;                        /* Put it above everything else */
    box-shadow: var(--shadow);           /* Subtle glow effect */
    min-height: 120px;                   /* Prevent layout shifts (no jumping!) */
    transition: all 0.2s ease;           /* Smooth animations */
}

/* 
Header Container - Using Flexbox for Layout
Flexbox is AMAZING for layouts! It makes things align perfectly.
*/
.main-header .container {
    display: flex;                      /* Turn on flexbox */
    justify-content: space-between;     /* Logo on left, nav on right */
    align-items: center;                /* Center everything vertically */
    padding: 1rem 20px;                /* Some breathing room */
}

/* 
Logo Section - Where our logo and company name live
We're using flexbox here too to align the logo and text nicely
*/
.logo-section {
    display: flex;                      /* Flexbox for horizontal layout */
    align-items: center;                /* Center everything vertically */
    gap: 1rem;                         /* Space between logo and text */
    text-align: left;                  /* Left-align the text */
    min-height: 100px;                 /* Prevent layout shifts (no jumping!) */
    transition: all 0.2s ease;         /* Smooth animations */
}

/* 
Corp Logo - Our company logo styling
We want it to look crisp and not get squished!
*/
.corp-logo {
    height: 90px;                      /* Fixed height - looks good! */
    width: auto;                       /* Auto width keeps proportions */
    flex-shrink: 0;                    /* Don't let it get smaller */
    background-color: transparent;     /* No background color */
    display: block;                    /* Block display for better control */
    transition: all 0.2s ease;         /* Smooth animations */
}

.corp-name {
    font-family: var(--font-primary);
    font-size: 2rem;
    font-weight: 900;
    color: var(--primary-color);
    text-shadow: 0 0 10px rgba(0, 180, 216, 0.5);
    margin: 0;
}

.corp-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
    font-weight: 300;
}

/* Navigation */
.main-nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.main-nav a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    transition: all 0.2s ease; /* Smooth transitions */
    position: relative;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--primary-color);
    background: rgba(0, 180, 216, 0.1);
    box-shadow: 0 0 15px rgba(0, 180, 216, 0.3);
}

/* Main Content */
.main-content {
    min-height: calc(100vh - 200px);
    padding: 2rem 0;
    transition: all 0.2s ease; /* Smooth transitions */
}

/* Page Headers */
.page-header {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2rem 0;
}

.page-title {
    font-family: var(--font-primary);
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1rem;
    text-shadow: 0 0 20px rgba(0, 180, 216, 0.3);
}

.page-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    font-weight: 300;
}

/* Hero Section */
.hero-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 4rem;
    padding: 3rem 0;
}

.hero-content {
    z-index: 2;
}

.hero-title {
    font-family: var(--font-primary);
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--primary-color);
    margin-bottom: 1rem;
    text-shadow: 0 0 20px rgba(0, 180, 216, 0.5);
}

.hero-subtitle {
    font-size: 1.5rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
    font-weight: 600;
}

.hero-description {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.8;
}

.hero-image {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.hero-bg {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: var(--border-radius);
}

/* Warning Sections */
.warning-section {
    margin-bottom: 3rem;
}

.warning-box {
    padding: 1.5rem;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    border-left: 4px solid;
    box-shadow: var(--shadow);
}

.warning-box.critical {
    background: rgba(214, 40, 40, 0.1);
    border-left-color: var(--danger-color);
    border: 1px solid rgba(214, 40, 40, 0.3);
}

.warning-box.important {
    background: rgba(255, 107, 53, 0.1);
    border-left-color: var(--warning-color);
    border: 1px solid rgba(255, 107, 53, 0.3);
}

.warning-box h3 {
    color: var(--danger-color);
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.warning-box.important h3 {
    color: var(--warning-color);
}

.warning-text {
    font-weight: 700;
    color: var(--danger-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Content Sections */
.content-section {
    margin-bottom: 3rem;
}

.content-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.content-card:hover {
    box-shadow: var(--shadow-hover);
    border-color: var(--primary-color);
}

.content-card h2 {
    font-family: var(--font-primary);
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    text-shadow: 0 0 10px rgba(0, 180, 216, 0.3);
}

/* Steps and Lists */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.step-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 2rem;
    text-align: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.step-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-color: var(--primary-color);
}

.step-number {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto 1rem;
    box-shadow: 0 0 20px rgba(0, 180, 216, 0.3);
}

.step-card h3 {
    font-family: var(--font-primary);
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.step-card p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.step-link {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 0.8rem 2rem;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(0, 180, 216, 0.3);
}

.step-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 180, 216, 0.4);
}

/* Steps Container */
.steps-container {
    margin-top: 2rem;
}

.step-item {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(0, 180, 216, 0.05);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
}

.step-item .step-number {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
    font-size: 1.2rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 0 15px rgba(0, 180, 216, 0.3);
}

.step-content {
    flex: 1;
}

.step-content h3 {
    font-family: var(--font-primary);
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
}

.step-content p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.step-note {
    background: rgba(255, 214, 10, 0.1);
    border: 1px solid rgba(255, 214, 10, 0.3);
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-top: 1rem;
}

.step-note.warning {
    background: rgba(255, 107, 53, 0.1);
    border-color: rgba(255, 107, 53, 0.3);
}

.step-note.critical {
    background: rgba(214, 40, 40, 0.1);
    border-color: rgba(214, 40, 40, 0.3);
}

/* Quick Links */
.quick-links {
    margin-top: 4rem;
}

.links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.quick-link {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 2rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.quick-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
}

.quick-link:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-color: var(--primary-color);
}

.link-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.quick-link h3 {
    font-family: var(--font-primary);
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.quick-link p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* External Links */
.external-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.external-link:hover {
    color: var(--accent-color);
    text-shadow: 0 0 10px rgba(255, 214, 10, 0.5);
}

.link-box {
    background: rgba(0, 180, 216, 0.1);
    border: 1px solid rgba(0, 180, 216, 0.3);
    border-radius: var(--border-radius);
    padding: 1rem;
    text-align: center;
    margin: 1rem 0;
}

/* CTA Buttons */
.cta-button {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 1rem 2rem;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(0, 180, 216, 0.3);
    margin: 0.5rem;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 180, 216, 0.4);
}

.cta-button.secondary {
    background: linear-gradient(135deg, var(--accent-color), #ffb700);
    box-shadow: 0 4px 15px rgba(255, 214, 10, 0.3);
}

.cta-button.secondary:hover {
    box-shadow: 0 6px 20px rgba(255, 214, 10, 0.4);
}

/* Next Steps */
.next-steps {
    text-align: center;
    margin-top: 4rem;
    padding: 3rem 0;
    background: rgba(0, 180, 216, 0.05);
    border-radius: var(--border-radius);
    border: 1px solid rgba(0, 180, 216, 0.2);
}

.next-steps h2 {
    font-family: var(--font-primary);
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 2rem;
}

.next-buttons {
    margin-top: 2rem;
}

/* Specialized Components */
.requirement-list {
    margin-top: 2rem;
}

.requirement-item {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(0, 180, 216, 0.05);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
}

.requirement-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.requirement-content h3 {
    font-family: var(--font-primary);
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.requirement-note {
    color: var(--text-muted);
    font-style: italic;
    margin-top: 0.5rem;
}

/* Staging Areas */
.staging-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.staging-location {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 2rem;
    transition: var(--transition);
}

.staging-location.alliance {
    border-left: 4px solid var(--primary-color);
}

.staging-location.corp {
    border-left: 4px solid var(--accent-color);
}

.staging-location:hover {
    box-shadow: var(--shadow-hover);
    border-color: var(--primary-color);
}

.location-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.location-header h3 {
    font-family: var(--font-primary);
    color: var(--primary-color);
    font-size: 1.3rem;
}

.location-type {
    background: rgba(0, 180, 216, 0.2);
    color: var(--primary-color);
    padding: 0.3rem 0.8rem;
    border-radius: var(--border-radius);
    font-size: 0.8rem;
    font-weight: 600;
}

.staging-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--border-radius);
    margin-top: 1rem;
    box-shadow: var(--shadow);
}

/* Footer */
.main-footer {
    background: var(--darker-bg);
    border-top: 1px solid var(--border-color);
    padding: 2rem 0;
    text-align: center;
    margin-top: 4rem;
}

.main-footer p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .main-header .container {
        flex-direction: column;
        gap: 1rem;
    }
    
    .main-nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
    
    .hero-section {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .page-title {
        font-size: 2rem;
    }
    
    .steps-grid {
        grid-template-columns: 1fr;
    }
    
    .links-grid {
        grid-template-columns: 1fr;
    }
    
    .step-item {
        flex-direction: column;
        text-align: center;
    }
    
    .staging-grid {
        grid-template-columns: 1fr;
    }
    
    .next-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .page-title {
        font-size: 1.8rem;
    }
    
    .content-card {
        padding: 1.5rem;
    }
    
    .step-card {
        padding: 1.5rem;
    }
}

/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }

/* Animation Classes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Code styling */
code {
    background: rgba(0, 180, 216, 0.1);
    color: var(--primary-color);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

/* List styling */
ul, ol {
    margin-left: 2rem;
    margin-bottom: 1rem;
}

li {
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

/* Sub-steps */
.sub-steps {
    margin-top: 1rem;
    padding-left: 1rem;
    border-left: 2px solid var(--primary-color);
}

.sub-step {
    margin-bottom: 1rem;
}

.sub-step h4 {
    color: var(--accent-color);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

/* Info grids */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.info-item {
    background: rgba(0, 180, 216, 0.05);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
}

.info-item h3 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

/* Connection details */
.connection-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.detail-section {
    background: rgba(0, 180, 216, 0.05);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border: 1px solid rgba(0, 180, 216, 0.2);
}

.detail-section h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-family: var(--font-primary);
}

.settings-list {
    list-style: none;
    margin-left: 0;
}

.settings-list li {
    margin-bottom: 0.8rem;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

/* Video link */
.video-link {
    text-align: center;
    margin: 2rem 0;
}

.video-note {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* Asset management */
.asset-management {
    margin-top: 2rem;
}

.asset-step {
    background: rgba(0, 180, 216, 0.05);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    border-left: 4px solid var(--primary-color);
}

.asset-step h3 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-family: var(--font-primary);
}

/* Discord info */
.discord-info {
    text-align: center;
}

/* Access method notes */
.access-note {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-style: italic;
    margin-top: 0.5rem;
}

/* Discord settings */
.discord-settings {
    text-align: center;
}

.discord-settings h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-family: var(--font-primary);
}

.settings-note {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 1rem;
}

/* Reference image styling */
.reference-image {
    margin-top: 1rem;
    text-align: center;
}

.setup-guide-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.setup-guide-image:hover {
    box-shadow: var(--shadow-hover);
    transform: scale(1.02);
}

/* Buyback specific styles */
.program-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.overview-item {
    text-align: center;
    padding: 1.5rem;
    background: rgba(0, 180, 216, 0.05);
    border-radius: var(--border-radius);
    border: 1px solid rgba(0, 180, 216, 0.2);
}

.overview-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.overview-item h3 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-family: var(--font-primary);
}

.access-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.access-method {
    background: rgba(0, 180, 216, 0.05);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border: 1px solid rgba(0, 180, 216, 0.2);
    text-align: center;
}

.access-method h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-family: var(--font-primary);
}

.buying-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.buying-category {
    background: rgba(0, 180, 216, 0.05);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
}

.buying-category h3 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-family: var(--font-primary);
}

.note-box {
    background: rgba(255, 214, 10, 0.1);
    border: 1px solid rgba(255, 214, 10, 0.3);
    border-radius: var(--border-radius);
    padding: 1rem;
    margin: 1rem 0;
}

.selling-locations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.location-item {
    background: rgba(0, 180, 216, 0.05);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
}

.location-item h3 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-family: var(--font-primary);
}

.selling-steps {
    margin: 2rem 0;
}

.selling-step {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(0, 180, 216, 0.05);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
}

.selling-step .step-number {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.selling-step .step-content {
    flex: 1;
}

.selling-step h3 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-family: var(--font-primary);
}

.success-message {
    background: rgba(6, 214, 160, 0.1);
    border: 1px solid rgba(6, 214, 160, 0.3);
    border-radius: var(--border-radius);
    padding: 1rem;
    margin: 2rem 0;
    text-align: center;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.benefit-item {
    background: rgba(0, 180, 216, 0.05);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border: 1px solid rgba(0, 180, 216, 0.2);
    text-align: center;
}

.benefit-item h3 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-family: var(--font-primary);
}

/* Staging specific styles */
.locations-list {
    margin: 2rem 0;
}

.location-item {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(0, 180, 216, 0.05);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
}

.location-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.location-content h3 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-family: var(--font-primary);
}

.location-note {
    color: var(--text-muted);
    font-style: italic;
    margin-top: 0.5rem;
}

.location-note.critical {
    color: var(--danger-color);
    font-weight: 600;
}

.buyback-locations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.buyback-location {
    background: rgba(0, 180, 216, 0.05);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--accent-color);
}

.buyback-location h3 {
    color: var(--accent-color);
    margin-bottom: 0.5rem;
    font-family: var(--font-primary);
}

.system-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.system-card {
    background: rgba(0, 180, 216, 0.05);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border: 1px solid rgba(0, 180, 216, 0.2);
}

.system-card h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-family: var(--font-primary);
}

.system-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.info-item {
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    font-size: 0.9rem;
}

.travel-tips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.tip-item {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(0, 180, 216, 0.05);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
}

.tip-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.tip-content h3 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-family: var(--font-primary);
    font-size: 1.1rem;
}

/* Extras page specific styles */
.srp-intro {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(0, 180, 216, 0.05);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
}

.srp-programs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.srp-program {
    background: rgba(0, 180, 216, 0.05);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border: 1px solid rgba(0, 180, 216, 0.2);
    text-align: center;
}

.srp-program h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-family: var(--font-primary);
}

.srp-login {
    margin: 2rem 0;
}

.login-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.login-step {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(0, 180, 216, 0.05);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
}

.login-step .step-number {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.login-step h4 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-family: var(--font-primary);
}

.claiming-steps {
    margin: 2rem 0;
}

.claiming-step {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(0, 180, 216, 0.05);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
}

.claiming-step .step-number {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.claiming-step h3 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-family: var(--font-primary);
}

.srp-example {
    margin: 2rem 0;
    text-align: center;
}

.example-image {
    margin-top: 1rem;
}

.srp-claim-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.srp-claim-image:hover {
    box-shadow: var(--shadow-hover);
    transform: scale(1.02);
}

.sigs-intro {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(255, 214, 10, 0.05);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--accent-color);
}

.sigs-access {
    margin: 2rem 0;
}

.sigs-info {
    text-align: center;
}

.sigs-note {
    background: rgba(255, 214, 10, 0.1);
    border: 1px solid rgba(255, 214, 10, 0.3);
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-top: 1rem;
}

.activity-encouragement {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.activity-message {
    background: rgba(6, 214, 160, 0.05);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--success-color);
}

.activity-message h3 {
    color: var(--success-color);
    margin-bottom: 1rem;
    font-family: var(--font-primary);
}

.activity-tips {
    background: rgba(0, 180, 216, 0.05);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
}

.activity-tips h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-family: var(--font-primary);
}

.activity-tips ul {
    margin-left: 1.5rem;
}

.activity-tips li {
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

/* PAP Requirements */
.pap-requirements {
    margin: 2rem 0;
    padding: 2rem;
    background: rgba(255, 107, 53, 0.05);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--warning-color);
}

.pap-requirements h3 {
    color: var(--warning-color);
    margin-bottom: 1.5rem;
    font-family: var(--font-primary);
    font-size: 1.5rem;
}

.pap-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.pap-requirement {
    background: rgba(0, 180, 216, 0.05);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border: 1px solid rgba(0, 180, 216, 0.2);
}

.pap-requirement h4 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-family: var(--font-primary);
}

.pap-tracking {
    background: rgba(0, 180, 216, 0.05);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border: 1px solid rgba(0, 180, 216, 0.2);
    text-align: center;
}

.pap-tracking h4 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-family: var(--font-primary);
}

.pap-warning {
    background: rgba(214, 40, 40, 0.05);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border: 1px solid rgba(214, 40, 40, 0.2);
}

.pap-warning h4 {
    color: var(--danger-color);
    margin-bottom: 1rem;
    font-family: var(--font-primary);
}

.pap-warning p {
    color: var(--text-primary);
    font-weight: 500;
}

/* Essential EVE Tools */
.tools-intro {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(0, 180, 216, 0.05);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.tool-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 2rem;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.tool-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
}

.tool-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-color: var(--primary-color);
}

.tool-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.tool-header h3 {
    color: var(--primary-color);
    font-family: var(--font-primary);
    font-size: 1.3rem;
    margin: 0;
}

.tool-type {
    background: rgba(0, 180, 216, 0.2);
    color: var(--primary-color);
    padding: 0.3rem 0.8rem;
    border-radius: var(--border-radius);
    font-size: 0.8rem;
    font-weight: 600;
}

.tool-content p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.tool-features {
    margin: 1.5rem 0;
}

.tool-features ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tool-features li {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
}

.tool-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--success-color);
    font-weight: bold;
}

.tool-link {
    margin-top: 1.5rem;
    text-align: center;
}

.tool-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
    justify-content: center;
}

.tool-links .external-link {
    background: rgba(0, 180, 216, 0.1);
    border: 1px solid rgba(0, 180, 216, 0.3);
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 600;
    transition: var(--transition);
}

.tool-links .external-link:hover {
    background: rgba(0, 180, 216, 0.2);
    transform: translateY(-2px);
}

.tool-note {
    background: rgba(255, 214, 10, 0.1);
    border: 1px solid rgba(255, 214, 10, 0.3);
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-top: 1.5rem;
}

.tool-note p {
    color: var(--text-primary);
    margin: 0;
    font-size: 0.9rem;
}

/* Page Layout */
.page-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2rem;
    align-items: start;
}

/* Vertical Sidebar Navigation */
.sidebar-nav {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    position: sticky;
    top: 120px;
    z-index: 10;
    height: fit-content;
}

.sidebar-nav h3 {
    color: var(--primary-color);
    font-family: var(--font-primary);
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 1.2rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
}

.sidebar-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: rgba(0, 180, 216, 0.05);
    color: var(--text-secondary);
    text-decoration: none;
    padding: 1rem;
    border-radius: var(--border-radius);
    border: 1px solid transparent;
    font-weight: 500;
    transition: var(--transition);
    font-size: 0.9rem;
}

.sidebar-link:hover {
    background: rgba(0, 180, 216, 0.15);
    border-color: rgba(0, 180, 216, 0.3);
    color: var(--primary-color);
    transform: translateX(5px);
}

.sidebar-link:active {
    transform: translateX(0);
}

.link-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.link-text {
    flex: 1;
}

/* Main Content Area */
.main-content-area {
    min-width: 0; /* Prevents grid overflow */
}

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Section spacing for better navigation */
.content-card {
    scroll-margin-top: 150px;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .page-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .sidebar-nav {
        position: static;
        order: 2;
        margin-top: 2rem;
    }
    
    .main-content-area {
        order: 1;
    }
    
    .sidebar-links {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .sidebar-link {
        flex: 1;
        min-width: 120px;
        justify-content: center;
        padding: 0.8rem 0.5rem;
    }
    
    .link-text {
        display: none;
    }
    
    .link-icon {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .sidebar-links {
        flex-direction: column;
    }
    
    .sidebar-link {
        flex: none;
        min-width: auto;
        justify-content: flex-start;
    }
    
    .link-text {
        display: block;
    }
    
    .link-icon {
        font-size: 1.2rem;
    }
}