/* =========================================================================
   CUSTOM UI REFINEMENTS (Direct CSS overrides to bypass SCSS)
   ========================================================================= */

/* 1. Fix for Navbar Text Visibility */
.navbar-temple .navbar-nav .nav-link span {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #333333 !important; /* Ensure readable dark color */
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: normal !important;
}

.navbar-temple .navbar-nav .nav-link.active span {
    color: #ffffff !important; /* White text for active pill */
}

/* 2. Increased Logo Size (More prominent) */
.navbar-brand img {
    height: 75px !important; /* Increased from 60px */
    width: auto !important;
    max-height: none !important;
    object-fit: contain;
    transition: all 0.3s ease;
}

@media (max-width: 991.98px) {
    .navbar-brand img {
        height: 60px !important; /* Mobile logo size increased */
    }
}

/* Prevent any other global span styles from hiding menu items */
#tNav .nav-link span {
    display: inline !important;
}

/* Ensure dropdown items are also visible and readable */
.navbar-temple .dropdown-menu .dropdown-item {
    color: #333333 !important;
    font-weight: 600 !important;
}
  
/* 3. Scroll to Top Button Position (Above Audio Control) */
.scroll-top {
    position: fixed !important;
    right: 30px !important;
    bottom: 120px !important;
    width: 45px !important;
    height: 45px !important;
    background: #FFD700 !important;
    color: #851221 !important;
    border-radius: 50% !important;
    display: flex !important;
    opacity: 1 !important; /* FORCED VISIBLE */
    visibility: visible !important; /* FORCED VISIBLE */
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    transition: all 0.4s ease !important;
    z-index: 10000 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    pointer-events: auto !important; /* FORCED ACTIVE */
}

.scroll-top.visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}