/**
 * Transparent Header Styles
 * Makes header overlay on top of hero sections with smooth color transitions
 */

/* Transparent Top Header - Before Scroll (Homepage) */
.top-header.transparent-top-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    background-color: var(--transparent-header-top-bg) !important;
    transition: all 0.3s ease-in-out;
}

.top-header.transparent-top-header,
.top-header.transparent-top-header a,
.top-header.transparent-top-header .top-header-item {
    color: var(--transparent-header-top-text) !important;
}

/* Transparent Top Header - After Scroll (Homepage) - Note: Top header stays absolute, only main header scrolls */
/* When main header is scrolled, body gets 'header-scrolled' class from JavaScript */
body.header-scrolled .top-header.transparent-top-header {
    background-color: var(--transparent-header-top-scrolled-bg) !important;
}

body.header-scrolled .top-header.transparent-top-header,
body.header-scrolled .top-header.transparent-top-header a,
body.header-scrolled .top-header.transparent-top-header .top-header-item {
    color: var(--transparent-header-top-scrolled-text) !important;
}

/* Transparent Main Header - Position below top header - Before Scroll */
.main-header.transparent-header {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 999;
    width: 100%;
    background: var(--transparent-header-main-bg) !important;
    border-bottom: 1px solid var(--transparent-header-main-border) !important;
    transition: all 0.3s ease-in-out;
}

/* Calculate top position based on top-header height */
.transparent-top-header + .main-header.transparent-header {
    top: 40px; /* Adjust based on actual top-header height */
}

/* When no top-header, start from 0 */
.main-header.transparent-header:not(.transparent-top-header + .main-header) {
    top: 0;
}

/* Fix for Admin Bar (when logged in to admin panel) */
/* Admin bar is 40px height and fixed at top with z-index: 1049 */

/* When admin bar is present */
body.show-admin-bar .top-header.transparent-top-header {
    top: 0px !important;
}

body.show-admin-bar .transparent-top-header + .main-header.transparent-header {
    top: 0px !important; /* 40px admin bar + 40px top header */
}

/* Scrolled State - Only Main Header Becomes Fixed */
/* Top header stays in place (absolute) and disappears when scrolling - no additional styles needed */

/* When scrolled, main-header becomes fixed at top - After Scroll */
.main-header.transparent-header.header-scrolled {
    position: fixed !important;
    top: 0 !important;
    background: var(--transparent-header-main-scrolled-bg) !important;
    border-bottom: 1px solid var(--main-header-border-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* When admin bar present, main-header sticks below admin bar when scrolled */
body.show-admin-bar .main-header.transparent-header.header-scrolled {
    top: 0px !important;
}

/* Main Header - Transparent State (apply colors) - Before Scroll */
.main-header.transparent-header .header-lower {
    background-color: var(--transparent-header-main-bg);
    transition: all 0.3s ease-in-out;
}

.main-header.transparent-header .header-lower .navigation > li > a,
.main-header.transparent-header .header-lower .header-account a {
    color: var(--transparent-header-main-text) !important;
    transition: all 0.3s ease-in-out;
}

/* Scrolled State - apply scrolled colors - After Scroll */
.main-header.transparent-header.header-scrolled .header-lower {
    background-color: var(--transparent-header-main-scrolled-bg) !important;
}

.main-header.transparent-header.header-scrolled .header-lower .navigation > li > a,
.main-header.transparent-header.header-scrolled .header-lower .header-account a {
    color: var(--transparent-header-main-scrolled-text) !important;
}

/* Logo Transition */
.main-header.transparent-header .logo-img {
    transition: all 0.3s ease-in-out;
}

/* Make sure hero section accounts for transparent header */
.main-header.transparent-header + .hero-section,
.main-header.transparent-header + section:first-of-type,
.main-header.transparent-header + .slider-section {
    padding-top: 0 !important;
}

/* Dropdown Menu Styling for Transparent Header */
.main-header.transparent-header .navigation > li:hover > a,
.main-header.transparent-header .navigation > li.current > a {
    color: var(--primary-color);
}

.main-header.transparent-header.header-scrolled .navigation > li:hover > a,
.main-header.transparent-header.header-scrolled .navigation > li.current > a {
    color: var(--primary-color);
}

/* Mobile Menu - Always use default colors */
.main-header.transparent-header .mobile-menu {
    background: var(--main-header-background-color);
}

.main-header.transparent-header .mobile-menu .navigation > li > a {
    color: var(--main-header-text-color);
}

/* Ensure Submit Property button is visible */
.main-header.transparent-header .tf-btn.primary {
    background: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
}

.main-header.transparent-header .tf-btn.primary:hover {
    background: var(--hover-color);
    border-color: var(--hover-color);
}