/* Mobile Homepage Enhancements */
/* This file contains mobile-specific styles that enhance the homepage experience */
/* All styles use media queries to ensure they only apply to mobile devices */

/* Mobile-only styles - applies to screens 768px and below */
@media only screen and (max-width: 768px) {
    
    /* FORCE NAVBAR VISIBILITY - CLEAN VERSION */
    header {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 10000 !important;
        opacity: 1 !important;
        visibility: visible !important;
        background-color: var(--primary-color) !important;
        height: auto !important;
        min-height: 70px !important;
    }
    
    /* Clean navbar styling */
    .navbar {
        display: flex !important;
        z-index: 10001 !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background-color: var(--primary-color) !important;
        padding: 25px 5% !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
        justify-content: space-between !important;
        align-items: center !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
        min-height: 70px !important;
    }
    
    /* Menu toggle (hamburger) positioned on the left */
    .menu-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
        order: 1 !important;
        z-index: 10015 !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 30px !important;
        height: 30px !important;
        cursor: pointer !important;
        background: none !important;
        border: none !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Logo centered properly */
    .logo {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10002 !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
        width: auto !important;
        order: 2 !important;
        flex-shrink: 0 !important;
    }
    
    /* Logo image clean styling */
    .logo img {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        max-height: 50px !important;
        width: auto !important;
        height: auto !important;
    }
    
    /* Hide Inquire button completely on mobile */
    .quote-button {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    /* Add spacer to balance navbar layout */
    .navbar::after {
        content: "" !important;
        display: block !important;
        width: 30px !important;
        height: 30px !important;
        order: 3 !important;
        flex-shrink: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    .menu-toggle span {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 25px !important;
        height: 3px !important;
        background-color: white !important;
        margin: 3px 0 !important;
        transition: 0.3s !important;
        border-radius: 0 !important;
        position: relative !important;
        flex-shrink: 0 !important;
    }
    
    /* Make sure hamburger lines are stacked properly */
    .menu-toggle span:nth-child(1),
    .menu-toggle span:nth-child(2),
    .menu-toggle span:nth-child(3) {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Hero Section Mobile Optimizations */
    .hero {
        height: 100vh; /* Full viewport height on mobile */
        min-height: 600px; /* Ensure minimum height */
        position: relative;
        z-index: 1 !important; /* Lower than navbar */
        margin-top: 0 !important; /* Remove any top margin */
    }
    
    /* Hide hero text overlay on mobile */
    .hero-content {
        display: none !important;
    }
    
    /* Create new hero text section below video */
    .hero-text-mobile {
        display: block !important; /* Show on mobile */
        padding: 60px 20px;
        background-color: var(--primary-color);
        color: white;
        text-align: center;
    }
    
    .hero-text-mobile h1 {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 15px;
        color: white;
        line-height: 1.2;
    }
    
    .hero-text-mobile p {
        font-size: 1.1rem;
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 0;
        line-height: 1.4;
        max-width: 600px;
        margin: 0 auto;
    }
    
    /* Services Section Mobile Layout */
    .services {
        padding: 60px 0;
        display: block !important;
    }
    
    .services-container {
        flex-direction: column;
        gap: 30px;
        padding: 0 20px;
        display: flex !important;
    }
    
    .service-item {
        height: auto;
        min-height: 400px;
        border-radius: 0; /* Remove rounded edges */
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        display: block !important;
    }
    
    .service-image-container {
        height: 250px;
        overflow: hidden;
        display: block !important;
    }
    
    .service-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .service-item:hover .service-image {
        transform: scale(1.05);
    }
    
    .service-title {
        font-size: 1.4rem;
        margin: 20px 0 8px 0;
        padding: 0 20px;
    }
    
    .service-subtitle {
        font-size: 1rem;
        padding: 0 20px 20px 20px;
        color: #666;
    }
    
    /* About Section Mobile Layout */
    .about {
        padding: 60px 20px;
    }
    
    .process-content-container {
        flex-direction: column;
        gap: 40px;
    }
    
    .process-text {
        order: 1;
        text-align: center;
    }
    
    .process-image {
        order: 2;
        text-align: center;
    }
    
    .process-image img {
        max-width: 100%;
        height: auto;
        border-radius: 0; /* Remove rounded edges */
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .process-title {
        font-size: 2.2rem;
        margin-bottom: 20px;
        text-align: center;
    }
    
    .process-lead {
        font-size: 1.1rem;
        margin-bottom: 20px;
        line-height: 1.5;
    }
    
    .process-text p {
        font-size: 1rem;
        margin-bottom: 15px;
        line-height: 1.6;
    }
    
    /* Portfolio Section Mobile */
    .portfolio-section {
        padding: 60px 20px;
        display: block !important;
    }
    
    .portfolio-header {
        text-align: center;
        margin-bottom: 30px;
    }
    
    .portfolio-title {
        font-size: 2rem;
        margin-bottom: 15px;
    }
    
    .portfolio-showcase {
        text-align: center;
        display: block !important;
    }
    
    .portfolio-image {
        max-width: 100%;
        height: auto;
        border-radius: 0; /* Remove rounded edges */
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* What We Do Section Mobile Grid */
    .what-we-do-section {
        padding: 60px 20px;
        display: block !important;
    }
    
    .what-we-do-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        align-items: center !important;
    }
    
    .what-we-do-box {
        width: 100% !important;
        max-width: 400px !important;
        min-width: auto !important;
        margin: 0 !important;
        display: block !important;
    }
    
    .what-we-do-image {
        height: 200px !important;
        border-radius: 0 !important; /* Remove rounded edges */
        display: block !important;
        overflow: hidden !important;
    }
    
    .what-we-do-image img {
        border-radius: 0 !important; /* Remove rounded edges */
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    /* Where We Work Section Mobile */
    .where-we-work-section {
        padding: 60px 20px;
        display: block !important;
    }
    
    .where-we-work-title {
        font-size: 2rem;
        text-align: center;
        margin-bottom: 20px;
    }
    
    .where-we-work-button-container {
        text-align: center;
        margin-bottom: 40px;
    }
    
    .cities-gallery-container {
        overflow-x: auto;
        padding-bottom: 10px;
        display: block !important;
    }
    
    .cities-gallery {
        display: flex;
        gap: 20px;
        padding: 0 10px;
        min-width: max-content;
    }
    
    .city-item {
        flex-shrink: 0;
        width: 200px;
        text-align: center;
        display: block !important;
    }
    
    .city-image {
        width: 100%;
        height: 150px;
        object-fit: cover;
        border-radius: 0; /* Remove rounded edges */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .city-name {
        margin-top: 10px;
        font-size: 0.9rem;
        font-weight: 500;
        color: #333;
    }
    
    /* Footer Mobile Improvements */
    .footer-container {
        padding: 40px 20px;
        text-align: center;
        display: block !important;
    }
    
    .footer-column {
        margin-bottom: 30px;
    }
    
    .footer-logo img {
        max-height: 60px;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .footer-social {
        justify-content: center;
        gap: 20px;
        display: flex !important;
    }
    
    .social-logo {
        width: 24px;
        height: 24px;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Ensure all images are visible on mobile and remove rounded edges */
    img {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        border-radius: 0 !important; /* Remove all rounded edges from images */
    }
    
    /* Remove rounded edges from any containers */
    * {
        border-radius: 0 !important;
    }
    
    /* Ensure all sections are visible */
    section {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Ensure header and nav are visible */
    header {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    nav {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Override any hiding styles */
    header *,
    nav *,
    .navbar *,
    .logo *,
    .menu-toggle * {
        opacity: 1 !important;
        visibility: visible !important;
        display: inherit !important;
    }
    
    /* Force navbar elements to show */
    .navbar,
    .navbar .logo,
    .navbar .menu-toggle,
    .navbar .logo img {
        transform: none !important;
        clip-path: none !important;
        mask: none !important;
        filter: none !important;
    }
    
    /* Make sure main content is visible and doesn't overlap navbar */
    main {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin-top: 70px !important; /* Push content below fixed navbar */
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Ensure body content shows */
    body {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Additional Photo Section Mobile */
    .additional-photo-section {
        padding: 60px 20px;
        display: block !important;
    }
    
    .additional-photo-container {
        display: block !important;
    }
    
    .additional-photo-showcase {
        text-align: center;
        display: block !important;
    }
    
    .additional-photo-image {
        max-width: 100%;
        height: auto;
        border-radius: 0; /* Remove rounded edges */
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Navigation Mobile Enhancements - Full Screen Coverage */
    .sidenav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background-color: var(--primary-color) !important;
        z-index: 10010 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        padding: 80px 20px 20px 20px !important;
        overflow-y: auto !important;
    }
    
    .sidenav.active {
        transform: translateX(0) !important;
    }
    
    /* Ensure nav overlay covers everything when active */
    .nav-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
        z-index: 10005 !important;
        display: none !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
    }
    
    .nav-overlay.active {
        display: block !important;
        opacity: 1 !important;
    }
    
    /* Style nav links for full screen */
    .nav-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        margin-bottom: 40px !important;
    }
    
    .nav-links a {
        font-size: 1.2rem !important;
        padding: 20px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: white !important;
        text-decoration: none !important;
        transition: background-color 0.3s ease !important;
    }
    
    .nav-links a:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
        padding-left: 10px !important;
    }
    
    /* Contact info styling in mobile nav */
    .sidenav-contact-info {
        margin: 40px 0 30px 0 !important;
        text-align: center !important;
    }
    
    .sidenav-contact-info a {
        color: white !important;
        font-size: 1.1rem !important;
        display: block !important;
        margin-bottom: 10px !important;
        text-decoration: none !important;
    }
    
    /* Social icons in mobile nav */
    .sidenav-social {
        gap: 20px !important;
        margin-top: 30px !important;
        justify-content: center !important;
    }
    
    .sidenav-social .social-icon {
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
        border-radius: 0 !important; /* Remove rounded edges */
        transition: background-color 0.3s ease !important;
    }
    
    .sidenav-social .social-icon:hover {
        background-color: rgba(255, 255, 255, 0.2) !important;
    }
    
    .sidenav-social .social-logo {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Customer login button in mobile nav */
    .customer-login-btn {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: white !important;
        padding: 15px 20px !important;
        border-radius: 0 !important; /* Remove rounded edges */
        text-align: center !important;
        display: block !important;
        margin-top: 30px !important;
        text-decoration: none !important;
        font-size: 1rem !important;
        transition: background-color 0.3s ease !important;
    }
    
    .customer-login-btn:hover {
        background-color: rgba(255, 255, 255, 0.2) !important;
    }
}

/* Extra small devices (phones, up to 576px) */
@media only screen and (max-width: 576px) {
    
    /* Even more compact on small phones */
    .hero-text-mobile h1 {
        font-size: 2rem;
    }
    
    .hero-text-mobile p {
        font-size: 1rem;
    }
    
    .hero-text-mobile {
        padding: 40px 15px;
    }
    
    .service-item {
        min-height: 350px;
    }
    
    .service-image-container {
        height: 200px;
    }
    
    .what-we-do-image {
        height: 150px !important;
    }
    
    /* Ensure images remain visible on small screens */
    img {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .city-item {
        width: 150px;
    }
    
    .city-image {
        height: 120px;
    }
    
    .process-title {
        font-size: 1.8rem;
    }
    
    .portfolio-title {
        font-size: 1.8rem;
    }
    
    .where-we-work-title {
        font-size: 1.8rem;
    }
}

/* Landscape orientation optimizations for mobile */
@media only screen and (max-width: 768px) and (orientation: landscape) {
    .hero {
        height: 100vh;
    }
    
    .hero-text-mobile {
        padding: 30px 15px;
    }
    
    .hero-text-mobile h1 {
        font-size: 2rem;
    }
    
    .hero-text-mobile p {
        font-size: 0.95rem;
    }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
    /* Styles for touch devices */
    .service-item,
    .city-item,
    .what-we-do-box {
        cursor: pointer;
    }
    
    .cta-button {
        min-height: 44px; /* Apple's recommended touch target size */
        padding: 12px 20px;
    }
    
    .nav-links a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}