/* ==========================================================================
   VASTU AUNTY (vastuaunty.in) - STYLESHEET
   Mobile-First, Warm Indian Palette, Accessible Typography for Older Readers
   ========================================================================== */

:root {
  /* Brand Color Palette */
  --color-maroon-900: #441410;
  --color-maroon-800: #5D1C16;
  --color-maroon-700: #7B2D26; /* Deep Maroon - Primary Headings */
  --color-maroon-600: #933830;
  --color-saffron-500: #E8833A; /* Warm Saffron / Marigold */
  --color-saffron-600: #D36C22;
  --color-saffron-100: #FDEDE2;
  --color-cream-50: #FFFDF9;
  --color-cream-100: #FFF8F0;  /* Main Page Background */
  --color-cream-200: #F7EDE1;
  --color-cream-300: #EFE0D0;
  --color-gold-500: #D4A017;   /* Warm Gold Accent */
  --color-gold-600: #B8860B;
  --color-gold-100: #FCF4DD;
  --color-youtube-red: #FF0000;
  --color-youtube-dark: #CC0000;
  --color-whatsapp-green: #25D366;
  --color-whatsapp-dark: #1EBE5D;
  --color-text-main: #2D1E18;   /* Deep Earthy Charcoal - High Contrast */
  --color-text-muted: #6B5750;
  --color-white: #FFFFFF;

  /* Typography */
  --font-devanagari: 'Mukta', 'Noto Sans Devanagari', system-ui, -apple-system, sans-serif;
  
  /* Layout & Spacing */
  --header-height: 72px;
  --radius-card: 18px;
  --radius-btn: 9999px; /* Pill-shaped friendly buttons */
  --shadow-soft: 0 4px 20px -2px rgba(123, 45, 38, 0.08);
  --shadow-card: 0 10px 25px -4px rgba(123, 45, 38, 0.09), 0 4px 8px -2px rgba(123, 45, 38, 0.04);
  --shadow-hover: 0 16px 32px -4px rgba(123, 45, 38, 0.15), 0 6px 12px -3px rgba(123, 45, 38, 0.08);
}

/* Base Styles & Resets */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-devanagari);
  background-color: var(--color-cream-100);
  color: var(--color-text-main);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Ensure Hindi matras and conjuncts have ample breathing room */
h1, h2, h3, h4, p, span, a, button, label {
  line-height: 1.5;
}

/* Accessible focus ring for older readers / keyboard navigation */
:focus-visible {
  outline: 3px solid var(--color-saffron-500);
  outline-offset: 3px;
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  background: var(--color-maroon-700);
  color: var(--color-white);
  padding: 12px 20px;
  z-index: 9999;
  border-radius: 8px;
  font-weight: 600;
  transition: top 0.2s ease-in-out;
  text-decoration: none;
}

.skip-link:focus {
  top: 16px;
}

/* Minimum 48px tap targets for mobile touch */
.tap-target-min {
  min-height: 48px;
  min-width: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Hero Background Decorative Texture */
.hero-warm-gradient {
  background: radial-gradient(circle at 80% 20%, rgba(232, 131, 58, 0.12) 0%, transparent 60%),
              radial-gradient(circle at 10% 70%, rgba(212, 160, 23, 0.10) 0%, transparent 50%),
              linear-gradient(180deg, #FFF4E8 0%, #FFF8F0 100%);
}

/* Soft Indian Border Accents */
.border-warm {
  border-color: #F1DEC9;
}

/* Warm Card Glow */
.warm-card {
  background-color: var(--color-white);
  border: 1px solid #F1DEC9;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.warm-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: var(--color-saffron-500);
}

/* Video Card Thumbnail Play Badge */
.play-badge-glow {
  background: rgba(255, 0, 0, 0.92);
  box-shadow: 0 4px 15px rgba(255, 0, 0, 0.4);
  transition: transform 0.2s ease, background 0.2s ease;
}

.video-card:hover .play-badge-glow {
  transform: scale(1.1);
  background: #E60000;
}

/* Sticky Header with Backdrop Blur */
.header-glass {
  background-color: rgba(255, 248, 240, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(241, 222, 201, 0.9);
}

/* FAQ Accordion Transitions */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  opacity: 0;
}

.faq-item.active .faq-content {
  max-height: 500px;
  opacity: 1;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

/* Floating WhatsApp Pulse Animation */
@keyframes whatsapp-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.whatsapp-float-btn {
  animation: whatsapp-pulse 2.8s infinite;
}

/* Clean Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #FFF8F0;
}

::-webkit-scrollbar-thumb {
  background: #D9B38C;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #E8833A;
}

/* Tip Modal */
.modal-backdrop {
  background-color: rgba(45, 30, 24, 0.65);
  backdrop-filter: blur(4px);
}

/* Print Friendly Styles */
@media print {
  .whatsapp-float-btn, header, footer, #contact {
    display: none !important;
  }
  body {
    background: white;
    color: black;
  }
}