/*
Theme Name: GrabTech Topma Tours & Safaris
Theme URI: https://topmatoursandsafaris.com
Author: GrabTech Solutions
Author URI: https://grabtech.com
Description: Premium WordPress theme for Topma Tours & Safaris - Luxury African Safari Experiences
Version: 1.0.0
License: GPL v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: topma-tours
Domain Path: /languages
Tags: tourism, safari, travel, luxury, booking, responsive, custom-header, custom-menu, featured-images, translation-ready

This theme is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others.

Topma Tours & Safaris Theme is based on Underscores https://underscores.me/, (C) 2012-2023 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* Theme Styles - Main styles are in assets/css/style.css */

/* ============================================
   NAVIGATION DROPDOWN STYLES
   ============================================ */

/* Mobile menu overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Dropdown menu - hidden by default */
.nav-item .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1000;
    padding: 10px 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    list-style: none;
    margin: 0;
}

/* Show dropdown on hover for desktop */
.nav-item.hover-active .dropdown-menu,
.nav-item:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(5px);
}

/* Dropdown arrow rotation */
.nav-item.hover-active .dropdown-arrow i,
.nav-item:hover .dropdown-arrow i {
    transform: rotate(180deg);
}

/* Dropdown menu items */
.dropdown-menu li {
    display: block;
    width: 100%;
    margin: 0;
}

.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: #555;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.dropdown-menu a:hover {
    background: linear-gradient(to right, rgba(231, 76, 60, 0.05), rgba(231, 76, 60, 0.02));
    color: #e74c3c;
    padding-left: 25px;
}

.dropdown-menu i {
    color: #e74c3c;
    font-size: 14px;
    width: 18px;
}

/* ============================================
   MOBILE RESPONSIVE STYLES
   ============================================ */

@media (max-width: 991px) {
    /* Mobile menu styles */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        height: 100vh;
        background: white;
        padding: 80px 20px 30px;
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.1);
        transition: right 0.4s ease;
        z-index: 999;
        overflow-y: auto;
    }
    
    .nav-menu.active {
        right: 0;
    }
    
    .nav-list {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }
    
    .nav-item {
        width: 100%;
        border-bottom: 1px solid #eee;
    }
    
    .nav-link {
        padding: 15px 0;
        justify-content: space-between;
        width: 100%;
    }
    
    /* Mobile dropdown menu */
    .nav-item .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        background: rgba(231, 76, 60, 0.03);
        border-radius: 0;
        min-width: 100%;
    }
    
    .nav-item.mobile-dropdown-active .dropdown-menu {
        max-height: 500px;
        padding: 10px 0;
    }
    
    .nav-item.mobile-dropdown-active .dropdown-arrow i {
        transform: rotate(180deg);
    }
    
    .dropdown-menu a {
        padding: 10px 0 10px 30px;
        font-size: 13px;
    }
    
    .dropdown-menu i {
        font-size: 12px;
    }
    
    /* Mobile menu button */
    .mobile-menu-btn {
        display: block;
        background: none;
        border: none;
        font-size: 24px;
        color: #333;
        cursor: pointer;
        padding: 10px;
        z-index: 1001;
    }
}

@media (min-width: 992px) {
    .mobile-menu-btn {
        display: none;
    }
    
    .nav-list {
        display: flex;
        align-items: center;
        gap: 25px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    .nav-item {
        position: relative;
    }
    
    .nav-link {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 15px 0;
        color: #333;
        text-decoration: none;
        font-weight: 500;
        font-size: 15px;
        transition: all 0.3s ease;
    }
    
    .nav-link:hover {
        color: #e74c3c;
    }
    
    .nav-link i {
        font-size: 16px;
        color: #e74c3c;
        width: 20px;
        text-align: center;
    }
    
    .dropdown-arrow {
        margin-left: 5px;
        font-size: 12px;
        color: #666;
        transition: transform 0.3s ease;
    }
    
    .book-now-btn {
        margin-left: 15px;
        padding: 10px 25px !important;
        background: linear-gradient(135deg, #e74c3c, #ff7675);
        border: none;
        border-radius: 50px;
        font-weight: 600;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
        color: white !important;
        text-decoration: none !important;
    }
    
    .book-now-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
        background: linear-gradient(135deg, #ff7675, #e74c3c);
    }
}