/**
 * BADFACE Text Box Responsive Fixes
 * Version: 3.1
 * 
 * Fixes:
 * 1. Mobile text container - WIDER box for better fit
 * 2. Mobile font sizes - SMALLER for overflow prevention
 * 3. Output image dimensions - LESS white space, WIDER box
 * 4. Dynamic text box width management
 * 5. Larger starting font sizes for better impact
 */

/* ============================================
   TEXT BOX - DYNAMIC SIZING & CURSOR FIX
   ============================================ */

/* Fix cursor position - prevent overlap */
.cursor,
.cursor-2 {
  margin-left: 2px !important; /* Small gap before cursor */
  display: inline-block !important;
}

/* Ensure text box width stays constant */
.text-container,
.text-container-2 {
  min-width: 280px !important; /* Minimum width */
  width: 63.96% !important;
  max-width: 319.8px !important;
  box-sizing: border-box !important;
}

/* Text should never overflow - dynamic sizing handled by JS */
.text-container input,
.text-container-2 input {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

/* ============================================
   MOBILE TEXT CONTAINER IMPROVEMENTS
   Box width stays CONSTANT, font shrinks to fit
   Larger starting fonts for better appearance
   ============================================ */

/* Override existing mobile styles for better text fit */

/* Tablets and larger phones */
@media (max-width: 768px) and (min-width: 601px) {
  .text-container,
  .text-container-2 {
    width: 70% !important; /* Fixed width */
    max-width: 350px !important;
    min-width: 280px !important;
    padding: 0px 18px !important;
  }
  
  /* Starting font size - will be dynamically adjusted by JS */
  .text-container input,
  .text-container-2 input {
    font-size: 42px !important; /* Larger starting size */
    letter-spacing: 0.2px !important;
  }
  
  .cursor,
  .cursor-2 {
    font-size: 40px !important;
  }
}

/* Standard mobile phones (600px and below) */
@media (max-width: 600px) {
  .text-container,
  .text-container-2 {
    width: 70% !important; /* Fixed width */
    max-width: 320px !important;
    min-width: 260px !important;
    padding: 0px 16px !important;
  }
  
  .text-container input,
  .text-container-2 input {
    font-size: 38px !important; /* Larger starting size */
    letter-spacing: 0.2px !important;
  }
  
  .cursor,
  .cursor-2 {
    font-size: 36px !important;
  }
}

/* Smaller phones (480px and below) */
@media (max-width: 480px) {
  .text-container,
  .text-container-2 {
    width: 75% !important; /* Slightly wider on small screens */
    max-width: 280px !important;
    min-width: 240px !important;
    padding: 0px 14px !important;
  }
  
  .text-container input,
  .text-container-2 input {
    font-size: 34px !important; /* Larger starting size */
    letter-spacing: 0.1px !important;
  }
  
  .cursor,
  .cursor-2 {
    font-size: 32px !important;
  }
}

/* Very small phones (380px and below) */
@media (max-width: 380px) {
  .text-container,
  .text-container-2 {
    width: 80% !important;
    max-width: 260px !important;
    min-width: 220px !important;
    padding: 0px 12px !important;
  }
  
  .text-container input,
  .text-container-2 input {
    font-size: 30px !important; /* Larger starting size */
    letter-spacing: 0px !important;
  }
  
  .cursor,
  .cursor-2 {
    font-size: 28px !important;
  }
}

/* ============================================
   TEXT OUTPUT IMAGE DIMENSIONS FIX
   Applied when saving/downloading images
   ============================================ */

/* 
 * NOTE: These styles apply to the OUTPUT canvas/image,
 * not the on-screen display. The actual implementation
 * needs to be in the JavaScript that generates the image.
 * 
 * Current issues:
 * - Too much white space above/below text
 * - Box not wide enough relative to text
 * 
 * Required changes in app.js or download handler:
 */

/*
 * JavaScript fixes needed (add to app.js or download function):
 * 
 * // Current padding (example):
 * const textBoxPaddingTop = 40px;
 * const textBoxPaddingBottom = 40px;
 * const textBoxPaddingLeft = 20px;
 * const textBoxPaddingRight = 20px;
 * 
 * // NEW padding values:
 * const textBoxPaddingTop = 20px;      // HALF of current
 * const textBoxPaddingBottom = 20px;   // HALF of current  
 * const textBoxPaddingLeft = 20px;     // Keep same as top/bottom
 * const textBoxPaddingRight = 20px;    // Keep same as top/bottom
 * 
 * // Width calculation:
 * const textWidth = measureTextWidth(text);
 * const boxWidth = textWidth + (textBoxPaddingLeft + textBoxPaddingRight);
 * 
 * // Height calculation:
 * const textHeight = fontSize * 1.2; // Line height
 * const boxHeight = textHeight + (textBoxPaddingTop + textBoxPaddingBottom);
 */

/* 
 * For html2canvas capture (if used):
 * Add these inline styles to .text-container before capture:
 */
.text-container.output-mode,
.text-container-2.output-mode {
  padding: 12px 20px !important; /* Reduced vertical padding, equal horizontal */
  border-top-width: 6px !important; /* Slightly thinner borders */
  border-bottom-width: 6px !important;
}

.text-container.output-mode input,
.text-container-2.output-mode input {
  padding: 0 !important;
  line-height: 1.1 !important; /* Tighter line height */
}

/* ============================================
   LANDSCAPE ORIENTATION FIXES
   ============================================ */

/* Landscape on mobile devices */
@media (max-width: 900px) and (orientation: landscape) {
  .text-container,
  .text-container-2 {
    width: 70% !important;
    max-width: 450px !important;
    padding: 0px 20px !important;
  }
  
  .text-container input,
  .text-container-2 input {
    font-size: 36px !important;
  }
  
  .cursor,
  .cursor-2 {
    font-size: 36px !important;
  }
}

/* ============================================
   HIGH DPI SCREENS (Retina)
   ============================================ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .text-container input,
  .text-container-2 input {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
}

/* ============================================
   DEBUGGING - Remove in production
   ============================================ */

/* Uncomment to see text box boundaries during testing */
/*
.text-container,
.text-container-2 {
  outline: 2px dashed red !important;
}

.text-container input,
.text-container-2 input {
  outline: 1px dashed blue !important;
}
*/