/* CNYWeather.com - Clean Theme System using Bootstrap 5.3.3 */

/* ========================================
   CUSTOM CSS VARIABLES (Bootstrap Compatible)
   ======================================== */
:root {
  /* CNY Brand Colors - These override Bootstrap's defaults */
  --cny-accent: #ffb300;           /* Signature orange */
  --cny-accent-light: #cf8500;     /* Light mode orange */
  --cny-accent-hover: #ffd54f;     /* Hover state */
  
  /* Custom surface colors for weather data */
  --cny-weather-bg: #1a1f29;       /* Weather data background */
  --cny-weather-bg-light: #f8f9fa; /* Light mode weather bg */
  --cny-weather-border: #2e3747;   /* Weather data borders */
  --cny-weather-border-light: #dee2e6; /* Light mode borders */
}

/* ========================================
   BOOTSTRAP THEME OVERRIDES
   ======================================== */

/* Override Bootstrap's primary color with our accent */
[data-bs-theme="dark"] {
  --bs-primary: var(--cny-accent);
  --bs-primary-rgb: 255, 179, 0;
}

[data-bs-theme="light"] {
  --bs-primary: var(--cny-accent-light);
  --bs-primary-rgb: 207, 133, 0;
}

/* ========================================
   NAVIGATION STYLING
   ======================================== */
.navbar {
  position: relative;
  z-index: 9999;
}

.navbar .nav-link {
  color: var(--bs-navbar-color) !important;
}

.navbar .nav-link:hover {
  color: var(--cny-accent) !important;
}

/* ========================================
   WEATHER DATA STYLING
   ======================================== */
.weather-data-container {
  background: var(--cny-weather-bg);
  border: 1px solid var(--cny-weather-border);
  border-radius: 0.375rem;
  padding: 1rem;
}

[data-bs-theme="light"] .weather-data-container {
  background: var(--cny-weather-bg-light);
  border-color: var(--cny-weather-border-light);
}

.station-observations-label {
  color: var(--bs-body-color) !important;
  font-weight: 600 !important;
}

.barometer,
.dew-point,
.humidity,
.daily-rain,
.rain-rate,
.wind-speed,
.wind-gust,
.wind-direction {
  color: var(--bs-body-color) !important;
  font-weight: 500 !important;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.text-cny-accent {
  color: var(--cny-accent) !important;
}

.bg-cny-accent {
  background-color: var(--cny-accent) !important;
}

.border-cny-accent {
  border-color: var(--cny-accent) !important;
}

/* ========================================
   MOBILE HAMBURGER MENU
   ======================================== */
.mobile-hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1000;
}

.mobile-hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--bs-navbar-color);
  border-radius: 2px;
  transition: all 0.3s ease;
}

@media (max-width: 991.98px) {
  .mobile-hamburger {
    display: flex;
  }
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */
@media (max-width: 768px) {
  .navbar-brand .brand-text {
    font-size: 0.9rem;
  }
  
  .navbar-brand .brand-subtitle {
    font-size: 0.7rem;
  }
}

/* ========================================
   CUSTOM COMPONENTS
   ======================================== */

/* Live data indicator */
.live-ripple {
  color: var(--cny-accent);
  animation: ripple 2s infinite;
}

@keyframes ripple {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* Status indicators */
.status-dot {
  color: var(--bs-success);
}

.data-status {
  color: var(--bs-body-color);
}

.last-updated {
  color: var(--bs-body-color);
  font-size: 0.875rem;
}

/* ========================================
   FORM STYLING
   ======================================== */
.form-control:focus {
  border-color: var(--cny-accent);
  box-shadow: 0 0 0 0.2rem rgba(255, 179, 0, 0.25);
}

/* ========================================
   ALERT STYLING
   ======================================== */
.alert-cny {
  background-color: rgba(255, 179, 0, 0.1);
  border-color: var(--cny-accent);
  color: var(--bs-body-color);
}

/* ========================================
   CARD STYLING
   ======================================== */
.card-cny {
  border-color: var(--cny-accent);
}

.card-cny .card-header {
  background-color: rgba(255, 179, 0, 0.1);
  border-bottom-color: var(--cny-accent);
}

/* ========================================
   LEGACY SUPPORT (Minimal)
   ======================================== */

/* Keep only essential legacy styles that can't be replaced */
body {
  font-family: var(--bs-font-sans-serif);
}

/* Ensure proper contrast for weather data */
[data-bs-theme="dark"] .weather-data-container {
  background: #1a1f29;
  border-color: #2e3747;
}

[data-bs-theme="light"] .weather-data-container {
  background: #f8f9fa;
  border-color: #dee2e6;
}