/* Responsive Styles */

/* Tablet Styles (992px and below) */
@media (max-width: 992px) {
    .main-layout {
      grid-template-columns: 1fr;
    }
    
    .sidebar {
      border-right: none;
      padding-right: 0;
      border-top: 1px solid var(--medium-gray);
      padding-top: 1.5rem;
      margin-top: 1.5rem;
    }
    
    .footer-widgets {
      grid-template-columns: repeat(2, 1fr);
    }
    
    .post-title {
      font-size: 1.8rem;
    }
    
    .post-body {
      font-size: 1rem;
    }
  }
  
  /* Mobile Styles (768px and below) */
  @media (max-width: 768px) {
    /* Featured and Posts Grids */
    .featured-grid,
    .posts-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    
    /* Show hamburger menu */
    .hamburger-menu {
      display: flex;
    }
    
    /* Hamburger menu animation for open state */
    .hamburger-menu.active span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }
    
    .hamburger-menu.active span:nth-child(2) {
      opacity: 0;
    }
    
    .hamburger-menu.active span:nth-child(3) {
      transform: rotate(-45deg) translate(7px, -7px);
    }
    
    /* Menu positioning for mobile */
    #main-menu {
      position: fixed;
      top: 0;
      right: -100%;
      width: 80%;
      max-width: 300px;
      height: 100vh;
      background-color: var(--background-color);
      box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
      padding: 80px 1.5rem 1.5rem;
      transition: right 0.3s ease;
      z-index: 1000;
      overflow-y: auto;
    }
    
    #main-menu.active {
      right: 0;
    }
    
    .header-content {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
    
    #main-menu ul {
      flex-direction: column;
      width: 100%;
    }
    
    #main-menu li {
      margin-right: 0;
      margin-bottom: 0.5rem;
      width: 100%;
    }
    
    #main-menu li > a {
      display: block;
      padding: 0.5rem 0;
      border-bottom: 1px solid var(--light-gray);
    }
    
    /* Dropdown positioning for mobile */
    .dropdown-menu {
      position: static;
      box-shadow: none;
      width: 100%;
      padding: 0.5rem 0 0.5rem 1rem;
      margin-bottom: 0.5rem;
      display: none !important;
    }
    
    .dropdown-menu.show {
      display: block !important;
    }
    
    .dropdown-menu a {
      padding: 0.5rem 0;
      border-bottom: 1px solid var(--light-gray);
    }
    
    /* For mobile, handle differently */
    #main-menu li:hover .dropdown-menu {
      display: none !important; /* Don't show on hover for mobile */
    }
    
    /* Top bar */
    .top-bar-container {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
    }
    
    /* Footer */
    .footer-nav ul {
      flex-wrap: wrap;
      justify-content: center;
    }
    
    .post-header {
      margin-bottom: 1.5rem;
    }
    
    .post-title {
      font-size: 1.6rem;
    }
  }
  
  /* Small Mobile Styles (480px and below) */
  @media (max-width: 480px) {
    .featured-grid,
    .posts-grid {
      grid-template-columns: 1fr;
    }
    
    .footer-widgets {
      grid-template-columns: 1fr;
    }
    
    .footer-nav ul {
      flex-direction: column;
      gap: 0.5rem;
    }
    
    .footer-nav li {
      margin: 0;
    }
    
    .post-meta {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
    }
    
    .post-meta > span {
      margin-left: 0;
    }
  }