/*
Theme Name: Whiteboard Animate Custom
Author: Whiteboard Animate
Description: Custom Tailwind CSS theme with Lottie and scroll animations.
Version: 1.0
*/

/* WordPress Pagination Styling */
.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem; /* w-10 */
    height: 2.5rem; /* h-10 */
    border-radius: 9999px; /* rounded-full */
    background-color: white;
    border: 1px solid #e2e8f0; /* border-slate-200 */
    color: #475569; /* text-slate-600 */
    margin: 0 0.25rem;
    text-decoration: none;
    transition: all 0.3s;
}

.page-numbers:hover {
    border-color: #006699; /* border-primary */
    color: #006699; /* text-primary */
}

.page-numbers.current {
    background-color: #006699; /* bg-primary */
    color: white;
    border-color: #006699;
    font-weight: 600;
}

/* Ensure next/prev icons are centered */
.page-numbers i {
    font-size: 0.875rem; /* text-sm */
}
/* Compatibility utilities, needed because current tailwind.css does not include custom theme tokens */

.bg-primary{background-color:#006699}
.text-primary{color:#006699}
.border-primary{border-color:#006699}

.bg-secondary{background-color:#004d73}
.text-secondary{color:#004d73}
.border-secondary{border-color:#004d73}

.bg-blue-soft{background-color:#e0f2fe}
.text-dark{color:#1e293b}
.bg-light{background-color:#f8fafc}

.font-sans{font-family:Inter, sans-serif}
.font-heading{font-family:Lexend, sans-serif}

/* Gradient color stops */
.from-primary{
  --tw-gradient-from:#006699 var(--tw-gradient-from-position);
  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-primary{--tw-gradient-to:#006699 var(--tw-gradient-to-position)}

.from-secondary{
  --tw-gradient-from:#004d73 var(--tw-gradient-from-position);
  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-secondary{--tw-gradient-to:#004d73 var(--tw-gradient-to-position)}

/* Optional animations used by your templates */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
.animate-float{animation:float 6s ease-in-out infinite}

@keyframes blob{
  0%{transform:translate(0px,0px) scale(1)}
  33%{transform:translate(30px,-50px) scale(1.1)}
  66%{transform:translate(-20px,20px) scale(0.9)}
  100%{transform:translate(0px,0px) scale(1)}
}
.animate-blob{animation:blob 7s infinite}