/**
 * Header Clock and Greeting Styles
 * Integrates with Cybria Security Insights header
 * Compatible with all modern and legacy browsers
 */

/* Clock container in header - RIGHT ALIGNED */
.header-clock {
    /* Modern flexbox - must stay horizontal! */
    display: -webkit-box !important;      /* Old Safari, iOS */
    display: -moz-box !important;         /* Old Firefox */
    display: -ms-flexbox !important;      /* IE 10 */
    display: -webkit-flex !important;     /* Safari */
    display: flex !important;             /* Modern browsers */
    
    /* Force horizontal direction */
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    -webkit-flex-direction: row !important;
    flex-direction: row !important;
    
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    
    /* CRITICAL: Push to right edge */
    margin-left: auto !important;
    margin-right: 0 !important;
    
    /* Prevent wrapping - CRITICAL */
    -ms-flex-wrap: nowrap !important;
    -webkit-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important; /* FORCE single line */
    
    /* Prevent being squeezed */
    -ms-flex-shrink: 0 !important;
    -webkit-flex-shrink: 0 !important;
    flex-shrink: 0 !important;
    
    /* Proper sizing */
    min-width: fit-content;
    
    /* Modern gap support */
    gap: 0.75rem;
    -webkit-gap: 0.75rem;
    -moz-gap: 0.75rem;
    
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    padding-right: 1.5rem; /* Space from right edge */
    padding-left: 1.5rem;  /* Space from nav */
}

/* Style clock elements to stay on one line */
.header-clock > * {
    margin-left: 0.75rem !important;
    margin-right: 0 !important;
    white-space: nowrap !important; /* No line breaks */
    -webkit-flex-shrink: 0 !important;
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important; /* Don't shrink */
    display: inline-block !important;
    vertical-align: middle;
}

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

/* Hide divider on very small screens */
@media (max-width: 480px) {
    .header-clock-divider {
        display: none !important;
    }
}

/* Greeting text */
.header-greeting {
    font-size: 0.95rem;
    font-weight: 500;
    color: #0ea5e9;
    letter-spacing: 0.5px;
    white-space: nowrap; /* Prevent wrapping */
    opacity: 0;
    -webkit-animation: fadeInSlide 1s ease forwards;
    -moz-animation: fadeInSlide 1s ease forwards;
    animation: fadeInSlide 1s ease forwards;
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

/* Clock display with professional glow */
.header-time {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    /* Professional glow effect - more visible */
    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);
    /* Fallback for browsers without font-variant-numeric */
    font-variant-numeric: tabular-nums;
    -moz-font-feature-settings: "tnum";
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
    letter-spacing: 1px;
    white-space: nowrap; /* Prevent wrapping */
    opacity: 0;
    -webkit-animation: fadeInSlide 1s ease forwards;
    -moz-animation: fadeInSlide 1s ease forwards;
    animation: fadeInSlide 1s ease forwards;
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

/* Date display */
.header-date {
    font-size: 0.85rem;
    color: #94a3b8;
    font-weight: 400;
    white-space: nowrap; /* Prevent wrapping */
    opacity: 0;
    -webkit-animation: fadeInSlide 1s ease forwards;
    -moz-animation: fadeInSlide 1s ease forwards;
    animation: fadeInSlide 1s ease forwards;
    -webkit-animation-delay: 0.9s;
    -moz-animation-delay: 0.9s;
    animation-delay: 0.9s;
}

/* Divider between elements */
.header-clock-divider {
    width: 1px;
    height: 30px;
    /* Fallback for browsers without gradient support */
    background: #334155;
    /* Modern gradient */
    background: -webkit-linear-gradient(top, transparent, #334155, transparent);
    background: -moz-linear-gradient(top, transparent, #334155, transparent);
    background: linear-gradient(to bottom, transparent, #334155, transparent);
}

/* Animation - with vendor prefixes for older browsers */
@-webkit-keyframes fadeInSlide {
    from {
        opacity: 0;
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-moz-keyframes fadeInSlide {
    from {
        opacity: 0;
        -moz-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
}

/* Responsive adjustments - Keep clock visible on all screens */
@media (max-width: 900px) {
    /* Ensure clock stays visible on tablet/mobile */
    .site-header .container {
        flex-wrap: wrap !important;
    }
    
    .header-clock {
        /* Force horizontal row layout */
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        
        order: 3;
        margin-top: 0.75rem;
        margin-left: 0 !important;
        width: 100%;
        justify-content: flex-start;
    }
    
    /* Slightly smaller fonts on smaller screens */
    .header-greeting {
        font-size: 0.85rem;
    }
    
    .header-time {
        font-size: 1rem;
    }
    
    .header-date {
        font-size: 0.8rem;
    }
}

@media (max-width: 640px) {
    /* Even more compact on small mobile */
    .header-greeting {
        font-size: 0.8rem;
    }
    
    .header-time {
        font-size: 0.95rem;
    }
    
    .header-date {
        font-size: 0.75rem;
    }
    
    /* Reduce spacing between elements */
    .header-clock > * {
        margin-left: 1rem;
    }
}

/* Removed duplicate - merged into main responsive section above */

/* Glowing effect for seconds - Fades out when seconds change */
.header-time .seconds {
    color: #0ea5e9;  /* Cyan blue for seconds */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;  /* Match the time font weight */
    font-size: 1.1rem;  /* EXPLICIT: Match time size */
    /* Reduced brightness - subtle glow */
    text-shadow: 0 0 6px rgba(14, 165, 233, 0.6),
                 0 0 12px rgba(14, 165, 233, 0.4),
                 0 0 18px rgba(14, 165, 233, 0.2);
    /* 1 second cycle - fades when seconds change */
    -webkit-animation: seconds-fade 1s ease-in-out infinite;
    animation: seconds-fade 1s ease-in-out infinite;
}

/* Fade animation - syncs with seconds changing (1s cycle) */
@keyframes seconds-fade {
    0% {
        opacity: 0.85;  /* Start visible */
        text-shadow: 0 0 6px rgba(14, 165, 233, 0.6),
                     0 0 12px rgba(14, 165, 233, 0.4),
                     0 0 18px rgba(14, 165, 233, 0.2);
    }
    50% {
        opacity: 1;  /* Peak brightness */
        text-shadow: 0 0 8px rgba(14, 165, 233, 0.7),
                     0 0 16px rgba(14, 165, 233, 0.5),
                     0 0 24px rgba(14, 165, 233, 0.3);
    }
    100% {
        opacity: 0.6;  /* Fade out when second changes */
        text-shadow: 0 0 4px rgba(14, 165, 233, 0.4),
                     0 0 8px rgba(14, 165, 233, 0.2);
    }
}

@-webkit-keyframes seconds-fade {
    0% {
        opacity: 0.85;
        text-shadow: 0 0 6px rgba(14, 165, 233, 0.6),
                     0 0 12px rgba(14, 165, 233, 0.4),
                     0 0 18px rgba(14, 165, 233, 0.2);
    }
    50% {
        opacity: 1;
        text-shadow: 0 0 8px rgba(14, 165, 233, 0.7),
                     0 0 16px rgba(14, 165, 233, 0.5),
                     0 0 24px rgba(14, 165, 233, 0.3);
    }
    100% {
        opacity: 0.6;
        text-shadow: 0 0 4px rgba(14, 165, 233, 0.4),
                     0 0 8px rgba(14, 165, 233, 0.2);
    }
}

@-webkit-keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.85;
    }
}

@-moz-keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.85;
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.85;
    }
}

/* Timezone label (UTC for TOR users, EST for regular users) */
.timezone-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;  /* Subtle gray */
    margin-left: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
}

/* Responsive timezone label */
@media (max-width: 768px) {
    .timezone-label {
        font-size: 0.65rem;
    }
}

/* Iframe clock for TOR users (auto-updating) */
.header-clock-iframe {
    border: none;
    background: transparent;
    width: 100%;
    max-width: 450px;
    height: 50px;
    margin-left: auto;
    overflow: hidden;
    /* Smooth fade transition to hide refresh flash */
    opacity: 1;
    transition: opacity 0.15s ease-in-out;
    will-change: opacity;
}

@media (max-width: 768px) {
    .header-clock-iframe {
        max-width: 100%;
        height: 45px;
    }
}

@media (max-width: 480px) {
    .header-clock-iframe {
        height: 40px;
    }
}