/* ==========================================
   Mobile Typography Overrides
   Ensures readable font sizes on mobile devices
   ========================================== */

/* Mobile breakpoint: 768px and below */
@media (max-width: 768px) {

  /* Mobile Content Flow - Option 2: Title → Subtitle → Image → Description → Button */

  /* Make flex-content a column to allow reordering of children */
  .flex-content {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Content ordering for better mobile experience */
  h2[id*="title"] {
    order: 1 !important;
    margin-bottom: 0.75rem !important;
  }

  h3[id*="subtitle"] {
    order: 2 !important;
    margin-bottom: 1rem !important;
  }

  /* Move image into content flow after subtitle */
  .flex-image {
    order: 3 !important;
    margin: 1rem 0 1rem 0 !important;
    align-self: center !important;
  }

  /* Button comes RIGHT after image - under the image */
  /* EXCLUDE hero buttons - they have absolute positioning */
  a[id*="button"]:not(#hero-button-1):not(#hero-button-2), .btn:not(#hero-button-1):not(#hero-button-2) {
    order: 4 !important;
    align-self: center !important;
    width: 80% !important;
    max-width: 280px !important;
    min-width: 200px !important;
    text-align: center !important;
    margin: 1rem auto 1.5rem auto !important;
    padding: 1rem 2rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
  }

  /* Description comes after button */
  p[id*="description"] {
    order: 5 !important;
    margin-bottom: 1.5rem !important;
    text-align: center !important;
  }

  /* Main section titles - reduce from 2.5rem to more readable size */
  #advantages-title,
  #takecontrol-title,
  #defend-title,
  #grow-title,
  #realmoney-title,
  #cta-title {
    font-size: 1.8rem !important;
    line-height: 1.2;
  }
  
  /* Section subtitles - reduce from 1.5rem */
  #takecontrol-subtitle,
  #defend-subtitle,
  #grow-subtitle, 
  #realmoney-subtitle {
    font-size: 1.2rem !important;
    line-height: 1.3;
  }
  
  /* Advantage card titles - reduce from 1.3rem */
  [id*="advantages-card"][id*="title"] {
    font-size: 1.1rem !important;
  }
  
  /* Section descriptions - slightly smaller */
  [id*="description"]:not(#footer-description) {
    font-size: 0.95rem !important;
    line-height: 1.4;
  }
  
  /* Navigation elements */
  #nav-logo-nu, #nav-logo-gold {
    font-size: 1.8rem !important;
  }
  
  #nav-gold-price, #nav-silver-price {
    font-size: 0.9rem !important;
  }
  
  /* Button text sizing - EXCLUDE hero buttons */
  .btn:not(#hero-button-1):not(#hero-button-2) {
    font-size: 0.9rem !important;
    padding: 0.75rem 1.5rem !important;
  }
}

/* Extra small mobile breakpoint: 480px and below */
@media (max-width: 480px) {
  
  /* Hero section - make more compact */
  .hero h1 {
    font-size: 1.5rem !important;
    line-height: 1.2;
  }
  
  .hero p {
    font-size: 0.9rem !important;
    line-height: 1.4;
  }
  
  /* Main section titles - even smaller for tiny screens */
  #advantages-title,
  #takecontrol-title, 
  #defend-title,
  #grow-title,
  #realmoney-title,
  #cta-title {
    font-size: 1.5rem !important;
    line-height: 1.2;
    margin-bottom: 0.75rem;
  }
  
  /* Section subtitles */
  #takecontrol-subtitle,
  #defend-subtitle,
  #grow-subtitle, 
  #realmoney-subtitle {
    font-size: 1rem !important;
    margin-bottom: 0.5rem;
  }
  
  /* Navigation logo */
  #nav-logo-nu, #nav-logo-gold {
    font-size: 1.5rem !important;
  }
  
  /* Price ticker */
  #nav-gold-price, #nav-silver-price {
    font-size: 0.8rem !important;
  }
  
  /* Navigation links */
  [id*="nav-link"] {
    font-size: 0.875rem !important;
  }
  
  /* Buttons - more compact - EXCLUDE hero buttons */
  .btn:not(#hero-button-1):not(#hero-button-2) {
    font-size: 0.85rem !important;
    padding: 0.6rem 1.2rem !important;
    min-width: 140px !important;
  }
  
  /* Advantage cards */
  [id*="advantages-card"][id*="title"] {
    font-size: 1rem !important;
  }
  
  [id*="advantages-card"][id*="description"] {
    font-size: 0.85rem !important;
  }
  
  /* General descriptions */
  [id*="description"]:not(#footer-description) {
    font-size: 0.875rem !important;
    line-height: 1.4;
  }
}