/*
Theme Name: Seerat-e-Quran Academy
Theme URI: https://seeratequran.com
Author: Seerat-e-Quran Development Team
Author URI: https://seeratequran.com
Description: A professional WordPress theme for Islamic education and online Quran learning academy. Features include custom course management, blog functionality, Arabic typography support, testimonials, pricing tables, and comprehensive customization options through WordPress Customizer. Perfect for Quran schools, Islamic institutes, and online education platforms.
Version: 1.6.4
Requires at least: 5.8
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: seerat-e-quran
Tags: education, islamic, quran, two-columns, right-sidebar, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-width-template, rtl-language-support, theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something beautiful for your Islamic education platform.
*/

/* ============================================
   CSS Variables / Theme Colors
   ============================================ */
:root {
    --primary-color: #1a3a7a;
    --primary-hover: #153168;
    --secondary-color: #f59e0b;
    --accent-amber: #fbbf24;
    --text-dark: #1f2937;
    --text-gray: #6b7280;
    --text-light: #9ca3af;
    --bg-light: #f9fafb;
    --bg-blue-light: #eff6ff;
    --white: #ffffff;
    --green-whatsapp: #25d366;
    --border-gray: #e5e7eb;
}

/* ============================================
   Arabic/Urdu Font Styling
   ============================================ */
.font-arabic, .arabic-text {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastalikh Urdu', 'Traditional Arabic', 'Urdu Typesetting', 'Arabic Typesetting', 'Scheherazade New', 'Amiri', 'Arial Unicode MS', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    line-height: 1.8;
    font-weight: 600;
    direction: rtl;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.course-title-arabic {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastalikh Urdu', 'Traditional Arabic', 'Urdu Typesetting', 'Arabic Typesetting', 'Scheherazade New', 'Amiri', 'Arial Unicode MS', sans-serif;
    font-size: 1.75rem;
    line-height: 2;
    font-weight: 700;
    direction: rtl;
    letter-spacing: 0.03em;
}

/* ============================================
   Animations
   ============================================ */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

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

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

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

@keyframes pulse-slow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-pulse-slow {
    animation: pulse-slow 3s ease-in-out infinite;
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================
   Global Utilities
   ============================================ */
.gradient-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, #2563eb 100%);
}

.gradient-amber {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
}

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

.glassmorphism {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

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

/* ============================================
   Button Styles
   ============================================ */
.btn-primary {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(26, 58, 122, 0.3);
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: var(--white);
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-secondary:hover {
    background-color: #d97706;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(245, 158, 11, 0.3);
}

.btn-whatsapp {
    background-color: var(--green-whatsapp);
    color: var(--white);
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-whatsapp:hover {
    background-color: #1ea952;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);
}

/* ============================================
   Card Styles
   ============================================ */
.card {
    background: var(--white);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.card-gradient {
    position: relative;
    overflow: hidden;
}

.card-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(26, 58, 122, 0.05) 0%, rgba(37, 99, 235, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card-gradient:hover::before {
    opacity: 1;
}

/* ============================================
   Section Styles
   ============================================ */
.section-padding {
    padding: 5rem 0;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--text-gray);
    max-width: 48rem;
    margin: 0 auto;
}

/* ============================================
   Responsive Typography
   ============================================ */
@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
    
    .font-arabic, .arabic-text {
        font-size: 1.25rem;
    }
    
    .course-title-arabic {
        font-size: 1.5rem;
    }
}

/* ============================================
   Header Spacer (for fixed headers)
   ============================================ */
.header-spacer {
    height: 12rem; /* Adjust based on your header height */
}

@media (max-width: 768px) {
    .header-spacer {
        height: 14rem;
    }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    .no-print {
        display: none !important;
    }
}

/* ============================================
   Accessibility
   ============================================ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus styles for better accessibility */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ============================================
   Custom Scrollbar
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-light);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-hover);
}

/* ============================================
   Badge Arabic
   ============================================ */
.badge-arabic {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastalikh Urdu', 'Traditional Arabic', 'Urdu Typesetting', 'Arabic Typesetting', 'Arial Unicode MS', sans-serif;
    font-size: 1rem;
    direction: rtl;
    font-weight: 600;
}

/* Responsive Arabic Font Sizes */
@media (max-width: 768px) {
    .badge-arabic {
        font-size: 0.875rem;
    }
}

/* ============================================
   Hero Slider Styles
   ============================================ */
.hero-slider {
    position: relative;
}

.slide {
    transition: opacity 1s ease-in-out;
}

.slide.active {
    opacity: 1 !important;
}

.dot.active {
    background-color: white !important;
    width: 2rem;
}

/* Slide content animations */
.slide.active .slide-content-left {
    animation: slideInLeft 0.8s ease-out;
}

.slide.active .slide-content-right {
    animation: slideInRight 1s ease-out 0.2s both;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================
   Floating Animations for Decorative Elements
   ============================================ */
@keyframes floating {
    0%, 100% {
        transform: translateY(0px) translateX(0px);
    }
    25% {
        transform: translateY(-20px) translateX(10px);
    }
    50% {
        transform: translateY(-10px) translateX(20px);
    }
    75% {
        transform: translateY(-15px) translateX(5px);
    }
}

@keyframes floatingSlow {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }
    33% {
        transform: translateY(-15px) translateX(-10px) rotate(5deg);
    }
    66% {
        transform: translateY(10px) translateX(15px) rotate(-5deg);
    }
}

.floating-element {
    animation: floating 6s ease-in-out infinite;
}

.floating-element-slow {
    animation: floatingSlow 8s ease-in-out infinite;
}

/* ============================================
   Pulse Animation
   ============================================ */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ============================================
   Line Clamp Utility
   ============================================ */
.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-clamp: 4;
}

/* ============================================
   Testimonial Card Transitions
   ============================================ */
.testimonial-card-prev, .testimonial-card-next {
    transition: all 0.5s ease-in-out;
}

.testimonial-card-active {
    transition: all 0.5s ease-in-out;
}