/**
 * Responsive Styles for Luxury Daily Cruises Theme
 */

/* Base responsive styles */
@media (max-width: 1200px) {
    .container {
        max-width: 960px;
    }
    
    .hero-title {
        font-size: 3.5rem;
    }
}

@media (max-width: 992px) {
    .container {
        max-width: 720px;
    }
    
    .hero-title {
        font-size: 3rem;
    }
    
    .about-content,
    .experiences-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Tablet and mobile navigation */
@media (max-width: 768px) {
    .container {
        max-width: 540px;
    }
    
    /* ===== COMPLETELY RECONSTRUCTED HEADER FOR MOBILE ===== */
    
    /* Front page header - transparent with hero background */
    .home .site-header {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: transparent !important;
        z-index: 100 !important;
        border: none !important;
        padding: 1rem 0 !important;
    }
    
    /* Non-front page header - dark blue background */
    .site-header:not(.home .site-header) {
        position: relative !important;
        background: rgba(26, 35, 50, 0.95) !important;
        padding: 1rem 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Ensure all header text is visible */
    .site-header *,
    .home .site-header * {
        color: white !important;
    }
    
    /* Fix header height */
    .site-header {
        height: auto !important;
        min-height: 70px !important;
    }
    
    /* Adjust hero section on front page to account for transparent header */
    .home .hero-section {
        padding-top: 70px !important; /* Add padding to account for header height */
    }
    
    /* Ensure proper spacing on non-front pages */
    .site-header + .breadcrumbs-container {
        margin-top: 0 !important;
    }
    
    /* Header content layout */
    .header-content {
        position: relative !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0.5rem 0 !important;
    }
    
    /* Show mobile menu toggle - use !important to override the display: none in style.css */
    .menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        order: 3 !important;
        background: #2c5aa0 !important; /* Solid background for better visibility */
        margin-left: 1rem !important;
        z-index: 1002 !important; /* Higher than the mobile menu */
        width: 50px !important; /* Larger size */
        height: 50px !important; /* Larger size */
        cursor: pointer !important;
        border: 3px solid white !important; /* Thicker, more visible border */
        border-radius: 4px !important;
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        opacity: 1 !important;
        visibility: visible !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important; /* Add shadow for better visibility */
    }
    
    /* Add special styling for front page menu toggle to make it stand out against the hero background */
    .home .site-header .menu-toggle {
        background: rgba(44, 90, 160, 0.9) !important; /* Semi-transparent blue background */
        border: 3px solid white !important;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5) !important; /* Stronger shadow */
    }
    
    /* Ensure menu toggle is visible and properly styled */
    .menu-toggle-icon,
    .menu-toggle-icon::before,
    .menu-toggle-icon::after {
        background: white !important;
        width: 25px !important;
        height: 3px !important; /* Slightly thicker for better visibility */
        display: block !important;
        position: relative !important;
        transition: all 0.3s ease !important;
    }
    
    .menu-toggle-icon::before,
    .menu-toggle-icon::after {
        content: '' !important;
        position: absolute !important;
        left: 0 !important;
        width: 25px !important;
        height: 3px !important;
        background: white !important;
    }
    
    .menu-toggle-icon::before {
        top: -8px !important;
    }
    
    .menu-toggle-icon::after {
        top: 8px !important;
    }
    
    /* Menu toggle active state */
    .menu-toggle.active .menu-toggle-icon {
        background: transparent !important;
    }
    
    .menu-toggle.active .menu-toggle-icon::before {
        transform: rotate(45deg) !important;
        top: 0 !important;
    }
    
    .menu-toggle.active .menu-toggle-icon::after {
        transform: rotate(-45deg) !important;
        top: 0 !important;
    }
    
    /* Override scrolled state styles to keep menu toggle visible */
    .home .site-header.scrolled .menu-toggle-icon,
    .home .site-header.scrolled .menu-toggle-icon::before,
    .home .site-header.scrolled .menu-toggle-icon::after,
    .site-header.scrolled .menu-toggle-icon,
    .site-header.scrolled .menu-toggle-icon::before,
    .site-header.scrolled .menu-toggle-icon::after {
        background: white !important;
    }
    
    /* Hide desktop navigation */
    .main-navigation ul {
        display: none;
    }
    
    /* Mobile navigation styles - completely rebuilt */
    .main-navigation {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 85% !important; /* Slightly wider */
        max-width: 350px !important; /* Slightly larger max width */
        background: rgba(26, 35, 50, 0.98) !important;
        backdrop-filter: blur(10px) !important;
        z-index: 1001 !important;
        padding: 60px 2rem 2rem !important; /* Reduced top padding */
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.5) !important; /* Stronger shadow */
        overflow-y: auto !important;
        transition: transform 0.3s ease !important;
        transform: translateX(100%) !important; /* Start off-screen */
        display: block !important; /* Force display */
        border-left: 3px solid #2c5aa0 !important; /* Add border for better visibility */
    }
    
    /* Add a close button to the mobile menu */
    .main-navigation::before {
        content: '×' !important;
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        font-size: 28px !important; /* Larger font */
        color: white !important;
        cursor: pointer !important;
        width: 40px !important; /* Larger size */
        height: 40px !important; /* Larger size */
        line-height: 40px !important; /* Match height */
        text-align: center !important;
        background: rgba(44, 90, 160, 0.8) !important; /* Blue background */
        border-radius: 50% !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important; /* Add shadow */
        border: 1px solid rgba(255, 255, 255, 0.3) !important; /* Add border */
    }
    
    .main-navigation.toggled {
        transform: translateX(0) !important; /* Slide in when toggled */
    }
    
    /* Force display of menu items when toggled */
    .main-navigation ul {
        display: block !important;
        flex-direction: column !important;
        gap: 0 !important;
        margin-top: 1.5rem !important;
        padding: 0 !important;
    }
    
    /* Add a title to the mobile menu */
    .main-navigation::after {
        content: 'Menu' !important;
        display: block !important;
        color: white !important;
        font-size: 1.8rem !important; /* Larger font */
        font-weight: 300 !important;
        margin-bottom: 1.5rem !important;
        border-bottom: 2px solid rgba(44, 90, 160, 0.8) !important; /* Blue border */
        padding-bottom: 1rem !important;
        text-transform: uppercase !important; /* All caps */
        letter-spacing: 2px !important; /* Spacing between letters */
    }
    
    .main-navigation li {
        margin-bottom: 1rem !important;
        list-style: none !important;
        position: relative !important;
    }
    
    .main-navigation a {
        display: block !important;
        padding: 0.75rem 0.5rem !important;
        font-size: 1.2rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: white !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        font-weight: 400 !important;
    }
    
    .main-navigation a:hover {
        color: #2c5aa0 !important;
        background: rgba(255, 255, 255, 0.05) !important;
        padding-left: 1rem !important;
    }
    
    /* Add arrow icons to menu items */
    .main-navigation li::after {
        content: '→' !important;
        position: absolute !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: rgba(255, 255, 255, 0.3) !important;
        font-size: 1rem !important;
        transition: all 0.3s ease !important;
    }
    
    .main-navigation li:hover::after {
        color: #2c5aa0 !important;
        right: -5px !important;
    }
    
    /* Mobile menu overlay */
    .mobile-menu-overlay {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.7) !important; /* Darker overlay */
        z-index: 1000 !important;
        backdrop-filter: blur(3px) !important; /* Add blur effect */
        transition: opacity 0.3s ease !important;
        opacity: 0 !important;
    }
    
    .mobile-menu-overlay.active {
        display: block !important;
        opacity: 1 !important;
    }
    
    /* Adjust header actions */
    .header-actions {
        margin-left: auto;
        margin-right: 60px; /* Make room for the menu toggle */
        display: flex;
        align-items: center;
    }
    
    .header-phone {
        margin-right: 10px;
    }
    
    .header-phone .phone-number {
        display: none;
    }
    
    /* Ensure logo is visible and properly sized */
    .site-branding {
        max-width: 50%;
    }
    
    .site-logo img {
        max-height: 40px;
        width: auto;
    }
    
    /* Hero section adjustments */
    .hero-section {
        margin-top: 0 !important; /* Remove any top margin */
        height: 100vh !important; /* Full viewport height */
        min-height: 600px !important; /* Minimum height */
        background-attachment: scroll !important; /* Better performance on mobile */
        position: relative !important;
    }
    
    /* On front page, make the hero section start from the top of the page */
    .home .hero-section {
        padding-top: 0 !important; /* No padding at top */
        margin-top: 0 !important; /* No margin at top */
    }
    
    /* Add a semi-transparent overlay to ensure text is readable */
    .hero-section::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: linear-gradient(to bottom, rgba(26, 35, 50, 0.7) 0%, rgba(26, 35, 50, 0.4) 100%) !important;
        z-index: 1 !important;
    }
    
    /* Ensure hero content is above the overlay */
    .hero-content {
        position: relative !important;
        z-index: 2 !important;
        padding-top: 80px !important; /* Add padding to account for header */
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .yacht-search-form {
        grid-template-columns: 1fr;
    }
}

/* Small mobile devices */
@media (max-width: 576px) {
    .container {
        padding: 0 15px;
    }
    
    /* Further reduce font sizes */
    .hero-title {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    /* Adjust header for very small screens */
    .header-cta {
        display: none;
    }
    
    /* Simplify mobile menu */
    .main-navigation.toggled {
        width: 100%;
        max-width: none;
    }
    
    /* Adjust stats grid */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    /* Adjust testimonial cards */
    .testimonial-card {
        padding: 2rem 1rem;
    }
}