/* AiWorksBD — Header + Footer CSS (v2.1.0) */
/* Clean, production-ready, responsive */

/* ===== HEADER ===== */
.header { background: var(--bg-surface); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-bottom: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); position: sticky; top: 0; z-index: 1000; }
.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* --- Left: Logo --- */
.header-left { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex-shrink: 0; }
.logo { display: flex; align-items: center; text-decoration: none; }
.logo img { width: 150px; height: auto; max-width: 150px; }

/* --- Center: Nav (2 rows) --- */
.header-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; align-items: center; }
.nav-row { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.nav-row.primary .nav-item { font-size: 14px; font-weight: 700; padding: 4px 14px; }
.nav-row.secondary .nav-item { font-size: 12px; font-weight: 500; padding: 3px 10px; }
.nav-item {
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 4px;
  transition: var(--transition);
}
.nav-item:hover { color: var(--accent); background: var(--bg-hover); }
.nav-item.active { color: var(--accent); font-weight: 700; }

/* --- Right: Tools (2 rows) --- */
.header-right { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex-shrink: 0; }
.tools-row { display: flex; align-items: center; gap: 6px; }
.tools-row.meta { font-size: 11px; color: var(--text-muted); white-space: nowrap; gap: 8px; }

/* Search compact */
.search-wrap { position: relative; }
.search-input {
  width: 130px; height: 30px;
  padding: 0 10px 0 28px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 15px; color: var(--text); font-size: 12px; outline: none;
  transition: border-color 0.2s;
  max-width: 100%;
}
.search-input:focus { border-color: var(--accent); }
.search-input::placeholder { color: var(--text-muted); }
.search-wrap svg { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; color: var(--text-muted); pointer-events: none; }

/* Icon buttons */
.icon-btn {
  width: 30px; height: 30px;
  border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg-surface); color: var(--text);
  cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Countdown pill */
.countdown {
  font-size: 11px; font-weight: 600; color: var(--text-secondary);
  padding: 3px 8px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; white-space: nowrap; display: flex; align-items: center; gap: 3px;
}
.countdown .pulse { width: 5px; height: 5px; background: var(--success); border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Hamburger */
.mobile-toggle {
  display: none;
  width: 34px; height: 34px;
  border: 1px solid var(--border); background: var(--bg-surface);
  border-radius: var(--radius-sm); color: var(--text); font-size: 20px;
  cursor: pointer; align-items: center; justify-content: center;
}

/* Mobile nav drawer — high z-index, overlay backdrop */
.nav-overlay {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9998;
}
.nav-overlay.show { display: block; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.nav-mobile {
  position: fixed; top: 0; right: -280px; bottom: 0; width: 260px;
  background: var(--bg-surface);
  z-index: 9999;
  flex-direction: column;
  padding: 20px 0; gap: 0; overflow-y: auto;
  transition: right 0.3s ease;
  box-shadow: -4px 0 24px rgba(0,0,0,0.3);
  display: none;
}
.nav-mobile.show { right: 0; display: flex; }
.nav-mobile .nav-item { padding: 12px 20px; border-bottom: 1px solid var(--border); border-radius: 0; font-size: 14px; font-weight: 600; }
.nav-mobile .nav-item.active { border-left: 3px solid var(--accent); }
.nav-mobile .nav-section-title { padding: 12px 20px 4px; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }

/* ===== FOOTER ===== */
.footer { background: var(--bg-surface); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-top: 3px solid var(--accent); padding: 32px 0 16px; box-shadow: 0 -4px 32px rgba(0,0,0,0.05); }

/* Container — centered, NOT full-width */
.footer-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  width: 100%;
}

/* 4-column grid with balanced gaps */
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
}

/* Brand column */
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-logo img { width: 130px; height: auto; }

/* Slogan — left align only, NO justify */
.footer-slogan {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
  max-width: 280px;
  text-align: left;
}

/* Link columns — tight grid, 4px gap, pipe hugging text */
.footer-col h4 { font-size: 14px; font-weight: 700; margin-bottom: 10px; color: var(--text); }
.footer-links-container {
  list-style: none;
  display: inline-grid;
  grid-template-columns: repeat(3, max-content);
  row-gap: 6px;
  column-gap: 4px;
}
.footer-links-container li {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
/* Pipe only between items — skip 3rd col (row end) + last overall */
.footer-links-container li:not(:nth-child(3n)):not(:last-child)::after {
  content: '|';
  margin-left: 4px;
  color: var(--text-muted);
  font-size: 12px;
}
.footer-links-container a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  transition: var(--transition);
}
.footer-links-container a:hover { color: var(--accent); }

.footer-bottom {
  max-width: 1200px; margin: 24px auto 0; padding: 16px 48px 0;
  border-top: 1px solid var(--border); text-align: center;
  font-size: 12px; color: var(--text-muted);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .header-nav { display: none; }
  .mobile-toggle { display: flex; }
}

@media (max-width: 768px) {
  .header-inner { padding: 8px 12px; gap: 8px; }
  .header-right { flex-direction: row; align-items: center; gap: 4px; }
  .tools-row.meta { display: none; }
  .search-wrap { display: none; }
  .countdown { display: none; }
  .logo img { width: 120px; max-width: 120px; }
  .footer-wrap { padding: 0 16px; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-brand { align-items: center; text-align: center; }
  .footer-slogan { text-align: center; max-width: 100%; width: 100%; }
  .footer-col { text-align: center; }
  .footer-links-container { justify-content: center; justify-items: center; }
}