/**
 * EVD Füchse Theme - Header-Titel und Content-Überschriften CSS
 * Dieses CSS wird durch CSS-Variablen aus dem Customizer gesteuert
 * 
 * @package EVD_Fuechse_Theme
 * @version 2.0
 */

/* === BASIS-STYLES === */
.page-header-title,
.home-header-title {
    /* H1-ähnliches Styling für P-Element */
    display: block !important;
    
    /* Übernehme alle H1-Eigenschaften aus dem Theme */
    font-family: 'Redzone BlackReg', sans-serif !important; /* Gleiche Schriftart wie andere Überschriften */
    font-weight: bold !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: normal !important;
    
    /* Fallback-Werte, werden durch Customizer überschrieben */
    color: var(--evd-header-title-color, #DF0914) !important;
    text-transform: var(--evd-header-uppercase, uppercase) !important;
    text-shadow: var(--evd-header-shadow, none) !important;
}

/* Zusätzliche H1-Eigenschaften für semantisches Styling */
.page-header-title {
    /* Stelle sicher, dass es wie ein H1 aussieht */
    font-style: normal !important;
    font-variant: normal !important;
    text-decoration: none !important;
    text-shadow: none !important;
    /* Klare Outline ohne Schatten */
    /* Per Customizer steuerbar über --evd-header-stroke-width und --evd-header-stroke-color */
    -webkit-text-stroke: var(--evd-header-stroke-width, 2px) var(--evd-header-stroke-color, #000000) !important;
    paint-order: stroke fill !important;
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
    /* Fallback-Werte, werden durch Customizer überschrieben */
    color: var(--evd-content-headings-color, #DF0914) !important;
    text-transform: var(--evd-content-uppercase, none) !important;
    text-shadow: var(--evd-content-shadow, none) !important;
}

/* === SCHRIFTGRÖSSEN === */
.page-header-title {
    /* Nutze Theme H1-Größe als Basis, überschreibbar durch Customizer */
    font-size: var(--evd-page-header-size, var(--h1-size, 3rem)) !important;
}

.home-header-title {
    /* Home-Titel etwas größer als Standard H1 */
    font-size: var(--evd-home-header-size, 3.5rem) !important;
}

.content h1 {
    font-size: var(--evd-content-h1-size, var(--h1-size, 2.5rem)) !important;
}

.content h2 {
    font-size: var(--evd-content-h2-size, var(--h2-size, 2rem)) !important;
}

.content h3 {
    font-size: var(--evd-content-h3-size, var(--h3-size, 1.75rem)) !important;
}

.content h4 {
    font-size: var(--evd-content-h4-size, var(--h4-size, 1.5rem)) !important;
}

.content h5 {
    font-size: var(--evd-content-h5-size, var(--h5-size, 1.25rem)) !important;
}

.content h6 {
    font-size: var(--evd-content-h6-size, var(--h6-size, 1rem)) !important;
}

/* === LINK-STYLING === */
/* Header-Titel Links - Höhere Spezifität für Überschreibung */
.page-header-title a,
.home-header-title a,
body .page-header-title a,
body .home-header-title a,
html body .page-header-title a,
html body .home-header-title a {
    color: var(--evd-header-link-color, #DF0914) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.page-header-title a:hover,
.home-header-title a:hover,
body .page-header-title a:hover,
body .home-header-title a:hover,
html body .page-header-title a:hover,
html body .home-header-title a:hover {
    color: var(--evd-header-link-hover-color, #DF0914) !important;
    text-decoration: underline !important;
}

/* Content-Überschriften Links - Höhere Spezifität */
.content h1 a,
.content h2 a,
.content h3 a,
.content h4 a,
.content h5 a,
.content h6 a,
body .content h1 a,
body .content h2 a,
body .content h3 a,
body .content h4 a,
body .content h5 a,
body .content h6 a,
html body .content h1 a,
html body .content h2 a,
html body .content h3 a,
html body .content h4 a,
html body .content h5 a,
html body .content h6 a {
    color: var(--evd-content-link-color, #DF0914) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.content h1 a:hover,
.content h2 a:hover,
.content h3 a:hover,
.content h4 a:hover,
.content h5 a:hover,
.content h6 a:hover,
body .content h1 a:hover,
body .content h2 a:hover,
body .content h3 a:hover,
body .content h4 a:hover,
body .content h5 a:hover,
body .content h6 a:hover,
html body .content h1 a:hover,
html body .content h2 a:hover,
html body .content h3 a:hover,
html body .content h4 a:hover,
html body .content h5 a:hover,
html body .content h6 a:hover {
    color: var(--evd-content-link-hover-color, #DF0914) !important;
    text-decoration: underline !important;
}

/* === RESPONSIVE ANPASSUNGEN === */
@media (max-width: 992px) {
    .page-header-title {
        /* Nutze die gleichen responsive Größen wie Content H1 */
    font-size: var(--evd-page-header-size-md, 2.4rem) !important;
    -webkit-text-stroke-width: var(--evd-header-stroke-width-md, 1.5px) !important;
    }
    .home-header-title {
        font-size: var(--evd-home-header-size-md, 3rem) !important;
    }
    .content h1 {
        font-size: var(--evd-content-h1-size-md, 2.4rem) !important;
    }
    .content h2 {
        font-size: var(--evd-content-h2-size-md, 2rem) !important;
    }
}

@media (max-width: 768px) {
    .page-header-title {
        /* Konsistent mit Content H1 responsive Größen */
    font-size: var(--evd-page-header-size-sm, 2rem) !important;
    -webkit-text-stroke-width: var(--evd-header-stroke-width-sm, 1.2px) !important;
    }
    .home-header-title {
        font-size: var(--evd-home-header-size-sm, 2.5rem) !important;
    }
    .content h1 {
        font-size: var(--evd-content-h1-size-sm, 2rem) !important;
    }
    .content h2 {
        font-size: var(--evd-content-h2-size-sm, 1.8rem) !important;
    }
    .content h3 {
        font-size: var(--evd-content-h3-size-sm, 1.6rem) !important;
    }
}

@media (max-width: 480px) {
    .page-header-title {
    font-size: var(--evd-page-header-size-xs, 1.7rem) !important;
    -webkit-text-stroke-width: var(--evd-header-stroke-width-xs, 1px) !important;
    }
    .home-header-title {
        font-size: var(--evd-home-header-size-xs, 2rem) !important;
    }
    .content h1 {
        font-size: var(--evd-content-h1-size-xs, 1.8rem) !important;
    }
    .content h2 {
        font-size: var(--evd-content-h2-size-xs, 1.6rem) !important;
    }
    .content h3 {
        font-size: var(--evd-content-h3-size-xs, 1.4rem) !important;
    }
}

/* === SPEZIELLE ANPASSUNGEN FÜR HELLE FARBEN === */
.evd-header-title-white,
.evd-header-title-light {
    /* Verstärkter Schatten für weiße/helle Header-Titel */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.95), 
                 0 0 30px rgba(0, 0, 0, 0.8), 
                 0 0 60px rgba(0, 0, 0, 0.6) !important;
}

.evd-content-headings-white,
.evd-content-headings-light {
    /* Verstärkter Schatten für weiße/helle Content-Überschriften */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8) !important;
}

/* === UTILITY CLASSES === */
.evd-text-uppercase {
    text-transform: uppercase !important;
}

.evd-text-normal {
    text-transform: none !important;
}

.evd-shadow-none {
    text-shadow: none !important;
}

.evd-shadow-light {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5) !important;
}

.evd-shadow-medium {
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7), 0 0 15px rgba(0, 0, 0, 0.4) !important;
}

.evd-shadow-strong {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 0, 0, 0.7) !important;
}

.evd-content-shadow-light {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.evd-content-shadow-medium {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5) !important;
}

.evd-content-shadow-strong {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7) !important;
}