@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap');

/* Global Reset/Base */
body {
    font-family: 'Inter', sans-serif !important;
}

/* Custom Design Tokens */
.mesh-gradient-light {
    background-color: #f8fafc;
    background-image:
        radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(99, 102, 241, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(244, 114, 182, 0.1) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(59, 130, 246, 0.1) 0px, transparent 50%);
}

.text-gradient {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-blur {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.7);
}

/* Animations that Tailwind might not catch or good to have in CSS */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

/* WordPress Specific Overrides */
.single-post .entry-content {
    /* Ensure content has some breathing room but don't break tailwind layout */
    max-width: 100% !important;
    /* Let container handle manual width */
}

/* Fix Blocksy Container Width if incompatible with Tailwind max-w-* */
[class*="ct-container"] {
    /* Optional: override if needed, but Blocksy usually plays nice */
}

/* Primary Button Text Hover Fix */
.bg-indigo-600:hover,
.submit-button:hover,
.fm-cta-btn:hover,
.fm-contact-btn:hover,
a.bg-indigo-600:hover {
    color: white !important;
}

/* Article Engagement Card & Like System */
.pos-article-feedback-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pos-article-feedback-card:hover {
    border-color: #a5b4fc;
    box-shadow: 0 20px 40px -20px rgba(79, 70, 229, 0.2);
}

.pos-like-button {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.pos-like-button.is-active {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: white !important;
    box-shadow: 0 10px 20px -5px rgba(239, 68, 68, 0.4) !important;
}

.pos-like-button.is-active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48 !important;
}

.pos-like-button.is-loading {
    opacity: 0.7;
    cursor: wait;
}

@keyframes thumbPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

.pos-like-button.is-active .material-symbols-outlined {
    animation: thumbPulse 0.4s ease-out;
}