/* static/css/style.css */
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: #fdfcfb;
    color: #333;
    padding-top: 70px; /* For fixed navbar */
    padding-bottom: 50px; /* For fixed session bar - adjust if session bar height changes */
  }
  
  .navbar {
    background-color: #004f32;
  }
  
  .navbar-brand, .nav-link {
    color: #ffffff !important;
  }
  
  .navbar-brand {
    font-weight: bold;
  }
  
  .nav-link.active {
    font-weight: bold;
  }
  
  .container {
    max-width: 960px;
  }
  
  .content-section {
    padding: 30px 15px;
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }
  
  /* Story image styling */
  .story-image {
      max-height: 350px; /* Adjusted max-height for potentially smaller images in 2-col layout */
      border: 1px solid #ddd;
      display: block; 
      margin-left: auto;
      margin-right: auto;
      border-radius: .25rem;
  }
  .story-image.shadow-sm { /* From Bootstrap, but ensure it's applied if needed */
      box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
  }
  
  
  .image-caption {
      font-size: 0.85em;
      font-style: italic;
      color: #6c757d;
  }
  
  .image-placeholder-box {
    background-color: #e9ecef;
    color: #6c757d;
    text-align: center;
    padding: 40px 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px dashed #ced4da;
    border-radius: .25rem;
    font-style: italic;
    min-height: 200px; /* Give it some default height */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .key-terms-bar {
    background-color: #f8f9fa;
    padding: 12px 15px;
    margin-top: 15px;
    border-radius: 5px;
    font-size: 0.9em;
    border: 1px solid #e9ecef;
  }
  
  .key-terms-bar strong {
    color: #004f32;
  }
  
  h1, h2, h3 {
    color: #004f32; 
  }
  
  h1 {
    font-size: 2.25rem;
  }
  
  h2 {
    font-size: 1.75rem; /* Headings for sections */
    margin-bottom: 0.75rem; /* Added some space below h2 */
  }
  
  .pagination .page-link {
    color: #004f32;
  }
  .pagination .page-item.disabled .page-link {
    color: #6c757d;
  }
  .pagination .page-item.active .page-link {
    background-color: #004f32;
    border-color: #004f32;
    color: white;
  }
  
  /* Session info bar at the bottom */
  .session-info-bar {
    background-color: #f0f0f0; /* Slightly darker for more contrast */
    padding: 6px 0; /* Adjusted padding */
    font-size: 0.8em; /* Slightly smaller font */
    border-top: 1px solid #d5d5d5;
    z-index: 1020; 
  }
  .session-info-bar strong {
    color: #333;
  }
  .session-info-bar .text-primary {
    color: #004f32 !important;
    font-weight: bold;
  }
  
  /* Footer styling */
  .footer-with-session-bar {
     /* Body padding-bottom should handle this */
  }
  
  /* Lead paragraph styling (used on start_journey and end_page) */
  .lead {
      font-size: 1.1rem; /* Adjusted from 1.1rem, can be tweaked */
      font-weight: 400; /* Normal weight for lead text */
  }
  
  /* Bullet point styling in section_page.html */
  .content-section ul {
      padding-left: 0; /* Remove default browser padding for ul */
  }
  .content-section ul li {
      display: flex; /* Use flexbox for alignment */
      align-items: flex-start; /* Align items to the start of the flex line */
      margin-bottom: 0.75rem; /* Space between bullet points */
      line-height: 1.6; /* Adjust line-height for readability */
  }
  .content-section ul li .bullet-icon { /* If using a specific class for custom bullets */
      color: #004f32;
      font-weight: bold;
      font-size: 1.5rem; /* Or desired size for the bullet */
      margin-right: 10px; /* Space between bullet and text */
      line-height: 1.2; /* Align bullet better with first line of text */
  }
  
  /* QR Code specific styling on end_page.html */
  .end-page-qr-image { /* You'd add this class to the img tag on end_page.html */
      max-width: 250px; /* Control max QR code size */
      max-height: 250px;
      border: 5px solid #fff; /* Optional border */
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
  
  /* Adjust padding for main content to avoid overlap with fixed bottom bar */
  main.pb-5 {
      padding-bottom: 60px !important; /* Should be slightly more than session bar height */
  }
  
  /* Ensure hr has some margin */
  hr.my-4 {
      margin-top: 1.5rem !important;
      margin-bottom: 1.5rem !important;
  }