/* ========================================================================
   style.css — Final Updated Version
   Main stylesheet for Singhania Med Private Limited corporate website
   Last updated: Modernized, mobile-first, dark mode ready
   ======================================================================== */

/* ==========================================================================
   1. Tailwind Directives & Base Reset
   ========================================================================== */

@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  color: #1f2937;
  background-color: #f8fafc;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   2. Fluid Typography (better mobile scaling)
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

h1 { font-size: clamp(2.25rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.875rem, 5vw, 3.75rem); }
h3 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
h4 { font-size: clamp(1.25rem, 3.5vw, 1.875rem); }

p, li {
  font-size: clamp(1rem, 2.5vw, 1.125rem);
}

/* ==========================================================================
   3. Theme Variables (Light + Dark Mode)
   ========================================================================== */

:root {
  --primary: #10b981;          /* emerald-500 */
  --primary-dark: #059669;      /* emerald-600 */
  --primary-darker: #047857;    /* emerald-700 */
  --primary-light: #d1fae5;     /* emerald-100 */
  --primary-lighter: #ecfdf5;   /* emerald-50 */
  
  --accent: #2563eb;            /* blue-600 */
  --accent-light: #dbeafe;      /* blue-100 */

  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(255, 255, 255, 0.18);
  --shadow-soft: 0 10px 30px rgba(16, 185, 129, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #34d399;         /* emerald-400 */
    --primary-dark: #10b981;
    --primary-darker: #059669;
    --primary-light: #064e3b;   /* emerald-900 */
    --primary-lighter: #065f46; /* emerald-800 */

    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    --glass-bg: rgba(31, 41, 55, 0.65);
    --glass-border: rgba(255, 255, 255, 0.12);
    --shadow-soft: 0 10px 30px rgba(16, 185, 129, 0.25);
  }

  body {
    background-color: var(--gray-900);
    color: var(--gray-100);
  }

  p, li { color: var(--gray-300); }
}

/* ==========================================================================
   4. Components & Reusable Utilities
   ========================================================================== */

/* Glassmorphism */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
}

/* Hover lift effect (used on cards) */
.hover-lift {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hover-lift:hover {
  transform: translateY(-12px);
  box-shadow: 0 25px 50px -12px rgba(16, 185, 129, 0.25);
}

/* Gradient text (used on headings) */
.gradient-text {
  background: linear-gradient(to right, var(--primary), #14b8a6, var(--primary-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Buttons */
.btn {
  @apply inline-flex items-center justify-center px-6 py-3 font-medium rounded-full transition-all duration-300;
}

.btn-primary {
  @apply bg-gradient-to-r from-emerald-600 to-teal-600 text-white hover:from-emerald-700 hover:to-teal-700 shadow-lg hover:shadow-xl active:scale-95 glow-btn;
}

.btn-outline {
  @apply border-2 border-emerald-600 text-emerald-600 hover:bg-emerald-50 hover:border-emerald-700 active:scale-95;
}

/* Badge */
.badge {
  @apply inline-block px-4 py-1.5 rounded-full text-sm font-semibold bg-emerald-100 text-emerald-800;
}

/* Section divider */
.section-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--primary), transparent);
  margin: 1.8rem auto;
  max-width: 300px;
}

/* ==========================================================================
   5. Animations
   ========================================================================== */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay support */
.reveal { transition-delay: var(--delay, 0s); }

/* ==========================================================================
   6. Responsive & Mobile Improvements
   ========================================================================== */

@media (max-width: 1024px) {
  h1 { font-size: clamp(2.5rem, 8vw, 4rem); }
  h2 { font-size: clamp(2rem, 7vw, 3.5rem); }
}

@media (max-width: 768px) {
  .max-w-7xl { padding-left: 1.25rem; padding-right: 1.25rem; }
  section { padding-top: 5rem; padding-bottom: 5rem; }
}

@media (max-width: 640px) {
  .btn { padding: 0.75rem 1.5rem; font-size: 0.95rem; }
  h1 { line-height: 1.1; }
}

/* ==========================================================================
   7. Extra Utility Classes
   ========================================================================== */

.text-balance { text-wrap: balance; }
.glow-btn:hover { box-shadow: 0 0 25px rgba(16, 185, 129, 0.4); }
.shadow-soft { box-shadow: var(--shadow-soft); }
.border-gradient { border-image: linear-gradient(to right, var(--primary), #14b8a6) 1; }

/* Back-to-top button */
#back-to-top {
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
}

#back-to-top.show {
  opacity: 1;
  visibility: visible;
}

/* Responsive grid fallback for very small screens */
@supports not (grid-template-columns: repeat(auto-fit, minmax(0, 1fr))) {
  .grid { display: block; }
  .grid > * { margin-bottom: 1.5rem; }
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-scroll {
  width: max-content;
  animation: scroll 25s linear infinite;
}