/*
Theme Name: Dự báo thời tiết
Description: Theme tin tức dự báo thời tiết các tỉnh thành Việt Nam. Được xây dựng với Tailwind CSS, thiết kế responsive, giao diện hiện đại và tối ưu cho tin tức thời tiết.
Version: 1.0.0
Author: Your Name
Text Domain: dubaothoitiet
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: weather, news, forecast, vietnam, provinces, responsive, modern, clean, tailwind

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* Reset and base styles will be handled by Tailwind CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom theme styles */
:root {
  --primary-color: #0ea5e9;
  --secondary-color: #1e293b;
  --accent-color: #f59e0b;
  --text-color: #374151;
  --light-gray: #f8fafc;
  --border-color: #e2e8f0;
  --weather-sunny: #fbbf24;
  --weather-cloudy: #6b7280;
  --weather-rainy: #3b82f6;
  --weather-stormy: #6366f1;
}

/* Custom component styles */
@layer components {
  .btn-primary {
    @apply bg-sky-500 hover:bg-sky-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
  }

  .btn-secondary {
    @apply bg-slate-600 hover:bg-slate-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
  }

  .btn-outline {
    @apply border border-sky-500 text-sky-600 hover:bg-sky-500 hover:text-white font-medium py-2 px-4 rounded-lg transition-all duration-200;
  }

  .card {
    @apply bg-white rounded-lg shadow-md overflow-hidden;
  }

  .container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  .weather-card {
    @apply bg-gradient-to-br from-sky-400 to-blue-500 text-white rounded-xl shadow-lg p-6;
  }

  .news-card {
    @apply bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden;
  }
}

/* Weather specific styles */
.weather-alert {
  @apply p-4 mb-4 rounded-lg border-l-4;
}

.weather-alert.sunny {
  @apply bg-yellow-50 border-yellow-400 text-yellow-800;
}

.weather-alert.cloudy {
  @apply bg-gray-50 border-gray-400 text-gray-800;
}

.weather-alert.rainy {
  @apply bg-blue-50 border-blue-400 text-blue-800;
}

.weather-alert.stormy {
  @apply bg-red-50 border-red-400 text-red-800;
}

/* News grid styles */
.news-grid {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}

.weather-forecast-grid {
  display: flex;
  gap: 20px;
}

/* Province weather styles */
.province-weather {
  @apply bg-white rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300;
}

/* Responsive utilities */
@media (max-width: 640px) {
  .container-custom {
    @apply px-4;
  }
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
}