/**
 * Weather Dashboard - Stylesheet
 * 
 * Comprehensive styling for the Weather Dashboard application including
 * responsive design, animations, and modern UI elements.
 * 
 * @author Mohammed Aflah
 * @author Ayra Riyaz
 * @version 1.0.0
 * @year 2025
 * @license MIT
 * 
 * Features:
 * - Responsive grid layouts
 * - Smooth animations and transitions
 * - Gradient backgrounds
 * - Mobile-first design
 * - Interactive hover effects
 * 
 * Copyright (c) 2025 Mohammed Aflah and Ayra Riyaz
 */

/* ==========================================================================
   Global Reset and Base Styles
   ========================================================================== */

/**
 * Reset default browser styles for consistent rendering
 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/**
 * Body styling with background image and gradient overlay
 * Creates an immersive weather-themed interface
 */
body {
  font-family: Arial, sans-serif;
  background: linear-gradient(
      rgba(0, 0, 0, 0.4),
      rgba(0, 0, 0, 0.4)
    ),
    url('images/image.png'); /* Local background image */
  background-size: cover;
  background-position: center;
  padding: 1rem;
  min-height: 100vh;
  animation: fadeInBody 1s ease-in-out;
}

/**
 * Fade-in animation for body element
 * Provides smooth initial page load experience
 */
@keyframes fadeInBody {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ==========================================================================
   Container Styles
   ========================================================================== */

/**
 * Main container for the weather dashboard
 * Features sky-blue gradient to match weather theme
 */
.container {
  max-width: 500px;
  margin: 2rem auto;
  background: linear-gradient(135deg, #cceeff, #a3d8f4); /* Sky blue gradient */
  padding: 1rem 1.5rem;
  border-radius: 10px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
  text-align: center;
  animation: fadeInContainer 0.8s ease-in-out;
}

/**
 * Container fade-in animation with slide-up effect
 */
@keyframes fadeInContainer {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/**
 * Main heading style
 */
h1 {
  margin-bottom: 1rem;
  color: #333;
}

/* ==========================================================================
   Search Bar Styles
   ========================================================================== */

/**
 * Search bar container with flexbox layout
 */
.search-bar {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

/**
 * Search input field styling
 */
.search-bar input {
  padding: 0.5rem;
  width: 70%;
  border: 1px solid #ccc;
  border-radius: 5px 0 0 5px;
  font-size: 1rem;
}

/**
 * Search button with hover effects
 * Green color scheme for positive action
 */
.search-bar button {
  background: #04c65c;
  border: none;
  color: #fff;
  font-size: 1rem;
  padding: 0 1rem;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s;
}

/**
 * Search button hover state
 * Includes scale transformation for interactive feedback
 */
.search-bar button:hover {
  background: #03a74e;
  transform: scale(1.05);
}

/* ==========================================================================
   Tab Navigation Styles
   ========================================================================== */

/**
 * Tab container for switching between views
 */
.tabs {
  margin-bottom: 1rem;
}

/**
 * Individual tab button styling
 */
.tabs button {
  padding: 0.5rem 1rem;
  border: none;
  background: #eee;
  margin: 0 4px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 1rem;
  transition: background 0.3s;
}

/**
 * Active tab styling
 * Uses green accent color to match search button
 */
.tabs .active {
  background: #04c65c;
  color: white;
}

/* ==========================================================================
   Weather Card Styles
   ========================================================================== */

/**
 * Base card styling for weather displays
 * Includes fade-in animation on render
 */
.weather-card,
.forecast-card,
.placeholder-card {
  background: #fafafa;
  padding: 1rem;
  margin-top: 1rem;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  animation: fadeInCard 0.6s ease forwards;
}

/**
 * Card fade-in animation with scale effect
 * Creates smooth appearance of weather data
 */
@keyframes fadeInCard {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/**
 * Weather card heading styles
 */
.weather-card h2 {
  margin-bottom: 0.5rem;
  color: #222;
}

/**
 * Weather card paragraph text
 */
.weather-card p {
  margin: 0.3rem 0;
  font-size: 1rem;
  color: #444;
}

/* ==========================================================================
   Forecast Styles
   ========================================================================== */

/**
 * Forecast grid layout
 * Responsive grid that adapts to screen size
 */
.forecast-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.5rem;
  margin-top: 1rem;
}

/**
 * Individual forecast card with hover effects
 * Light green background to differentiate from current weather
 */
.forecast-card {
  background: #e9f7ef;
  padding: 0.75rem;
  border-radius: 10px;
  text-align: center;
  font-size: 0.9rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/**
 * Forecast card hover effect
 * Lifts card and adds shadow for depth
 */
.forecast-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/**
 * Forecast card date heading
 */
.forecast-card h4 {
  margin-bottom: 0.3rem;
  font-size: 0.95rem;
  color: #333;
}

/**
 * Weather icon sizing in forecast cards
 */
.forecast-card img {
  width: 50px;
  height: 50px;
}

/* ==========================================================================
   Placeholder Card Styles
   ========================================================================== */

/**
 * Placeholder card for loading and error states
 */
.placeholder-card {
  font-size: 1rem;
  color: #777;
  background: #f2f2f2;
}

/* ==========================================================================
   Responsive Design - Mobile Styles
   ========================================================================== */

/**
 * Mobile-specific styles for screens under 500px
 * Adjusts layout for vertical stacking on small devices
 */
@media (max-width: 500px) {
  /**
   * Stack search bar elements vertically on mobile
   */
  .search-bar {
    flex-direction: column;
  }

  /**
   * Full width input and button on mobile
   */
  .search-bar input,
  .search-bar button {
    width: 100%;
    border-radius: 5px;
    margin: 4px 0;
  }

  /**
   * Vertical tab layout for mobile
   */
  .tabs {
    flex-direction: column;
  }

  /**
   * Stacked tab buttons on mobile
   */
  .tabs button {
    margin: 4px 0;
  }
}