/* Dhanvesttor V2 responsive layer — comprehensive */

@media (max-width: 1120px){
    /* Shrink the gaps and fonts slightly so everything fits on a tablet screen */
    .desktop-nav { gap: 12px !important; } 
    .desktop-nav > a, .nav-dropdown-trigger { font-size: 12px !important; } 
    
    /* Keep Investor Login visible, just make it a bit more compact */
    .header-left { display: flex !important; } 
    .login-link { font-size: 12px !important; padding: 0 5px !important; }
    
    /* Shrink the CTA button slightly to save space */
    .header-cta { padding: 0 12px !important; font-size: 11px !important; }
    
    .trust-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 920px){
    /* ============================================== */
    /* 1. ABSOLUTE FORCE OVERRIDE FOR MOBILE NAVBAR   */
    /* ============================================== */
    .site-header, #siteHeader {
        display: block !important; visibility: visible !important;
        opacity: 1 !important; position: relative !important;
        z-index: 99999 !important; width: 100% !important;
    }

    .header-shell {
        display: flex !important; 
        justify-content: flex-start !important; /* HAMBURGER TO LEFT */
        align-items: center !important; background: #f8f3eb !important;
        width: calc(100% - 30px) !important; height: 75px !important; 
        margin: 15px auto 0 !important; padding: 0 20px !important;
        border-radius: 40px !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
        position: relative !important;
        overflow: visible !important; 
    }

    .desktop-nav, .header-cta, .header-left, .brand-text-fallback {
        display: none !important;
    }

    /* BRAND LOGO - MOVED TO THE RIGHT */
    .brand {
        position: absolute !important; 
        left: auto !important; /* Clears the desktop center position */
        right: 25px !important; /* Locks logo to the right */
        top: 50% !important;
        transform: translateY(-50%) !important; /* Centers it vertically */
        display: flex !important; align-items: center !important;
        height: 100% !important; z-index: 9999 !important;
    }

    .brand img {
        max-height: 48px !important; width: auto !important; 
        display: block !important; object-fit: contain !important;
        right: auto !important; /* Removes the old broken right margin */
    }

    /* HAMBURGER MENU - MOVED TO THE LEFT */
    .header-right {
        display: flex !important; align-items: center !important;
        justify-content: flex-start !important; /* Locks to left */
        width: auto !important;
        height: 100% !important;
    }
    
    .menu-toggle { display: flex !important; z-index: 10000 !important; }
    
    /* ============================================== */
    /* FIX: PUSH MOBILE MENU DRAWER TO THE VERY FRONT */
    /* ============================================== */
    #overlay {
        z-index: 999998 !important; 
    }
    #mobileMenu {
        z-index: 999999 !important; 
    }


    /* ============================================== */
    /* 2. PREVENT CONTENT BLEEDING OFF SCREEN         */
    /* ============================================== */
    html, body { overflow-x: hidden !important; }
    .wrap { max-width: 100vw !important; box-sizing: border-box !important; }
    
    .hero-card {
        width: 100% !important; max-width: 100% !important;
        box-sizing: border-box !important; padding: 20px 15px !important; 
    }
    
    .strategy-selector {
        display: flex !important; flex-wrap: wrap !important; 
        gap: 8px !important; justify-content: center !important;
    }
    
    .btn-strat {
        flex: 1 1 auto !important; font-size: 12px !important;
        padding: 8px 10px !important; text-align: center !important;
    }
    
    .chart-container {
        width: 100% !important; max-width: 100% !important; overflow: hidden !important;
    }
    canvas#marketChart { max-width: 100% !important; }


    /* ============================================== */
    /* 3. GENERAL LAYOUT ADJUSTMENTS                  */
    /* ============================================== */
    .hero-grid{grid-template-columns:1fr;gap:35px}
    .hero-copy{max-width:760px}
    .hero-visual{min-height:440px}
    .services-grid{grid-template-columns:1fr 1fr}
    .journey-grid{grid-template-columns:1fr 1fr}
    .about-grid,.faith-grid,.contact-grid{grid-template-columns:1fr}
    .founder-grid{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr 1fr}


    /* ============================================== */
    /* 4. NEW INDEX.PHP COMPONENT STACKS              */
    /* ============================================== */
    .service-cards-container { flex-direction: column; align-items: center; }
    .service-card { width: 100%; max-width: 450px; }
    .founder-content-grid { flex-direction: column; gap: 40px; }
    .philosophy-grid { flex-direction: column; align-items: center; }
    .philosophy-card { width: 100%; max-width: 450px; }
    .vd-slide { width: 240px; height: 320px; }
    .vd-slide.prev-1 { transform: translateX(-50%) scale(0.85); }
    .vd-slide.next-1 { transform: translateX(50%) scale(0.85); }
    .vd-slide.prev-2, .vd-slide.next-2 { opacity: 0; }
    .git-form-row { flex-direction: column; }
}

@media (max-width: 640px){
    .wrap{width:calc(100% - 30px)}
    .hero{min-height:auto;padding:135px 0 65px}
    .hero-copy h1{font-size:48px;letter-spacing:-2px}
    .hero-lead{font-size:16px}
    .hero-actions{flex-direction:column}
    .hero-actions .btn{width:100%}
    .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:18px}
    .hero-stat{padding:0;border:0}
    .hero-stat:last-child{grid-column:1/-1}
    .hero-visual{min-height:350px}
    .hero-card{padding:16px;border-radius:22px}
    .chart{height:205px}
    .float-note{display:none}
    .trust-grid,.services-grid,.journey-grid,.footer-grid{grid-template-columns:1fr}
    .trust-item{border-right:0;border-bottom:1px solid #e5ddd3;padding:20px 0}
    .section{padding:75px 0}
    .section-head h2{font-size:40px}
    .faith-card{grid-template-columns:1fr}
    .faith-art{min-height:270px}
    .contact-form-grid{grid-template-columns:1fr}
    .footer-bottom{flex-direction:column}

    /* Founder font adjustments for small phones */
    .founder-title { font-size: 32px; }
    .founder-image-wrapper { padding: 20px; }
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition:none!important}
}
/* ============================================== */
/* GLASSMORPHISM & FLUID TYPOGRAPHY FOR MENU      */
/* ============================================== */

@media (max-width: 920px) {
    /* 1. Frosted Glass Effect for the Drawer */
    #mobileMenu {
        /* Semi-transparent white background */
        background: rgb(248, 243, 235) !important; 
        
        /* The magic blur effect */
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important; 
        
        /* Subtle glowing border on the left edge */
        border-left: 1px solid rgba(255, 255, 255, 0.6) !important;
        
        /* Softer shadow for glass depth */
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.08) !important;
    }

    /* 2. Fluid Typography for Main Menu Links */
    .mobile-nav-links a, 
    .mobile-dropdown-btn {
        /* clamp(minimum_size, preferred_fluid_size, maximum_size) */
        font-size: clamp(18px, 5vw, 24px) !important;
        transition: color 0.3s ease, transform 0.3s ease !important;
    }

    /* 3. Fluid Typography for the Header/Logo */
    .mobile-header a {
        font-size: clamp(20px, 6vw, 26px) !important;
    }

    /* 4. Fluid Typography for Sub-menu Links */
    .mobile-dropdown-panel a {
        font-size: clamp(15px, 4vw, 18px) !important;
    }

    /* 5. Enhanced Hover & Tap Effects for Glass Menu */
    
    /* First, add padding so the background color has room to show */
    .mobile-nav-links a, 
    .mobile-dropdown-btn {
        padding: 12px 16px !important; 
        border-radius: 8px !important; 
        transition: all 0.3s ease !important;
        display: block !important; /* Ensures the highlight spans the width */
    }
    .mobile-dropdown-btn {
        display: flex !important; /* Keeps the text and '+' sign aligned */
    }
    .mobile-dropdown-panel a {
        padding: 10px 15px !important;
        border-radius: 6px !important;
        display: block !important;
    }

    /* The actual color change when hovering or tapping */
    .mobile-nav-links > a:hover, 
    .mobile-nav-links > a:focus,
    .mobile-dropdown-btn:hover,
    .mobile-dropdown-btn:focus {
        background-color: rgba(207, 106, 59, 0.1) !important; /* Soft rust/orange glass highlight */
        color: #cf6a3b !important;
        transform: translateX(5px) !important; /* Gentle slide */
    }

    /* Slightly different highlight color for the sub-menu items */
    .mobile-dropdown-panel a:hover,
    .mobile-dropdown-panel a:focus {
        background-color: rgba(23, 59, 61, 0.08) !important; /* Soft deep teal highlight */
        color: #173b3d !important;
        transform: translateX(5px) !important;
    }
}