/* Main CSS file for Lovart website */

/* Custom styles not covered by Tailwind */
.gradient-bg {
    background: linear-gradient(135deg, #1e3a8a 0%, #6b21a8 100%);
}

/* Video container for responsive videos */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.video-container video,
.video-container .plyr {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Custom animations */
.fade-in {
    animation: fadeIn 0.8s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Custom styling for sectional headings */
.section-title {
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #1e3a8a, #6b21a8);
    border-radius: 2px;
}

/* Dark Mode Styles */
body.dark {
    background-color: #111827;
    color: #f9fafb;
}

body.dark header {
    background-color: rgba(17, 24, 39, 0.9);
    backdrop-filter: blur(8px);
}

body.dark header span,
body.dark header a,
body.dark header button {
    color: #e5e7eb;
}

body.dark header a:hover {
    color: #93c5fd;
}

body.dark .bg-white {
    background-color: #1f2937;
}

body.dark .bg-gray-50 {
    background-color: #111827;
}

body.dark .bg-gray-200 {
    background-color: #374151;
}

body.dark .text-gray-900 {
    color: #f9fafb;
}

body.dark .text-gray-700 {
    color: #d1d5db;
}

body.dark .text-gray-600,
body.dark .text-gray-500,
body.dark .text-gray-400 {
    color: #9ca3af;
}

body.dark .border-gray-200 {
    border-color: #374151;
}

body.dark .hover\:bg-gray-100:hover {
    background-color: #1f2937;
}

/* Dark mode toggle icon swap */
body.dark #theme-toggle svg {
    display: none;
}

body.dark #theme-toggle::after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='white'%3E%3Cpath d='M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Animation for dark mode transition */
body, header, .bg-white, .bg-gray-50, .bg-gray-200, 
.text-gray-900, .text-gray-700, .text-gray-600, 
.text-gray-500, .text-gray-400, .border-gray-200,
.hover\:bg-gray-100:hover {
    transition: all 0.3s ease;
}