/**
 * Menu Above Hero - Base Styles
 */

/* Desktop styles - only for large screens in any orientation */
@media (min-width: 1300px)  {
    /* Hide the menu in the header on desktop */
    .menu-above-hero .site-header .main-navigation {
        display: none;
    }
}

@media (min-width: 1300px) {

/* 
 * Header Positioning
 * Make the header absolute positioned over the hero section
 */
 .menu-above-hero .site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: var(--lubinik-z-index-header);
    background-color: transparent;
    box-shadow: none;
}

/* 
 * Top Bar Styling
 * Make the top bar transparent with the menu above hero option
 */
.menu-above-hero .site-header .top-bar {
    background-color: transparent;
    box-shadow: none;
    top: var(--lubinik-spacing-lg);
    
}

/* Top bar container width control */
.menu-above-hero .site-header .top-bar .container {
    max-width: var(--lubinik-container-width-narrow);
}



/* Top bar socials and info - Note: Media queries moved to responsive file */


/* 
 * Main Header Container
 * Make it fully transparent to achieve the modern look
 */
.menu-above-hero .site-header > .container {
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: var(--lubinik-spacing-md) var(--lubinik-spacing-sm);
    transition: background-color var(--lubinik-transition-duration) var(--lubinik-transition-timing), box-shadow var(--lubinik-transition-duration) var(--lubinik-transition-timing);
}

/* 
 * Logo/Branding Area
 * Make logo stand out against any background
 */
.menu-above-hero .site-header .site-branding {
    padding: var(--lubinik-spacing-xs) 0;
}

.menu-above-hero .site-header .custom-logo {
    filter: brightness(1.1) contrast(1.1); /* Make logo pop against backgrounds */
}

/* 
 * Navigation Menu
 * Enhance the navigation menu for better visibility over the hero
 */
.menu-above-hero .site-header .main-navigation {
    margin-top: var(--lubinik-spacing-md);
    text-align: right;
}

.menu-above-hero .site-header .main-navigation a {
    color: var(--lubinik-header-secondary-link-color);
    font-weight: var(--lubinik-font-weight-semibold);
    text-shadow: var(--lubinik-header-secondary-link-text-shadow);
    padding: var(--lubinik-spacing-xs) var(--lubinik-spacing-sm);
    transition: color var(--lubinik-transition-duration) var(--lubinik-transition-timing), background-color var(--lubinik-transition-duration) var(--lubinik-transition-timing);
}

.menu-above-hero .site-header .main-navigation a:hover {
    color: var(--lubinik-header-primary-link-hover-color) !important;
    text-shadow: none;
}


.menu-above-hero .site-header .contact-info-mini a:hover {
    color: var(--lubinik-header-primary-link-hover-color);
}

/* 
 * Hero Section Gradient Overlays
 * Add gradient overlays at the top and bottom of the hero section
 * for better text readability regardless of the background image
 */
.menu-above-hero .hero-section {
    position: relative;
    padding-top: 0;
    margin-top: 0;
}

/* Top gradient overlay - higher z-index to ensure visibility */
.menu-above-hero .hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 25%;
    background: linear-gradient(to bottom, 
                var(--hero-top-gradient-start, rgba(0, 0, 0, 0.7)) 0%, 
                var(--hero-top-gradient-middle, rgba(0, 0, 0, 0.5)) 30%, 
                var(--hero-top-gradient-end, rgba(0, 0, 0, 0.2)) 70%, 
                rgba(0, 0, 0, 0) 100%);
    z-index: var(--lubinik-z-index-hero-gradient-top);
    pointer-events: none;
}

/* Bottom gradient overlay - higher z-index to ensure visibility */
.menu-above-hero .hero-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10%; 
    background: linear-gradient(to top, 
                var(--hero-bottom-gradient-start, rgba(0, 0, 0, 0.5)) 0%, 
                var(--hero-bottom-gradient-middle, rgba(0, 0, 0, 0.3)) 40%, 
                var(--hero-bottom-gradient-end, rgba(0, 0, 0, 0)) 100%);
    z-index: var(--lubinik-z-index-hero-gradient-bottom);
    pointer-events: none;
}

/* Additional gradient for custom slider */
.menu-above-hero .custom-hero-slider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 25%;
    background: linear-gradient(to bottom, 
                var(--hero-top-gradient-start, rgba(0, 0, 0, 0.7)) 0%, 
                var(--hero-top-gradient-middle, rgba(0, 0, 0, 0.5)) 30%, 
                var(--hero-top-gradient-end, rgba(0, 0, 0, 0.2)) 70%, 
                rgba(0, 0, 0, 0) 100%);
    z-index: var(--lubinik-z-index-hero-gradient-top);
    pointer-events: none;
}

/* Additional gradient for custom slider */
.menu-above-hero .custom-hero-slider::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10%;
    background: linear-gradient(to top, 
                var(--hero-bottom-gradient-start, rgba(0, 0, 0, 0.5)) 0%, 
                var(--hero-bottom-gradient-middle, rgba(0, 0, 0, 0.3)) 40%, 
                var(--hero-bottom-gradient-end, rgba(0, 0, 0, 0)) 100%);
    z-index: var(--lubinik-z-index-hero-gradient-bottom);
    pointer-events: none;
}

/* Make sure the hero content is above the gradients */
.menu-above-hero .hero-section .hero-content {
    position: relative;
    z-index: var(--lubinik-z-index-hero-content);
    padding-top: calc(var(--lubinik-spacing-xl) + var(--lubinik-spacing-xl));
}

/* Ensure custom slider content is above gradients */
.menu-above-hero .custom-hero-slider .slide-content {
    z-index: var(--lubinik-z-index-hero-content);
}

/* Ensure slider pagination (dots) are visible above the gradient */
.menu-above-hero .hero-section .swiper-pagination,
.menu-above-hero .custom-hero-slider .swiper-pagination {
    z-index: var(--lubinik-z-index-hero-slider-pagination) !important;
    position: absolute !important;
    bottom: var(--lubinik-spacing-md) !important;
}

/* Make the dots more visible with a background halo */
.menu-above-hero .hero-section .swiper-pagination-bullet,
.menu-above-hero .custom-hero-slider .swiper-pagination-bullet {
    width: var(--lubinik-spacing-sm) !important;
    height: var(--lubinik-spacing-sm) !important;
    background: var(--lubinik-hero-slider-dot-color) !important;
    opacity: 0.9 !important;
    box-shadow: 0 0 2px 1px var(--lubinik-dot-shadow-color); /* Shadow for visibility */
    transition: opacity 0.3s ease, background-color 0.3s ease !important;
    margin: 0 var(--lubinik-spacing-xs) !important;
}

.menu-above-hero .hero-section .swiper-pagination-bullet-active,
.menu-above-hero .custom-hero-slider .swiper-pagination-bullet-active {
    background: var(--lubinik-hero-slider-dot-active-color) !important;
    opacity: 1 !important; /* Active dots are fully opaque */
    box-shadow: 0 0 3px 1px var(--lubinik-dot-active-shadow-color); /* Slightly stronger shadow */
}

/* Ensure navigation arrows are visible */
.menu-above-hero .hero-section .swiper-button-next,
.menu-above-hero .hero-section .swiper-button-prev,
.menu-above-hero .custom-hero-slider .swiper-button-next,
.menu-above-hero .custom-hero-slider .swiper-button-prev {
    z-index: var(--lubinik-z-index-hero-slider-nav) !important;
}

/* Hide logo on desktop/tablet for menu-above-hero layout */
.menu-above-hero .site-header .site-branding {
    display: none !important; 
}

} /* End @media (min-width: 769px) */