/* Rocket Basics website tweaks (Quarto / Bootstrap) */

/* Slightly larger base text for readability */
html {
  font-size: 17px;
}

/* Keep line length comfortable for learning content */
.content {
  max-width: 1100px;
}

/* Better focus visibility (keyboard navigation) */
:focus-visible {
  outline: 3px solid rgba(0, 212, 255, 0.85);
  outline-offset: 2px;
}

/* Make primary buttons a bit more prominent */
.btn.btn-primary {
  padding: 0.6rem 0.95rem;
}

/* CTA button row (home page) */
.rb-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0 0;
}

.rb-cta-row .btn {
  margin: 0;
}

@media (max-width: 576px) {
  .rb-cta-row .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Thumbnails / screenshots */
img {
  border-radius: 12px;
  border: 1px solid rgba(42, 51, 64, 0.9);
}

/* Improve secondary button contrast in dark mode (avoid "disabled" look) */
body.quarto-dark .btn-outline-secondary {
  color: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.28);
}

body.quarto-dark .btn-outline-secondary:hover,
body.quarto-dark .btn-outline-secondary:focus-visible {
  color: rgba(255, 255, 255, 0.96);
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.38);
}

/* Round callouts to match thumbnails */
.callout {
  border-radius: 12px;
}

/* Prevent long inline code (e.g., file paths) from causing horizontal page scroll on mobile */
code {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Preserve code-block formatting */
pre code {
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
}