/* ==========================================================================
   JyotishGram Shared Design System (Warm Authority)
   Palette: Warm Ivory, Saffron, Warm Gold, Charcoal, White, Rich Warm Black
   ========================================================================== */

:root {
  /* Fonts */
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sacred: 'Cinzel', serif;

  /* Primary Saffron & Amber System (Matches App) */
  --jg-saffron: #FFC400;          /* Primary Action / CTA / Selected / App Accent */
  --jg-saffron-hover: #EAA900;    /* Primary Action Hover */
  --jg-saffron-light: #FFF9E6;    /* Saffron soft badge tint */
  --jg-saffron-border: #FFE680;   /* Saffron light border */

  /* Warm Gold & Orange (Astrology Accents) */
  --jg-gold: #D99000;
  --jg-gold-light: #FFF4D9;
  --jg-gold-dark: #B87500;
  --jg-orange: #E88916;
  --jg-amber: #F2A51A;

  /* Charcoal Typography (No cool blue-grays) */
  --jg-text-dark: #24201B;        /* Primary typography */
  --jg-text-muted: #4A433A;       /* Secondary typography */
  --jg-text-light: #786F63;       /* Subtext / Muted annotations */

  /* Warm Surface System (Dominant Light) */
  --jg-bg-page: #FFFCF5;          /* Warm Ivory - Dominant page background */
  --jg-bg-warm: #FFF8E8;          /* Warm Cream section alternate */
  --jg-bg-card: #FFFFFF;          /* Pure White cards & elevated surfaces */
  --jg-border-warm: #F2E8D5;      /* Warm neutral border */
  --jg-border-subtle: #EFE4D0;    /* Subtle card border */

  /* Dark Contrast Zone (Warm Charcoal / Brown-Black, NEVER Navy/Blue/Purple) */
  --jg-dark-warm-bg: #1A1714;
  --jg-dark-warm-surface: #24201B;
  --jg-dark-warm-card: #2E2923;
  --jg-dark-warm-border: rgba(255, 196, 0, 0.22);
  --jg-dark-warm-text: #FBF8F2;
  --jg-dark-warm-muted: #D1C7BA;

  /* Semantic (Functional only) */
  --jg-status-online: #16A34A;     /* Green: status only */
  --jg-status-online-bg: #DCFCE7;
  --jg-price-red: #DC2626;         /* Red: price / error / alert only */
  --jg-price-red-bg: #FEF2F2;

  /* Spacing & Radii */
  --jg-radius-card: 1.25rem;
  --jg-radius-pill: 9999px;
  --jg-shadow-sm: 0 1px 3px 0 rgba(74, 67, 58, 0.05);
  --jg-shadow-md: 0 4px 14px -2px rgba(74, 67, 58, 0.08), 0 2px 6px -2px rgba(74, 67, 58, 0.04);
  --jg-shadow-hover: 0 16px 28px -6px rgba(217, 144, 0, 0.16), 0 4px 10px -2px rgba(74, 67, 58, 0.06);

  /* Bootstrap Variable Harmonization */
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--jg-text-dark);
  --bs-body-bg: var(--jg-bg-page);
  --bs-primary: #D99000;
  --bs-primary-rgb: 217, 144, 0;
  --bs-link-color: var(--jg-gold-dark);
  --bs-link-hover-color: #8C5800;
  --bs-border-color: var(--jg-border-warm);
}

/* ==========================================================================
   Base Page Elements
   ========================================================================== */

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
  scroll-behavior: smooth;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  font-family: var(--font-body);
  background-color: var(--jg-bg-page);
  color: var(--jg-text-dark);
  line-height: 1.6;
  margin-bottom: 0;
  -webkit-font-smoothing: antialiased;
}

/* Typography Utilities */
.font-serif-title,
.font-serif {
  font-family: var(--font-serif);
}

.font-sacred {
  font-family: var(--font-sacred);
}

/* Form & Focus Overrides */
.btn:focus, 
.btn:active:focus, 
.btn-link.nav-link:focus, 
.form-control:focus, 
.form-check-input:focus {
  box-shadow: 0 0 0 0.15rem #FFFDFC, 0 0 0 0.25rem var(--jg-saffron) !important;
  border-color: var(--jg-saffron-hover) !important;
}

/* ==========================================================================
   Shared Breadcrumbs
   ========================================================================== */

.breadcrumb {
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
  background: transparent;
  padding: 0;
}

.breadcrumb-item {
  color: var(--jg-text-light);
}

.breadcrumb-item a {
  color: var(--jg-text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.breadcrumb-item a:hover {
  color: var(--jg-gold-dark);
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: var(--jg-text-dark);
  font-weight: 500;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: #C7BCAE;
  content: "›";
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.4rem;
}

/* ==========================================================================
   Shared Cards & Surfaces
   ========================================================================== */

.jg-card {
  background-color: var(--jg-bg-card);
  border: 1px solid var(--jg-border-warm);
  border-radius: var(--jg-radius-card);
  box-shadow: var(--jg-shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.jg-card:hover {
  border-color: var(--jg-saffron-border);
  box-shadow: var(--jg-shadow-md);
  transform: translateY(-2px);
}

.jg-card-cream {
  background-color: var(--jg-bg-warm);
  border: 1px solid var(--jg-border-warm);
  border-radius: var(--jg-radius-card);
}

/* Lift utilities */
.hover-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--jg-shadow-hover) !important;
}

/* ==========================================================================
   Shared Buttons & Badges
   ========================================================================== */

.btn-jg-primary {
  background-color: var(--jg-saffron);
  color: var(--jg-text-dark);
  border: 1px solid #F5B800;
  font-weight: 700;
  border-radius: 0.5rem;
  padding: 0.55rem 1.25rem;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn-jg-primary:hover,
.btn-jg-primary:focus {
  background-color: var(--jg-saffron-hover);
  color: var(--jg-text-dark);
}

.btn-jg-outline {
  background-color: #FFFFFF;
  color: var(--jg-text-dark);
  border: 1px solid var(--jg-border-warm);
  font-weight: 600;
  border-radius: 0.5rem;
  padding: 0.55rem 1.25rem;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-jg-outline:hover {
  background-color: var(--jg-bg-warm);
  border-color: var(--jg-saffron-border);
  color: var(--jg-gold-dark);
}

.badge-jg-warm {
  background-color: var(--jg-saffron-light);
  color: var(--jg-gold-dark);
  border: 1px solid var(--jg-saffron-border);
  font-weight: 600;
  padding: 0.35rem 0.65rem;
  border-radius: var(--jg-radius-pill);
}

/* ==========================================================================
   Shared Accordion (Warm Tone FAQ)
   ========================================================================== */

.accordion-item {
  border: 1px solid var(--jg-border-warm) !important;
  border-radius: 0.875rem !important;
  background-color: var(--jg-bg-card) !important;
  margin-bottom: 0.75rem;
  overflow: hidden;
  box-shadow: var(--jg-shadow-sm);
  transition: border-color 0.2s ease;
}

.accordion-item:hover {
  border-color: var(--jg-saffron-border) !important;
}

.accordion-button {
  background-color: #FFFCF5 !important;
  color: var(--jg-text-dark) !important;
  font-family: var(--font-body);
  font-weight: 600;
  padding: 1.15rem 1.5rem !important;
  box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
  background-color: #FFF8E8 !important;
  color: var(--jg-gold-dark) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--jg-border-warm);
}

.accordion-button:focus {
  box-shadow: none !important;
  border-color: var(--jg-saffron-border) !important;
}

.accordion-button::after {
  filter: sepia(1) saturate(5) hue-rotate(5deg);
}

.accordion-body {
  color: var(--jg-text-muted) !important;
  background-color: #FFFFFF !important;
  padding: 1.25rem 1.5rem !important;
  line-height: 1.75 !important;
  font-size: 0.95rem !important;
}

/* Bootstrap / Tailwind Conflict Resolution:
   Tailwind defines `.collapse { visibility: collapse; }` which overrides Bootstrap's
   `.collapse.show { display: block; }`, making open accordion bodies invisible! */
.accordion-collapse.collapse.show,
.accordion-collapse.collapsing,
.collapse.show {
  visibility: visible !important;
}

.accordion-collapse.collapse:not(.show),
.collapse:not(.show) {
  display: none !important;
}

/* ==========================================================================
   CMS Editorial Content Typography (Warm Prose)
   ========================================================================== */

.cms-content {
  color: var(--jg-text-dark);
  line-height: 1.8;
  font-size: 1.05rem;
}

.cms-content h1, 
.cms-content h2, 
.cms-content h3, 
.cms-content h4 {
  font-family: var(--font-serif);
  color: var(--jg-text-dark);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.cms-content h1 { font-size: 2.25rem; }
.cms-content h2 { font-size: 1.75rem; border-bottom: 1px solid var(--jg-border-warm); padding-bottom: 0.5rem; }
.cms-content h3 { font-size: 1.35rem; }

.cms-content p {
  margin-bottom: 1.25rem;
  color: var(--jg-text-dark);
}

.cms-content a {
  color: var(--jg-gold-dark);
  text-decoration: underline;
  text-decoration-color: var(--jg-saffron);
  text-underline-offset: 3px;
  font-weight: 500;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.cms-content a:hover {
  color: #8C5800;
  text-decoration-color: var(--jg-gold);
}

.cms-content blockquote {
  border-left: 4px solid var(--jg-saffron);
  background-color: var(--jg-bg-warm);
  padding: 1rem 1.5rem;
  border-radius: 0 0.75rem 0.75rem 0;
  font-style: italic;
  color: var(--jg-text-muted);
  margin: 1.5rem 0;
}

.cms-content ul, 
.cms-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.cms-content li {
  margin-bottom: 0.5rem;
}

/* Status / Functional Colors */
.text-jg-online { color: var(--jg-status-online); }
.bg-jg-online-lt { background-color: var(--jg-status-online-bg); }
.text-jg-alert { color: var(--jg-price-red); }
.bg-jg-alert-lt { background-color: var(--jg-price-red-bg); }