/* ============================================================
   VALLEYIN Shell (shell.css)
   - Loaded on EVERY page (including TOP / Reactor dark pages)
   - Contains: sitemap footer, image slots, nav image fallback
   ============================================================ */
:root { --font-en: 'Manrope', 'Michroma', sans-serif; --accent-cyan: #00e5ff; }

/* ---------- Mobile nav overlay fix ----------
   backdrop-filter on <header> creates a containing block for the
   position:fixed <nav>, clipping the full-screen menu to 80px.
   Disable it on mobile so the overlay can cover the viewport. */
@media (max-width: 768px) {
    header {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        overflow: visible !important;
        transform: none !important;
        filter: none !important;
    }
    body.menu-open header { background: transparent !important; border-bottom: 0 !important; }
    /* keep logo / hamburger (z 10001) above the overlay */
    html body header nav, html body header nav.active { z-index: 9990 !important; }
    /* flex column must not shrink items: the dropdown was being squashed */
    html body header nav .nav-menu { padding: 0 1.5rem 60px 1.5rem !important; box-sizing: border-box; }
    html body header .nav-item { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; }
    /* style.css sets height:100% for desktop; on mobile the column would stretch */
    html body header .nav-item > a { height: auto !important; }
    .dropdown { max-height: none !important; overflow: visible !important; }
    .dropdown .mega-item { padding: 0.8rem 0 !important; }
    .mega-title { font-size: 1rem !important; }
    .mega-desc { display: none !important; }
}

/* ---------- Image slot (to be filled by image AI) ---------- */
.img-slot {
    margin: 0;
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: linear-gradient(135deg, #dbe7f5 0%, #eef3f9 100%);
    aspect-ratio: 16 / 9;
    border: 1px solid var(--border-light);
}
.img-slot.ratio-4-3 { aspect-ratio: 4 / 3; }
.img-slot.ratio-1-1 { aspect-ratio: 1 / 1; }
.img-slot.ratio-3-4 { aspect-ratio: 3 / 4; }
.img-slot.ratio-21-9 { aspect-ratio: 21 / 9; }
.img-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.img-slot:hover img { transform: scale(1.03); }
/* When image file is missing, show the slot id (dev aid) */
.img-slot.is-missing img { display: none; }
.img-slot.is-missing::after {
    content: attr(data-image-id);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-en);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: rgba(0, 88, 165, 0.55);
    border: 2px dashed rgba(0, 88, 165, 0.25);
    border-radius: inherit;
    text-transform: uppercase;
}
.img-slot.dark-frame { border-color: rgba(255,255,255,0.12); background: linear-gradient(135deg, #10203a 0%, #0b0f17 100%); }
.img-slot.dark-frame.is-missing::after { color: rgba(0,229,255,0.6); border-color: rgba(0,229,255,0.3); }

/* ---------- Footer (sitemap) ---------- */
footer.site-footer {
    background: #000 !important;
    color: #fff !important;
    padding: 72px 24px 32px;
    border-top: 1px solid #222;
}
.footer-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr repeat(4, 1fr);
    gap: 40px;
}
.footer-brand .footer-logo { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0.05em; color: #fff !important; margin-bottom: 14px; }
.footer-brand h3 { font-family: var(--font-main); text-transform: none; letter-spacing: 0; font-size: 1rem; margin-bottom: 8px; color: #fff !important; }
.footer-brand p { font-size: 0.85rem; color: rgba(255,255,255,0.6) !important; line-height: 1.8; }
.footer-col h4 { font-family: var(--font-en); font-size: 0.75rem; letter-spacing: 0.2em; color: rgba(255,255,255,0.5) !important; margin-bottom: 16px; text-transform: uppercase; }
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-col a { color: rgba(255,255,255,0.85) !important; font-size: 0.9rem; text-decoration: none; }
.footer-col a:hover { color: var(--accent-cyan) !important; }
.footer-bottom {
    max-width: 1200px;
    margin: 48px auto 0;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.12);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5) !important;
}
.footer-bottom a { color: rgba(255,255,255,0.7) !important; }
footer.site-footer * { text-shadow: none !important; }
@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* Mega menu image fallback frame */
.mega-image { background-color: #0b0f17; }