/* style.css - Dark Mode Menu Logic */

/* =========================================
   1. The Mobile "Checkbox Hack"
   ========================================= */
/* Hide the checkbox input completely */
#mobile-menu-toggle {
    display: none;
}

/* Default State: The menu container is hidden */
#mobile-menu-container {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    /* Smooth slide down animation */
    transition: max-height 0.5s ease-in-out, opacity 0.4s ease-in-out;
    background-color: #111827; /* Gray-900 */
    border-top: 1px solid #1f2937; /* Gray-800 */
}

/* Open State: When checkbox is checked, show the menu */
#mobile-menu-toggle:checked ~ #mobile-menu-container {
    max-height: 2000px; /* Big enough to fit all content */
    opacity: 1;
}

/* =========================================
   2. Desktop Mega Menu Logic
   ========================================= */
/* The dropdown container */
.mega-menu-dropdown {
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.2s ease-in-out;
    pointer-events: none; /* Prevents accidental clicks when hidden */
    
    /* Absolute positioning relative to the header */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: rgba(17, 24, 39, 0.95); /* Gray-900 with slight transparency */
    backdrop-filter: blur(12px);
    border-top: 1px solid #1f2937; /* Gray-800 */
    border-bottom: 1px solid #1f2937;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    z-index: 40;
}

/* Show the menu when hovering over the "Services" button */
.group:hover .mega-menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Keep it visible when hovering the menu itself */
.mega-menu-dropdown:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* =========================================
   3. Custom Utility Classes
   ========================================= */
.text-gradient {
    background: linear-gradient(to right, #22d3ee, #3b82f6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.bg-glass {
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(56, 73, 106, 0.5);
}

/* Hover effect for the dropdown links */
.menu-link {
    position: relative;
    transition: color 0.3s ease;
}
.menu-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: #22d3ee; /* Cyan-400 */
    transition: width 0.3s ease;
}
.menu-link:hover::after {
    width: 100%;
}