/* FIREFROST GAMING - MOBILE RESPONSIVE FIXES */
/* Fixes for 11ty static site - mobile and tablet breakpoints */

/* ========================================
   MOBILE (up to 768px)
   ======================================== */
@media (max-width: 768px) {
  
  /* Prevent horizontal overflow */
  body {
    overflow-x: hidden !important;
  }
  
  /* Hero sections - reduce font sizes */
  h1 {
    font-size: 2.5rem !important;
    line-height: 1.2 !important;
  }
  
  h2 {
    font-size: 2rem !important;
  }
  
  h3 {
    font-size: 1.5rem !important;
  }
  
  /* Paragraphs with large inline font sizes */
  p[style*="font-size: 3.5em"],
  p[style*="font-size: 3em"] {
    font-size: 2rem !important;
  }
  
  p[style*="font-size: 2.5em"],
  p[style*="font-size: 2.2em"],
  p[style*="font-size: 2em"] {
    font-size: 1.5rem !important;
  }
  
  p[style*="font-size: 1.8em"],
  p[style*="font-size: 1.6em"],
  p[style*="font-size: 1.5em"] {
    font-size: 1.2rem !important;
  }
  
  p[style*="font-size: 1.3em"],
  p[style*="font-size: 1.2em"] {
    font-size: 1rem !important;
  }
  
  /* All grid layouts - stack vertically on mobile */
  div[style*="grid-template-columns: repeat(2"],
  div[style*="grid-template-columns: repeat(3"],
  div[style*="grid-template-columns: repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
    gap: 25px !important;
  }
  
  /* Reduce excessive padding on mobile */
  div[style*="padding: 100px"],
  div[style*="padding: 80px"] {
    padding: 40px 20px !important;
  }
  
  div[style*="padding: 60px"] {
    padding: 30px 20px !important;
  }
  
  div[style*="padding: 50px"],
  div[style*="padding: 40px"] {
    padding: 25px 20px !important;
  }
  
  div[style*="padding: 35px"] {
    padding: 20px 15px !important;
  }
  
  /* Images - ensure they don't overflow */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Buttons and links - better mobile sizing */
  a[style*="padding: 25px"],
  a[style*="padding: 22px"],
  a[style*="padding: 20px"],
  a[style*="padding: 18px"] {
    padding: 15px 30px !important;
    font-size: 1rem !important;
  }
  
  /* Button containers - stack vertically */
  div[style*="display: flex"][style*="gap: 25px"],
  div[style*="display: flex"][style*="gap: 30px"] {
    flex-direction: column !important;
    gap: 15px !important;
  }
  
  /* Footer - stack columns vertically */
  footer div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  
  /* Ensure max-width containers don't cause overflow */
  div[style*="max-width: 1600px"],
  div[style*="max-width: 1400px"],
  div[style*="max-width: 1200px"],
  div[style*="max-width: 900px"],
  div[style*="max-width: 800px"] {
    max-width: 100% !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  
  /* Lists inside cards */
  ul {
    padding-left: 20px !important;
  }
  
  /* Cards with position absolute decorative elements */
  div[style*="position: absolute"][style*="font-size: 15rem"] {
    font-size: 8rem !important;
  }
  
  /* Subscribe page - Trinity image */
  div[style*="text-align: center"] > img {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Announcement banner - adjust text size */
  header div[style*="background: linear-gradient"][style*="padding: 12px"] {
    font-size: 0.85rem !important;
    padding: 10px 15px !important;
  }
  
  /* Nav bar - adjust for mobile */
  nav div[style*="display: flex"][style*="gap: 35px"] {
    gap: 20px !important;
    font-size: 0.9rem !important;
  }
  
  /* Subscribe buttons in tier cards */
  a[style*="padding: 15px 40px"] {
    padding: 12px 30px !important;
    font-size: 1rem !important;
  }
  
  /* Sovereign tier badge */
  div[style*="position: absolute"][style*="top: 20px"][style*="right: 20px"] {
    position: static !important;
    display: inline-block !important;
    margin-bottom: 15px !important;
  }
}

/* ========================================
   TABLET (769px - 1024px)
   ======================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  
  h1 {
    font-size: 3rem !important;
  }
  
  h2 {
    font-size: 2.5rem !important;
  }
  
  /* Reduce padding on medium screens */
  div[style*="padding: 100px"],
  div[style*="padding: 80px"] {
    padding: 60px 30px !important;
  }
  
  /* Two-column grids on tablet */
  div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}