/* =============================================================
   TSquare Vision — Structural CSS
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }

/* --- Fixed Nav ---------------------------------------------- */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
#nav.nav-scrolled {
  background: #ffffff;
  box-shadow: 0 1px 24px rgba(0, 0, 0, 0.07);
}

/* Nav links — transparent state (white text on dark hero) */
.nav-link { color: rgba(255,255,255,0.82); text-decoration: none; }
.nav-link:hover { color: #ffffff; background: rgba(255,255,255,0.1); }
.nav-link.nav-active { color: #93c5fd; }

/* Nav links — scrolled state (dark text on white) */
#nav.nav-scrolled .nav-link { color: #475569; }
#nav.nav-scrolled .nav-link:hover { color: #2563eb; background: #eff6ff; }
#nav.nav-scrolled .nav-link.nav-active { color: #2563eb; }

/* Logo text */
.nav-logo-name { color: #ffffff; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.nav-logo-tag  { color: rgba(255,255,255,0.72); text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
#nav.nav-scrolled .nav-logo-name { color: #0f172a; text-shadow: none; }
#nav.nav-scrolled .nav-logo-tag  { color: #94a3b8; text-shadow: none; }
.nav-burger-icon { color: #ffffff; }
#nav.nav-scrolled .nav-burger-icon { color: #1e293b; }

/* --- Reveal: always visible (no opacity-0 flash) ------------ */
.reveal { opacity: 1; transform: none; }
.reveal.visible { opacity: 1; transform: none; }

/* --- Scrollbar hide (quick-nav) ----------------------------- */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* --- Responsive grid utilities (no Tailwind CDN dependency) - */

/* 2-column: single on mobile, 2-col at 768px+ */
.tsq-g2 { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .tsq-g2 { grid-template-columns: 1fr 1fr; } }

/* 3-column: single → 2-col → 3-col */
.tsq-g3 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px)  { .tsq-g3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tsq-g3 { grid-template-columns: repeat(3, 1fr); } }

/* 3fr + 2fr side-by-side at 768px+ (about body) */
.tsq-g3-2 { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .tsq-g3-2 { grid-template-columns: 3fr 2fr; } }

/* 2fr + 3fr side-by-side at 768px+ (contact) */
.tsq-g2-3 { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .tsq-g2-3 { grid-template-columns: 2fr 3fr; } }

/* Problem / Outcome split inside service cards */
.tsq-po { display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px) { .tsq-po { grid-template-columns: 1fr 1fr; } }

/* Container */
.tsq-container { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }