/* Custom styles for Persona.bio */

/* Cap main content width on ultra-wide monitors so reading width stays sane.
   Sidebar still takes its grid column; this only constrains the content
   wrap inside the main column. */
.main-content-wrap {
  max-width: 1400px;
}

/* Cap persona content on the public /p/{slug} page to a readable line
   length. Applied to header, card stack, and CTA wrappers inside
   publicPersonaPage; the "What's this?" banner stays full width. */
.persona-readable-column {
  max-width: 75ch;
  margin-inline: auto;
}

/* Card base — softer edges and rounded corners with a gentle hover lift */
.card {
  border: 0;
  border-radius: 0.75rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
}

/* Restore an accent border for highlighted (primary) cards */
.card.border-primary {
  border: 2px solid var(--bs-primary);
  animation: subtle-pulse 2s ease-in-out infinite;
}

/* Equal-height cards in responsive grids */
.card.h-100 {
  height: 100%;
}

@keyframes subtle-pulse {

  0%,
  100% {
    box-shadow: 0 0.125rem 0.25rem rgba(13, 110, 253, 0.075);
  }

  50% {
    box-shadow: 0 0.5rem 1rem rgba(13, 110, 253, 0.15);
  }
}

/* Better spacing for card icons */
.card-title i,
.card-title .bi {
  vertical-align: middle;
}

/* Improve readability of card text */
.card-text {
  line-height: 1.6;
}

/* Hero gradient background */
.bg-gradient {
  background: linear-gradient(135deg, rgba(13, 110, 253, 0.05) 0%, rgba(108, 117, 125, 0.05) 100%);
}

/* Primary buttons keep a subtle hover lift; sizing stays at Bootstrap defaults
   so primary and secondary buttons line up next to each other. Use btn-lg for
   prominent CTAs. */
.btn-primary {
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: scale(1.03);
  box-shadow: 0 0.5rem 1rem rgba(13, 110, 253, 0.3);
}

/* Display headings - heavier weight than Bootstrap default */
.display-3,
.display-5,
.display-6 {
  font-weight: 700;
}

/* Lead text - slightly muted for hierarchy */
.lead {
  font-weight: 400;
  color: #495057;
}

/* Card headers — bright, clearly demarcated section banners */
.card-header {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
  border-bottom: 1px solid var(--bs-primary-border-subtle);
  font-size: 1rem;
  font-weight: 600;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.card-header .bi {
  color: var(--bs-primary);
}

/* Sidebar nav links — stronger default + clear hover/active */
.bg-body-tertiary .nav-link-text {
  color: var(--bs-body-color);
}

.bg-body-tertiary a:hover {
  color: var(--bs-primary);
}

.bg-body-tertiary a:hover .nav-link-text {
  color: var(--bs-primary);
}