/* Layout Toggle CSS - Minimal additions for layout control functionality */

/* Control flex-wrap based on layout mode */
#page-container.layout-side-by-side {
  flex-wrap: nowrap !important; /* Prevent wrapping in side-by-side mode */
}

#page-container.layout-over-under {
  flex-wrap: wrap !important; /* Allow wrapping in over-under mode */
}

/* Layout control: Explicit flex properties based on layout mode */
@media (min-width: 769px) {
  #page-container.layout-side-by-side #problem-wrapper {
    flex: 1 0 33.33% !important; 
    min-width: 25em;
    max-width: 50%;
  }
  
  #page-container.layout-side-by-side #solution-wrapper {
    flex: 2 1 66.67% !important; 
    min-width: 0;
  }
  
  #page-container.layout-over-under #problem-wrapper,
  #page-container.layout-over-under #solution-wrapper {
    flex: 1 1 100% !important; 
    min-width: 0;
    max-width: none;
  }
}

/* Mobile: Always stack vertically regardless of layout preference */
@media (max-width: 768px) {
  #problem-wrapper,
  #solution-wrapper {
    flex: 1 1 100% !important; /* Full width */
  }
}

#layout-icon {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  font-family: monospace;
}

/* Smooth transitions for layout changes */
#problem-wrapper,
#solution-wrapper {
  transition: flex 0.3s ease-in-out;
}

/* Hide font-control sizer on very narrow screens */
@media (max-width: 480px) {
  #font-control-sizer {
    display: none !important;
  }
}