/* ==========================================================================
   File: style.css
   Purpose: Custom styles for the Heremans Interieur website.
   Note: Tailwind CSS classes are the primary styling mechanism.
         This file is for specific overrides or additions.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Hero Section Background
   - Applies a semi-transparent dark overlay and a background image.
   - The image URL points to an external source (Unsplash).
   - 'background-size: cover' ensures the image fills the area.
   - 'background-position: center' centers the image.
   -------------------------------------------------------------------------- */
.hero-image {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('../images/hero-background.jpg');
    background-size: cover;
    background-position: center;
}

/* --------------------------------------------------------------------------
   Gallery Item Hover Effect
   - Adds a smooth transition for visual changes.
   - Scales the item up slightly when hovered over.
   -------------------------------------------------------------------------- */
.gallery-item {
    transition: all 0.3s ease; /* Smooth transition for any property change */
}

.gallery-item:hover {
    transform: scale(1.03); /* Scale the item to 103% of its original size */
}

/* --------------------------------------------------------------------------
   Contact Form Input Styling
   - Styles for text inputs and textareas within the contact form.
   - Adds a semi-transparent white background.
   - Sets a bottom border.
   - Adds a transition for hover/focus effects.
   -------------------------------------------------------------------------- */
.contact-form input,
.contact-form textarea {
    background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent white */
    border-bottom: 2px solid #555; /* Dark grey bottom border */
    transition: all 0.3s ease; /* Smooth transition for changes */
}

/* --------------------------------------------------------------------------
   Contact Form Input Focus State
   - Changes the background slightly when the input is focused.
   - Changes the bottom border color to black when focused.
   -------------------------------------------------------------------------- */
.contact-form input:focus,
.contact-form textarea:focus {
    background-color: rgba(255, 255, 255, 0.2); /* Slightly less transparent */
    border-bottom-color: #000; /* Black bottom border */
}

/* --------------------------------------------------------------------------
   Lightbox/Modal Styles
   -------------------------------------------------------------------------- */

/* The modal background overlay */
#lightbox-modal {
    display: none; /* Hidden by default */
    /* Positioning and centering handled by Tailwind: fixed, inset-0, z-50, hidden, items-center, justify-center, p-4 */
    /* Background color handled by Tailwind: bg-black bg-opacity-50 */
}

/* Show the modal when the 'hidden' class is removed */
#lightbox-modal:not(.hidden) {
    display: flex; /* Use flex to center the main content box */
}

/* Main content box (Image + Controls) */
/* Styles mostly handled by Tailwind classes on the div in HTML:
   relative, w-full, max-w-6xl, h-[90vh], bg-stone-100, rounded-lg, shadow-2xl, overflow-hidden, flex, flex-col, md:flex-row
*/

/* --- IMAGE AREA --- */
/* The container for the main image */
/* Styles mostly handled by Tailwind classes on the div in HTML:
   relative, w-full, md:w-3/4, h-1/2, md:h-full, flex-shrink-0
*/

/* The main image itself */
#lightbox-image {
    /* Width and height handled by Tailwind: w-full, h-full */
    /* Ensure the whole image is visible: object-contain */
    object-fit: contain;
    /* Background color for transparency */
    background-color: #f5f5f4; /* Tailwind stone-100 or slightly darker */
    /* Rounded corners (optional, might clash with parent) */
    /* border-radius: 0.25rem; */ /* Tailwind rounded - if needed */
}

/* --- CONTROLS AND INFO AREA --- */
/* The container for controls and info */
/* Styles mostly handled by Tailwind classes on the div in HTML:
   w-full, md:w-1/4, h-1/2, md:h-full, flex, flex-col, justify-between, p-4
*/

/* --- CLOSE BUTTON --- */
/* Positioned within the controls area */
#lightbox-close {
    /* Basic styling handled by Tailwind: text-gray-600, hover:text-gray-900, text-2xl */
    /* Optional: Add padding or background if needed */
    padding: 0.25rem; /* Tailwind p-1 */
    cursor: pointer;
    /* If you still want it hidden, add 'hidden' or 'invisible' class in HTML */
}

/* --- NAVIGATION ARROWS --- */
/* Styles mostly handled by Tailwind classes on the buttons in HTML:
   text-gray-700, bg-gray-200, hover:bg-gray-300, rounded-full, w-12, h-12,
   flex, items-center, justify-center, text-2xl, transition, transform, hover:scale-105, focus:outline-none
*/
/* Container for arrows to stack them and center */
/* Styles mostly handled by Tailwind classes on the parent div in HTML:
   flex, flex-col, items-center, justify-center, space-y-8, my-auto
*/

#lightbox-prev, #lightbox-next {
    /* Make sure display is not overridden to none */
    display: flex !important; /* Use !important to force flex display */
    /* Ensure opacity is full */
    opacity: 1 !important;
    /* Visibility should be visible */
    visibility: visible !important;
    /* If you added custom colors in previous steps, make sure they are specific enough */
    /* color: #4a5568; */ /* Example: gray-700 */
    /* background-color: #e2e8f0; */ /* Example: gray-200 */
}

/* --- CAPTION AND INDICATORS --- */
/* Container for caption and indicators (bottom of controls area) */
/* Styles partly handled by Tailwind classes on the parent div in HTML: mt-auto */

#lightbox-caption {
    /* Styling handled by Tailwind: text-gray-800, text-center, font-serif, font-semibold, text-lg, mb-4 */
    /* Ensure it wraps nicely */
    word-break: break-word;
}

/* Indicators container */

/* Style for individual indicator dots */
.indicator-dot {
    /* Size */
    width: 12px;
    height: 12px;
    /* Shape */
    border-radius: 9999px; /* Tailwind rounded-full */
    /* Default color (inactive state) - Medium grey */
    background-color: #9ca3af; /* Tailwind gray-400 */
    /* Transition for smooth color change */
    transition: background-color 0.3s ease;
    /* Cursor */
    cursor: pointer;
}

/* Style for the active indicator dot */
.indicator-dot.active {
    /* Active color - Dark grey/Black */
    background-color: #1f2937; /* Tailwind gray-900 */
}

/* --- END OF LIGHTBOX STYLES --- */