/* header.css - Sticky header and top bar styles for Serenity Jets & Drones */

/* Main header container */
.site-header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    /* background: #19233a; */
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}

/* Transparent state for hero sections */
.site-header.transparent {
    background: rgba(0, 0, 0, 0.05);
    color: #fff;
    box-shadow: none;
    backdrop-filter: blur(1px);
}

.site-header.transparent .topbar {
    background: transparent;
    color: #fff;
}

.site-header.transparent .topbar a,
.site-header.transparent .topbar i {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.site-header.transparent .nav-menu a {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Solid state after scrolling */
.site-header.solid {
    background: #19233a; /* Dark navy for the main header area */
    color: #fff;
}

.site-header.solid .topbar {
    background: #d4b46a; /* Gold for the topbar */
    color: #19233a;
}

.site-header.solid .topbar a,
.site-header.solid .topbar i {
    color: #19233a;
}

.site-header.solid .nav-menu a {
    color: #fff;
}

.site-header.solid .nav-menu a:hover {
    color: #d4b46a;
}

.site-header.solid .menu-toggle {
    color: #fff;
}

/* Header row with logo and navigation */
.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 2rem;
}

/* Logo styles */
.site-logo {
    height: 56px;
    margin-right: 1rem;
}

.site-title {
    display: none; /* Hidden by default, shown on specific breakpoints */
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.5rem;
}

/* Top bar with contact info and social links */
.topbar {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: rgba(17,26,43,0.0);
    transition: background 0.4s, color 0.4s;
    z-index: 1001;
}

/* Scrolled state for topbar */
.topbar.scrolled {
    background: #d4b46a !important;
    color: #19233a !important;
    transition: color 0.4s;
}

.topbar.scrolled i,
.topbar.scrolled svg,
.topbar.scrolled * {
    color: #19233a !important;
    fill: #19233a !important;
}

.topbar.scrolled .topbar-right a {
    color: #19233a !important;
}

/* Left side of topbar with contact info */
.topbar-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: auto;
}

.topbar-left span {
    margin-right: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: inherit;
}

.topbar-left i {
    font-size: 1.1em;
    margin-right: 4px;
}

/* Right side of topbar with social links */
.topbar-right {
    display: flex;
    gap: 1rem;
}

.topbar-right a {
    color: #c9b26b;
    margin-left: 1rem;
    font-size: 1.1rem;
    transition: color 0.2s;
}

.topbar-right a:hover {
    color: #0077b6;
}

/* Hide icons when scrolled */
.topbar-right.hide-icons {
    display: none !important;
}

/* Navigation menu */
.nav-menu {
    display: flex;
    gap: 1.2rem;
    align-items: center;
}

.nav-menu a {
    color: inherit;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    transition: color 0.2s;
}

.nav-menu a:hover {
    color: #c9b26b;
}

/* Mobile menu toggle */
.menu-toggle {
    display: none;
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .topbar-left span:last-child {
        display: none;
    }
    
    .nav-menu {
        gap: 0.8rem;
    }
    
    .nav-menu a {
        font-size: 0.8rem;
    }
}

@media (max-width: 768px) {
    .menu-toggle {
        display: block;
        margin-right: 8px;
        padding: 4px;
    }
    
    .nav-menu {
        position: fixed;
        top: 145px; /* Position below the header */
        right: -100%;
        display: none;
        width: 75%;
        height: calc(100vh - 100px); /* Adjust height to account for header */
        background: #111a2b; /* Darker background color */
        flex-direction: column;
        align-items: flex-start;
        padding: 2rem;
        transition: right 0.3s ease;
        gap: 1.5rem;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2); /* Add shadow for visual separation */
        z-index: 99; /* Make sure it's below the header z-index */
    }
    
    .nav-menu.open {
        right: 0;
        display: flex;
    }
    
    .nav-menu a {
        font-size: 1rem;
    }
    
    .site-title {
        display: none;
    }
    
    .topbar {
        flex-direction: column;
        align-items: center;
    }
    
    .topbar-left {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-bottom: 6px;
    }
    
    .topbar-left span {
        font-size: 0.97em;
        margin-bottom: 6px;
        padding: 0;
        text-align: center;
        color: #fff;
        margin-right: 0;
    }
    
    .topbar-right {
        gap: 16px;
        margin-bottom: 10px;
        margin-left: 4px;
    }
}

@media (max-width: 480px) {
    .site-logo {
        height: 40px !important;
        margin: 8px 0 8px 8px;
    }
    
    .menu-toggle {
        margin-right: 8px;
        padding: 4px;
    }
    
    .header-row {
        padding: 0.25rem 1rem;
    }
}