/* ================================
   Sentra Emas - Custom CSS
   Supplementary styles for animations & effects
   not easily done with Tailwind alone
   ================================ */

/* Font */
body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Force white color for Cek Buyback button */
#btn-cek-buyback {
    color: white !important;
}

/* Header Nav Contrast Fix */
#site-header nav a,
#mobile-menu a {
    color: #d1d5db;
    /* text-gray-300 */
}

#site-header nav a:hover,
#mobile-menu a:hover {
    color: #fbbf24;
    /* text-yellow-400 */
}

#site-header nav .current-menu-item a,
#mobile-menu .current-menu-item a {
    color: #f59e0b !important;
    /* text-yellow-500 */
}

/* Preloader & Spinner */
#preloader {
    opacity: 1;
    visibility: visible;
}

#preloader.preloader-hidden {
    opacity: 0;
    visibility: hidden;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.animate-fadeInUp {
    animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fadeIn {
    animation: fadeIn 0.4s ease-out forwards;
}

.animate-slideDown {
    animation: slideDown 0.3s ease-out forwards;
}

/* Gold shimmer effect */
.shimmer-gold {
    background: linear-gradient(90deg,
            #EAB308 0%,
            #FDE68A 25%,
            #EAB308 50%,
            #FDE68A 75%,
            #EAB308 100%);
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Custom gradient text */
.text-gradient-gold {
    background: linear-gradient(135deg, #F59E0B, #EAB308, #D97706);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Prose improvements */
.prose img {
    border-radius: 12px;
}

.prose a {
    color: #D97706;
    text-decoration: none;
    font-weight: 600;
}

.prose a:hover {
    color: #B45309;
}

/* Line clamp */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Pagination styles (WordPress default override) */
.page-numbers {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.page-numbers li {
    list-style: none;
}

.page-numbers a,
.page-numbers span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
    color: #6B7280;
    background: white;
    border: 1px solid #E5E7EB;
}

.page-numbers a:hover {
    background: #FEF3C7;
    border-color: #F59E0B;
    color: #92400E;
}

.page-numbers .current {
    background: linear-gradient(135deg, #F59E0B, #EAB308);
    color: white;
    border-color: transparent;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #F3F4F6;
}

::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9CA3AF;
}

/* Selection color */
::selection {
    background: #FDE68A;
    color: #111111;
}

/* Focus styles */
*:focus-visible {
    outline: 2px solid #EAB308;
    outline-offset: 2px;
    border-radius: 4px;
}