/* === MOBILE STYLES === */
@media (max-width: 768px) {
  /* Hide desktop header */
  .header-wrapper {
    display: none;
  }

  /* Mobile Header */
  .mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: #000;
    border-bottom: 3px solid #ff6ebd;
  }

  .mobile-logo {
    height: 44px;
    width: auto;
  }

  .burger {
    font-size: 1.6rem;
    background: #ff6ebd;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    color: #000;
    font-weight: bold;
    font-family: 'Orbitron', sans-serif;
    cursor: pointer;
  }

  /* Mobile Navigation */
  .mobile-nav {
    display: none;
    background: #111;
    flex-direction: column;
    animation: slideDown 0.3s ease-out;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  }

  .mobile-nav.show {
    display: flex;
  }

  .mobile-nav a {
    padding: 1rem;
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #333;
  }

  .mobile-nav a:hover {
    background: #222;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Layout Adjustments */
  .site-border {
    padding: 1rem;
    margin: 0.5rem;
    border-width: 3px;
  }

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

  aside.left-sidebar,
  aside.right-sidebar {
    flex: 1 1 auto;
    order: unset;
    max-width: 100%;
  }

  .sidebar-modules {
    margin-left: 0;
    padding: 0;
  }

  .content {
    order: 0;
  }

  /* Navigation Buttons (if shown) */
  .nav {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .nav a {
    font-size: 0.85rem;
    padding: 0.6rem;
    clip-path: none;
    border-radius: 4px;
  }

  /* Images */
  .featured-image {
    width: 100%;
    margin: 0;
    top: 0;
    right: 0;
  }

  /* Titles and Sections */
  .right-section-title,
  .section-title {
    margin: 1rem auto;
    text-align: center;
    font-size: 1.1rem;
  }

  .article,
  .rightarticle {
    max-width: 100%;
    padding: 0.75rem 0;
  }

  .article h3,
  .rightarticle h3 {
    font-size: 1.4rem;
    text-align: center;
  }

  .author {
    font-size: 0.85rem;
    padding: 6px;
  }

  .interactions {
    justify-content: center;
    font-size: 0.95rem;
  }

  .emoji {
    width: 26px;
    height: 26px;
  }

  /* Modules */
  .weather-box,
  .question-box,
  .transport-alert,
  .stock-market {
    font-size: 0.85rem;
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .poll-fill {
    background: #00c6ff;
  }

  .transport-item {
    flex: 1 1 45%;
  }

  .banner-box {
    padding: 0.75rem;
  }

  /* Improve Active Nav */
  .nav a.active {
    background: #ff6ebd;
  }
}