/* Mobile quick-fix (non-destructive) */
* { box-sizing: border-box; }
html, body { width: 100%; overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; }

/* Containers (safe) */
.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* Make any long rows wrap instead of breaking layout */
.header, header, .topbar, .navbar, .header-inner {
  flex-wrap: wrap;
}

/* Navigation: allow wrapping; links become tap-friendly */
nav, .nav, .menu, .navbar, .navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

nav a, .nav a, .menu a, .navbar a, .navigation a {
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  white-space: nowrap;
}

/* Mobile: stack nav to avoid "broken menu" */
@media (max-width: 768px) {
  nav, .nav, .menu, .navbar, .navigation {
    flex-direction: column;
    align-items: stretch;
  }
  nav a, .nav a, .menu a, .navbar a, .navigation a {
    justify-content: center;
    width: 100%;
  }
}

/* Basic grid fallback: if you use cards */
.cards, .grid, .list-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .cards, .grid, .list-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards, .grid, .list-grid { grid-template-columns: 1fr; } }

/* ===== Header: desktop + mobile hamburger ===== */
.header .nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.header .logo{ display:flex; align-items:center; gap:10px; text-decoration:none; }

.header .menu{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.header .menu a{
  display:inline-flex;
  align-items:center;
  padding:10px 12px;
  border-radius:10px;
  text-decoration:none;
  white-space:nowrap;
}

/* Hamburger button (hidden on desktop) */
.nav-toggle{
  display:none;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
}

/* Mobile behavior */
@media (max-width: 768px){
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .header .menu{ display:none; width:100%; flex-direction:column; align-items:stretch; gap:8px; }
  .header .menu.open{ display:flex; }
  .header .menu a{ width:100%; justify-content:center; min-height:44px; }

  /* Optional: butonul "Explore Top 10" să nu strice layout-ul */
  .header .btn{ width:100%; text-align:center; }
}