/* 
 * Enhanced Mobile Styles
 * Fixes width issues and improves mobile experience
 */

/* ===== Mobile Width Fix ===== */
/* This is the critical fix for the narrow mobile layout */
@media (max-width: 768px) {
    /* Remove the conflicting width constraints on containers */
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
      max-width: 100% !important; 
      width: 100% !important;
      padding-left: 15px;
      padding-right: 15px;
    }
    
    /* Update the col-lg-11 mx-auto that was restricting width */
    .col-lg-11.mx-auto {
      max-width: 100% !important;
      flex: 0 0 100% !important;
      padding-left: 15px;
      padding-right: 15px;
    }
    
    /* Fix any row negative margins that might be causing overflow */
    .row {
      margin-left: -10px;
      margin-right: -10px;
    }
    
    /* Fix any potential horizontal overflow issues */
    body, html {
      overflow-x: hidden;
      width: 100%;
      max-width: 100%;
    }
  }
  
  /* ===== Header Section Improvements ===== */
  @media (max-width: 768px) {
    .paper-title {
      font-size: 1.8rem; /* Smaller on mobile */
      line-height: 1.2;
    }
    
    /* Improve author listings on small screens */
    .author-line {
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      margin: 8px 0;
    }
    
    /* Better spacing for institution logos */
    .institution-logos {
      flex-wrap: wrap;
      gap: 15px;
      justify-content: center;
    }
    
    /* Stack buttons for better mobile experience */
    .header-section .mt-4 {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
    
    .header-section .btn {
      margin: 0 !important;
      width: 80%;
      max-width: 250px;
    }
  }
  
  /* ===== TLDR Section Improvements ===== */
  @media (max-width: 768px) {
    .tldr-box {
      padding: 20px !important; /* More compact padding */
    }
    
    .tldr-box h2 {
      font-size: 2rem !important;
    }
    
    .tldr-box p.lead {
      font-size: 1.1rem !important;
      text-align: left !important;
    }
    
    .key-findings .row {
      margin-left: 0;
      margin-right: 0;
    }
    
    .finding-card {
      height: auto !important;
      padding: 15px !important;
      margin-bottom: 15px;
    }
  }
  
  /* ===== Research Questions & Analysis Section ===== */
  @media (max-width: 768px) {
    /* Adjust navigation pills for mobile */
    .custom-nav-pills {
      flex-direction: column;
    }
    
    .custom-nav-pills .nav-link {
      margin: 5px 0;
      width: 100%;
      text-align: center;
      display: block;
    }
    
    /* Fix research questions */
    .research-question {
      padding: 15px !important;
    }
    
    .question-header {
      align-items: flex-start;
    }
    
    .question-title {
      font-size: 1.2rem !important;
    }
    
    /* Fix the charts and visualizations */
    .figure-container {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    
    .figure-container img {
      max-width: 100%;
      height: auto;
    }
    
    /* Ensure tables aren't cut off */
    .table-responsive {
      display: block;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
  }
  
  /* ===== Scaling Experiments Improvements ===== */
  @media (max-width: 768px) {
    .scaling-card {
      padding: 15px !important;
      margin-bottom: 15px;
    }
    
    .scaling-title {
      font-size: 1.3rem !important;
    }
    
    /* Make progress bars more visible */
    .progress {
      height: 14px !important;
    }
    
    /* Fix the stacking of columns */
    .col-md-5, .col-md-7 {
      width: 100%;
      padding-left: 5px;
      padding-right: 5px;
    }
    
    /* Fix element width in the charts */
    [style*="width: 80px; text-align: left;"] {
      width: 70px !important;
      font-size: 0.85rem !important;
    }
    
    [style*="width: 50px; text-align: right;"] {
      width: 45px !important;
      font-size: 0.85rem !important;
    }
  }
  
  /* ===== FAQ Section Improvements ===== */
  @media (max-width: 768px) {
    .accordion-button {
      padding: 15px !important;
      font-size: 1rem !important;
      line-height: 1.4 !important;
    }
    
    .accordion-body {
      padding: 15px !important;
      font-size: 0.95rem !important;
    }
  }
  
  /* ===== Better Touch Targets for Mobile ===== */
  @media (max-width: 768px) {
    a, button, .btn, .nav-link, .accordion-button {
      min-height: 44px;  /* Apple's recommended minimum touch target size */
      display: flex;
      align-items: center;
    }
    
    /* Ensure the figures in Question 4 display correctly */
    #question4 [style*="width: 225px; height: 225px;"] {
      width: 100% !important;
      height: auto !important;
      max-width: 225px;
      margin: 0 auto 15px auto !important;
    }
    
    #question4 [style*="width: 300px; height: 225px;"] {
      width: 100% !important;
      height: auto !important;
      object-fit: contain !important;
    }
  }
  
  /* Extra small devices (phones, 576px and down) */
  @media (max-width: 576px) {
    .paper-title {
      font-size: 1.6rem !important;
    }
    
    .equal-contribution {
      flex-direction: column !important;
    }
    
    .equal-contribution .mx-2 {
      display: none !important; /* Hide the separator on very small screens */
    }
    
    /* Further improve tables on very small screens */
    .data-table {
      font-size: 0.8rem !important;
    }
    
    /* Shrink content to fit smaller screens */
    #citation pre {
      font-size: 0.85rem !important;
      white-space: pre-wrap !important;
      word-break: break-word !important;
      padding: 15px !important;
    }
  }

/* 
 * Complete Mobile Layout Fix
 * Resolves narrow box issues on mobile devices
 */

/* ===== Mobile Width Fix ===== */
@media (max-width: 768px) {
    /* Reset container width constraints */
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
      max-width: 100% !important; 
      width: 100% !important;
      padding-left: 15px;
      padding-right: 15px;
    }
    
    /* Remove width restrictions on main content */
    .col-lg-11.mx-auto {
      max-width: 100% !important;
      flex: 0 0 100% !important;
      padding-left: 10px;
      padding-right: 10px;
    }
    
    /* Fix row margins that may cause overflow */
    .row {
      margin-left: -10px;
      margin-right: -10px;
    }
    
    /* Prevent horizontal overflow */
    body, html {
      overflow-x: hidden;
      width: 100%;
      max-width: 100%;
    }
  
    /* Remove any fixed widths on individual sections */
    .section, .tldr-box, .research-question, 
    .scaling-card, .figure-container {
      width: 100% !important;
      max-width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: 15px !important;
      padding-right: 15px !important;
      box-sizing: border-box !important;
    }
    
    /* Fix card layout */
    .card {
      width: 100% !important;
      min-width: auto !important;
      max-width: 100% !important;
    }
    
    /* Fix findings cards in TLDR section */
    .finding-card {
      width: 100% !important;
      min-width: auto !important;
      max-width: 100% !important;
      margin-bottom: 15px !important;
    }
    
    /* Fix custom navigation pills */
    .custom-nav-pills {
      width: 100% !important;
      max-width: 100% !important;
      flex-direction: column !important;
    }
    
    .custom-nav-pills .nav-link {
      width: 100% !important;
      max-width: 100% !important;
      margin-bottom: 5px !important;
    }
  
    /* Remove fixed width on tables and data containers */
    .table-responsive,
    .chart-container,
    .data-table {
      width: 100% !important;
      max-width: 100% !important;
      overflow-x: auto !important;
    }
    
    /* Ensure images scale properly */
    img {
      max-width: 100% !important;
      height: auto !important;
    }
  }
  
  /* ===== Specific Section Fixes ===== */
  @media (max-width: 768px) {
    /* TLDR Section */
    .tldr-box .row .col-md-12,
    .tldr-box .row .col-lg-12 {
      padding-left: 5px !important;
      padding-right: 5px !important;
    }
    
    .tldr-box .p-4 {
      padding: 15px !important;
    }
    
    /* Key findings cards */
    .key-findings .row {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    
    .key-findings .col-md-4 {
      padding-left: 5px !important;
      padding-right: 5px !important;
    }
    
    /* Approach Section */
    #approach .col-md-4 {
      padding-left: 5px !important;
      padding-right: 5px !important;
    }
    
    /* Scaling Experiments */
    #scaling-experiments .col-md-5,
    #scaling-experiments .col-md-7 {
      padding-left: 5px !important;
      padding-right: 5px !important;
    }
    
    /* Research Questions */
    #research-questions .col-md-6 {
      padding-left: 5px !important;
      padding-right: 5px !important;
    }
    
    /* Fix progress bars */
    .d-flex.align-items-center {
      flex-wrap: nowrap !important;
    }
    
    /* Fix the comparison chart in Question 2 */
    .comparison-chart {
      padding: 10px !important;
    }
    
    /* OCR & Chart Section (Question 4) */
    #question4 .col-md-11 {
      padding-left: 5px !important;
      padding-right: 5px !important;
    }
    
    #question4 .row.mx-0 {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    
    #question4 .col-md-6 {
      padding-left: 5px !important;
      padding-right: 5px !important;
    }
  }
  
  /* ===== Very Small Devices ===== */
  @media (max-width: 576px) {
    /* Further container adjustments */
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
      padding-left: 10px !important;
      padding-right: 10px !important;
    }
    
    /* Fix accordion buttons */
    .accordion-button {
      font-size: 0.95rem !important;
      padding: 12px !important;
    }
    
    /* Fix figure examples in Question 4 */
    #question4 [style*="width: 225px; height: 225px;"] {
      width: 100% !important;
      height: auto !important;
      max-width: 225px !important;
      margin: 0 auto 10px auto !important;
    }
    
    #question4 [style*="width: 300px; height: 225px;"] {
      width: 100% !important;
      height: auto !important;
      object-fit: contain !important;
    }
    
    /* Fix citation overflow */
    #citation pre {
      white-space: pre-wrap !important;
      word-break: break-word !important;
      font-size: 0.8rem !important;
    }
  }

/* 
 * Horizontal Scrollbar Fix
 * This CSS fixes issues causing horizontal scrollbars at any viewport width
 */

/* Global fixes for overflow */
html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }
  
  /* Fix container widths and paddings */
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    width: 100% !important;
    max-width: 1400px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }
  
  /* Fix row margins that can cause overflow */
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Reset col paddings to prevent overflow */
  [class*="col-"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }
  
  /* Fix for figure containers and images */
  .figure-container {
    max-width: 100% !important;
    width: auto !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  
  .figure-container img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Fix for the TL;DR section that might be causing overflow */
  .tldr-box {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Fix for finding cards in the TL;DR section */
  .finding-card {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Fix for tables that might cause overflow */
  .table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }
  
  table {
    max-width: 100% !important;
  }
  
  /* Fix for the institution logos section */
  .institution-logos {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }
  
  /* Fix for comparison charts in Question 2 */
  .comparison-chart {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Fix for OCR & Chart section in Question 4 */
  #question4 [style*="width: 225px; height: 225px;"],
  #question4 [style*="width: 300px; height: 225px;"] {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }
  
  /* Fix for the scaling card elements */
  .scaling-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Fix for progress bars and labels */
  .d-flex.align-items-center {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }
  
  /* Fix for pre elements in citation section */
  pre {
    white-space: pre-wrap !important;
    word-break: break-word !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* Fix for absolute positioned elements */
  [style*="position: absolute"] {
    max-width: 100% !important;
  }
  
  /* TLDR section image fix */
  .tldr-box .figure-container img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Control maximum width of TLDR image on larger screens */
  .tldr-box .figure-container {
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  @media (min-width: 1200px) {
    .tldr-box .figure-container img {
      max-width: 800px !important;
      width: 100% !important;
    }
  }
  
  /* Fix for navigation pills that might overflow */
  .custom-nav-pills {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }
  
  .custom-nav-pills .nav-link {
    box-sizing: border-box !important;
  }
  
  /* Fix for potential overflow in the header section */
  .header-section::before {
    width: 50% !important; /* Reduce width of gradient background */
  }
  
  /* Fix for the Princeton logo that might be causing overflow */
  .princeton-logo img {
    transform: scale(1.5) !important; /* Reduce from 1.9 to 1.5 */
  }
  
  /* Media queries to handle different screen sizes */
  @media (max-width: 1200px) {
    /* Adjust padding for medium screens */
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
      padding-left: 15px !important;
      padding-right: 15px !important;
    }
    
    /* Ensure main content columns don't overflow */
    .col-lg-11.mx-auto {
      width: 100% !important;
      max-width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: 15px !important;
      padding-right: 15px !important;
    }
  }
  
  @media (max-width: 768px) {
    /* Adjust for mobile screens */
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
      padding-left: 10px !important;
      padding-right: 10px !important;
    }
    
    /* Stack navigation pills for mobile */
    .custom-nav-pills {
      flex-direction: column !important;
    }
    
    .custom-nav-pills .nav-link {
      width: 100% !important;
      margin-bottom: 5px !important;
    }
    
    /* Fix header spacing */
    .header-section {
      padding: 40px 10px !important;
    }
    
    /* Fix institution logos on mobile */
    .institution-logo {
      width: 100px !important;
      max-height: 30px !important;
    }
    
    /* Fix the gradient background in header */
    .header-section::before {
      display: none !important; /* Remove it on mobile to avoid overflow */
    }
  }
  
  @media (max-width: 576px) {
    /* Even smaller screens */
    [class*="col-"] {
      padding-left: 5px !important;
      padding-right: 5px !important;
    }
    
    /* Fix spacing in findings cards */
    .finding-card {
      padding: 10px !important;
    }
    
    /* Fix spacing in accordion */
    .accordion-button {
      padding: 10px !important;
    }
  }

/* 
 * Website Centering Fix
 * This CSS ensures the website content is properly centered
 */

/* Reset container widths to use standard Bootstrap centering */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  max-width: 1320px !important; /* Bootstrap's default for xxl */
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  box-sizing: border-box !important;
}

/* Fix the col-lg-11 that's restricting width */
.col-lg-11.mx-auto {
  max-width: 100% !important;
  flex: 0 0 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Fix row margins that might be causing misalignment */
.row {
  margin-left: -15px !important;
  margin-right: -15px !important;
  width: auto !important; /* Allow natural width */
  max-width: none !important;
}

/* On larger screens, prevent figures from getting too wide */
@media (min-width: 992px) {
  .figure-container {
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .tldr-box .figure-container {
    max-width: 800px !important;
  }
}

/* Override the custom settings in jz_styles.css */
@media (min-width: 1400px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1320px !important; /* Bootstrap default */
  }
  
  .col-lg-11.mx-auto {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* Ensure the header is properly centered */
.header-section .container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Fix for TLDR section alignment */
#tldr .col-lg-11.mx-auto {
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* Fix for finding cards that might be causing misalignment */
.key-findings .row {
  margin-left: -10px !important;
  margin-right: -10px !important;
}

/* Ensure the custom-nav-pills are centered */
.custom-nav-pills {
  width: auto !important;
  justify-content: center !important;
}

/* Fix for the scaling cards section */
#scaling-experiments .scaling-card {
  width: 100% !important;
}

/* 
 * Scaling Visual SSL Section Centering Fix
 * This CSS ensures proper centering at all resolutions
 */

/* Fix the scaling section container width */
#scaling-experiments .container,
#scaling-experiments .row,
#scaling-experiments .col-lg-11.mx-auto {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Fix the scaling cards to be properly centered */
#scaling-experiments .scaling-card {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Fix the figure containers within the scaling section */
#scaling-experiments .figure-container {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Ensure images scale properly and stay centered */
#scaling-experiments .figure-container img {
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  display: block !important;
}

/* Fix for medium and large screens */
@media (min-width: 992px) {
  #scaling-experiments .col-lg-11.mx-auto {
    width: 91.66666667% !important; /* Standard Bootstrap col-lg-11 width */
    max-width: 1320px !important; /* Match Bootstrap's container-xxl */
  }
  
  #scaling-experiments .figure-container {
    max-width: 100% !important;
  }
}

/* Fix for extra large screens */
@media (min-width: 1400px) {
  #scaling-experiments .col-lg-11.mx-auto {
    max-width: 1320px !important; /* Match Bootstrap's container-xxl */
  }
}

/* Fix the nested row and column structure in scaling cards */
#scaling-experiments .scaling-card .row {
  margin-left: -10px !important;
  margin-right: -10px !important;
  width: auto !important;
}

#scaling-experiments .scaling-card .col-12,
#scaling-experiments .scaling-card .col-md-5,
#scaling-experiments .scaling-card .col-md-7 {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* Fix for the progress bars and text in the scaling section */
#scaling-experiments .d-flex.align-items-center {
  flex-wrap: nowrap !important;
  width: 100% !important;
}

/* Make sure the charts have proper width on all screens */
#scaling-experiments .scaling-card.model-scaling,
#scaling-experiments .scaling-card.data-scaling {
  padding: 20px !important;
}

/* Mobile specific fixes */
@media (max-width: 768px) {
  #scaling-experiments .col-lg-11.mx-auto {
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  
  #scaling-experiments .scaling-card {
    padding: 15px !important;
  }
  
  /* Fix the width of spans that contain labels */
  #scaling-experiments [style*="width: 80px; text-align: left;"],
  #scaling-experiments [style*="width: 50px; text-align: right;"] {
    width: auto !important;
    min-width: 40px !important;
    font-size: 0.85rem !important;
  }
  
  /* Fix the progress flex-grow */
  #scaling-experiments .progress {
    flex: 1 !important;
    min-width: 0 !important;
  }
}