/* Custom Styles */
/* --- Light Theme Adjustments --- */
body {
    background-color: #F8F8F8;
    color: #1A1A1A;
}

/* Soften stark white backgrounds as per user request */
.bg-white {
    background-color: #F5F5F5 !important;
}

/* Light theme only: solid white search panel for contrast on soft page background */
html:not(.dark) #search-modal .bg-white {
    background-color: #FFFFFF !important;
}

/* Dark theme: match site chrome (Tailwind dark: on modal was overridden by rule above) */
html.dark #search-modal .bg-white {
    background-color: #1E1E1E !important;
    color: #E2E8F0 !important;
}

/* Image lightbox: close control must read on both dark backdrops and bright product photos */
#close-image-modal {
    background-color: rgba(15, 23, 42, 0.92) !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
}
#close-image-modal:hover {
    background-color: rgba(30, 41, 59, 0.98) !important;
    color: #ffffff !important;
}

/* --- Dark Theme Definitions --- */
html.dark body {
    background-color: #121212 !important;
    color: #E2E8F0 !important;
}

/* Primary containers in dark mode */
html.dark body .bg-brand-light,
html.dark body .bg-white,
html.dark body .bg-gray-50,
html.dark body .bg-secondary,
html.dark body .bg-gray-100 {
    background-color: #1E1E1E !important;
    border-color: #333 !important;
}

/* Blur/glow effect for dark logos in dark mode to maintain identical size but clear visibility */
html.dark body .brand-logo-container img {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
}

/* Subtle lift for PNG product photos on dark backgrounds (transparency blends into page) */
html.dark img.product-catalog-img[src*=".png" i],
html.dark #main-image[src*=".png" i],
html.dark #image-thumbnails img[src*=".png" i],
html.dark #search-results img[src*=".png" i],
html.dark #modal-image[src*=".png" i] {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.12)) drop-shadow(0 0 22px rgba(255, 255, 255, 0.06));
}

/* Gray 200 elements like category tags or secondary buttons */
html.dark body .bg-gray-200 {
    background-color: #2D3748 !important;
}

/* Give proper depth to standard cards and containers in dark mode */
html.dark body .shadow-md,
html.dark body .shadow-lg,
html.dark body .shadow-xl {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid #2A2A2A !important;
}

/* Specifically preserve specific hover interactions over the base overrides */
html.dark body .hover\:bg-red-500:hover { background-color: #EF4444 !important; }
html.dark body .hover\:bg-red-700:hover { background-color: #B91C1C !important; }
html.dark body .hover\:bg-gray-300:hover { background-color: #4A5568 !important; }
html.dark body .hover\:bg-gray-200:hover { background-color: #374151 !important; }
html.dark body .hover\:bg-gray-100:hover, 
html.dark body .hover\:bg-gray-50:hover { background-color: #2D3748 !important; }
html.dark body .hover\:bg-blue-700:hover { background-color: #1D4ED8 !important; }
html.dark body .hover\:bg-blue-900:hover { background-color: #1E3A8A !important; }
html.dark body .hover\:bg-brand-accent-red:hover { background-color: #EF4444 !important; }
html.dark body .hover\:text-white:hover { color: #FFFFFF !important; }
html.dark body .hover\:text-red-700:hover { color: #EF4444 !important; }

/* Text colors */
html.dark body .text-brand-dark,
html.dark body .text-gray-900,
html.dark body .text-gray-800 {
    color: #E2E8F0 !important;
}
html.dark body .text-gray-700 {
    color: #CBD5E1 !important; /* Lighter grey for readability on buttons */
}
html.dark body .text-gray-600 {
    color: #9CA3AF !important;
}
html.dark body .text-gray-500 {
    color: #6B7280 !important;
}

/* Highlight components: Holds the reds and blues well */
html.dark body .bg-brand-blue,
html.dark body .bg-primary {
    background-color: #0052CC !important;
    color: #FFFFFF !important;
}
html.dark body .text-brand-blue,
html.dark body .text-primary {
    color: #60A5FA !important;
}
html.dark body .bg-brand-accent-red {
    background-color: #D90429 !important;
}
html.dark body .text-brand-accent-red {
    color: #EF4444 !important;
}

/* Borders and shadows */
html.dark body .border-gray-200, 
html.dark body .border-gray-300 {
    border-color: #374151 !important;
}

/* Specific elements like inputs and the header */
html.dark header.bg-white {
    background-color: #1A1A1A !important;
    border-bottom: 1px solid #333;
}
html.dark input[type="text"], 
html.dark input[type="email"], 
html.dark input[type="tel"], 
html.dark textarea,
html.dark select {
    background-color: #2D3748 !important;
    color: #E2E8F0 !important;
    border-color: #4A5568 !important;
}

/* Adjust search button hover in dark mode */
html.dark #search-button:hover i {
    color: #60A5FA !important;
}

/* Product detail view modal */
html.dark #productDetailView > div.bg-white {
    background-color: #1E1E1E !important;
}

/* Mobile menu */
html.dark #mobile-menu.bg-white {
    background-color: #1E1E1E !important;
}
html.dark #mobile-menu a.bg-gray-100 {
    background-color: #2D3748 !important;
}

/* Product Category Tags (Active state) */
html.dark body .product-tab-button.active {
    background-color: #0052CC !important;
    color: #FFFFFF !important;
}

/* Invert specific black icons on the home page */
html.dark body img[src$="digital.png"],
html.dark body img[src$="offset.png"],
html.dark body img[src$="ink.png"] {
    filter: invert(1) brightness(1.5);
}
.page {
    display: block;
}

.nav-link {
    position: relative;
    transition: color 0.3s ease;
    color: #1A1A1A;
    font-weight: 500;
}
html.dark body .nav-link { color: #E2E8F0; }

.nav-link:hover, .nav-link.active {
    color: #0052CC !important;
}
html.dark body .nav-link:hover, html.dark body .nav-link.active {
    color: #60A5FA !important;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #D90429;
    transition: width 0.3s ease;
}
.nav-link.active::after,
.nav-link:hover::after {
    width: 100%;
}
.horizontal-scroll {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}
.horizontal-scroll::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}
.product-card {
    flex: 0 0 auto;
}
#productDetailView {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 100;
    overflow-y: auto;
    align-items: flex-start; /* Align modal to top */
    justify-content: center;
}

@keyframes fade-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.animate-fade-in {
    animation: fade-in 0.3s ease-out forwards;
}

main {
    animation: fade-in 0.4s ease-out forwards;
}

/* ── Global Scroll-reveal ── */
.reveal        { opacity:0; transform:translateY(30px);   transition:opacity .65s ease,transform .65s ease; }
.reveal-left   { opacity:0; transform:translateX(-30px);  transition:opacity .65s ease,transform .65s ease; }
.reveal-right  { opacity:0; transform:translateX(30px);   transition:opacity .65s ease,transform .65s ease; }
.reveal.visible,
.reveal-left.visible,
.reveal-right.visible { opacity:1; transform:none; }
.delay-1 { transition-delay:.12s; }
.delay-2 { transition-delay:.24s; }
.delay-3 { transition-delay:.36s; }