/* Theme System
–––––––––––––––––––––––––––––––––––––––––––––––––– */

:root {
  /* Light theme (default) */
  --bg-color: #ffffff;
  --text-color: #222222;
  --text-secondary: #666666;
  --heading-color: #333333;
  --link-color: #1EAEDB;
  --link-hover: #0FA0CE;
  --border-color: #E1E1E1;
  --card-bg: #f9f9f9;
  --status-warning-bg: #fff3cd;
  --status-danger-bg: #f8d7da;
  --status-success-bg: #d4edda;
  --banner-bg: #6b46c1;
  --banner-text: #ffffff;
  --button-border: #bbb;
  --button-text: #555;
  --image-bg: transparent;
  --image-border: none;
}

[data-theme="dark"] {
  --bg-color: #1a1a2e;
  --text-color: #e0e0e0;
  --text-secondary: #a0a0a0;
  --heading-color: #ffffff;
  --link-color: #4fc3f7;
  --link-hover: #81d4fa;
  --border-color: #3a3a5a;
  --card-bg: #252542;
  --status-warning-bg: #4a4020;
  --status-danger-bg: #4a2020;
  --status-success-bg: #204a20;
  --banner-bg: #8b5cf6;
  --banner-text: #ffffff;
  --button-border: #5a5a7a;
  --button-text: #c0c0c0;
  --image-bg: transparent;
  --image-border: none;
}

[data-theme="hotdog"] {
  --bg-color: #FF0000;
  --text-color: #FFFF00;
  --text-secondary: #FFFF00;
  --heading-color: #FFFF00;
  --link-color: #FFFF00;
  --link-hover: #FFFFFF;
  --border-color: #FFFF00;
  --card-bg: #FFFF00;
  --card-text: #FF0000;
  --status-warning-bg: #FFFF00;
  --status-danger-bg: #FFFF00;
  --status-success-bg: #FFFF00;
  --banner-bg: #FFFF00;
  --banner-text: #FF0000;
  --button-border: #FFFF00;
  --button-text: #FFFF00;
  --image-bg: #FFFFFF;
  --image-border: 3px solid #000000;
}

/* Base Theme Application
–––––––––––––––––––––––––––––––––––––––––––––––––– */

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
}

a {
  color: var(--link-color);
}

a:hover {
  color: var(--link-hover);
}

hr {
  border-top-color: var(--border-color);
}

/* Component Theming
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.methodology {
  background-color: var(--card-bg);
}

[data-theme="hotdog"] .methodology {
  color: var(--card-text);
}

[data-theme="hotdog"] .methodology h3,
[data-theme="hotdog"] .methodology h4 {
  color: var(--card-text);
}

.status-message.warning {
  --status-bg: var(--status-warning-bg);
}

.status-message.danger {
  --status-bg: var(--status-danger-bg);
}

.status-message.success {
  --status-bg: var(--status-success-bg);
}

[data-theme="hotdog"] .status-message {
  color: #FF0000;
}

.ai-banner {
  background-color: var(--banner-bg);
  color: var(--banner-text);
}

.footer {
  color: var(--text-secondary);
}

.footer a {
  color: var(--link-color);
}

/* Image Theming (for transparent backgrounds)
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.iguana-image {
  background-color: var(--image-bg);
  border: var(--image-border);
}

[data-theme="hotdog"] .iguana-image {
  padding: 8px;
  border-radius: 0;
}

/* Theme Switcher
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.theme-switcher,
.unit-switcher {
  display: inline-flex;
  gap: 0.5rem;
  margin-left: 1rem;
  vertical-align: middle;
}

.theme-btn,
.unit-btn {
  background: transparent;
  border: 2px solid var(--button-border);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  transition: transform 0.2s ease, border-color 0.2s ease;
  line-height: 1;
  color: var(--text-color);
}

.unit-btn {
  font-size: 14px;
  font-weight: 600;
}

.theme-btn:hover,
.unit-btn:hover {
  transform: scale(1.1);
  border-color: var(--link-color);
}

.theme-btn.active,
.unit-btn.active {
  border-color: var(--link-color);
  background-color: var(--card-bg);
}

[data-theme="hotdog"] .theme-btn,
[data-theme="hotdog"] .unit-btn {
  border-color: #FFFF00;
  color: #FFFF00;
}

[data-theme="hotdog"] .theme-btn.active,
[data-theme="hotdog"] .unit-btn.active {
  background-color: #FFFF00;
  color: #FF0000;
}

/* Weather Cards
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.location-cards {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin: 2rem 0;
}

.weather-card {
  background-color: var(--card-bg);
  border-radius: 12px;
  padding: 1.5rem;
  min-width: 200px;
  max-width: 280px;
  flex: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Risk-level card styling */
.weather-card.card-success {
  background-color: #f0fdf4;
  border-color: #22c55e;
}

.weather-card.card-caution {
  background-color: #fffbeb;
  border-color: #f59e0b;
}

.weather-card.card-warning {
  background-color: #fff7ed;
  border-color: #f97316;
}

.weather-card.card-danger {
  background-color: #fef2f2;
  border-color: #ef4444;
}

[data-theme="dark"] .weather-card.card-success {
  background-color: #14532d;
  border-color: #22c55e;
}

[data-theme="dark"] .weather-card.card-caution {
  background-color: #422006;
  border-color: #f59e0b;
}

[data-theme="dark"] .weather-card.card-warning {
  background-color: #431407;
  border-color: #f97316;
}

[data-theme="dark"] .weather-card.card-danger {
  background-color: #450a0a;
  border-color: #ef4444;
}

[data-theme="hotdog"] .weather-card.card-success,
[data-theme="hotdog"] .weather-card.card-caution,
[data-theme="hotdog"] .weather-card.card-warning,
[data-theme="hotdog"] .weather-card.card-danger {
  background-color: #FFFF00;
  border: 3px solid #FF0000;
}

.weather-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .weather-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .weather-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="hotdog"] .weather-card {
  border-radius: 0;
  border: 3px solid #FFFF00;
  box-shadow: none;
  color: var(--card-text);
}

[data-theme="hotdog"] .weather-card:hover {
  transform: none;
  box-shadow: none;
}

.weather-card__city {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: var(--heading-color);
  order: 1;
}

[data-theme="hotdog"] .weather-card__city {
  color: var(--card-text);
}

.weather-card__temp {
  font-size: 1.2rem;
  font-weight: 400;
  margin: 0.5rem 0 0 0;
  color: var(--heading-color);
  order: 4;
}

[data-theme="hotdog"] .weather-card__temp {
  color: var(--card-text);
}

.weather-card__badge {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0.5rem 0;
  order: 2;
}

.weather-card__badge.success {
  background-color: #d4edda;
  color: #155724;
}

.weather-card__badge.caution {
  background-color: #fff3cd;
  color: #856404;
}

.weather-card__badge.warning {
  background-color: #ffe5d0;
  color: #8a4000;
}

.weather-card__badge.danger {
  background-color: #f8d7da;
  color: #721c24;
}

[data-theme="dark"] .weather-card__badge.success {
  background-color: #1e4620;
  color: #a3d9a5;
}

[data-theme="dark"] .weather-card__badge.caution {
  background-color: #4a4020;
  color: #ffd966;
}

[data-theme="dark"] .weather-card__badge.warning {
  background-color: #4a3020;
  color: #ffb366;
}

[data-theme="dark"] .weather-card__badge.danger {
  background-color: #4a2020;
  color: #f5a5a5;
}

[data-theme="hotdog"] .weather-card__badge {
  border-radius: 0;
  border: 2px solid #FF0000;
  background-color: #FFFF00;
  color: #FF0000;
}

.weather-card__status {
  font-size: 0.95rem;
  margin: 0.5rem 0 0 0;
  color: var(--text-secondary);
  order: 3;
}

[data-theme="hotdog"] .weather-card__status {
  color: var(--card-text);
}

.weather-card__icon {
  font-size: 1.2rem;
  margin-right: 0.3rem;
}

/* Mobile Responsive
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media (max-width: 550px) {
  .container {
    margin-top: 2rem !important;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .iguana-image {
    width: 200px !important;
    height: 200px !important;
  }

  .methodology {
    padding: 1rem !important;
    margin-top: 2rem !important;
  }

  .location-cards {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 0;
    margin: 1.5rem 0;
  }

  .weather-card {
    width: auto;
    max-width: none;
    min-width: auto;
    margin: 0;
    box-sizing: border-box;
  }

  .weather-card__city {
    font-size: 1.4rem;
  }

  .weather-card__badge {
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }

  .footer-content {
    flex-direction: column;
    gap: 1rem;
  }

  .theme-switcher {
    margin-left: 0;
    margin-top: 0.5rem;
  }
}