/* ===================================
   EDEN COLIVING - MOBILE TYPOGRAPHY
   Jerarquía tipográfica clara para móvil
   =================================== */

/* ===================================
   JERARQUÍA TIPOGRÁFICA MÓVIL
   =================================== */

@media (max-width: 767px) {
  
  /* H1 - Títulos principales de página/sección */
  h1,
  .h1-mobile-override {
    font-size: 40px !important;  /* 40px - Claramente el más grande */
    line-height: 1.1 !important;
    font-weight: 700 !important;
    margin-bottom: 24px !important;
  }
  
  /* H2 - Títulos de sección importantes */
  h2,
  .h2-mobile-override {
    font-size: 30px !important;  /* 30px - Claramente menor que H1 */
    line-height: 1.2 !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
  }
  
  /* H3 - Subtítulos */
  h3,
  .h3-mobile-override {
    font-size: 24px !important;  /* 24px */
    line-height: 1.3 !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
  }
  
  /* H4 - Títulos menores */
  h4,
  .h4-mobile-override {
    font-size: 20px !important;  /* 20px */
    line-height: 1.4 !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
  }
  
  /* H5 - Títulos muy pequeños */
  h5,
  .h5-mobile-override {
    font-size: 18px !important;  /* 18px */
    line-height: 1.4 !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
  }
  
  /* H6 - Títulos mínimos */
  h6,
  .h6-mobile-override {
    font-size: 16px !important;  /* 16px */
    line-height: 1.4 !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
  }

}

/* ===================================
   OVERRIDES ESPECÍFICOS PARA CASOS PROBLEMÁTICOS
   =================================== */

@media (max-width: 767px) {
  
  /* Hero banners - H1 debe ser prominente pero no gigante */
  .hero-banner h1,
  #hero-banner h1,
  .hero-section h1 {
    font-size: 36px !important;  /* 36px para heroes */
    line-height: 1.1 !important;
    margin-bottom: 16px !important;
  }
  
  /* Hero banners - H2 debe ser claramente menor */
  .hero-banner h2,
  #hero-banner h2,
  .hero-section h2 {
    font-size: 24px !important;   /* 24px - claramente menor */
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
    font-weight: 600 !important;    /* Ligeramente menos peso */
  }
  
  /* Secciones principales - H2 más grande que normal pero menor que H1 hero */
  .section-header h2,
  .property-header h2,
  .main-section h2 {
    font-size: 32px !important;     /* 32px para secciones principales */
    line-height: 1.15 !important;
    margin-bottom: 16px !important;
  }
  
  /* Blog - Jerarquía específica */
  .blog-hero h1 {
    font-size: 40px !important;   /* 40px */
    line-height: 1.1 !important;
  }
  
  .blog-section h2,
  .articles-header h2 {
    font-size: 32px !important;     /* 32px */
    line-height: 1.15 !important;
  }
  
  /* Cards y componentes - H3 para títulos */
  .card h3,
  .article-card h3,
  .property-card h3 {
    font-size: 20px !important;  /* 20px */
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
  }

}

/* ===================================
   CLASES UTILITY PARA FORZAR JERARQUÍA
   =================================== */

@media (max-width: 767px) {
  
  /* Para forzar tamaños específicos cuando sea necesario */
  .mobile-h1-size {
    font-size: 40px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
  }
  
  .mobile-h2-size {
    font-size: 30px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }
  
  .mobile-h3-size {
    font-size: 24px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
  }
  
  /* Para casos especiales de heroes */
  .mobile-hero-h1 {
    font-size: 36px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
  }
  
  .mobile-hero-h2 {
    font-size: 24px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
  }
  
  /* Para secciones principales */
  .mobile-section-h2 {
    font-size: 32px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
  }

}

/* ===================================
   OVERRIDES PARA TAILWIND ESPECÍFICOS
   =================================== */

@media (max-width: 767px) {
  
  /* Override directo de clases Tailwind problemáticas */
  .text-4xl {
    font-size: 30px !important;  /* 30px en lugar de 36px */
  }
  
  .text-5xl {
    font-size: 36px !important;   /* 36px en lugar de 48px */
  }
  
  /* Solo para H1 permitir ser más grande */
  h1.text-4xl {
    font-size: 36px !important;   /* 36px para H1 */
  }
  
  h1.text-5xl {
    font-size: 40px !important;    /* 40px para H1 */
  }
  
  /* H2 debe ser claramente menor */
  h2.text-4xl {
    font-size: 30px !important;  /* 30px para H2 */
  }
  
  h2.text-5xl {
    font-size: 32px !important;      /* 32px para H2 */
  }
  
  /* H3 aún menor */
  h3.text-3xl,
  h3.text-4xl {
    font-size: 24px !important;    /* 24px para H3 */
  }
  
  /* ASTERISCO - Tamaño específico para móviles normales */
  #asterisk-graphic {
    height: 250px !important;
  }

}