/**
 * TOR/No-JavaScript Fallback Styles
 * Ensures clock displays with PROFESSIONAL colors
 * Only applies styles when JavaScript is truly disabled
 */

/* Default professional colors WITHOUT !important so JS can override */
/* These ensure visibility but allow JavaScript to update */

/* Greeting - Bright Blue like clearnet */
.header-greeting {
    color: #0ea5e9;  /* Professional cyan blue */
    font-size: 0.95rem;
    font-weight: 500;
    opacity: 1;
    transform: none;
}

/* Time - Pure White for prominence */
.header-time {
    color: #ffffff;  /* Pure white */
    font-size: 1.1rem;
    font-weight: 600;
    opacity: 1;
    transform: none;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Mono', Monaco, 'Courier New', monospace;
}

/* Date - Subtle Gray */
.header-date {
    color: #94a3b8;  /* Light gray */
    font-size: 0.85rem;
    font-weight: 400;
    opacity: 1;
    transform: none;
}

/* Special class added by JavaScript when it's active */
/* This allows JS to indicate it's running and take control */
.js-enabled .header-greeting,
.js-enabled .header-time,
.js-enabled .header-date {
    /* Allow JavaScript animations and updates */
    animation: fadeInSlide 1s ease forwards;
}

/* When JavaScript is definitely disabled (inside noscript tags) */
/* We can be more aggressive with styles here */
.no-js .header-greeting,
.no-js .header-time,
.no-js .header-date {
    opacity: 1 !important;
    transform: none !important;
}

/* Clock Container - Ensure proper layout */
.header-clock {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    flex-direction: row !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Divider - Professional gradient separator */
.header-clock-divider {
    width: 1px !important;
    height: 30px !important;
    background: linear-gradient(to bottom, transparent, #334155, transparent) !important;
    display: inline-block !important;
    opacity: 1 !important;
}

/* Ensure all clock children are visible with proper spacing */
.header-clock > * {
    visibility: visible !important;
}

/* Match the same margin-left as JS version */
.header-clock > * {
    margin-left: 0.75rem !important;
    margin-right: 0 !important;
}

.header-clock > *:first-child {
    margin-left: 0 !important;
}

/* Ensure timezone label is visible */
.header-timezone {
    font-size: 0.75rem;
    color: #64748b;
    margin-left: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Fix layout for no-JS environments */
@supports not (display: flex) {
    .header-clock {
        display: table;
    }
    
    .header-clock > * {
        display: table-cell;
        vertical-align: middle;
        padding: 0 0.5rem;
    }
}

/* Professional glow effect for TOR users without JS */
.header-time {
    /* White glow for main time */
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.5),
                 0 0 6px rgba(255, 255, 255, 0.3),
                 0 0 10px rgba(14, 165, 233, 0.2);
    opacity: 1 !important;  /* Ensure visibility */
}

/* Glowing seconds for TOR users */
.header-time .seconds {
    color: #0ea5e9 !important;  /* Cyan blue */
    text-shadow: 0 0 4px rgba(14, 165, 233, 0.8),
                 0 0 8px rgba(14, 165, 233, 0.5),
                 0 0 12px rgba(14, 165, 233, 0.3) !important;
    font-weight: 700 !important;
}