/* Custom overrides & custom fonts styling */

/* Cairo font applies to Arabic content, Inter to English */
html[lang="ar"] {
    font-family: 'Cairo', 'Inter', sans-serif;
}

html[lang="en"] {
    font-family: 'Inter', 'Cairo', sans-serif;
}

/* Smooth transition for layout swapping */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

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

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

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

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid #0284c7;
    outline-offset: 2px;
}

/* Animated Book Covers Marquee Background */
@keyframes marquee-vertical {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

.animate-marquee-vertical {
    animation: marquee-vertical 30s linear infinite;
}

/* Dark Mode Styles */
html.dark {
    color-scheme: dark;
}
html.dark body {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
}
html.dark header {
    background-color: rgba(15, 23, 42, 0.85) !important;
    border-color: #1e293b !important;
}
html.dark header nav a {
    color: #94a3b8 !important;
}
html.dark header nav a:hover {
    color: #0284c7 !important;
}
html.dark main {
    background: #0f172a !important;
}
html.dark section {
    background-color: transparent !important;
}
html.dark .bg-white {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
html.dark .bg-slate-50 {
    background-color: #0f172a !important;
}
html.dark .text-slate-900, 
html.dark .text-slate-800,
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4 {
    color: #ffffff !important;
}
html.dark .text-slate-600, 
html.dark .text-slate-500,
html.dark p {
    color: #94a3b8 !important;
}
html.dark .border-slate-100, 
html.dark .border-slate-200 {
    border-color: #334155 !important;
}
html.dark #mobile-menu {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
html.dark #mobile-menu a {
    color: #94a3b8 !important;
}
html.dark button, 
html.dark input, 
html.dark textarea,
html.dark select,
html.dark dialog {
    background-color: #1e293b !important;
    color: #ffffff !important;
    border-color: #334155 !important;
}
html.dark ::-webkit-scrollbar-track {
    background: #0f172a;
}
html.dark ::-webkit-scrollbar-thumb {
    background: #334155;
}
html.dark ::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Logo: show light logo by default, hide dark logo */
.logo-light { display: inline-block; }
.logo-dark  { display: none; }

/* In dark mode: hide light logo, show dark logo */
html.dark .logo-light { display: none; }
html.dark .logo-dark  { display: inline-block; }

/* ─── Hero Film Strip Background ────────────────── */
.film-strip-row {
    display: flex;
    width: 100%;
    overflow: hidden;
    padding: 6px 0;
    position: relative;
}

.film-strip-track {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    /* width set by JS or just let it be natural */
}

.film-img {
    height: 260px;
    width: auto;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    display: block;
    filter: grayscale(20%);
}

/* Row scrolling left */
.film-strip-left .film-strip-track {
    animation: filmScrollLeft 40s linear infinite;
}

/* Row scrolling right */
.film-strip-right .film-strip-track {
    animation: filmScrollRight 35s linear infinite;
}

@keyframes filmScrollLeft {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes filmScrollRight {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* Pause on hover for UX */
.film-strip-row:hover .film-strip-track {
    animation-play-state: paused;
}