/* 
    Soul Connect — Responsive Design System 
    Consolidated responsiveness for all pages
*/

:root {
    --mobile-padding: 24px;
    --tablet-padding: 40px;
}

.menu-toggle {
    display: none;
}

.nav-links {
    display: none;
}

/* --- Global Adjustments --- */
@media (max-width: 1024px) {
    body {
        cursor: auto !important;
    }

    #cursor-ring,
    #cursor-dot,
    .cursor-dot,
    .cursor-outline {
        display: none !important;
    }

    nav,
    #site-header {
        padding: 15px var(--mobile-padding) !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .nav-logo,
    .nav-center .logo-text {
        font-size: 16px !important;
        margin: 0 !important;
    }

    .nav-center {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .nav-links {
        gap: 20px !important;
    }

    /* Hamburger Button */
    .menu-toggle {
        display: flex !important;
        flex-direction: column;
        gap: 6px;
        cursor: pointer;
        z-index: 1001;
    }

    .menu-toggle span {
        display: block;
        width: 25px;
        height: 2px;
        background: var(--deep);
        transition: 0.3s;
        position: relative;
    }

    /* Light color for dark backgrounds */
    nav:not(.scrolled) .menu-toggle span,
    #site-header .menu-toggle span {
        background: #6a5848 !important;
        /* fallback for index.html */
    }

    nav:not(.scrolled) .nav-logo {
        color: #fff !important;
    }

    .nav-links.mobile-active {
        right: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .logo_soul {
        width: 150px !important;
    }

    .menu-toggle.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* Section Paddings */
    section,
    .about-section,
    .services-section,
    .philosophy-section,
    .stats-section,
    .partners-section,
    .strategic-section,
    .usp-section,
    .reviews-section,
    .contact-container,
    .mvs-section,
    .journey-section,
    .destinations-section {
        padding: 60px var(--mobile-padding) !important;
    }

    /* Footer Adjustments */
    footer {
        padding: 80px var(--mobile-padding) 40px !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .footer-logo {
        font-size: clamp(50px, 12vw, 100px) !important;
        gap: 15px !important;
        margin-bottom: 40px !important;
    }

    .footer-bg-text {
        font-size: 150px !important;
    }
}

/* --- Navigation for Mobile --- */
@media (max-width: 768px) {
    /* Handle different nav structures */

    /* Structure 1: .nav-links */
    .nav-links {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        width: 100% !important;
        height: 100vh !important;
        background: #f5f0e8 !important;
        /* --cream */
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        transition: 0.5s cubic-bezier(0.7, 0, 0.3, 1) !important;
        z-index: 1000 !important;
        display: flex !important;
        opacity: 0 !important;
        visibility: hidden !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 30px !important;
    }

    .nav-links.mobile-active {
        right: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .nav-links li {
        margin: 0 !important;
    }

    .nav-links a {
        font-size: 24px !important;
        letter-spacing: 0.2em !important;
        color: var(--deep) !important;
        text-decoration: none !important;
    }

    .menu-toggle.active span {
        background: var(--deep) !important;
    }

    /* Structure 2: index.html specific nav */
    #site-header {
        flex-direction: row !important;
        justify-content: space-between !important;
    }

    #site-header .nav-left,
    #site-header .nav-right {
        display: none;
        /* Hide for now, can be added to mobile menu */
    }

    #site-header .nav-center .logo-text {
        font-size: 14px !important;
        letter-spacing: 4px !important;
    }

    /* Adding a mobile menu button via CSS (needs a bit of help from JS or HTML) */
}

/* --- Hero Sections --- */
@media (max-width: 768px) {

    .hero-title,
    .heroTitle,
    .about-hero .hero-title,
    .services-hero .hero-title,
    .portfolio-hero .hero-title,
    .contact-hero .hero-title {
        font-size: clamp(40px, 12vw, 80px) !important;
    }

    .contact-hero {
        margin-top: 100px;
        height: 30vh !important;
    }

    .about-hero {
        margin-top: 50px;
    }

    .hero-sub,
    .heroSubtitle,
    .hero-label {
        font-size: 10px !important;
        letter-spacing: 0.3em !important;
    }

    #center-text {
        top: 40% !important;
        width: 90vw !important;
    }

    #headline-wrap {
        height: 150px !important;
    }

    .headline-item .hl-text {
        font-size: 24px !important;
    }
}

/* --- Grid Systems --- */
@media (max-width: 1024px) {

    .stats-grid,
    .partners-grid,
    .strategic-inner,
    .usp-grid,
    .contact-container,
    .mvs-grid,
    .about-inner,
    .services-grid,
    .destinations-strip {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .service-main {
        grid-template-columns: 1fr !important;
        gap: 0px !important;
        padding: 0 30px !important;
    }

    .service-item:nth-child(even) .service-main {
        direction: ltr !important;
    }

    .service-item {
        padding: 50px 0 !important;
    }

    .service-sub-media {
        grid-template-columns: 1fr !important;
        margin-top: 30px !important;
        padding: 0 30px !important;
    }

    .sub-media-card.stagger-up,
    .sub-media-card.stagger-down {
        transform: none !important;
    }
}

/* --- Portfolio Page Specifics --- */
@media (max-width: 1100px) {
    .portfolio-stage {
        grid-template-columns: 1fr !important;
        height: auto !important;
        padding-top: 20px !important;
    }

    .stage-menu {
        border-right: none !important;
        border-bottom: 1px solid var(--line-gold) !important;
        padding: 20px var(--mobile-padding) !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        height: auto !important;
        justify-content: flex-start !important;
    }

    .menu-item {
        font-size: 16px !important;
        padding: 10px 15px !important;
        margin: 0 !important;
    }

    .menu-item.active {
        padding-left: 15px !important;
        border-bottom: 1px solid var(--gold) !important;
    }

    .stage-display {
        padding: 40px 0 !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    .stage-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        width: 100% !important;
    }

    .stage-title {
        font-size: clamp(32px, 8vw, 48px) !important;
        margin-bottom: 10px !important;
        line-height: 1 !important;
    }

    .stage-essence {
        font-size: 1rem !important;
        margin-bottom: 20px !important;
        line-height: 1.4 !important;
    }

    .stage-text {
        max-width: 100% !important;
        text-align: left !important;
    }

    .stage-visual {
        aspect-ratio: 16/10 !important;
        order: -1 !important;
        margin-bottom: 20px !important;
    }

    .venues-wrap {
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        margin-top: 40px !important;
        width: 100% !important;
        padding: 40px 0 !important;
    }

    .venues-container {
        display: flex !important;
        gap: 15px !important;
        overflow-x: auto !important;
        padding-bottom: 15px !important;
        scrollbar-width: none;
    }

    .venues-container::-webkit-scrollbar {
        display: none;
    }

    .venue-card {
        min-width: 260px !important;
    }

    .stage-bg-text {
        display: none !important;
    }
}

/* --- Journey Section --- */
@media (max-width: 768px) {
    .journey-center-line,
    .journey-progress {
        left: 30px !important;
    }
    .journey-step {
        grid-template-columns: 60px 1fr !important;
        gap: 0 !important;
    }
    /* Force explicit placement — overrides the inline
       grid-column:1 / grid-column:3 styles from the template,
       and works regardless of DOM order (odd/even steps) */
    .step-node {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    .step-card {
        grid-column: 2 !important;
        grid-row: 1 !important;
        padding: 24px !important;
    }
    .step-word {
        display: none !important;
    }
}

/* --- Common UI Elements --- */
@media (max-width: 768px) {

    .btn-enquire,
    .submit-btn{
        width: 100% !important;
        justify-content: center !important;
    }

    .stat-item {
        border-right: none !important;
        border-bottom: 1px solid var(--line-gold) !important;
        padding: 40px 20px !important;
    }

    .stat-number {
        font-size: 50px !important;
    }

    .section-title {
        margin-bottom: 40px !important;
    }

    .about-badge {
        width: 100px !important;
        height: 100px !important;
        bottom: -20px !important;
        right: 0 !important;
    }
}

/* --- Forms --- */
@media (max-width: 768px) {
    .contact-form {
        padding: 30px 20px !important;
    }

    .contact-info h3 {
        font-size: 30px !important;
        margin-bottom: 30px !important;
    }
}

/* --- Index.html Overlays --- */
@media (max-width: 768px) {
    #hint {
        display: none !important;
    }

    #award-badge {
        transform: translate(-50%, calc(-50% + 100px)) scale(0.8) !important;
    }

    #sound-toggle {
        right: 20px !important;
        bottom: 20px !important;
    }
}

/* --- Active Navigation Item Styles --- */
.nav-links a.active {
    color: var(--gold) !important;
    font-weight: 500 !important;
}

.nav-links a.active::after {
    width: 100% !important;
}