/**
 * Main Styles for Physics Labs
 * Bootstrap 5.3.2 + UCB Custom Styles
 * Custom components and scientific content styles
 *
 * NOTE: All CSS variables now defined in theme-consolidated.css (imported first)
 * This file contains only additional styles not covered by other CSS files
 */

/* ==========================================================================
   Smooth Scrolling
   ========================================================================== */

html {
    scroll-behavior: auto;
}

/* Prevent horizontal scroll on mobile */
@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
}

/* ==========================================================================
   Link Styling - Handled by CSS Variable System
   ========================================================================== */

/* Visited links handled by theme.css CSS variables:
   --color-link-visited is set to match --color-link (no purple visited links)
   accessibility.css applies: a:visited { color: var(--color-link-visited); }

   This ensures consistent link colors across light/dark modes without overrides.
*/

/* ==========================================================================
   Note: Header, Navigation, Footer, Buttons, Messages handled by Bootstrap
   Custom overrides in ucb-overrides.css
   ========================================================================== */

/* ==========================================================================
   Note: Mobile navigation, dropdowns, typography handled by Bootstrap
   Back-to-top button styled in ucb-overrides.css
   ========================================================================== */

/* ==========================================================================
   Loading States
   ========================================================================== */

.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: var(--color-accent);
    animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
    to { transform: rotate(360deg); }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-elevated) 0%,
        var(--bg-tertiary) 50%,
        var(--bg-elevated) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
    border-radius: 4px;
}

.skeleton-text:last-child {
    width: 70%;
}

/* ==========================================================================
   Note: Form styling handled by Bootstrap
   Focus states with UCB gold in ucb-overrides.css
   ========================================================================== */

/* ==========================================================================
   Navigation Authentication (Login/Logout)
   ========================================================================== */

/* Style logout button to match navbar links exactly */
.logout-link-button {
    background: none;
    border: none;
    color: var(--nav-text) !important;
    font: inherit;
    cursor: pointer;
    padding: 10px;
    text-decoration: none !important;
    border-bottom: none !important;
    display: inline-block;
    transition: background-color 0.2s, color 0.2s;
}

/* Match navbar link hover state */
.logout-link-button:hover {
    color: var(--nav-text-hover) !important;
    background: var(--nav-dropdown-hover-bg);
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Focus state uses UCB Gold (handled by global focus styles) */
.logout-link-button:focus {
    outline: 3px solid var(--ucb-gold);
    outline-offset: 2px;
}