/* ==========================================================================
   detailpage.css — single-rule detail pages
   Depends on base.css (tokens/components) and rulebook.css (.rule cards).
   ========================================================================== */

/* Constrain the single-rule reading column */
.detail-content {
  max-width: 820px;
  padding-top: 1.5rem;
  flex-grow: 1;
}

/* Back link (breadcrumb style) */
#nav_back {
  margin: 0 0 1.25rem;
}
#nav_back a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 1rem;
}
#nav_back a:hover { color: var(--accent); }

/* On a detail page the single rule card can be a touch more generous */
.detail-content .rule {
  padding: 1.75rem 1.9rem;
}

/* Prev / next navigation as card buttons */
#nav_adjacent_rules {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: 2rem;
}

@media (min-width: 600px) {
  #nav_adjacent_rules {
    grid-template-columns: 1fr 1fr;
  }
}

#nav_adjacent_rules a {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font-weight: 600;
  transition: border-color 0.15s ease, transform 0.1s ease,
    box-shadow 0.15s ease;
}
#nav_adjacent_rules a:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Next link (second child, or the only one when there is no previous) aligns right */
#nav_adjacent_rules a.nav-next {
  text-align: right;
}