/**
 * CUSTOM STYLES
 *
 * Füge hier deine eigenen Custom Styles hinzu.
 * Dieser File wird am Ende geladen und überschreibt alle anderen Styles.
 *
 * @package Kadence_Child
 */

/* ============================================
   PROMO BAR
   ============================================ */
.promo-bar {
    font-size: var(--child-font-size-sm);
    font-weight: var(--child-font-weight-medium);
}

/* ============================================
   READING TIME
   ============================================ */
.reading-time {
    display: flex;
    align-items: center;
}

/* ============================================
   NEWSLETTER CTA
   ============================================ */
.newsletter-cta {
    text-align: center;
}

.newsletter-cta h3 {
    font-size: var(--child-font-size-xl);
}

/* ============================================
   CUSTOM UTILITIES
   ============================================ */
.text-gradient {
    background: linear-gradient(135deg, var(--child-brand-primary), var(--child-brand-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hover-lift {
    transition: transform var(--child-transition-base);
}

.hover-lift:hover {
    transform: translateY(-4px);
}

/* ============================================
   CUSTOM ANIMATIONS
   ============================================ */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

/* ============================================
   RESPONSIVE HELPERS
   ============================================ */
@media (max-width: 768px) {
    .hide-mobile {
        display: none;
    }
}

@media (min-width: 769px) {
    .hide-desktop {
        display: none;
    }
}

/* ============================================
   DEINE CUSTOM STYLES HIER
   ============================================ */