/* Dhakadigitalsurvey — shared design tokens & utilities
   Tailwind handles layout; this file holds non-Tailwind custom rules
   (logo mark, line clamp fallback, footer pulse, mobile menu). */

:root {
  --primary: #30bd9b;
  --primary-dim: #1ea583;
  --text: #2a2b3f;
  --text-muted: #888888;
  --surface: #ffffff;
  --surface-alt: #f8f8f8;
  --surface-lowest: #ffffff;
  --surface-container: #f3f7fd;
  --outline-variant: #eaeaea;
  --on-surface-variant: #495057;
}

html { scroll-behavior: smooth; }

/* Logo fallback (graceful if SVG missing) */
.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dim));
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.5px;
  border: 1px solid rgba(48,189,155,0.25);
}

/* Active nav link */
.nav-link[aria-current="page"] {
  color: var(--primary);
  font-weight: 700;
}
.nav-link:hover { color: var(--primary); }

/* Line clamp fallbacks (browsers without line-clamp class) */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hide scrollbar in webkit */
::-webkit-scrollbar { display: none; }

/* Floating stat card gentle bob */
@keyframes float-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.float-bob { animation: float-bob 4s ease-in-out infinite; }

html, body {
  overflow-x: hidden !important;
  width: 100%;
  max-width: 100vw;
  margin: 0;
  padding: 0;
}

/* Mobile drawer transition */
.mobile-menu {
  display: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mobile-menu.open {
  display: flex !important;
  opacity: 1;
  transform: translateY(0);
}

/* Responsive container max width tuning */
@media (max-width: 640px) {
  .px-margin-mobile { padding-left: 1rem !important; padding-right: 1rem !important; }
  h1 { font-size: 1.85rem !important; line-height: 1.25 !important; }
  h2 { font-size: 1.5rem !important; line-height: 1.3 !important; }
  .btn-mobile-full { width: 100% !important; justify-content: center !important; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .px-margin-mobile { padding-left: 2rem !important; padding-right: 2rem !important; }
  h1 { font-size: 2.5rem !important; }
}

/* Image & Video Fluid Responsiveness */
img, video, canvas {
  max-width: 100%;
  height: auto;
}