/* =================================
   PANCHANG PAGES — Dark Theme Styles
   Extracted from _base_panchang.html, tokenized with design-tokens.css variables.
   ================================= */

/* --- Body & Container Overrides for Dark Theme --- */
.panchang-page {
  background-color: var(--surface-dark);
}
.panchang-page .container {
  background-color: var(--surface-dark);
  box-shadow: none;
}

/* --- Dark Theme Typography Override ---
   Uses design-tokens.css dark theme system.
   See design-tokens.css for contrast ratios and usage guide.

   PATTERN: Any page using dark theme MUST include these overrides
   to prevent global light-theme styles from breaking contrast. */

/* Headings - accent color on dark */
.panchang-page h1,
.panchang-page h2,
.panchang-page h3 {
  color: var(--accent-on-dark); /* Gold - 11.6:1 contrast */
}

/* Strong/bold text */
.panchang-page strong {
  color: var(--text-dark-primary); /* White 0.95 - 12:1 contrast */
}
.panchang-table strong {
  color: var(--accent-on-dark); /* Gold for table row labels */
}

/* Body text */
.panchang-page p,
.panchang-page li,
.panchang-page span {
  color: var(--text-dark-secondary); /* White 0.87 - 8:1 contrast */
}

/* Links on dark background */
.panchang-page a:not(.action-button):not(.panchang-subnav a):not(.panchang-nav-link) {
  color: var(--link-on-dark); /* Violet-300 - 7:1 contrast */
}
.panchang-page a:not(.action-button):not(.panchang-subnav a):not(.panchang-nav-link):hover {
  color: var(--link-on-dark-hover);
}

/* Muted/secondary text */
.panchang-footnote,
.panchang-note {
  color: var(--text-dark-muted); /* White 0.75 - 6:1 contrast */
}

/* --- Layout: City Bar --- */
.panchang-city-bar {
  background: var(--surface-dark);
  border-bottom: 1px solid var(--border-dark);
  padding: var(--space-sm) 0;
  margin: calc(-1 * var(--space-md)) calc(-1 * var(--space-md)) var(--space-lg) calc(-1 * var(--space-md));
}
.panchang-city-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.city-display {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--gold-accent);
  font-weight: 600;
}
.city-display i { font-size: 0.9rem; }

/* --- City Switcher Button --- */
.city-switcher-btn {
  background: transparent;
  border: 1px solid var(--border-dark);
  color: var(--text-dark-secondary);
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}
.city-switcher-btn:hover {
  background: var(--surface-dark-card-hover);
  border-color: var(--gold-accent);
  color: var(--text-on-dark);
}

/* --- City Modal --- */
.city-switcher-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}
.city-switcher-modal.active { display: flex; }

.city-modal-content {
  background: var(--surface-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  max-width: 480px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  border: 1px solid var(--border-dark);
  position: relative;
}
.city-modal-close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  background: transparent;
  border: none;
  color: var(--text-dark-muted);
  font-size: 1.25rem;
  cursor: pointer;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  transition: all 0.2s;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.city-modal-close:hover {
  color: var(--text-on-dark);
  background: var(--surface-dark-card-hover);
}
.city-modal-content h3 {
  margin: 0 0 var(--space-md);
  color: var(--gold-accent);
  font-family: var(--font-heading);
  font-size: 1.1rem;
}

/* --- City Search --- */
.city-search-wrapper {
  margin-bottom: 0.75rem;
}
.city-search-wrapper .search-field {
  position: relative;
}
.city-search-input {
  width: 100%;
  padding: 0.625rem 0.75rem 0.625rem 2.25rem;
  background: var(--surface-dark-card-hover);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-md);
  color: var(--text-on-dark);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.city-search-input::placeholder { color: var(--text-dark-subtle); } /* 0.65 opacity - WCAG AA */
.city-search-input:focus { border-color: var(--gold-accent); }

.city-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dark-subtle); /* 0.65 opacity - WCAG AA */
  font-size: 0.85rem;
  pointer-events: none;
}

.city-search-results {
  margin-top: 0.375rem;
  display: none;
}
.city-search-results.has-results { display: block; }
.city-search-results button {
  width: 100%;
  text-align: left;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.2);
  color: var(--text-dark-primary);
  padding: var(--space-sm) 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: var(--space-xs);
}
.city-search-results button:hover {
  background: rgba(245,158,11,0.2);
  border-color: var(--gold-accent);
  color: var(--text-on-dark);
}
.city-search-results .search-hint,
.search-hint {
  color: var(--text-dark-faint);
  font-size: 0.75rem;
  padding: var(--space-xs) 0;
  margin: var(--space-xs) 0 0;
}

.city-search-spinner {
  color: var(--gold-accent);
  font-size: 0.8rem;
  padding: 0.375rem 0;
  display: none;
}

/* --- City Divider & List --- */
.city-divider {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  color: var(--text-dark-subtle); /* 0.65 opacity - WCAG AA */
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.city-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-dark);
}

.city-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.375rem;
}
.city-list button {
  background: var(--surface-dark-card);
  border: 1px solid var(--border-dark);
  color: var(--text-on-dark-muted);
  padding: var(--space-sm) 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}
.city-list button:hover {
  background: rgba(245,158,11,0.15);
  border-color: var(--gold-accent);
  color: var(--text-on-dark);
}
.city-list button.active {
  background: rgba(245,158,11,0.2);
  border-color: var(--gold-accent);
  color: var(--gold-accent);
}

/* --- Calculation Timestamp --- */
.panchang-calc-timestamp {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-dark-subtle);
  padding: 0.25rem 0 0;
  margin: 0;
  letter-spacing: 0.02em;
}

/* --- Sub-Navigation Pills --- */
.panchang-subnav {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  padding: 0.75rem 0;
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border-dark-muted);
}
.panchang-subnav a {
  padding: 0.625rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--text-dark-muted);
  text-decoration: none;
  transition: all 0.15s;
  white-space: nowrap;
  min-height: var(--touch-min); /* 44px WCAG touch target */
  display: inline-flex;
  align-items: center;
}
.panchang-subnav a:hover {
  background: var(--surface-dark-card-hover);
  color: var(--text-on-dark);
}
.panchang-subnav a.active {
  background: var(--gold-accent);
  color: var(--surface-dark);
  font-weight: 600;
}

/* --- Cards --- */
.panchang-card {
  background: var(--surface-dark-card);
  border: 1px solid var(--border-dark-muted);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: var(--space-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.panchang-card h2,
.panchang-card h3 {
  color: var(--gold-accent);
  font-family: var(--font-heading);
  margin-top: 0;
}

/* --- Tables --- */
.panchang-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 400px;
}
.panchang-table th {
  text-align: left;
  padding: var(--space-sm) 0.75rem;
  border-bottom: 1px solid var(--border-dark);
  color: var(--gold-accent);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.panchang-table td {
  padding: var(--space-sm) 0.75rem;
  border-bottom: 1px solid var(--border-dark-subtle);
  color: var(--text-on-dark-muted);
}
.panchang-table tr:last-child td { border-bottom: none; }

/* --- Badges --- */
.badge-auspicious {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.badge-auspicious.good { background: var(--status-good-bg); color: var(--status-good-text); }
.badge-auspicious.bad { background: var(--status-bad-bg); color: var(--status-bad-text); }
.badge-auspicious.best { background: var(--status-best-bg); color: var(--status-best-text); }
.badge-auspicious.warn { background: var(--status-warn-bg); color: var(--status-warn-text); }
.badge-auspicious.neutral { background: var(--border-dark); color: var(--text-dark-muted); }

/* --- Hero Section --- */
.panchang-hero {
  text-align: center;
  padding: var(--space-lg) 0 var(--space-md);
}
.panchang-hero h1 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-sm);
  line-height: 1.3;
  color: var(--gold-accent); /* WCAG: Gold on dark = 12:1 contrast */
}
.panchang-hero .date-display {
  color: var(--gold-accent);
  font-size: var(--text-base);
}

/* --- CTA Box --- */
.panchang-cta-box {
  background: linear-gradient(135deg, rgba(79,70,229,0.15), rgba(245,158,11,0.1));
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  text-align: center;
  margin: var(--space-lg) 0;
}
.panchang-cta-box p {
  margin: 0 0 0.75rem;
  color: var(--text-dark-primary);
}
.panchang-cta-box .action-button {
  display: inline-block;
  padding: 0.625rem 1.5rem;
  font-weight: 600;
}
.panchang-cta-subtext {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  color: var(--text-dark-muted);
}

/* --- Explore / Cross-Link Box (replaces bottom CTA on some pages) --- */
.panchang-explore-box {
  background: var(--surface-dark-card);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin: var(--space-lg) 0;
  text-align: center;
}
.panchang-explore-box p {
  margin: 0 0 0.75rem;
  color: var(--text-dark-primary);
}
.panchang-explore-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
.panchang-explore-links a {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: var(--radius-md);
  color: var(--link-on-dark);
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.15s;
}
.panchang-explore-links a:hover {
  background: rgba(245,158,11,0.18);
  border-color: var(--gold-accent);
  color: var(--text-on-dark);
}

/* --- Inline CTA (appears after first data card) --- */
.panchang-inline-cta {
  background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(79,70,229,0.08));
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin: var(--space-md) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.panchang-inline-cta-text {
  flex: 1;
  min-width: 200px;
}
.panchang-inline-cta-text strong {
  color: var(--gold-accent);
  font-size: 0.95rem;
}
.panchang-inline-cta-text p {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--text-dark-muted);
}
.panchang-inline-cta .action-button {
  padding: 0.625rem 1.25rem;
  font-size: 0.9rem;
  white-space: nowrap;
  min-height: var(--touch-min); /* 44px WCAG touch target */
}

/* --- TL;DR Box (GEO optimized) --- */
.panchang-tldr {
  background: rgba(245,158,11,0.08);
  border-left: 3px solid var(--gold-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 0.875rem 1rem;
  margin-bottom: var(--space-lg);
}
.panchang-tldr-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold-accent);
  margin-bottom: 0.25rem;
}
.panchang-tldr-content {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-dark-primary);
}

/* --- Utility Classes for Child Templates --- */

/* Body text on dark background */
.panchang-text {
  line-height: 1.7;
  color: var(--text-dark-secondary);
}

/* Footnote / attribution text */
.panchang-footnote {
  margin-top: var(--space-sm);
  font-size: 0.85rem;
  color: var(--text-dark-subtle);
}

/* Intro paragraph */
.panchang-intro {
  color: var(--text-dark-muted);
  margin-bottom: 0.75rem;
}

/* Subtle note text */
.panchang-note {
  line-height: 1.7;
  color: var(--text-dark-muted);
  margin-top: 0.75rem;
}

/* Link with top margin */
.panchang-link-row {
  margin-top: 0.75rem;
}

/* Muted table cell text */
.panchang-cell-muted {
  font-size: 0.85rem;
  color: var(--text-dark-muted);
}

/* Sub-heading within cards */
.panchang-subheading {
  font-size: 0.95rem;
  margin-bottom: var(--space-sm);
}
.panchang-subheading-spaced {
  font-size: 0.95rem;
  margin: var(--space-md) 0 var(--space-sm);
}

/* Quick link navigation grid */
.panchang-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
}
.panchang-nav-link {
  display: block;
  padding: 0.75rem;
  background: var(--surface-dark-card);
  border-radius: var(--radius-md);
  text-decoration: none;
}
.panchang-nav-link small {
  color: var(--text-dark-subtle);
}

/* Clean list (no bullets) */
.panchang-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.panchang-list li {
  margin-bottom: var(--space-sm);
}
.panchang-list li:last-child {
  margin-bottom: 0;
}

/* Bullet list on dark background */
.panchang-bullets {
  color: var(--text-dark-secondary);
  line-height: 1.8;
  padding-left: 1.25rem;
}

/* Personalized card (today.html) */
.panchang-card-personal {
  border-color: rgba(245,158,11,0.4);
  background: linear-gradient(135deg, rgba(79,70,229,0.08), rgba(245,158,11,0.06));
}

/* Personal card: description */
.panchang-personal-desc {
  color: var(--text-dark-muted);
  font-size: 0.85rem;
  margin-bottom: var(--space-md);
}

/* Assessment box (conditional bg set inline) */
.panchang-assessment {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}
.panchang-assessment-favorable {
  background: var(--status-good-subtle);
  border-left: 3px solid var(--status-good-text);
}
.panchang-assessment-unfavorable {
  background: var(--status-bad-subtle);
  border-left: 3px solid var(--status-bad-text);
}
.panchang-assessment-mixed {
  background: var(--status-warn-subtle);
  border-left: 3px solid var(--status-warn-text);
}
.panchang-assessment p {
  margin: var(--space-xs) 0 0;
  font-size: 0.85rem;
  color: var(--text-dark-muted);
}

/* Locked state overlay */
.panchang-locked-wrapper {
  position: relative;
  overflow: hidden;
}
.panchang-locked-blur {
  filter: blur(4px);
  opacity: 0.4;
  pointer-events: none;
}
.panchang-locked-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--overlay-dark);
  padding: var(--space-lg);
}
.panchang-locked-overlay i {
  font-size: 1.5rem;
  color: var(--gold-accent);
  margin-bottom: 0.75rem;
}
.panchang-locked-overlay p {
  text-align: center;
  margin: 0 0 0.75rem;
  font-size: 1rem;
  color: var(--text-dark-primary);
}
.panchang-locked-overlay span {
  font-size: 0.9rem;
  color: var(--text-dark-muted);
}
.panchang-locked-overlay .action-button {
  display: inline-block;
  padding: 0.625rem 1.5rem;
  font-weight: 600;
}

/* Cycle diminished note */
.panchang-cycle-note {
  color: var(--text-dark-subtle); /* Now 0.65 opacity - WCAG AA compliant */
  font-size: 0.8rem;
}

/* Personal CTA area */
.panchang-personal-cta {
  margin-top: var(--space-md);
  text-align: center;
}
.panchang-personal-cta .action-button {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  font-size: 0.9rem;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .city-list { grid-template-columns: 1fr; }

  /* Subnav: horizontal scroll with fade hint */
  .panchang-subnav {
    gap: 0.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: var(--space-sm);
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    position: relative;
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
  }
  .panchang-subnav::-webkit-scrollbar { display: none; }
  .panchang-subnav a {
    padding: 0.625rem 0.875rem;
    font-size: 0.8rem;
    min-height: var(--touch-min); /* 44px WCAG touch target */
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }

  /* Hero: slightly larger for readability */
  .panchang-hero h1 { font-size: 1.35rem; }
  .panchang-hero { padding: var(--space-md) 0 var(--space-sm); }

  /* Tables: remove min-width so narrow tables don't force scroll */
  .panchang-table { font-size: 0.8rem; min-width: 0; }
  .panchang-table th,
  .panchang-table td { padding: var(--space-xs) 0.375rem; }

  /* Wide tables (4+ cols) still need scroll hint */
  .panchang-table--wide { min-width: 340px; }

  /* Cards: tighter padding on mobile */
  .panchang-card { padding: 1rem 0.875rem; }

  /* Inline CTA stacks on mobile */
  .panchang-inline-cta {
    flex-direction: column;
    text-align: center;
    padding: 0.875rem;
  }
  .panchang-inline-cta-text {
    min-width: auto;
  }
  .panchang-inline-cta .action-button {
    width: 100%;
    max-width: 280px;
  }

  /* TL;DR adjusts for mobile */
  .panchang-tldr {
    padding: 0.75rem;
  }
  .panchang-tldr-content {
    font-size: 0.85rem;
  }

  /* CTA boxes: full-width on mobile */
  .panchang-cta-box,
  .panchang-explore-box {
    padding: 1rem;
  }

  /* Timestamp: slightly smaller on mobile */
  .panchang-calc-timestamp {
    font-size: 0.65rem;
    padding: 0.125rem 0.5rem 0;
  }
}

/* --- Error Page --- */
.panchang-error-text {
  line-height: 1.7;
  color: var(--text-dark-secondary); /* WCAG AA compliant */
  margin-bottom: 1rem;
}
.panchang-error-instruction {
  line-height: 1.7;
  color: var(--text-dark-muted); /* WCAG AA compliant */
}
.panchang-error-links {
  color: var(--text-dark-secondary); /* WCAG AA compliant */
  line-height: 2;
  padding-left: 1.25rem;
  margin-top: 0.75rem;
}

/* --- Personal Panchang Section --- */
.personal-panchang-card {
  border-color: rgba(245, 158, 11, 0.4);
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(245, 158, 11, 0.06));
}
.personal-panchang-card h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.personal-panchang-card h2 i {
  font-size: 1.1rem;
}
.personal-panchang-note {
  color: var(--text-dark-muted); /* 0.75 opacity - WCAG AA compliant */
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

/* Overall assessment box */
.panchang-assessment {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}
.panchang-assessment--favorable {
  background: rgba(34, 197, 94, 0.12);
  border-left: 3px solid #86efac;
}
.panchang-assessment--unfavorable {
  background: rgba(239, 68, 68, 0.12);
  border-left: 3px solid #fca5a5;
}
.panchang-assessment--neutral {
  background: rgba(251, 191, 36, 0.12);
  border-left: 3px solid #fde68a;
}
.panchang-assessment__label {
  text-transform: capitalize;
}
.panchang-assessment__note {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--text-dark-muted); /* WCAG AA compliant */
}

/* Table cell descriptions */
.panchang-cell-description {
  font-size: 0.85rem;
}
/* Note: .panchang-cycle-note defined above with --text-dark-subtle */

/* Action button wrapper */
.panchang-action-wrapper {
  margin-top: 1rem;
  text-align: center;
}
.panchang-action-wrapper .action-button {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  font-size: 0.9rem;
}

/* Locked personal panchang */
.panchang-locked {
  position: relative;
  overflow: hidden;
}
.panchang-locked__blur {
  filter: blur(4px);
  opacity: 0.4;
  pointer-events: none;
}
.panchang-locked__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(15, 12, 41, 0.7);
  padding: 1.5rem;
}
.panchang-locked__icon {
  font-size: 1.5rem;
  color: var(--gold-accent, #f59e0b);
  margin-bottom: 0.75rem;
}
.panchang-locked__text {
  text-align: center;
  margin: 0 0 0.75rem;
  font-size: 1rem;
  color: var(--text-dark-primary); /* WCAG AA compliant */
}
.panchang-locked__subtext {
  font-size: 0.9rem;
  color: var(--text-dark-muted); /* WCAG AA compliant */
}
.panchang-locked__cta {
  display: inline-block;
  padding: 0.625rem 1.5rem;
  font-weight: 600;
}

/* Retrograde text */
.panchang-retrograde-text {
  color: var(--text-dark-secondary); /* WCAG AA compliant */
}

/* Related resources list */
.panchang-related-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.panchang-related-links li {
  margin-bottom: 0.5rem;
}
.panchang-related-links li:last-child {
  margin-bottom: 0;
}

/* Choghadiya link */
.panchang-choghadiya-link {
  margin-top: 0.75rem;
}

/* =================================
   ACCESSIBILITY ENHANCEMENTS
   ================================= */

/* --- Link Contrast Fix (WCAG 2.1 AA 1.4.3) --- */
/* Purple links fail 4.5:1 contrast on dark bg. Use violet-300 for 7.8:1 ratio */
.panchang-page a:not(.action-button):not(.panchang-subnav a):not(.panchang-nav-link) {
  color: #c4b5fd; /* violet-300, passes AA on #1e1b4b */
}
.panchang-page a:not(.action-button):not(.panchang-subnav a):not(.panchang-nav-link):hover {
  color: #ddd6fe; /* violet-200, lighter on hover */
}

/* --- Focus Indicators (WCAG 2.1 AA 2.4.7) --- */
/* Ensure visible focus rings with 3:1 contrast against dark background */
.panchang-page .city-switcher-btn:focus-visible,
.panchang-page .panchang-subnav a:focus-visible,
.panchang-page .city-list button:focus-visible,
.panchang-page .action-button:focus-visible,
.panchang-page .panchang-nav-link:focus-visible,
.panchang-page a:focus-visible {
  outline: 2px solid var(--gold-accent);
  outline-offset: 2px;
}

/* --- Table Font Consistency --- */
.panchang-table {
  font-family: var(--font-body);
}
.panchang-table td,
.panchang-table th {
  font-family: inherit;
}