/* Navigation Layout Styles - Alamo City Junk Removal */
/* Extracted from inline styles for better maintainability */

/* Nuclear Testimonial Fix */
/* Super-specific testimonial photo rules to ensure they work in both themes */
.testimonials .testimonial .testimonial-photo {
    width: 200px !important;
    height: 200px !important;
    margin: 0 auto 20px auto !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 4px solid var(--spurs-teal) !important; /* Standard theme default */
}

.testimonials .testimonial .customer-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
}

/* Mobile responsive testimonial photos */
@media (max-width: 600px) {
    .testimonials .testimonial .testimonial-photo {
        width: 120px !important;
        height: 120px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        border: 3px solid var(--spurs-teal) !important;
    }
}

/* Fiesta theme overrides - applied when theme switches */
body.fiesta-theme .testimonials .testimonial .testimonial-photo,
.testimonials .testimonial .testimonial-photo.fiesta-border {
    border-color: var(--spurs-pink) !important;
}

@media (max-width: 600px) {
    body.fiesta-theme .testimonials .testimonial .testimonial-photo,
    .testimonials .testimonial .testimonial-photo.fiesta-border {
        border: 3px solid var(--spurs-pink) !important;
    }
}

/* NEW NAVIGATION LAYOUT STYLES */

/* Desktop: Show navigation inline */
.header-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 80px; /* Fixed height for consistent alignment */
}

.header-top-row .logo,
.header-top-row .header-actions,
.header-top-row .mobile-menu-toggle {
    height: 100%; /* Match parent height */
    display: flex;
    align-items: center; /* Vertical center alignment */
}

.header-nav-row {
    display: block;
    width: 100%;
    border-top: 1px solid var(--spurs-silver);
    padding-top: 10px;
}

.header-nav-row .main-nav {
    display: block !important;
}

/* Desktop Navigation - Center the nav menu horizontally */
@media (min-width: 769px) {
    .header-nav-row .main-nav ul {
        display: flex !important;
        list-style: none;
        gap: 30px;
        margin: 0;
        padding: 0;
        justify-content: center; /* Center the navigation items */
        flex-direction: row !important; /* Override any mobile column layout */
    }
    
    .header-nav-row .main-nav a {
        text-decoration: none;
        color: var(--spurs-white);
        font-weight: 500;
        padding: 5px 0;
        border-bottom: 2px solid transparent;
        transition: all 0.3s ease;
        display: inline-block;
    }
    
    .header-nav-row .main-nav a:hover,
    .header-nav-row .main-nav a.active {
        color: var(--spurs-teal);
        border-bottom-color: var(--spurs-teal);
    }
    
    /* Desktop dropdown styles */
    .header-nav-row .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        background-color: var(--spurs-black);
        border: 1px solid var(--spurs-silver);
        border-radius: 5px;
        min-width: 150px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.3s ease;
        z-index: 1000;
        margin-top: 10px;
    }
    
    .header-nav-row .dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    .header-nav-row .dropdown-menu a {
        display: block;
        padding: 10px 20px;
        color: var(--spurs-white);
        text-decoration: none;
        transition: all 0.3s ease;
        border-bottom: none !important;
    }
    
    .header-nav-row .dropdown-menu a:hover {
        background-color: #8A8D8F; /* dark-silver equivalent */
        color: var(--spurs-teal);
    }
    
    /* Keep Services link active when dropdown is open */
    .header-nav-row .dropdown:hover > a {
        color: var(--spurs-teal);
        border-bottom-color: var(--spurs-teal);
    }
}

/* Hide mobile menu toggle on desktop */
@media (min-width: 769px) {
    .mobile-menu-toggle {
        display: none !important;
    }
}

/* Mobile: Force horizontal layout - override wireframe defaults */
@media (max-width: 480px) {
    /* COMPLETE OVERRIDE: Remove all wireframe mobile styles */
    .site-header {
        padding: 8px 0 !important; /* Further decreased top/bottom padding */
    }
    
    .site-header .container {
        padding: 0 10px !important; /* Further decreased and balanced padding */
    }
    
    .site-header .header-content {
        flex-direction: row !important; /* Override wireframe stacking */
        gap: 0 !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
    }
    
    /* HIDE ORIGINAL NAVIGATION - WILL USE OUR NEW STRUCTURE */
    .site-header .main-nav {
        display: none !important; /* Hide wireframe nav */
    }
    
    .site-header .header-actions {
        display: none !important; /* Hide wireframe actions */
    }
    
    .header-top-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        height: 70px !important;
        padding: 0 !important;
        width: 100% !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        background-color: var(--spurs-black) !important;
    }
    
    .header-top-row .logo {
        flex: 0 0 auto !important;
        margin-right: 0 !important; /* Removed right margin */
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        order: 1 !important;
    }
    
    .header-top-row .logo .logo-image {
        height: 60px !important; /* Larger to fill more of the 70px container */
    }
    
    .header-top-row .header-actions {
        display: flex !important;
        flex-direction: row !important; /* Force horizontal */
        align-items: center !important;
        gap: 8px !important;
        flex: 1 1 auto !important;
        justify-content: center !important;
        margin: 0 !important; /* Removed left margin - buttons closer to logo */
        height: 100% !important;
        min-width: 0 !important;
        order: 2 !important;
        /* REMOVE ALL WIREFRAME MOBILE STYLES */
        padding: 0 !important;
        border: none !important;
        background: none !important;
    }
    
    .header-top-row .phone-number {
        font-size: 18px !important; /* Increased from 16px */
        color: var(--spurs-white) !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        border: 2px solid var(--spurs-white) !important;
        background-color: transparent !important;
        padding: 0 20px !important; /* Increased padding for larger button */
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important; /* Larger gap */
        transition: all 0.3s ease !important;
        box-shadow: none !important;
        outline: none !important;
        border-radius: 5px !important;
        height: 60px !important; /* Match larger logo height */
    }
    
    .header-top-row .phone-number:hover {
        background-color: var(--spurs-white) !important;
        color: var(--spurs-black) !important;
        text-decoration: none !important;
    }
    
    .header-top-row .phone-icon {
        font-size: 20px; /* Increased icon size */
    }
    
    .header-top-row .cta-button {
        padding: 0 20px !important; /* Increased padding for larger button */
        font-size: 18px !important; /* Increased from 16px */
        white-space: nowrap !important;
        flex-shrink: 0 !important; /* Prevent shrinking */
        height: 60px !important; /* Match larger logo height */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 5px !important;
        font-weight: 700 !important; /* Make text even bolder */
    }
    
    .mobile-menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: 2px solid var(--spurs-white) !important;
        border-radius: 5px !important;
        font-size: 32px !important; /* Increased from 28px */
        cursor: pointer !important;
        color: var(--spurs-white) !important;
        flex: 0 0 auto !important;
        height: 60px !important; /* Match larger logo/button height */
        padding: 0 16px !important; /* Restored symmetric padding for centered hamburger */
        min-width: 70px !important; /* Increased min-width for larger touch target */
        z-index: 1001 !important;
        position: relative !important;
        order: 3 !important; /* Place after actions */
        margin: 0 !important;
        top: 0 !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-menu-toggle:hover {
        background-color: var(--spurs-white) !important;
        color: var(--spurs-black) !important;
    }
    
    /* Ensure menu button stays visible when nav is open */
    .header-nav-row.show + .header-top-row .mobile-menu-toggle,
    .mobile-menu-toggle:hover,
    .mobile-menu-toggle:focus {
        background: transparent !important;
        color: var(--spurs-white) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Mobile Navigation Row - Match original index.html style */
    .header-nav-row {
        display: none;
        width: 100%;
        border-top: 1px solid var(--spurs-silver);
        padding: 0;
        margin-top: 10px;
    }
    
    .header-nav-row.show {
        display: block;
    }
    
    .header-nav-row .main-nav {
        display: block !important;
        width: 100%;
    }
    
    .header-nav-row .main-nav ul {
        display: flex;
        flex-direction: column;
        gap: 15px; /* Increased gap like original */
        text-align: center;
        padding: 20px 0; /* Increased padding like original */
        list-style: none;
    }
    
    .header-nav-row .main-nav li {
        width: 100%;
        /* Removed border-bottom for cleaner look like original */
    }
    
    .header-nav-row .main-nav a {
        display: inline-block; /* Changed from block to inline-block */
        padding: 5px 0; /* Simpler padding like original */
        color: var(--spurs-white);
        text-decoration: none;
        font-weight: 500;
        border-bottom: 2px solid transparent !important; /* Add underline effect like original */
        transition: all 0.3s ease;
    }
    
    .header-nav-row .main-nav a:hover,
    .header-nav-row .main-nav a.active {
        color: var(--spurs-teal);
        border-bottom-color: var(--spurs-teal) !important; /* Underline effect only under text */
        background-color: transparent; /* No background like original */
    }
    
    /* Mobile dropdown handling - Modal-style popup like original */
    .header-nav-row .dropdown-menu {
        display: none; /* Hidden by default */
        position: absolute;
        left: 20px; /* Position from left edge */
        top: 100%;
        background-color: var(--spurs-black);
        border: 2px solid var(--spurs-white);
        border-radius: 8px;
        min-width: 180px;
        z-index: 1000;
        margin-top: 10px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    
    .header-nav-row .dropdown-menu.show {
        display: block; /* Show when toggled */
    }
    
    .header-nav-row .dropdown-menu a {
        display: block;
        padding: 12px 20px;
        font-size: 16px;
        color: var(--spurs-white);
        text-decoration: none;
        border-bottom: 1px solid var(--dark-silver);
        transition: all 0.3s ease;
    }
    
    .header-nav-row .dropdown-menu a:last-child {
        border-bottom: none;
    }
    
    .header-nav-row .dropdown-menu a:hover {
        background-color: var(--dark-silver);
        color: var(--spurs-teal);
    }
}

/* Tablet screens - Medium compact */
@media (max-width: 768px) and (min-width: 481px) {
    .header-top-row {
        height: 55px;
        padding: 0 1px; /* Further decreased padding */
    }
    
    .header-top-row .logo .logo-image {
        height: 40px; /* Proportional to 60px on main screen */
    }
    
    .header-top-row .phone-number {
        font-size: 16px !important; /* Increased from 14px */
        gap: 5px !important;
        padding: 0 16px !important; /* Increased padding */
        border-width: 1px !important; /* Thinner border */
        height: 40px !important; /* Match logo height on this screen */
    }
    
    .header-top-row .cta-button {
        padding: 0 16px !important; /* Increased padding */
        font-size: 16px !important; /* Increased from 14px */
        height: 40px !important; /* Match logo height on this screen */
        font-weight: 700 !important;
    }
    
    .header-top-row .header-actions {
        gap: 6px;
        margin: 0 !important; /* Removed left margin */
    }
    
    .mobile-menu-toggle {
        height: 40px !important; /* Match logo height on this screen */
        font-size: 26px !important; /* Increased from 22px */
        min-width: 50px !important; /* Larger */
        padding: 0 12px !important; /* Restored symmetric padding */
    }
}

/* Mobile screens - Extra compact */
@media (max-width: 600px) {
    .header-top-row {
        height: 50px; /* Much smaller height */
        padding: 0; /* Removed padding for tightest layout */
    }
    
    .header-top-row .logo {
        margin-right: 0; /* Remove logo margin */
        flex-shrink: 0; /* Don't let logo shrink */
    }
    
    .header-top-row .phone-number {
        font-size: 14px !important; /* Increased from 12px */
        padding: 0 12px !important; /* Increased padding */
        gap: 5px !important; /* Larger gap */
        border-width: 1px !important; /* Thin border */
        height: 35px !important; /* Better proportion to 60px main screen */
    }
    
    .header-top-row .phone-number .phone-icon {
        font-size: 16px; /* Increased from 14px */
    }
    
    .header-top-row .cta-button {
        padding: 0 12px !important; /* Increased padding */
        font-size: 14px !important; /* Increased from 12px */
        min-width: auto !important; /* Allow button to shrink */
        height: 35px !important; /* Better proportion to 60px main screen */
        font-weight: 700 !important;
    }
    
    .header-top-row .logo .logo-image {
        height: 35px; /* Better proportion to 60px main screen */
    }
    
    .header-top-row .header-actions {
        gap: 5px; /* Minimal gap */
        margin: 0; /* No left margin */
        flex-wrap: nowrap;
        flex-shrink: 1; /* Allow actions to shrink if needed */
    }
    
    .mobile-menu-toggle {
        font-size: 22px !important; /* Increased from 18px */
        min-width: 42px !important; /* Larger */
        padding: 0 10px !important; /* Restored symmetric padding */
        flex-shrink: 0 !important; /* Don't let menu button shrink */
        z-index: 1000 !important; /* Always stay on top */
        position: relative !important; /* Ensure proper positioning */
        height: 35px !important; /* Better proportion to 60px main screen */
    }
}

/* Very small mobile screens - Ultra compact */
@media (max-width: 400px) {
    .header-top-row {
        height: 45px; /* Smallest height */
        padding: 0; /* Removed padding for tightest layout */
    }
    
    .header-top-row .logo .logo-image {
        height: 32px; /* Smaller logo for very small screens */
    }
    
    .header-top-row .phone-number {
        font-size: 12px !important;
        padding: 0 10px !important;
        height: 32px !important;
    }
    
    .header-top-row .cta-button {
        padding: 0 10px !important;
        font-size: 12px !important;
        height: 32px !important;
    }
    
    .mobile-menu-toggle {
        font-size: 20px !important;
        min-width: 38px !important;
        padding: 0 8px !important;
        height: 32px !important;
    }
}