/*
 * Ruhaniat Main Stylesheet
 * Bootstrap 5 customization and site-specific styles
 */

/* Bootstrap Import - Replace with compiled Bootstrap when ready */
/* @import 'bootstrap/bootstrap.min.css'; */

/* Custom CSS Variables */
:root {
  
  /* Custom spacing */
  --content-max-width: 1400px;
  --sidebar-width: 280px;
  
}

/* Base Styles */
body {
  font-family: var(--font-primary);
  color: var(--color-dark);
}


.site-body {
  display: flex;
  min-height: auto;
}

/* Breathing room above the footer on mobile */
@media (max-width: 767px) {
  .site-body {
    padding-bottom: 25px;
  }
}

.sidebar-nav {
  width: var(--sidebar-width);
  flex-shrink: 0;
}

.main-content {
  flex: 1;
  max-width: var(--content-max-width);
  margin-left: 0px; /* 310px - 280px gap from design */
  /* flex item: without this, any child's min-content width (e.g. a wide
     image or grid) pushes the column past the viewport on mobile */
  min-width: 0;
}

/* Front-end image alignment */
.user-content figure:not(.float-start):not(.float-end) {
  display: block;
  margin: 1rem auto;
  text-align: center !important;
}

.user-content figure.float-start {
  margin: 0 2rem 1rem 0;
}

.user-content figure.float-end {
  margin: 0 0 1rem 2rem;
}

/* Ensure large centered images use full container width */
.content figure:not(.float-start):not(.float-end) img[src*="large"] {
  width: 100%;
  max-width: 100%;
}


/* Responsive adjustments */
@media (max-width: 768px) {
  
}