/* 60th Anniversary Button Styles */
.anniversary-60th-btn {
    display: inline-block;
    vertical-align: top; /* Top alignment with menu items */
    margin: 0; /* Remove all margins */
    padding: 0; /* Remove all padding */
    transition: transform 0.3s ease; /* Only animate hover transform, not size/margin changes */
    z-index: 10;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    position: relative;
    /* Default margin-right to prevent 0 margin issue in some Chrome browsers */
    margin-right: 9em; /* Default for medium font size, English */
}

/* Prevent transitions on margin and positioning changes - ensure JS can override */
.anniversary-60th-btn[style*="margin-right"],
.anniversary-60th-btn[style*="top"] {
    transition: transform 0.3s ease !important; /* Override any other transitions */
}

/* Force JS-applied styles to take precedence */
.anniversary-60th-btn[style] {
    margin-right: var(--anniversary-margin, 9em) !important;
}

/* Additional fallback for different language attributes */
.anniversary-60th-btn[data-lang="en"] {
    margin-right: 9em; /* Default English spacing */
}

.anniversary-60th-btn[data-lang="zh"],
.anniversary-60th-btn[data-lang="zh-hans"],
.anniversary-60th-btn[data-lang="zh-hant"] {
    margin-right: 5em; /* Default Chinese spacing */
}

/* Make the second list inline with anniversary button */
.menu .anniversary-60th-btn + ul {
    display: inline-block;
    vertical-align: top; /* Top alignment with anniversary button */
    margin: 0;
    padding: 0;
}

.menu .anniversary-60th-btn + ul li {
    display: inline-block;
    vertical-align: top; /* Top alignment to match menu structure */
    margin-bottom: 8px; /* Match the margin from the first ul items */
}

.menu .anniversary-60th-btn + ul li > a {
    padding: 0 28px; /* Match the padding from the first ul items */
}

.anniversary-60th-btn:hover {
    transform: scale(1.05);
}

.anniversary-60th-btn img {
    width: auto; /* Maintain aspect ratio */
    height: 48px; /* Default height to prevent flash of large image */
    object-fit: contain;
    display: block;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    margin: 0 !important; /* Remove any margins from the image */
    padding: 0 !important; /* Remove any padding from the image */
    transition: none !important; /* Prevent size transitions */
    /* Height will be set dynamically by JavaScript based on font-size */
}

/* Mobile Anniversary Button - Now in navigation menu */
.anniversary-menu-item .anniversary-60th-mobile-btn {
    display: block;
    padding: 15px 20px 15px 0; /* Remove left padding to align with menu text */
    text-align: left; /* Left align the button content */
}

.anniversary-menu-item .anniversary-60th-mobile-btn img {
    max-width: 120px;
    height: auto;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    margin-left: 0px; /* Align image with the "W" of "What's New" */
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .anniversary-60th-btn {
        display: none !important; /* Hide desktop version on mobile */
    }
    
    .anniversary-menu-item {
        display: block; /* Show in mobile menu */
    }
}

@media (min-width: 768px) {
    .anniversary-menu-item {
        display: none !important; /* Hide mobile menu version on tablet/desktop */
    }
    
    .anniversary-60th-btn {
        z-index: 0; /* behind menus */
        position: relative; /* ensure z-index takes effect */
        display: inline-block !important; /* Show desktop version on tablet/desktop */
    }

    /* Ensure desktop submenus appear above the button */
    .menu .submenu,
    .menu .submenu2,
    nav.menu .submenu,
    nav.menu .submenu2 {
        z-index: 99999; /* bring dropdowns to front */
        position: relative; /* preserve stacking; many menus already use absolute, but ensure z-index applies */
    }
    
    /* Also handle potential nested UL submenu variants used in responsive header */
    .header-responsive nav.menu ul > li > ul,
    .header-wrapper nav.menu ul > li > .submenu,
    .header-wrapper nav.menu ul > li > .submenu2 {
        z-index: 99999;
    }
}

/* Handle JavaScript-controlled tablet/mobile classes */
html.tablet .header-wrapper .header-container .anniversary-60th-btn,
html.mobile .header-wrapper .header-container .anniversary-60th-btn {
    display: none !important; /* Hide when JavaScript adds tablet/mobile classes */
}

html.tablet .header-responsive .anniversary-menu-item,
html.mobile .header-responsive .anniversary-menu-item {
    display: block !important; /* Show in responsive menu when JavaScript adds tablet/mobile classes */
}