/* 
 * GHOST HOMEPAGE MOBILE FIX
 * Add this to: Ghost Admin → Settings → Code Injection → Site Header
 * 
 * Fixes content getting cut off on mobile by forcing full-width layouts
 * and responsive font sizes
 */

<style>
/* Force all homepage sections to full width on mobile */
@media (max-width: 768px) {
  
  /* Remove max-width constraints from all sections */
  .gh-canvas,
  .gh-content,
  .gh-article {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Ensure all inner containers are responsive */
  .gh-content > * {
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Hero section responsive fixes */
  .gh-content h1 {
    font-size: 2.5rem !important; /* Down from 4rem */
    line-height: 1.2 !important;
  }
  
  /* Subheadings */
  .gh-content p[style*="font-size: 1.9rem"],
  .gh-content p[style*="font-size: 1.8rem"] {
    font-size: 1.3rem !important;
  }
  
  .gh-content p[style*="font-size: 1.25rem"],
  .gh-content p[style*="font-size: 1.2rem"] {
    font-size: 1rem !important;
  }
  
  /* Button containers - stack vertically on mobile */
  .gh-content div[style*="display: flex"] {
    flex-direction: column !important;
    gap: 15px !important;
  }
  
  /* Buttons - full width on mobile */
  .gh-content a[style*="padding: 18px"],
  .gh-content a[style*="padding: 15px"] {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
  
  /* Path cards - stack vertically */
  .gh-content div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 25px !important;
  }
  
  /* Remove negative margins that push content offscreen */
  .gh-content > div[style*="margin: -40px"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Images - ensure they don't overflow */
  .gh-content img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Remove excessive padding on mobile */
  .gh-content div[style*="padding: 80px"],
  .gh-content div[style*="padding: 60px"] {
    padding: 40px 20px !important;
  }
  
  /* Card content responsive spacing */
  .gh-content div[style*="padding: 40px"] {
    padding: 25px 20px !important;
  }
  
  /* Section titles */
  .gh-content h2 {
    font-size: 2rem !important; /* Down from 3rem */
  }
  
  .gh-content h3 {
    font-size: 1.5rem !important;
  }
  
  /* Lists inside cards */
  .gh-content ul {
    padding-left: 20px !important;
  }
  
  /* Ensure no horizontal overflow */
  body {
    overflow-x: hidden !important;
  }
  
  .gh-viewport,
  .gh-main,
  .gh-page {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}

/* Tablet responsive adjustments (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  
  .gh-content h1 {
    font-size: 3rem !important;
  }
  
  .gh-content h2 {
    font-size: 2.5rem !important;
  }
  
  /* Reduce padding on medium screens */
  .gh-content div[style*="padding: 80px"] {
    padding: 60px 30px !important;
  }
}
</style>