/**
 * Global Section Header Component
 * Einheitliches Styling für alle Widget Section Titles
 * 
 * Verwendung:
 * - Automatisch durch trait-section-title-render.php
 * - Classes: .section-header, .section-header__eyebrow, etc.
 * 
 * @version 1.0.0
 */

.section-header {
    position: relative;
    max-width: 900px;
    margin: 0 auto var(--spacing-10, 3.5rem) auto;
    padding: 0 var(--spacing-4, 1.5rem);
    text-align: center; /* Default: zentriert */
}

/* Left Alignment */
.section-header[style*="text-align: left"],
.section-header[style*="text-align:left"] {
    margin-left: 0;
    margin-right: auto;
}

/* Right Alignment */
.section-header[style*="text-align: right"],
.section-header[style*="text-align:right"] {
    margin-left: auto;
    margin-right: 0;
}

/* Decorator Icon (Cookie-Style) */
.section-header__decorator {
    position: absolute;
    z-index: 1;
    font-size: 3.5rem;
    color: var(--color-accent-beige, #fef3c7);
    opacity: 0.6;
    pointer-events: none;
    animation: float 6s ease-in-out infinite;
}

.section-header__decorator--left {
    top: -20px;
    left: -40px;
}

.section-header__decorator--right {
    top: -20px;
    right: -40px;
}

.section-header__decorator i,
.section-header__decorator svg {
    width: 1em;
    height: 1em;
    display: block;
}

/* Content Container */
.section-header__content {
    position: relative;
    z-index: 2;
}

/* Eyebrow (klein über Titel) */
.section-header__eyebrow {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-secondary, #a7d8de);
    margin-bottom: var(--spacing-2, 0.5rem);
}

/* Title */
.section-header__title {
    font-family: var(--font-family-heading, 'Baloo 2', sans-serif);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    color: var(--color-primary, #4a1540);
    margin: 0 0 var(--spacing-4, 1.5rem) 0;
    line-height: 1.2;
}

/* Subtitle / Description */
.section-header__subtitle {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-gray-600, #6b7280);
    margin: 0 auto;
    max-width: 700px;
}

/* Subtitle Alignment adjustments */
.section-header[style*="text-align: left"] .section-header__subtitle,
.section-header[style*="text-align:left"] .section-header__subtitle {
    margin-left: 0;
    margin-right: auto;
}

.section-header[style*="text-align: right"] .section-header__subtitle,
.section-header[style*="text-align:right"] .section-header__subtitle {
    margin-left: auto;
    margin-right: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .section-header {
        margin-bottom: var(--spacing-8, 3rem);
        padding: 0 var(--spacing-3, 1rem);
    }
    
    .section-header__decorator {
        font-size: 2.5rem;
    }
    
    .section-header__decorator--left {
        top: -10px;
        left: -20px;
    }
    
    .section-header__decorator--right {
        top: -10px;
        right: -20px;
    }
    
    .section-header__eyebrow {
        font-size: 0.8125rem;
    }
    
    .section-header__title {
        font-size: clamp(1.75rem, 5vw, 2.25rem);
        margin-bottom: var(--spacing-3, 1rem);
    }
    
    .section-header__subtitle {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .section-header {
        margin-bottom: var(--spacing-6, 2rem);
    }
    
    .section-header__decorator {
        display: none; /* Auf sehr kleinen Screens ausblenden */
    }
    
    .section-header__title {
        font-size: 1.5rem;
    }
    
    .section-header__subtitle {
        font-size: 0.9375rem;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .section-header__decorator {
        animation: none;
    }
}

/* Dark Mode Support (optional, für zukünftige Verwendung) */
@media (prefers-color-scheme: dark) {
    .section-header__title {
        color: var(--color-text-dark-mode, #ffffff);
    }
    
    .section-header__subtitle {
        color: var(--color-text-secondary-dark-mode, #d1d5db);
    }
}