/**
 * Complete Visibility Fixes - No More Hidden Content
 * Emergency stylesheet to ensure ALL content displays properly
 *
 * @package WaseemNasirLuxury
 * @since 1.0.3
 */

/* ============================================
   CRITICAL: FORCE ALL CONTENT VISIBLE
   ============================================ */

/* Remove ALL opacity:0 that could hide content */
[data-animate],
[data-animate="fade-up"],
[data-animate="fade-in"],
[data-animate="fade-right"],
[data-animate="scale"],
[data-animate="stagger"],
[data-animate="split-text"],
[data-animate="horizontal-scroll"] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* Force hero elements visible */
.hero-eyebrow,
.hero-name,
.hero-role,
.hero-roles,
.hero-metrics,
.hero-statement,
.hero-ctas,
.metric-item,
.metric-value,
.metric-label {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    animation: none !important;
}

/* Force section headers visible */
.section-header,
.section-title,
.section-subtitle,
.divider {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Force all cards visible */
.card-premium,
.expertise-card,
.project-card,
.insight-card,
.testimonial-card,
.contact-card,
.pricing-card,
.service-item,
.faq-item {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* Force all text visible */
.expertise-title,
.expertise-description,
.project-title,
.project-description,
.insight-title,
.insight-excerpt,
.testimonial-quote,
.author-name,
.author-role,
.author-company,
.service-name,
.service-description,
.faq-question,
.faq-answer,
.skynetlabs-title,
.skynetlabs-description,
.pricing-title,
.pricing-description,
.contact-title,
.contact-description {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Force navigation visible */
.main-navigation {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
}

/* Force footer visible */
.site-footer,
.footer-content,
.footer-branding,
.footer-links,
.footer-copyright {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Force authority strip visible */
.authority-strip,
.authority-tag {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Force buttons visible */
.btn-primary,
.btn-secondary,
.nav-cta {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Force icons visible */
.expertise-icon,
.project-icon,
.quote-icon,
.pricing-icon,
.contact-icon,
.faq-icon {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Force all sections visible */
.hero-section,
.about-section,
.expertise-section,
.projects-section,
.insights-section,
.services-section,
.testimonials-section,
.skynetlabs-section,
.faqs-section,
.pricing-section,
.contact-section {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ============================================
   NO-JS FALLBACK (works without JavaScript)
   ============================================ */
.no-js * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* ============================================
   SMOOTH ANIMATIONS (only when JS works)
   ============================================ */
.js [data-animate] {
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* ============================================
   EMPTY STATE STYLING
   ============================================ */
.no-projects,
.no-testimonials,
.no-articles,
.no-faqs {
    text-align: center;
    padding: 4rem 2rem;
    color: hsl(45, 20%, 60%);
    font-size: 1.125rem;
    background: hsl(240, 10%, 6%);
    border: 1px dashed hsl(240, 8%, 20%);
    border-radius: 0.25rem;
    margin: 2rem auto;
    max-width: 600px;
}

/* ============================================
   PROJECT TECHNOLOGIES FIX
   ============================================ */
.project-technologies {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tech-tag {
    display: inline-block;
    background: hsl(240, 8%, 15%);
    color: hsl(45, 30%, 94%);
    padding: 0.375rem 0.75rem;
    border-radius: 0.125rem;
    font-size: 0.75rem;
}

/* ============================================
   HORIZONTAL SCROLL FIX
   ============================================ */
.projects-horizontal {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: hsl(42, 75%, 55%) hsl(240, 10%, 10%);
}

.projects-horizontal::-webkit-scrollbar {
    height: 8px;
}

.projects-horizontal::-webkit-scrollbar-track {
    background: hsl(240, 10%, 10%);
}

.projects-horizontal::-webkit-scrollbar-thumb {
    background: hsl(42, 75%, 55%);
    border-radius: 4px;
}

.horizontal-scroll-wrapper {
    display: flex;
    gap: 2rem;
    padding: 1rem 0 2rem;
}

.project-card {
    flex: 0 0 auto;
    min-width: 400px;
    max-width: 500px;
    scroll-snap-align: start;
}

/* Mobile: Stack vertically */
@media (max-width: 768px) {
    .horizontal-scroll-wrapper {
        flex-direction: column;
    }

    .project-card {
        min-width: 100%;
        max-width: 100%;
    }
}

/* ============================================
   INSIGHT CARDS FIX
   ============================================ */
.insight-card {
    position: relative;
    padding: 2.5rem;
}

.insight-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ============================================
   FAQ ACCORDION VISIBLE BY DEFAULT
   ============================================ */
.faq-answer {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    padding: 0;
}

.faq-answer[hidden] {
    display: none;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding: 0 0 2rem;
}

.faq-question[aria-expanded="true"]+.faq-answer {
    display: block;
    max-height: 500px;
    padding: 0 0 2rem;
}

/* Fix for when hidden attribute is removed */
.faq-answer:not([hidden]) {
    display: block;
    max-height: 500px;
    padding: 0 0 2rem;
}

/* ============================================
   SERVICES GRID FIX
   ============================================ */
.services-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
}

@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* ============================================
   TESTIMONIALS GRID FIX
   ============================================ */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* ============================================
   EXPERTISE BENTO FIX
   ============================================ */
.expertise-bento {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

/* ============================================
   INSIGHTS GRID FIX
   ============================================ */
.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* ============================================
   CONTACT GRID FIX
   ============================================ */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

/* ============================================
   SKYNETLABS SECTION FIX
   ============================================ */
.skynetlabs-content {
    position: relative;
    z-index: 2;
}

.skynetlabs-cta {
    margin-top: 2rem;
}

/* ============================================
   MOBILE RESPONSIVENESS
   ============================================ */
@media (max-width: 768px) {
    .hero-metrics {
        flex-direction: column;
        gap: 2rem;
    }

    .hero-ctas {
        flex-direction: column;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .about-grid {
        grid-template-columns: 1fr;
    }

    .expertise-bento {
        grid-template-columns: 1fr;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .footer-content {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }

    .footer-links {
        justify-content: center;
    }
}

/* ============================================
   PREFERS REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}