/* =============================================================================
   SHARED COMPONENTS STYLES
   
   This file contains CSS for components that are reused across multiple pages:
   - Service cards (used in home, services, career pages)
   - Filter sidebar (used in case studies and resources pages)
   - Post cards (used in blog and case studies)
   - Category tags (used throughout the site)
   - Testimonial cards (used in testimonials and home pages)
   - Form components (used across multiple forms)
   - Main content container overrides
   
   For page-specific styles, see static/css/pages/*.css files
   ============================================================================= */

/* Service Cards */
.service-card {
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    border: none;
    background-color: var(--white-color);
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.service-card .card-img-top {
    height: 200px;
    object-fit: cover;
}

.service-card .card-icon {
    font-size: 2.5rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
    transition: var(--transition-normal);
}

.service-card:hover .card-icon {
    transform: scale(1.2);
}

.service-card .card-title {
    color: var(--primary-color);
    font-weight: 600;
}



/* Case Studies Page AND Resources List Page */
.filter-sidebar {
    background-color: var(--white-color);
    border-radius: 0.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    position: sticky;
    top: 120px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    animation: filterSlideIn 0.6s ease-out;
}

.filter-group {
    margin-bottom: 1.5rem;
}

.filter-group-title {
    color: var(--dark-color);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    justify-content: between;
    align-items: center;
    padding: 0.5rem 0;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    transition: color 0.3s ease;
}

.filter-group-title:hover {
    color: var(--primary-color);
}

.filter-group-title .toggle-icon {
    margin-left: auto;
    transition: transform 0.3s ease;
}

.filter-group-title[aria-expanded="false"] .toggle-icon {
    transform: rotate(-90deg);
}

.active-filters-display {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--light-color);
}

.active-filters-display h6 {
    color: var(--dark-color);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.case-study-item {
    animation: cardFadeIn 0.5s ease-out;
}

.filter-btn.active {
    animation: pulseGlow 2s ease-in-out;
}

/* Hover effects */
.filter-btn:not(.active):hover {
    transform: translateX(5px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}


/* Badge animations for active filters */
.badge {
    animation: slideInDown 0.3s ease-out;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced button hover effects now use standard card component */

/* Mobile responsiveness */
@media (max-width: 768px) {
    .filter-sidebar {
        position: relative;
        top: auto;
        max-height: none;
        margin-bottom: 2rem;
    }
    
    /* View options removed */
    
    .results-summary {
        text-align: center;
    }
    
    .filter-options {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    
    .filter-option .filter-btn {
        font-size: 0.8rem;
        padding: 0.375rem 0.5rem;
    }
}

/* Blog Page */
.blog-hero {
    background: linear-gradient(rgba(30, 58, 138, 0.9), rgba(139, 92, 246, 0.8)), url('../images/blog-bg.jpg');
    background-size: cover;
    background-position: center;
    padding: 100px 0;
    color: var(--white-color);
}


/* =============================================================================
   POST-CARD & POST-LIST-CARD - SHARED ACROSS MULTIPLE FILES
   
   Currently Used In:
   1. templates/case_studies/case_study_list.html (uses post-card wrapper + post-list-card)
   2. templates/social_media/post_list_section.html (uses post-card wrapper + post-list-card)
   3. templates/social_media/social_media.html (uses post-card wrapper, JS filtering)
   
   Analysis:
   - .post-card is a WRAPPER class for filtering/animation purposes
   - .post-list-card contains the actual styling
   - Both case studies and blog posts share identical card styling needs
   - Used by JavaScript for filtering functionality
   
   RECOMMENDATION: KEEP AS IS - This is a proper shared component
   Reasons:
   1. Truly shared across different content types (case studies, blog posts)
   2. Consistent card design creates visual harmony
   3. JavaScript depends on .post-card for filtering
   4. No page-specific variations exist - all pages use identical styling
   5. Separation of concerns: .post-card (behavior) vs .post-list-card (presentation)
   
   Future Consideration: Could move to a shared-components.css file when created
   ============================================================================= */
.post-card {
    margin-bottom: 2rem;
}

.post-card .post-list-card {
    border: 1px solid #e9ecef;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    background: white;
}

.post-card .post-list-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color);
}

.post-card .post-list-card .card-img-top {
    height: 250px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.post-card .post-list-card:hover .card-img-top {
    transform: scale(1.05);
}

.post-card .card-body {
    padding: 1.5rem;
    border-radius: 0.375rem;
    background: white;
}

.post-card .card-title {
    color: var(--dark-color);
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    line-height: 1.4;
}

.post-card .card-title:hover {
    color: var(--primary-color);
}

.post-card .card-text {
    color: var(--gray-color);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.post-card .post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.post-card .btn {
    transition: all 0.3s ease;
}

.post-card .post-list-card:hover .btn-outline-primary {
    background-color: var(--primary-color);
    color: white;
    transform: translateX(2px);
}

/* =============================================================================
   CATEGORY-TAG - SHARED UI COMPONENT ACROSS MULTIPLE CONTEXTS
   
   Currently Used In:
   1. templates/components/card.html (category display in cards)
   2. templates/components/tag.html (reusable tag component)
   3. templates/social_media/post_detail.html (post category tags)
   4. templates/social_media/social_media.html (post category links, inline CSS override)
   
   Analysis:
   - Used as a generic tag/badge component across the entire site
   - Appears in reusable components (card.html, tag.html)
   - Provides consistent visual language for categorization
   - Has inline CSS override in social_media.html (lines 243-260) for grid layout
   
   RECOMMENDATION: KEEP AS IS - This is a design system component
   Reasons:
   1. Part of the site's design system (like buttons, badges)
   2. Used in reusable components (card.html, tag.html)
   3. Provides visual consistency across all content types
   4. Generic enough to be truly reusable
   5. Name accurately describes purpose (tags for categories)
   
   Note: There's an inline CSS override in social_media.html that adds grid layout.
   This should eventually be refactored into the component's CSS.
   
   Future Action: Move to shared-components.css when created
   ============================================================================= */
.category-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: var(--light-color);
    color: var(--primary-color);
    border-radius: 50px;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
}

.category-tag:hover {
    background-color: var(--primary-color);
    color: white;
    text-decoration: none;
}

.form-label {
    font-weight: 500;
    color: var(--text-color);
}


/* Testimonials Page */
.testimonial-card {
    border-radius: 0.5rem;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    background-color: var(--white-color);
    border-top: 4px solid var(--secondary-color);
}

.testimonial-card .rating {
    color: var(--warning-color);
    margin-bottom: 1rem;
}

.testimonial-card .client-info {
    display: flex;
    align-items: center;
    margin-top: 1.5rem;
}

.testimonial-card .client-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 1rem;
}


/* =============================================================================
   MAIN CONTENT CONTAINER STYLES (OVERRIDE BOOTSTRAP CONTAINERS)
   These styles must load LAST to override Bootstrap's container behavior
   ============================================================================= */

/* Main Content Container Styles - Override Bootstrap containers inside main-content */
.main-content {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Override Bootstrap containers inside main-content */
.main-content .container,
.main-content .container-fluid {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Exclude hero section from main-content constraints */
.main-content .hero {
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding-left: calc(50vw - 50%) !important;
    padding-right: calc(50vw - 50%) !important;
}

/* Responsive container for main content */
@media (min-width: 576px) {
    .main-content {
        max-width: 540px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media (min-width: 768px) {
    .main-content {
        max-width: 720px !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}

@media (min-width: 992px) {
    .main-content {
        max-width: 960px !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

@media (min-width: 1200px) {
    .main-content {
        max-width: 1140px !important;
        padding-left: 50px !important;
        padding-right: 50px !important;
    }
}

@media (min-width: 1400px) {
    .main-content {
        max-width: 1320px !important;
        padding-left: 60px !important;
        padding-right: 60px !important;
    }
}

/* Ensure CTA sections and other full-width sections still work */
.main-content section.bg-gradient-primary-to-secondary,
.main-content section.cta-section,
.main-content section[class*="bg-"] {
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding-left: calc(50vw - 50%) !important;
    padding-right: calc(50vw - 50%) !important;
}

/* =============================================================================
   NAVBAR ACTIONS CONTAINER
   Flexible container that adapts to zoom levels
   ============================================================================= */
.navbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 1;
    min-width: 0;
}

/* =============================================================================
   NAVBAR COMPACT BUTTON
   Uses relative units for zoom compatibility
   ============================================================================= */
.navbar-actions .btn-compact {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 991.98px) {
    .navbar-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.5rem;
    }
    
    .navbar-actions .btn-compact {
        width: 100%;
    }
}

/* =============================================================================
   SEARCH WIDGET (NAVBAR)
   Dynamic sizing with rem units for better zoom compatibility
   Uses flex-basis instead of fixed width for flexibility
   ============================================================================= */
.search-widget {
    flex-shrink: 1;
    min-width: 0;
    margin-left: 0.5rem;
}

.search-widget .input-group {
    flex-wrap: nowrap;
}

.search-widget .search-input {
    flex-basis: 8rem;
    min-width: 5rem;
    max-width: 8rem;
    width: auto;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    transition: all 0.3s ease;
    font-size: 0.875rem;
}

.search-widget .search-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

.search-widget .search-input:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
    flex-basis: 12rem;
}

.search-widget .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.3);
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.search-widget .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Adjust proportions at different viewport breakpoints */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .search-widget .search-input {
        flex-basis: 8rem;
        min-width: 7rem;
    }
    
    .search-widget .search-input:focus {
        flex-basis: 10rem;
    }
}

@media (min-width: 1200px) {
    .search-widget .search-input {
        flex-basis: 12rem;
        min-width: 10rem;
    }
    
    .search-widget .search-input:focus {
        flex-basis: 14rem;
    }
}

/* Mobile responsiveness */
@media (max-width: 991.98px) {
    .search-widget {
        width: 100%;
        margin: 1rem 0 0 0;
    }
    
    .search-widget .search-input {
        min-width: 100%;
        max-width: 100%;
        flex-basis: 100%;
        width: 100%;
    }
    
    .search-widget .search-input:focus {
        flex-basis: 100%;
        width: 100%;
    }
}