/* ==========================================================================
   KashiFuneral.com - Dignified Sacred Design System
   Inspired by the Sacred Ghats of Varanasi
   Primary Background: Ivory Cream (#F7F2E8)
   Primary Headings, Nav Accents & Key Buttons: Deep Maroon (#5B1F2A)
   Subtle Borders & Accents: Muted Gold (#B89558)
   Secondary Accents: Temple Green (#354B43)
   Dark, High-Contrast Text: Charcoal (#1F1B1A)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Primary Background & Surfaces */
  --color-ivory: #F7F2E8;
  --color-ivory-surface: #EFE8DC;
  --color-ivory-card: #FFFFFF;
  --color-ivory-border: #E2D7C3;
  --color-ivory-border-subtle: rgba(184, 149, 88, 0.28);

  /* Primary Deep Maroon */
  --color-maroon: #5B1F2A;
  --color-maroon-dark: #3E121A;
  --color-maroon-deep: #2D0B12;
  --color-maroon-hover: #702633;
  --color-maroon-subtle: rgba(91, 31, 42, 0.08);

  /* Decorative Muted Gold */
  --color-gold: #B89558;
  --color-gold-light: #D6BF8E;
  --color-gold-dark: #8C6E35;
  --color-gold-subtle: rgba(184, 149, 88, 0.18);

  /* Secondary Temple Green */
  --color-temple-green: #354B43;
  --color-temple-green-dark: #24352F;
  --color-temple-green-light: #4A695E;
  --color-temple-green-surface: #E9F0EC;
  --color-temple-green-border: #BCD0C7;

  /* Text & Readability */
  --color-charcoal: #1F1B1A;
  --color-charcoal-muted: #554E4B;
  --color-charcoal-light: #7A726F;
}

html {
  scroll-behavior: smooth;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--color-ivory);
  color: var(--color-charcoal);
  line-height: 1.6;
}

body {
  background-color: var(--color-ivory);
  color: var(--color-charcoal);
  min-height: 100vh;
}

/* Serif Headings for Sacred Dignity */
h1, h2, h3, .font-cinzel {
  font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
  letter-spacing: -0.015em;
  color: var(--color-maroon-dark);
}

/* Hero Section with Varanasi Ghats Photographic Background */
.hero-ghats-banner {
  position: relative;
  background-color: var(--color-maroon-deep);
  background-image: 
    linear-gradient(180deg, rgba(45, 11, 18, 0.62) 0%, rgba(91, 31, 42, 0.48) 50%, rgba(45, 11, 18, 0.72) 100%),
    url('../images/varanasi-ghats-sunrise.jpg');
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}

.hero-ghats-banner h1 {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75), 0 1px 4px rgba(45, 11, 18, 0.9);
}

.hero-ghats-banner p {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
}

/* Fallback subtle water-ripple ghat pattern if image is loading */
.hero-ghats-fallback {
  background: 
    radial-gradient(ellipse at top, rgba(184, 149, 88, 0.15), transparent 70%),
    linear-gradient(180deg, #3E121A 0%, #5B1F2A 50%, #2D0B12 100%);
}

/* Subdued Gold Borders & Accents */
.border-gold-subtle {
  border-color: var(--color-ivory-border-subtle);
}

.border-gold {
  border-color: var(--color-gold);
}

.gold-gradient-text {
  background: linear-gradient(135deg, #D6BF8E 0%, #B89558 50%, #8C6E35 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Dignified Card Styles */
.ivory-card {
  background-color: var(--color-ivory-card);
  border: 1px solid var(--color-ivory-border);
  box-shadow: 0 2px 8px rgba(31, 27, 26, 0.04);
  transition: all 0.25s ease-in-out;
}

.ivory-card:hover {
  border-color: var(--color-gold);
  box-shadow: 0 6px 20px rgba(91, 31, 42, 0.08);
}

/* Primary Button - Deep Maroon */
.btn-maroon {
  background-color: var(--color-maroon);
  color: #FFFFFF;
  border: 1px solid rgba(184, 149, 88, 0.3);
  transition: all 0.2s ease-in-out;
}

.btn-maroon:hover {
  background-color: var(--color-maroon-hover);
  border-color: var(--color-gold);
}

/* Secondary Button - Temple Green */
.btn-temple {
  background-color: var(--color-temple-green);
  color: #FFFFFF;
  transition: all 0.2s ease-in-out;
}

.btn-temple:hover {
  background-color: var(--color-temple-green-dark);
}

/* Gold Accent Button */
.btn-gold {
  background-color: var(--color-gold);
  color: var(--color-maroon-deep);
  font-weight: 600;
  transition: all 0.2s ease-in-out;
}

.btn-gold:hover {
  background-color: var(--color-gold-dark);
  color: #FFFFFF;
}

/* Status Badges */
.badge-available {
  background-color: var(--color-temple-green-surface);
  color: var(--color-temple-green-dark);
  border: 1px solid var(--color-temple-green-border);
}

.badge-pending {
  background-color: #FEF3C7;
  color: #92400E;
  border: 1px solid #FCD34D;
}

.badge-verified {
  background-color: var(--color-temple-green-surface);
  color: var(--color-temple-green-dark);
  border: 1px solid var(--color-temple-green-border);
}

.badge-closed {
  background-color: #F3F4F6;
  color: #4B5563;
  border: 1px solid #E5E7EB;
}

/* Accessibility Focus Ring */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* High Contrast Form Focus */
input:focus, select:focus, textarea:focus {
  border-color: var(--color-maroon) !important;
  box-shadow: 0 0 0 1px var(--color-maroon) !important;
}

/* Print Styles */
@media print {
  header, footer, aside, .no-print {
    display: none !important;
  }
  body {
    background: #FFFFFF !important;
    color: #000000 !important;
  }
}