/*
Theme Name: DNA Infotel
Description: Mobile optimizations & Sticky Footer Logic
*/

/* -----------------------------------------------------------
   1. UTILITY: HIDE/SHOW LOGIC
----------------------------------------------------------- */
.mobile-only { display: none !important; }
.desktop-only { display: block !important; }

/* -----------------------------------------------------------
   2. TABLET & MOBILE BREAKPOINTS (max-width: 1024px)
----------------------------------------------------------- */
@media (max-width: 1024px) {
    :root {
        --container-width: 90%;
    }
    
    .package-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 cols on tablet */
    }
}

/* -----------------------------------------------------------
   3. MOBILE PHONES (max-width: 768px)
----------------------------------------------------------- */
@media (max-width: 768px) {
    
    /* Toggle Visibility */
    .mobile-only { display: block !important; }
    .desktop-only { display: none !important; } /* Hides Desktop Header & Footer */

    :root {
        --header-height: 70px;
    }

    body {
        /* Add padding to bottom so content isn't covered by sticky footer */
        padding-bottom: 80px; 
    }

    /* --- MOBILE HEADER --- */
    #site-header {
        background: rgba(10, 15, 30, 0.95); /* More solid on mobile */
    }

    .mobile-menu-toggle {
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .mobile-menu-toggle span {
        display: block;
        width: 30px;
        height: 2px;
        background: var(--dna-accent-cyan);
        transition: 0.3s;
    }

    /* --- HERO SECTION --- */
    #hero-slider {
        height: 80vh; /* Slightly smaller on mobile */
    }

    .hero-content-overlay {
        width: 90%;
        bottom: 10%;
    }

    .hero-content-overlay h1 {
        font-size: 2.5rem;
        line-height: 1.1;
    }

    .hero-content-overlay p {
        font-size: 1.1rem;
    }

    /* --- PACKAGES GRID --- */
    .package-grid {
        grid-template-columns: 1fr; /* 1 col on phone */
        gap: 20px;
    }

    .package-card {
        padding: 30px 20px;
    }

    /* --- CONTACT PAGE --- */
    .contact-page {
        grid-template-columns: 1fr !important; /* Stack form below info */
        padding: 100px 5% 50px !important;
    }

    /* -----------------------------------------------------------
       4. MOBILE STICKY FOOTER (THE APP FEEL)
    ----------------------------------------------------------- */
    .mobile-sticky-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 70px;
        background: #0A0F1E; /* Solid dark background */
        border-top: 1px solid var(--dna-accent-cyan); /* Cyan top border line */
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        z-index: 9999;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.5);
    }

    .m-footer-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 11px;
        font-weight: 500;
        border-right: 1px solid rgba(255,255,255,0.1);
        transition: background 0.2s;
    }

    .m-footer-item:last-child {
        border-right: none;
    }

    .m-footer-item:active {
        background: rgba(0, 242, 255, 0.1);
    }

    /* Icons (using Dashicons or SVGs) */
    .m-footer-item i {
        font-size: 22px;
        margin-bottom: 4px;
        color: var(--dna-accent-cyan);
    }

    /* Specific Styles for Buttons */
    .m-footer-item[href*="tel"] {
        background: var(--dna-accent-cyan);
        color: var(--dna-deep-space);
    }
    
    .m-footer-item[href*="tel"] i {
        color: var(--dna-deep-space);
    }
}