/* Fix for section headers with gradient text */

/* Override text-reveal for section headers to ensure visibility */
.section-header .text-reveal.gradient-text {
    background: linear-gradient(45deg, var(--primary-color), #7986cb);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block;
    width: auto;
    text-shadow: none;
    overflow: visible;
    position: relative;
    font-weight: 700;
}

[data-theme="dark"] .section-header .text-reveal.gradient-text {
    background: linear-gradient(45deg, #536dfe, #90caf9);
    background-clip: text;
    -webkit-background-clip: text;
}

/* Ensure spans within gradient-text headers display correctly */
.section-header .text-reveal.gradient-text span {
    opacity: 1 !important;
    transform: none !important;
    color: transparent;
    visibility: visible !important;
    display: inline-block;
}

/* Ensure gradient text is always visible regardless of animation state */
.section-header h2.gradient-text {
    position: relative;
    z-index: 10;
    font-weight: 700;
}

/* Add enhanced contrast behind gradient text */
.section-header h2.gradient-text:after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    color: rgba(0,0,0,0.07);
    transform: translateX(3px) translateY(3px);
}

/* Additional animation to ensure visibility on load */
@keyframes fadeInHeader {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

.section-header .gradient-text {
    animation: fadeInHeader 0.3s ease forwards;
    animation-delay: 0s;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Force visibility for section headers */
h2.gradient-text {
    opacity: 1 !important;
    visibility: visible !important;
}