/* ============================================================
   RESPONSIVE.CSS
   Mobile-first refinements layered on top of Bootstrap's grid
   and style.css. Bootstrap handles breakpoint columns; this
   file adjusts type scale, spacing, and component behavior.
   ============================================================ */

/* Base (mobile) already set in style.css. Scale up from here. */

@media (min-width: 576px) {
  .hero h1 { font-size: 2.5rem; }
}

@media (min-width: 768px) {
  :root { --fs-4xl: 3.25rem; }
  .hero { padding: var(--sp-9) 0; }
  .section { padding: var(--sp-9) 0; }
}

@media (min-width: 992px) {
  .site-navbar .navbar-brand { font-size: var(--fs-xl); }
}

/* Small screens: tighten hero + auth spacing, stack footer columns */
@media (max-width: 575.98px) {
  .hero { padding: var(--sp-7) 0; }
  .hero h1 { font-size: var(--fs-3xl); }
  .auth-card { padding: var(--sp-6) var(--sp-5); }
  .card-resource .card-body-custom { padding: var(--sp-4); }
  .site-footer { text-align: center; }
  .site-footer .col-footer { margin-bottom: var(--sp-5); }
}

/* Admin dashboard sidebar collapse.
   On desktop the sidebar and content sit side by side as normal flex
   items (see the `d-flex` wrapper in each admin page), so no manual
   margin is needed there — adding one on top of the flex layout was
   what caused the large gap between sidebar and content on big screens.
   Below 992px the sidebar becomes an off-canvas overlay instead, so it
   needs to be pulled out of flow and content needs full width. */
.admin-content {
  min-width: 0; /* allow the flex item to shrink below its content's
                   intrinsic width, so wide tables scroll inside
                   .table-responsive instead of pushing the whole page
                   into horizontal scroll */
}

@media (max-width: 991.98px) {
  .admin-sidebar {
    position: fixed;
    left: -260px;
    top: 0;
    height: 100vh;
    z-index: 1050;
    transition: left var(--transition-base);
  }
  .admin-sidebar.is-open { left: 0; }
  .admin-sidebar-backdrop {
    display: none;
    position: fixed; inset: 0; background: rgba(20,38,31,0.5); z-index: 1040;
  }
  .admin-sidebar-backdrop.is-open { display: block; }
}