/**
 * OCS Theme CSS
 * 
 * Developed by Onecodesoft
 * This system has been built with care and attention to detail.
 * 
 * Copyright (c) Onecodesoft
 */

/* Custom scrollbar hiding for tags bar if needed */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Smooth transitions for details/summary */
details > summary {
    list-style: none;
}
details > summary::-webkit-details-marker {
    display: none;
}
/* Rotate chevron on open */
details[open] summary i {
    transform: rotate(180deg);
}

/* Auth Modal Animation */
@keyframes fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-fade-in-down {
    animation: fade-in-down 0.3s ease-out;
}

/* Show dropdown on hover of avatar container or dropdown itself */
.avatar-container:hover #header-profile-dropdown,
#header-profile-dropdown:hover {
    display: block !important;
}

/* The padding-top creates an invisible hover area that bridges the gap */
.avatar-container #header-profile-dropdown {
    pointer-events: auto;
}

/* Mobile search container - override the lg:hidden rule */
@media (max-width: 768px) {
    .mobile-search-container {
        display: none !important;
    }
    
    .mobile-search-container[style*="display: block"] {
        display: block !important;
    }
}

/* Hide on desktop */
@media (min-width: 1024px) {
    .mobile-search-container {
        display: none !important;
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    #toast-container {
        left: 1rem;
        right: 1rem;
        top: 1rem;
        max-width: none;
    }
    #toast-container > div {
        min-width: auto;
        width: 100%;
    }
}

/* Only apply hidden state on desktop (min-width: 1024px) */
@media (min-width: 1024px) {
    #header-search-form {
        opacity: 1;
        transition: opacity 0.4s ease, transform 0.4s ease;
        visibility: visible;
    }

    /* This class will be added/removed by JavaScript */
    .search-hidden {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(-10px); /* Optional: slight slide up effect */
        pointer-events: none; /* Prevents clicking while hidden */
    }
}

/* Service Page - Thumbnail Styles */
.thumbnail-item.active {
    border-color: #1dbf73;
    opacity: 1;
}
.thumbnail-item {
    opacity: 0.7;
    transition: opacity 0.2s, border-color 0.2s;
}
.thumbnail-item:hover {
    opacity: 1;
}

/* Category Page - Banner Text Content */
.banner-text-content {
    color: white;
}
.banner-text-content h1,
.banner-text-content h2,
.banner-text-content h3,
.banner-text-content h4,
.banner-text-content h5,
.banner-text-content h6 {
    color: white;
    font-weight: bold;
}
.banner-text-content p {
    margin-bottom: 0.5rem;
}
.banner-text-content a {
    color: white;
    text-decoration: underline;
}
.banner-text-content strong {
    font-weight: bold;
}
.banner-text-content em {
    font-style: italic;
}
.banner-text-content h1 {
    font-size: 2rem !important;
}

/* Page Content Styles */
.page-content img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 1rem 0;
    border-radius: 0.5rem;
}
.page-content > * {
    margin-bottom: 1rem;
}
.page-content > *:last-child {
    margin-bottom: 0;
}

/* Team Page - Card Animations */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-fade-in-up {
    animation: fade-in-up 0.6s ease-out;
}
.team-card {
    position: relative;
}
.team-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0,0,0,0.05) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 0;
}
.team-card:hover::before {
    opacity: 1;
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-none {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
}
.team-card img {
    will-change: transform;
}
.team-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 0 20px rgba(34, 197, 94, 0.1);
}

/* Welcome/Home Page - Hero Slide Animation */
.hero-slide {
    opacity: 0;
    animation-name: heroSlide;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    will-change: opacity;
}
@keyframes heroSlide {
    0% { opacity: 0; }
    6% { opacity: 1; }
    40% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 0; }
}


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

.marquee-track {
    display: flex;
    width: fit-content;
    animation: marquee 30s linear infinite;
}

/* Stop the entire track on hover */
.group-hover\:pause:hover {
    animation-play-state: paused;
}

/* Responsive adjustments: speed and gap */
@media (max-width: 768px) {
    .marquee-track {
        animation-duration: 20s;
    }
}
.tracking-widest {
letter-spacing: 0.2em;
}
/* Optional: Animate numbers if you have a JS counter library */
.stats-card {
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.stats-card:hover {
transform: translateY(-5px);
}