.tool-card,
.category-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  padding: var(--spacing);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.tool-card:hover,
.category-card:hover {
  border-color: var(--primary);
}

.tool-card-title,
.category-card-title {
  color: var(--text);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.tool-card-description,
.category-card-description {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
}

.btn-primary-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background-color: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  border-radius: var(--radius);
  padding: 0.5rem 1.25rem;
  font-weight: 500;
}

.btn-primary-custom:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #ffffff;
}

.btn-outline-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background-color: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 0.5rem 1.25rem;
  font-weight: 500;
}

.btn-outline-custom:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.breadcrumb-nav {
  padding: 0.75rem 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.breadcrumb-nav a {
  color: var(--text-muted);
  text-decoration: none;
}

.breadcrumb-nav a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.faq-item {
  border-bottom: 1px solid var(--border);
  padding: var(--spacing) 0;
}

.faq-question {
  font-weight: 600;
  color: var(--text);
}

.faq-answer {
  color: var(--text-muted);
  margin-top: 0.5rem;
}

.search-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  background-color: var(--surface);
  color: var(--text);
  width: 100%;
}

.pagination-nav {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: calc(var(--spacing) * 2) 0;
}

.pagination-link {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
}

.pagination-link:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.pagination-link.is-current {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

.theme-toggle-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 0.375rem 0.5rem;
}

/* Astro (Hindu astrology tools) - background images are a fixed, known set, so each gets its own
   class instead of an inline style="" attribute (CSP style-src has no unsafe-inline). */

.astro-tile {
  position: relative;
  display: block;
  height: 13rem;
  border-radius: var(--radius);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow);
  text-decoration: none;
}

.astro-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.75) 100%);
}

.astro-tile-fallback {
  background: linear-gradient(135deg, #6a1b9a 0%, #ab47bc 100%);
}

.astro-tile-label {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.6rem;
  z-index: 1;
  color: #ffffff;
  font-weight: 700;
  white-space: pre-line;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.astro-tile-img-calendar {
  background-image: url('/images/astro/calendar.png');
}
.astro-tile-img-ganapati {
  background-image: url('/images/astro/lords/ganapati.jpg');
}
.astro-tile-img-moon {
  background-image: url('/images/astro/lords/moon.png');
}
.astro-tile-img-planets {
  background-image: url('/images/astro/lords/planets.png');
}
.astro-tile-img-stotrams {
  background-image: url('/images/astro/lords/stotrams.png');
}
.astro-tile-img-lord-ganesha {
  background-image: url('/images/astro/lords/lord-ganesha.jpg');
}
.astro-tile-img-hanuman {
  background-image: url('/images/astro/lords/hanuman.jpg');
}
.astro-tile-img-surya {
  background-image: url('/images/astro/lords/surya.jpg');
}
.astro-tile-img-aditya {
  background-image: url('/images/astro/lords/aditya.png');
}
.astro-tile-img-kumara {
  background-image: url('/images/astro/lords/kumara.jpg');
}
.astro-tile-img-mahalakshmi {
  background-image: url('/images/astro/lords/mahalakshmi.png');
}
.astro-tile-img-durga {
  background-image: url('/images/astro/lords/durga.jpg');
}

.astro-hero {
  position: relative;
  height: 8.5rem;
  border-radius: var(--radius);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  margin-bottom: var(--spacing);
}

.astro-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.astro-hero-title {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1rem;
  z-index: 1;
  color: #ffffff;
  font-weight: 700;
  font-size: 1.4rem;
  white-space: pre-line;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.astro-font-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.astro-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  box-shadow: var(--shadow);
  padding: var(--spacing);
  margin-bottom: var(--spacing);
}

.astro-result {
  border-radius: var(--radius);
  color: #ffffff;
  padding: calc(var(--spacing) * 1.5);
  text-align: center;
  box-shadow: var(--shadow);
}

.astro-result-good {
  background: linear-gradient(135deg, #1b5e20 0%, #43a047 100%);
}
.astro-result-ok {
  background: linear-gradient(135deg, #0d47a1 0%, #1e88e5 100%);
}
.astro-result-caution {
  background: linear-gradient(135deg, #e65100 0%, #fb8c00 100%);
}
.astro-result-bad {
  background: linear-gradient(135deg, #7f0000 0%, #c62828 100%);
}
.astro-result-worst {
  background: linear-gradient(135deg, #37474f 0%, #b71c1c 100%);
}

.astro-result-stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}

.astro-result-star-box {
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
}

.astro-result-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-transform: uppercase;
  opacity: 0.85;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
}
.astro-result-type {
  font-size: 2.5rem;
  margin-top: 0.25rem;
}
.astro-result-status {
  font-size: 1.25rem;
}
.astro-result-desc {
  opacity: 0.85;
  font-size: 1rem;
}
.astro-result-star-caption {
  font-size: 0.65rem;
  opacity: 0.75;
}
.astro-result-arrow {
  opacity: 0.6;
}

.astro-score {
  border-radius: var(--radius);
  background: linear-gradient(135deg, #1565c0 0%, #2196f3 100%);
  color: #ffffff;
  padding: calc(var(--spacing) * 1.25);
  text-align: center;
  margin-bottom: var(--spacing);
}

.astro-aspect-table th,
.astro-aspect-table td {
  padding: 0.5rem 0.75rem;
}

.astro-score-total {
  font-size: 2.5rem;
}

.astro-score-badge {
  display: inline-block;
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-weight: 700;
  font-size: 0.85rem;
}
.astro-score-badge-good {
  background: rgba(67, 160, 71, 0.15);
  color: #2e7d32;
}
.astro-score-badge-ok {
  background: rgba(251, 140, 0, 0.15);
  color: #e65100;
}
.astro-score-badge-low {
  background: rgba(198, 40, 40, 0.12);
  color: #c62828;
}

[data-bs-theme='dark'] .astro-score-badge-good {
  color: #81c784;
}
[data-bs-theme='dark'] .astro-score-badge-ok {
  color: #ffb74d;
}
[data-bs-theme='dark'] .astro-score-badge-low {
  color: #ef9a9a;
}

.astro-aspect-detail {
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* Stepped font-size classes (not inline style) for the stotram reader's A-/A+ controls. */
.stotram-text {
  font-size: 1.05rem;
  line-height: 1.95;
  /* The .txt source files are plain lines separated by single/double newlines - some stanzas are
     wrapped in <p>, some aren't at all (see content/astro/stotrams/ganesh.txt) - pre-line
     preserves those newlines as line breaks either way, while still wrapping normally. */
  white-space: pre-line;
}
.stotram-text-sm {
  font-size: 0.9rem;
}
.stotram-text-md {
  font-size: 1.05rem;
}
.stotram-text-lg {
  font-size: 1.2rem;
}
.stotram-text-xl {
  font-size: 1.4rem;
}
.stotram-text-xxl {
  font-size: 1.6rem;
}

.stotram-text span {
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: 1.15em;
  margin-bottom: 1rem;
  color: var(--primary);
}

.stotram-text b {
  display: block;
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 0.3rem;
  color: var(--text);
  letter-spacing: 0.02em;
}

.stotram-text p {
  margin: 0 0 0.5rem;
}

.panchang-card {
  border-radius: var(--radius);
  background: linear-gradient(145deg, #0d1b6e 0%, #1a237e 40%, #283593 100%);
  padding: calc(var(--spacing) * 1.25);
  box-shadow: var(--shadow);
  margin-bottom: var(--spacing);
  color: #ffffff;
}

.panchang-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.panchang-title {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: #ffd54f;
}

.panchang-date {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
  text-align: right;
}

.panchang-location {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
}

.panchang-location span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.panchang-locate-btn {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.75);
  padding: 0.35rem;
  line-height: 1;
}

.panchang-locate-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.2);
}

.panchang-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin: 0.9rem 0;
}

.panchang-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
}

.panchang-row-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.65);
  min-width: 7rem;
  font-weight: 500;
  font-size: 0.95rem;
}

.panchang-row-value {
  margin-left: auto;
  text-align: right;
  font-weight: 700;
  font-size: 1.05rem;
}

.panchang-sun-row {
  display: flex;
  justify-content: space-between;
  padding: 0 0.25rem;
}

.panchang-sun-item {
  text-align: center;
  flex: 1;
}

.panchang-sun-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
}

.panchang-sun-time {
  font-weight: 700;
  font-size: 0.95rem;
  margin-top: 0.2rem;
}

.panchang-warning-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #ffab91;
  font-weight: 600;
  font-size: 0.85rem;
}

.panchang-error {
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  color: #ffffff;
}

.coming-soon-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing);
  min-height: 100vh;
  padding: calc(var(--spacing) * 3) var(--spacing);
}

.coming-soon-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  box-shadow: var(--shadow);
}

.coming-soon-badge {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background-color: var(--surface);
  border: 1px solid var(--border);
  color: var(--primary);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.coming-soon-title {
  max-width: 40rem;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
}

.coming-soon-subtitle {
  max-width: 34rem;
}