/*
  File: style.css
  Description: Custom styles for the NETD4TE promotional website.
*/

/* Base body styles for smooth transitions and font */
body {
    font-family: 'Poppins', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Prose styles for legal pages */
.prose h1 {
    @apply text-3xl font-bold mb-4 text-primary dark:text-primary-light;
}

.prose h2 {
    @apply text-2xl font-semibold mt-8 mb-3 border-b border-gray-200 dark:border-gray-700 pb-2;
}

.prose p, .prose li {
    @apply text-base text-gray-700 dark:text-dark-subtext leading-relaxed;
}

.prose ul {
    @apply list-disc pl-5 space-y-2;
}

.prose a {
    @apply text-primary dark:text-primary-light hover:underline;
}


/* --- Navigation Bar Styles --- */
.nav-link {
    @apply text-gray-600 dark:text-dark-subtext font-semibold hover:text-primary dark:hover:text-primary-light transition-colors duration-200;
}

.nav-link-active {
    @apply text-primary dark:text-primary-light font-bold;
}

.nav-button {
    @apply bg-primary text-white font-bold py-2 px-5 rounded-full hover:bg-primary-dark transition-all duration-300 shadow-md hover:shadow-lg;
}

/* Mobile Drawer Navigation Styles */
.nav-link-mobile {
     @apply block py-2 px-4 text-gray-700 dark:text-dark-subtext rounded-md hover:bg-gray-100 dark:hover:bg-gray-800;
}
.nav-link-mobile-active {
    @apply block py-2 px-4 text-primary dark:text-primary-light bg-pink-50 dark:bg-gray-800 font-bold rounded-md;
}
.nav-button-mobile {
    @apply block py-2 px-4 bg-primary text-white font-bold rounded-md hover:bg-primary-dark transition-all duration-300;
}


/* --- Screenshot Carousel Section --- */
.carousel-container {
    position: relative;
    width: 100%;
    height: 500px; /* Adjust height as needed */
    perspective: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.carousel-card {
    position: absolute;
    width: 250px; /* Adjust card width */
    height: 450px; /* Adjust card height */
    border-radius: 1.5rem; /* 24px */
    overflow: hidden;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0.5s;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.carousel-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Card Positions */
.carousel-card[data-pos="0"] { /* Center */
    transform: translateX(0) scale(1);
    opacity: 1;
    z-index: 5;
}

.carousel-card[data-pos="-1"] { /* Immediate Left */
    transform: translateX(-150px) scale(0.85);
    opacity: 0.7;
    z-index: 4;
}

.carousel-card[data-pos="1"] { /* Immediate Right */
    transform: translateX(150px) scale(0.85);
    opacity: 0.7;
    z-index: 4;
}

.carousel-card[data-pos="-2"] { /* Far Left */
    transform: translateX(-280px) scale(0.7);
    opacity: 0.4;
    z-index: 3;
}

.carousel-card[data-pos="2"] { /* Far Right */
    transform: translateX(280px) scale(0.7);
    opacity: 0.4;
    z-index: 3;
}

/* Hidden cards beyond the main view */
.carousel-card[data-pos="-3"],
.carousel-card[data-pos="3"] {
    transform: translateX(0) scale(0.5);
    opacity: 0;
    z-index: 1;
}

/* Carousel Navigation Buttons */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.7);
    dark:bg-dark-card;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border: 1px solid #ddd;
    dark:border-gray-700;
}

.carousel-nav.prev {
    left: 10px;
}

.carousel-nav.next {
    right: 10px;
}

/* For larger screens, adjust positions to spread out more */
@media (min-width: 768px) {
    .carousel-card[data-pos="-1"] {
        transform: translateX(-200px) scale(0.85);
    }
    .carousel-card[data-pos="1"] {
        transform: translateX(200px) scale(0.85);
    }
    .carousel-card[data-pos="-2"] {
        transform: translateX(-380px) scale(0.7);
    }
    .carousel-card[data-pos="2"] {
        transform: translateX(380px) scale(0.7);
    }

    .carousel-nav.prev {
        left: 50px;
    }

    .carousel-nav.next {
        right: 50px;
    }
}