/* Universal Navigation and Footer Styling System */

/* ===== UNIVERSAL LINK STYLES ===== */
/* Base styles for all navigation elements */
.universal-nav-link {
    font-family: 'Orbitron', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-size: 0.744rem; /* 15% smaller than 0.875rem */
    font-weight: 300;
    color: inherit;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    display: block;
    border-radius: 4px;
}

/* Universal hover effects - text color only */
.universal-nav-link:hover {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
    background-color: transparent !important;
}

/* Light theme hover effects - text color only */
[data-theme='light'] .universal-nav-link:hover {
    color: rgba(0, 0, 0, 0.8);
    background-color: transparent !important;
}

/* ===== UNIVERSAL HEADING STYLES ===== */
.universal-nav-heading {
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: inherit;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== UNIVERSAL TEXT STYLES ===== */
.universal-nav-text {
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-size: 0.875rem;
    font-weight: 300;
    color: inherit;
    line-height: 1.5;
}

/* ===== THEME-AWARE COLOR SYSTEM ===== */
/* Use CSS custom properties for consistent theming */
.universal-nav-link,
.universal-nav-heading,
.universal-nav-text {
    color: var(--text-color);
    transition: color 0.2s ease-in-out;
}

.universal-nav-link:hover {
    color: var(--link-hover-color);
    background-color: var(--navbar-link-hover-background-color);
}

/* Dark theme specific overrides */
[data-theme='dark'] .universal-nav-link,
[data-theme='dark'] .universal-nav-heading,
[data-theme='dark'] .universal-nav-text {
    color: var(--text-color);
}

[data-theme='dark'] .universal-nav-link:hover {
    color: var(--link-hover-color);
    background-color: var(--navbar-link-hover-background-color);
}

/* Light theme specific overrides */
[data-theme='light'] .universal-nav-link,
[data-theme='light'] .universal-nav-heading,
[data-theme='light'] .universal-nav-text {
    color: var(--text-color);
}

[data-theme='light'] .universal-nav-link:hover {
    color: var(--link-hover-color);
    background-color: var(--navbar-link-hover-background-color);
}

/* ===== DROPDOWN HOVER FIX ===== */
/* Fix dropdown disappearing when moving mouse from navbar item to dropdown */
.navbar .nav-item:hover .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.navbar .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    /* Add padding to create larger hover area */
    padding: 0.5rem 0;
    margin-top: 0.25rem;
}

.navbar .dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
}

/* Increase hover area for dropdown items */
.navbar .dropdown-menu .dropdown-item {
    padding: 0.75rem 1.5rem;
    margin: 0.125rem 0;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease-in-out;
}

.navbar .dropdown-menu .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Extend hover area for nav-item to include dropdown */
.navbar .nav-item {
    position: relative;
}

.navbar .nav-item::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 0.5rem;
    background: transparent;
    z-index: 1000;
}

/* ===== NAVBAR SPECIFIC STYLES ===== */
/* Apply universal styles to navbar elements */
.navbar .nav-link {
    font-family: 'Orbitron', 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
    font-size: 0.944rem !important; /* 15% smaller than 0.875rem */
    font-weight: 300;
    color: inherit;
    transition: all 0.2s ease-in-out;
}

.navbar .nav-link:hover {
    color: rgba(255, 255, 255, 0.8);
    background-color: transparent !important;
}

[data-theme='light'] .navbar .nav-link:hover {
    color: rgba(0, 0, 0, 0.8);
    background-color: transparent !important;
}

/* ===== FOOTER SPECIFIC STYLES ===== */
/* Footer spacing and layering */
.footer {
    margin-top: auto;
    position: relative;
    z-index: 1;
    background: transparent;
    clear: both;
    display: block;
    flex-shrink: 0;
}

/* Override Bootstrap's blue footer link color with theme-aware colors */
.footer .nav-link {
    color: var(--text-color) !important;
    font-weight: 300;
    font-size: 0.875rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.footer .nav-link:hover {
    color: rgba(255, 255, 255, 0.6) !important;
    background-color: transparent !important;
    opacity: 1 !important;
}

/* Specific hover styles for hover-link class in footer */
.footer .nav-link.hover-link:hover {
    color: rgba(255, 255, 255, 0.6) !important;
    background-color: transparent !important;
    text-decoration: none !important;
    opacity: 1 !important;
}

/* Light theme hover effects - lighter color for important elements */
[data-theme='light'] .footer .nav-link:hover,
[data-theme='light'] .footer .nav-link.hover-link:hover {
    color: rgba(0, 0, 0, 0.5) !important;
    background-color: transparent !important;
    opacity: 1 !important;
}

/* Apply universal styles to footer elements */
.footer .footer-link {
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-size: 0.875rem;
    font-weight: 300;
    color: var(--text-color);
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    display: block;
    border-radius: 4px;
}

.footer .footer-link:hover {
    text-decoration: none;
    color: var(--link-hover-color);
    background-color: var(--navbar-link-hover-background-color);
}

.footer h6 {
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s ease-in-out;
}

.footer .footer-copyright,
.footer .footer-legal {
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-size: 0.875rem;
    font-weight: 300;
    color: var(--text-color);
    transition: color 0.2s ease-in-out;
}

.footer .footer-legal-text {
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-size: 0.875rem !important;
    font-weight: 300 !important;
    line-height: 1.5;
    color: var(--text-color) !important;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    transition: color 0.2s ease-in-out;
}

.footer .footer-legal-text.hover-link:hover {
    color: rgba(255, 255, 255, 0.6) !important;
    background-color: transparent !important;
    text-decoration: none !important;
    opacity: 1 !important;
}

[data-theme='light'] .footer .footer-legal-text.hover-link:hover {
    color: rgba(0, 0, 0, 0.5) !important;
    background-color: transparent !important;
    opacity: 1 !important;
}

/* ===== ANNOUNCEMENTS BAR STYLES ===== */
.announcements-bar {
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
}

.announcements-bar * {
    color: inherit !important;
}

/* Theme-aware announcements bar colors */
/* Default to dark theme to prevent flash */
.announcements-bar {
    color: white !important;
    background-color: rgba(0, 0, 0, 0.9) !important;
}

.announcements-bar * {
    color: white !important;
}

[data-theme='dark'] .announcements-bar {
    color: white !important;
    background-color: rgba(0, 0, 0, 0.9) !important;
}

[data-theme='dark'] .announcements-bar * {
    color: white !important;
}

[data-theme='light'] .announcements-bar {
    color: #333 !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme='light'] .announcements-bar * {
    color: #333 !important;
}

/* ===== CONTENT LAYERING PROTECTION ===== */
/* Ensure content sections never overlap footer */
.content-view,
.content-frame,
.content-section {
    position: relative;
    z-index: 2;
    margin-bottom: 2rem;
}

/* Ensure modals and overlays stay above footer but below navbar */
.modal,
.dropdown-menu,
.tooltip,
.popover {
    z-index: 1000;
}

/* Ensure footer always stays at bottom */
.footer {
    position: relative;
    z-index: 1;
    clear: both;
    margin-top: auto;
    flex-shrink: 0;
}