/* ===========================
   RESPONSIVE CSS - COSCO THEME
   Mobile First Approach
   =========================== */

/* TABLET - 768px trở xuống */
@media (max-width: 768px) {
  /* Header */
  .header-content {
    flex-direction: column;
    gap: 20px;
  }

  .site-header h1 {
    font-size: 24px;
  }

  /* Navigation */
  .main-navigation ul {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  /* Content Layout */
  .content-wrapper {
    flex-direction: column;
    gap: 30px;
  }

  .site-main {
    max-width: 100%;
  }

  /* Sidebar */
  .widget-area {
    width: 100%;
  }

  /* Posts */
  article h2 {
    font-size: 22px;
  }

  /* Single Post */
  .single .entry-title {
    font-size: 26px;
  }

  .post-navigation {
    flex-direction: column;
    gap: 15px;
  }

  .nav-next {
    text-align: left;
  }

  /* Footer */
  .footer-navigation ul {
    flex-direction: column;
    gap: 10px;
  }

  /* Homepage */
  .hero-section h1 {
    font-size: 32px;
  }

  .hero-section p {
    font-size: 16px;
  }

  .posts-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* MOBILE - 480px trở xuống */
@media (max-width: 480px) {
  .site-header h1 {
    font-size: 20px;
  }

  article h2 {
    font-size: 18px;
  }

  .single .entry-title {
    font-size: 22px;
  }

  .hero-section {
    padding: 40px 15px;
  }

  .hero-section h1 {
    font-size: 24px;
  }

  .container {
    padding: 0 15px;
  }
}