/**
 * Sacred Heart Custom Styles
 * Glass Header Effect
 *
 * SETUP INSTRUCTIONS:
 * ====================
 *
 * TWO HEADER OPTIONS:
 * -------------------
 *
 * OPTION 1: GLASS HEADER (Dynamic - White to Black)
 * --------------------------------------------------
 * Use this for headers that overlay dark hero images
 *
 * 1. HEADER SETUP:
 *    - Add CSS class "glass-header" to your header main container in Elementor
 *    - Add a "Shortcode" widget for the logo
 *    - Enter: [glass_header_logo]
 *
 * 2. HERO SECTION SETUP:
 *    - Add CSS class "hero-section" to your hero section container
 *    - This tells the script when to trigger the transition
 *
 * HOW IT WORKS:
 * - At top of page: White logo + white menu text (transparent background)
 * - After scrolling past hero: Colored logo + black menu text (white background)
 *
 * OPTION 2: STATIC COLORED HEADER (No Dynamic Switching)
 * -------------------------------------------------------
 * Use this for regular headers (not over dark backgrounds)
 *
 * 1. HEADER SETUP:
 *    - DO NOT add "glass-header" CSS class
 *    - Add a "Shortcode" widget for the logo
 *    - Enter: [colored_header_logo]
 *
 * HOW IT WORKS:
 * - Always shows: Colored logo + black menu text
 * - No dynamic switching on scroll
 *
 * SHORTCODE OPTIONS (optional):
 * ----------------------------
 * [glass_header_logo width="250" alt="My Logo"]
 * [colored_header_logo width="250" alt="My Logo"]
 */

/* Glass Header - Initial State (Transparent, overlaying hero) */
.glass-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    transition: background-color 0.5s ease, backdrop-filter 0.5s ease, box-shadow 0.5s ease;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* White text and logo for initial transparent state */
.glass-header,
.glass-header * {
    color: #ffffff !important;
    transition: color 0.5s ease;
}

.glass-header a {
    color: #ffffff !important;
    transition: color 0.5s ease;
}

.glass-header .elementor-icon-list-text,
.glass-header .elementor-heading-title,
.glass-header nav a,
.glass-header .menu-item a {
    color: #ffffff !important;
    transition: color 0.5s ease;
}

/* Logo container setup for overlaying logos */
.glass-header .header-logo-container {
    position: relative !important;
    display: inline-block !important;
}

.glass-header .header-logo-default,
.glass-header .header-logo-white {
    transition: opacity 0.5s ease !important;
    max-width: 100%;
    height: auto;
}

/* Position logos to overlay each other */
.glass-header .header-logo-white {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
}

/* Logo handling - hide the default logo initially, show white version */
.glass-header .header-logo-default {
    opacity: 0 !important;
}

.glass-header .header-logo-white {
    opacity: 1 !important;
}

/* Scrolled State - White background with glass effect */
.glass-header.scrolled {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

/* Dark text and logo for scrolled state */
.glass-header.scrolled,
.glass-header.scrolled * {
    color: #000000 !important;
}

.glass-header.scrolled a {
    color: #000000 !important;
}

.glass-header.scrolled .elementor-icon-list-text,
.glass-header.scrolled .elementor-heading-title,
.glass-header.scrolled nav a,
.glass-header.scrolled .menu-item a {
    color: #000000 !important;
}

/* Logo swap - show default logo, hide white version when scrolled */
.glass-header.scrolled .header-logo-default {
    opacity: 1 !important;
}

.glass-header.scrolled .header-logo-white {
    opacity: 0 !important;
}

/* Ensure header stays fixed and doesn't shrink */
.glass-header .elementor-container {
    transition: none;
}

/* Optional: Add subtle border bottom when scrolled */
.glass-header.scrolled {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Hover states for links (but NOT logos) */
.glass-header a:hover:not(.header-logo-link) {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

/* Logo links - no hover effect */
.header-logo-link:hover {
    opacity: 1 !important;
}

.header-logo-link:hover img {
    opacity: 1 !important;
    transform: none !important;
}

/* WordPress Menu - Hover and Active States */
/* Using Elementor's secondary color variable or fallback to #951103 */
/* Apply to glass header when scrolled (black background state) */
.glass-header.scrolled .menu-item a:hover,
.glass-header.scrolled .elementor-nav-menu--main .elementor-item:hover,
.glass-header.scrolled nav a:hover {
    color: var(--e-global-color-secondary, #951103) !important;
}

/* Active/Current menu item */
.glass-header.scrolled .menu-item.current-menu-item > a,
.glass-header.scrolled .menu-item.current_page_item > a,
.glass-header.scrolled .menu-item.current-menu-ancestor > a,
.glass-header.scrolled .elementor-nav-menu--main .elementor-item.elementor-item-active,
.glass-header.scrolled .elementor-nav-menu--main .elementor-item[aria-current="page"] {
    color: var(--e-global-color-secondary, #951103) !important;
}

/* For non-glass headers (static colored header) */
/* Menu hover state */
.menu-item a:hover,
.elementor-nav-menu--main .elementor-item:hover,
nav a:hover {
    color: var(--e-global-color-secondary, #951103) !important;
}

/* Active/Current menu item for non-glass headers */
.menu-item.current-menu-item > a,
.menu-item.current_page_item > a,
.menu-item.current-menu-ancestor > a,
.elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-nav-menu--main .elementor-item[aria-current="page"] {
    color: var(--e-global-color-secondary, #951103) !important;
}

/* Ensure proper spacing for fixed header */
body {
    padding-top: 0 !important;
}

/* Fix admin bar overlap when logged in */
body.admin-bar .glass-header {
    top: 0 !important;
}

/* Ensure content doesn't get hidden behind fixed header */
body:not(.elementor-editor-active) {
    padding-top: 0 !important;
}

/* Add top padding to first section to prevent header overlap */
body:not(.elementor-editor-active) section[data-element_type="section"]:first-of-type,
body:not(.elementor-editor-active) .elementor-location-header + section,
body:not(.elementor-editor-active) .elementor-location-header + div > section:first-child {
    margin-top: 0 !important;
}

/* Prevent admin bar from overlapping content */
body.admin-bar {
    margin-top: 0 !important;
}