/**
 * Madiba Theme Custom Styles
 */

/* Additional Custom Styles */
.mobile-menu.active {
    transform: translateX(0);
}

.mobile-menu-overlay.active {
    display: block;
}

/* Category Dropdown */
.categories-dropdown:hover .categories-menu,
.categories-menu:hover {
    display: block !important;
}

/* Gradient Backgrounds */
.bg-gradient-to-b {
    background-image: linear-gradient(to bottom, #3D7DCA, #004877);
}

/* Image Gallery */
.product-gallery .gallery-thumb {
    cursor: pointer;
}

.product-gallery .gallery-thumb.active {
    border-color: #004877;
}

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

/* WordPress Block Editor Compatibility */
.wp-block-group,
.wp-block-columns,
.wp-block-column {
    margin-bottom: 0;
}

/* RTL Support for Arabic */
[dir="rtl"] {
    direction: rtl;
}

[dir="rtl"] .flex {
    flex-direction: row-reverse;
}

/* Prose Styling for Content */
.prose {
/*     max-width: 65ch; */
    color: #374151;
}

.prose p {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.prose h2 {
    font-size: 1.5em;
    margin-top: 2em;
    margin-bottom: 1em;
    font-weight: 700;
    color: #111827;
}

.prose h3 {
    font-size: 1.25em;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
    font-weight: 600;
    color: #111827;
}

.prose a {
    color: #004877;
    text-decoration: underline;
}

.prose ul,
.prose ol {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-left: 1.625em;
}

.prose li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* Mobile Menu Animation */
@media (max-width: 768px) {
    .mobile-menu {
        transition: transform 0.3s ease-in-out;
    }
    
    .mobile-menu-toggle span {
        transition: all 0.3s ease-in-out;
    }
    
    .mobile-menu-toggle.active span:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }
    
    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    
    .mobile-menu-toggle.active span:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
    }
}

/* Loading States */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Form Styles */
input:focus,
textarea:focus,
select:focus {
    outline: none;
    ring: 2px;
    ring-color: #004877;
}

/* GSAP ScrollTrigger - Let GSAP handle pinning naturally */

/* Feature Card Gradient */
.feature-card-gradient {
    background: linear-gradient(to bottom, rgba(61, 125, 202, 0.14), #ffffff) !important;
}

/* Print Styles */
@media print {
    header,
    footer,
    .no-print {
        display: none;
    }
}