/* Header transparency simplification:
   All transparency is now handled directly in base styles & inline props.
   This file intentionally left blank to avoid heavy specificity chains.
   You can safely delete it later after confirming visuals. */

/* Target all possible background sources */
body.at-top div#sticky-header.menu-area div.container div.row div.col-12 div.menu-wrap,
body.at-top div#sticky-header.menu-area div.menu-wrap,
body.at-top #sticky-header.menu-area .menu-wrap,
body.at-top .menu-area .menu-wrap.main-menu {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Catch-all for any menu-wrap inside sticky header when at top */
body.at-top #sticky-header div.menu-wrap,
body.at-top #sticky-header .menu-wrap.main-menu {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* When at the very top of the page, make all header containers transparent */
body.at-top header {
    background: transparent !important;
}

body.at-top #sticky-header {
    background: transparent !important;
}

body.at-top #sticky-header.menu-area {
    background: transparent !important;
}

body.at-top #sticky-header .menu-wrap {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Also make the menu-area transparent at top with higher specificity */
body.at-top .menu-area {
    background: transparent !important;
}

/* Hide the floating border when at top */
body.at-top #sticky-header .menu-wrap::before {
    display: none !important;
}

/* Dark mode transparency at top */
.dark-mode body.at-top header,
.dark-mode body.at-top #sticky-header,
.dark-mode body.at-top #sticky-header.menu-area,
.dark-mode body.at-top #sticky-header .menu-wrap,
.dark-mode body.at-top .menu-area {
    background: transparent !important;
    box-shadow: none !important;
}

/* Additional override for any remaining background rules */
body.at-top #sticky-header .menu-wrap,
body.at-top .menu-area .menu-wrap,
body.at-top #sticky-header.sticky-menu .menu-wrap {
    background-color: transparent !important;
    background-image: none !important;
    background: transparent !important;
}

/* Override any potential state-based styling */
body.at-top #sticky-header .menu-wrap:hover,
body.at-top #sticky-header .menu-wrap:focus {
    background: transparent !important;
    box-shadow: none !important;
}

/* Clean up - remove debug border */

/* FINAL SOLUTION: Override using opacity and visibility instead of background */
body.at-top .menu-wrap::before {
    opacity: 0 !important;
    visibility: hidden !important;
}

body.at-top .menu-wrap {
    background: rgba(0,0,0,0) !important;
    opacity: 1 !important; /* Keep content visible */
}

/* Alternative approach: Use CSS mask to hide background while keeping content */
body.at-top #sticky-header .menu-wrap {
    -webkit-mask: linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0);
    -webkit-mask-composite: subtract;
    mask-composite: subtract;
    background: transparent !important;
}

/* Force remove any remaining background properties */
body.at-top [class*="menu-wrap"] {
    background: none !important;
    background-color: rgba(0,0,0,0) !important;
}

/* OVERRIDE ANY CSS VARIABLES OR COMPUTED STYLES */
body.at-top * {
    --header-background-color: transparent !important;
}

/* Force all possible menu-wrap selectors to be transparent */
body.at-top .menu-wrap,
body.at-top div.menu-wrap,
body.at-top .menu-wrap.main-menu,
body.at-top div.menu-wrap.main-menu {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Hide any pseudo-elements that might create backgrounds */
body.at-top .menu-wrap::before,
body.at-top .menu-wrap::after,
body.at-top #sticky-header::before,
body.at-top #sticky-header::after,
body.at-top .menu-area::before,
body.at-top .menu-area::after {
    display: none !important;
    background: transparent !important;
    opacity: 0 !important;
}

/* Smooth transition for background changes */
#sticky-header .menu-wrap {
    transition: all 0.3s ease !important;
}

/* Ensure text remains visible on transparent background */
body.at-top #sticky-header .menu-nav .navigation a,
body.at-top #sticky-header .brand-text,
body.at-top #sticky-header .login-btn {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
}

/* Make logo more visible on transparent background */
body.at-top #sticky-header .logo img {
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.8));
}

/* When scrolled, restore normal appearance for all containers */
body.scrolled #sticky-header {
    background: var(--header-background-color) !important;
}

body.scrolled #sticky-header .menu-wrap {
    background: var(--header-background-color) !important;
    box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1) !important;
}

body.scrolled .menu-area {
    background: transparent !important; /* menu-area should stay transparent */
}

/* Dark mode adjustments for scrolled state */
.dark-mode body.scrolled #sticky-header {
    background: var(--header-background-color) !important;
}

.dark-mode body.scrolled #sticky-header .menu-wrap {
    background: var(--header-background-color) !important;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2) !important;
}

/* Restore border when scrolled */
body.scrolled #sticky-header .menu-wrap::before {
    display: block !important;
}

/* Reset text styling when scrolled */
body.scrolled #sticky-header .menu-nav .navigation a,
body.scrolled #sticky-header .brand-text,
body.scrolled #sticky-header .login-btn {
    color: inherit !important;
    text-shadow: none !important;
}

/* Reset logo filter when scrolled */
body.scrolled #sticky-header .logo img {
    filter: none !important;
}