/* 
 * Lumon Clock Component Styles
 * Corporate-style clock for header display
 */

.lumon-clock {
  font-family: 'VT323', 'Courier New', 'Monaco', monospace;
  font-weight: 400;
  font-size: 1.5rem;
  color: #8FE2FF;
  letter-spacing: 0.1em;
  user-select: none;
  white-space: nowrap;
  transition: color 0.2s ease;
  text-shadow: 0 0 10px rgba(143, 226, 255, 0.5);
}

.lumon-clock-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 120px;
  padding: 0.5rem 0;
}

/* Corporate styling variations */
.lumon-clock.large {
  font-size: 1.25rem;
  font-weight: 600;
}

.lumon-clock.small {
  font-size: 0.875rem;
}

.lumon-clock.bold {
  font-weight: 700;
}

/* Error state styling */
.lumon-clock-error {
  color: #dc3545;
  font-style: italic;
}

/* Header integration styles */
.site-header .lumon-clock {
  color: #8FE2FF;
  font-weight: 400;
  text-shadow: 0 0 15px rgba(143, 226, 255, 0.7);
}

.site-header .lumon-clock-container {
  margin-left: auto;
}

/* Responsive behavior */
@media (max-width: 767px) {
  .lumon-clock {
    font-size: 1rem;
  }
  
  .lumon-clock-container {
    min-width: 100px;
    justify-content: center;
    margin-top: 0.5rem;
  }
}

@media (max-width: 480px) {
  .lumon-clock {
    font-size: 0.875rem;
  }
  
  .lumon-clock-container {
    min-width: 90px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .lumon-clock {
    color: #000000;
    font-weight: 700;
  }
  
  .lumon-clock-error {
    color: #ff0000;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .lumon-clock {
    transition: none;
  }
}

/* Print styles */
@media print {
  .lumon-clock-container {
    display: none;
  }
}