/* ══════════════════════════════════════════════════════
   Abris Mondial — Shared Navigation & Layout CSS
   Single source of truth: edit HERE, all pages update.
   ══════════════════════════════════════════════════════ */

/* Mega menu (Residential dropdown) */
.mega-trigger { position: relative; }
.mega-menu {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(8px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 100; min-width: 780px;
}
.mega-trigger:hover .mega-menu,
.mega-menu:hover {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.mega-col-link {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0.75rem; border-radius: 0.5rem;
    font-size: 0.8125rem; font-weight: 600; color: #6C757D;
    transition: all 0.15s; text-transform: none; letter-spacing: 0;
}
.mega-col-link:hover { background: #FEF2F2; color: #E63946; }
.mega-featured {
    border-radius: 1.25rem; overflow: hidden;
    position: relative; aspect-ratio: 16/9;
}
/* Right-aligned mega menu (for items near right edge of nav) */
.mega-menu.mega-menu-right {
    left: auto; right: -80px;
    transform: translateX(0) translateY(8px);
}
.mega-trigger:hover .mega-menu.mega-menu-right,
.mega-menu.mega-menu-right:hover {
    transform: translateX(0) translateY(0);
}

.mega-featured img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s;
}
.mega-featured:hover img { transform: scale(1.05); }

/* Commercial dropdown */
.commercial-dropdown {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(8px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
    z-index: 100; min-width: 280px;
}
.mega-trigger:hover .commercial-dropdown,
.commercial-dropdown:hover {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Mobile menu */
.mobile-menu {
    position: fixed; inset: 0; z-index: 200;
    background: white;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-overlay {
    position: fixed; inset: 0; z-index: 199;
    background: rgba(0,0,0,0.4);
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.mobile-menu-overlay.open { opacity: 1; visibility: visible; }
.mobile-accordion-content {
    max-height: 0; overflow: hidden;
    transition: max-height 0.35s ease;
}
.mobile-accordion-content.open { max-height: 600px; }

/* Scroll reveal animations */
.reveal {
    opacity: 0; transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }