/**
 * CONTENT UNIFIED CSS - BEM ARCHITECTURE
 * 
 * Consolidates:
 * - content-sections.css (MAKS content styling)
 * - content-structure-fix.css (Services section structure fixes)
 * 
 * @package RentAssistenz
 * @version 1.0.0 - CSS Consolidation
 * @priority 40 (loads with content sections)
 */

/* =============================================================================
   CSS CUSTOM PROPERTIES - CONTENT DESIGN SYSTEM
   ============================================================================= */

:root {
    /* Content colors */
    --content-bg-primary: #f8f9fa;
    --content-bg-secondary: #ffffff;
    --content-bg-gradient: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    --content-bg-maks: linear-gradient(135deg, #f8f9fa, #e9ecef);
    --content-border: #007cba;
    --content-text-primary: #053068;
    --content-text-secondary: #666666;
    --content-accent: #007cba;
    
    /* Content spacing */
    --content-section-padding: 80px 0;
    --content-container-padding: 25px;
    --content-title-spacing: 1.5rem;
    --content-element-spacing: 60px;
    
    /* Content typography */
    --content-title-size: 2.5rem;
    --content-subtitle-size: 1.4rem;
    --content-text-size: 1.2rem;
    --content-title-weight: 600;
    
    /* Content effects */
    --content-border-radius: 15px;
    --content-border-width: 5px;
    --content-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* =============================================================================
   SERVICES SECTION - BEM ARCHITECTURE
   ============================================================================= */

/* === Services Section Block === */
.services-section,
#services {
    padding: var(--content-section-padding);
    background: var(--content-bg-gradient);
    position: relative;
    overflow: hidden;
}

/* === Services Header === */
.services-section__header,
#services .section-head {
    text-align: center;
    margin-bottom: var(--content-element-spacing);
    position: relative;
}

.services-section__title,
#services .section-head h2 {
    font-size: var(--content-title-size);
    color: var(--content-text-primary);
    margin-bottom: 20px;
    font-weight: var(--content-title-weight);
    line-height: 1.3;
}

.services-section__description,
#services .section-head p {
    font-size: var(--content-text-size);
    color: var(--content-text-secondary);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* === Services Content === */
.services-section__content,
#services .services-content {
    position: relative;
    z-index: 2;
}

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

.services-section__item,
#services .service-item {
    background: var(--content-bg-secondary);
    padding: 2rem;
    border-radius: var(--content-border-radius);
    box-shadow: var(--content-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-left: var(--content-border-width) solid var(--content-border);
}

.services-section__item:hover,
#services .service-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.services-section__item-icon,
#services .service-item .icon {
    width: 60px;
    height: 60px;
    background: var(--content-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: white;
    font-size: 24px;
}

.services-section__item-title,
#services .service-item h3 {
    font-size: 1.5rem;
    color: var(--content-text-primary);
    margin-bottom: 1rem;
    font-weight: var(--content-title-weight);
}

.services-section__item-text,
#services .service-item p {
    color: var(--content-text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.services-section__item-link,
#services .service-item .read-more {
    color: var(--content-accent);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.services-section__item-link:hover,
#services .service-item .read-more:hover {
    color: var(--content-text-primary);
    text-decoration: underline;
}

/* =============================================================================
   MAKS CONTENT SECTION - BEM ARCHITECTURE
   ============================================================================= */

/* === MAKS Content Block === */
.maks-content {
    padding: 20px 0;
    position: relative;
}

/* === MAKS Intro Section === */
.maks-intro {
    background: var(--content-bg-maks);
    padding: var(--content-container-padding);
    border-radius: var(--content-border-radius);
    border-left: var(--content-border-width) solid var(--content-border);
    margin-bottom: 2rem;
    position: relative;
}

.maks-intro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--content-border);
    border-radius: var(--content-border-radius) var(--content-border-radius) 0 0;
}

/* === MAKS Section Titles === */
.maks-section-title {
    color: var(--content-text-primary);
    font-weight: var(--content-title-weight);
    font-size: var(--content-subtitle-size);
    margin-bottom: var(--content-title-spacing);
    position: relative;
    padding-bottom: 0.5rem;
}

.maks-section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--content-border);
    border-radius: 2px;
}

/* === MAKS Text Content === */
.maks-text {
    color: var(--content-text-secondary);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

.maks-text strong {
    color: var(--content-text-primary);
    font-weight: 600;
}

/* === MAKS Lists === */
.maks-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.maks-list li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
    color: var(--content-text-secondary);
    line-height: 1.6;
}

.maks-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--content-accent);
    font-weight: 700;
    font-size: 1.2rem;
}

/* === MAKS Highlight Boxes === */
.maks-highlight {
    background: linear-gradient(135deg, rgba(0, 124, 186, 0.1), rgba(5, 48, 104, 0.05));
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(0, 124, 186, 0.2);
    margin: 2rem 0;
    position: relative;
}

.maks-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--content-accent);
    border-radius: 2px 0 0 2px;
}

.maks-highlight-title {
    color: var(--content-text-primary);
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    padding-left: 1rem;
}

.maks-highlight-text {
    color: var(--content-text-secondary);
    line-height: 1.6;
    padding-left: 1rem;
}

/* =============================================================================
   CONTENT STRUCTURE FIXES
   ============================================================================= */

/* Ensure proper content flow */
.content-section {
    position: relative;
    z-index: 1;
}

.content-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.content-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
}

.content-col {
    flex: 1;
    min-width: 300px;
}

.content-col--full {
    flex-basis: 100%;
}

.content-col--half {
    flex-basis: calc(50% - 1rem);
}

.content-col--third {
    flex-basis: calc(33.333% - 1.333rem);
}

/* =============================================================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ============================================================================= */

@media (max-width: 768px) {
    .services-section,
    #services {
        padding: 60px 0;
    }
    
    .services-section__title,
    #services .section-head h2 {
        font-size: 2rem;
        margin-bottom: 15px;
    }
    
    .services-section__description,
    #services .section-head p {
        font-size: 1.1rem;
        padding: 0 1rem;
    }
    
    .services-section__grid,
    #services .services-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 1rem;
    }
    
    .services-section__item,
    #services .service-item {
        padding: 1.5rem;
    }
    
    .maks-intro {
        padding: 20px;
        margin: 0 1rem 2rem 1rem;
    }
    
    .maks-section-title {
        font-size: 1.25rem;
    }
    
    .maks-text {
        font-size: 1rem;
    }
    
    .maks-highlight {
        margin: 1.5rem 1rem;
        padding: 1.25rem;
    }
    
    .content-row {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .content-col,
    .content-col--half,
    .content-col--third {
        flex-basis: 100%;
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .services-section,
    #services {
        padding: 40px 0;
    }
    
    .services-section__title,
    #services .section-head h2 {
        font-size: 1.75rem;
    }
    
    .services-section__description,
    #services .section-head p {
        font-size: 1rem;
    }
    
    .services-section__element-spacing,
    #services .section-head {
        margin-bottom: 40px;
    }
    
    .services-section__item,
    #services .service-item {
        padding: 1.25rem;
    }
    
    .services-section__item-icon,
    #services .service-item .icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
        margin-bottom: 1rem;
    }
    
    .services-section__item-title,
    #services .service-item h3 {
        font-size: 1.25rem;
    }
    
    .maks-intro {
        padding: 15px;
        margin: 0 0.5rem 1.5rem 0.5rem;
    }
    
    .maks-section-title {
        font-size: 1.125rem;
    }
    
    .maks-highlight {
        margin: 1rem 0.5rem;
        padding: 1rem;
    }
    
    .maks-highlight-title {
        font-size: 1.125rem;
    }
    
    .content-container {
        padding: 0 0.5rem;
    }
}

/* =============================================================================
   ACCESSIBILITY - WCAG 2.1 AA COMPLIANCE
   ============================================================================= */

/* Focus indicators for keyboard navigation */
.services-section__item-link:focus,
#services .service-item .read-more:focus {
    outline: 3px solid rgba(0, 124, 186, 0.8);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .services-section,
    #services,
    .maks-intro {
        background: #ffffff;
        border: 2px solid #000000;
    }
    
    .services-section__item,
    #services .service-item,
    .maks-highlight {
        background: #ffffff;
        border: 2px solid #000000;
        box-shadow: none;
    }
    
    .services-section__item-icon,
    #services .service-item .icon {
        background: #000000;
        color: #ffffff;
    }
    
    .services-section__title,
    .services-section__item-title,
    .maks-section-title,
    #services .section-head h2,
    #services .service-item h3 {
        color: #000000;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .services-section__item,
    #services .service-item,
    .services-section__item-link,
    #services .service-item .read-more {
        transition: none;
    }
    
    .services-section__item:hover,
    #services .service-item:hover {
        transform: none;
    }
}

/* =============================================================================
   PRINT STYLES
   ============================================================================= */

@media print {
    .services-section,
    #services {
        background: white;
        box-shadow: none;
        padding: 2rem 0;
    }
    
    .services-section__item,
    #services .service-item {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #cccccc;
        margin-bottom: 1rem;
    }
    
    .maks-intro,
    .maks-highlight {
        background: white;
        border: 1px solid #cccccc;
        break-inside: avoid;
    }
    
    .services-section__item-link,
    #services .service-item .read-more {
        color: #000000;
        text-decoration: underline;
    }
}