/* ==============================================================================
   About Page Styles (about.css)
   ==============================================================================
   Purpose: Page-specific styles for the about page that complement the global
   UI enhancements in style.css

   This file works in conjunction with style.css to ensure consistent button,
   form, and navigation styling across the about page.

   Chunk 43: UI Polish series
   ============================================================================== */

/* ==============================================================================
   About Hero Section
   ============================================================================== */

.about-hero {
    padding: 80px 0 60px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    position: relative;
    overflow: hidden;
}

/* Breadcrumb Navigation - Works with global link styles */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
    font-size: 14px;
}

.breadcrumb-link {
    /* Inherits from global link styles in style.css */
    /* font-size: 16px, color: #2c3e50, underline on hover */
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.breadcrumb-link:hover {
    opacity: 1;
}

.breadcrumb-separator {
    color: #7f8c8d;
    user-select: none;
}

.breadcrumb-current {
    color: #2c3e50;
    font-weight: 600;
}

/* ==============================================================================
   Story Section
   ============================================================================== */

.story-section {
    padding: 80px 0;
    background-color: #ffffff;
}

.story-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.lead-paragraph {
    font-size: 1.25rem;
    line-height: 1.8;
    color: #34495e;
    margin-bottom: 30px;
}

.story-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 40px;
}

/* Buttons inherit styles from style.css */
/* Ensure proper spacing for button group */
.story-actions .btn {
    min-width: 150px;
}

/* ==============================================================================
   Values Section
   ============================================================================== */

.values-section {
    padding: 80px 0;
    background-color: #f8f9fa;
}

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

.value-card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.value-card:hover,
.value-card:focus {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    outline: 2px solid #3498db;
    outline-offset: 2px;
}

.value-icon {
    font-size: 48px;
    margin-bottom: 20px;
    display: block;
}

.value-title {
    font-size: 1.25rem;
    color: #2c3e50;
    margin-bottom: 15px;
}

.value-description {
    color: #7f8c8d;
    line-height: 1.6;
}

/* ==============================================================================
   Team Section
   ============================================================================== */

.team-section {
    padding: 80px 0;
    background-color: #ffffff;
}

/* Team navigation tabs - Enhanced link styles */
.team-nav {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 40px 0;
    padding-bottom: 20px;
    border-bottom: 2px solid #ecf0f1;
}

.team-nav-link {
    /* Inherits base styles from style.css */
    padding: 10px 20px;
    border-radius: 25px;
    transition: all 0.3s ease;
    position: relative;
}

.team-nav-link:hover {
    /* Override to remove underline for tab-style navigation */
    text-decoration: none !important;
    background-color: #f8f9fa;
}

.team-nav-link.active {
    background-color: #3498db;
    color: #ffffff !important;
    text-decoration: none !important;
}

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

/* ==============================================================================
   Contact Form Section
   ============================================================================== */

.contact-section {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    margin-top: 50px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* Contact form styling - Works with global form styles */
.contact-form {
    background: #ffffff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8px;
}

/* Form inputs inherit styles from style.css */
/* Additional styling for consistency */
.form-control {
    width: 100%;
    font-size: 16px;
}

.invalid-feedback {
    color: #e74c3c;
    font-size: 14px;
    margin-top: 5px;
    display: none;
}

.form-control.is-invalid ~ .invalid-feedback {
    display: block;
}

.form-actions {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.form-message {
    margin-top: 20px;
    padding: 15px;
    border-radius: 5px;
    display: none;
}

.form-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    display: block;
}

.form-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    display: block;
}

/* Contact Information Sidebar */
.contact-info {
    padding: 40px;
}

.info-title {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 30px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 30px;
}

.info-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.info-label {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
}

.info-text {
    color: #7f8c8d;
    margin: 0;
}

/* Social links - Enhanced navigation */
.social-links {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #ecf0f1;
}

.social-title {
    font-size: 18px;
    color: #2c3e50;
    margin-bottom: 15px;
}

.social-nav {
    display: flex;
    gap: 20px;
}

.social-link {
    /* Inherits from global link styles */
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ==============================================================================
   UI Demo Section
   ============================================================================== */

.ui-demo-section {
    padding: 80px 0;
    background-color: #ffffff;
    border-top: 1px solid #ecf0f1;
}

.demo-group {
    margin-bottom: 50px;
}

.demo-title {
    font-size: 1.25rem;
    color: #2c3e50;
    margin-bottom: 20px;
}

.button-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.input-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.link-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
}

.example-link {
    /* Inherits all link styles from style.css */
    display: inline-block;
}

/* ==============================================================================
   Newsletter Section (for home page)
   ============================================================================== */

.newsletter-section {
    padding: 60px 0;
    background-color: #2c3e50;
    color: #ffffff;
}

.newsletter-content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.newsletter-title {
    color: #ffffff;
    margin-bottom: 15px;
}

.newsletter-subtitle {
    color: #ecf0f1;
    margin-bottom: 30px;
}

.newsletter-form .form-row {
    display: flex;
    gap: 15px;
    max-width: 500px;
    margin: 0 auto;
}

.newsletter-form .form-group {
    flex: 1;
    margin-bottom: 0;
}

.newsletter-note {
    margin-top: 15px;
    color: #bdc3c7;
}

/* ==============================================================================
   Quick Links Section (for home page)
   ============================================================================== */

.quick-links-section {
    padding: 60px 0;
    background-color: #34495e;
}

.quick-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.quick-links-title {
    color: #ecf0f1;
    font-size: 18px;
    margin-bottom: 20px;
}

.quick-links-nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quick-link {
    /* Inherits from global link styles but with light color for dark background */
    color: #bdc3c7 !important;
    font-size: 14px !important;
}

.quick-link:hover {
    color: #ffffff !important;
}

/* ==============================================================================
   Responsive Design
   ============================================================================== */

@media (max-width: 768px) {
    .story-actions {
        flex-direction: column;
        align-items: center;
    }

    .story-actions .btn {
        width: 100%;
        max-width: 300px;
    }

    .team-nav {
        flex-wrap: wrap;
        gap: 15px;
    }

    .contact-wrapper {
        grid-template-columns: 1fr;
    }

    .contact-info {
        padding: 40px;
        background-color: #ffffff;
        border-radius: 10px;
    }

    .newsletter-form .form-row {
        flex-direction: column;
    }

    .quick-links {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (max-width: 480px) {
    .values-grid {
        grid-template-columns: 1fr;
    }

    .button-grid {
        flex-direction: column;
    }

    .button-grid .btn {
        width: 100%;
    }

    .quick-links {
        grid-template-columns: 1fr;
    }
}

/* ==============================================================================
   Animation Classes
   ============================================================================== */

[data-animate] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate].animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* ==============================================================================
   Accessibility Enhancements
   ============================================================================== */

/* Skip link for keyboard navigation */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #3498db;
    color: #ffffff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 0 0 5px 0;
}

.skip-link:focus {
    top: 0;
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus visible for better keyboard navigation */
*:focus-visible {
    outline: 2px solid #3498db;
    outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==============================================================================
   End of About Page Styles
   ============================================================================== */