/* Extra styles that supplement custom.scss */
/* This file loads AFTER bootstrap, so rules here win by cascade order */

/* ─── Responsive / Mobile ─────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Override Quarto's "div.columns { display: initial }" from bootstrap */
  div.columns {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  div.columns > .column {
    width: 100% !important;
    flex: none !important;
    display: block !important;
  }

  /* Hide the 5% spacer column on mobile */
  div.columns > .column[style*="width:5%"] {
    display: none !important;
  }

  /* Make sidebar horizontal on mobile */
  .section-sidebar {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .section-sidebar h5 {
    width: 100%;
    margin-bottom: 0.4rem;
  }

  .section-sidebar .sidebar-link {
    display: inline-block;
    padding: .4rem .7rem;
    font-size: .8rem;
  }

  /* Reduce hero padding */
  .hero-banner {
    padding: 2rem 1.5rem;
  }

  .hero-banner h1 {
    font-size: 1.8rem;
  }

  /* Full-width plot cards */
  .plot-card {
    padding: 1rem;
  }

  .plot-card .plot-area {
    height: 200px;
  }

  /* Ensure R plots scale properly */
  .cell-output-display img,
  .cell-output-display .figure {
    width: 100% !important;
    height: auto !important;
  }
}

.navbar-title {
  display: none !important;
}